Styles

styles and typography customization

For customize default UI & Typography template variables (like a default colors, background and fonts values) go to "/src/styles/scss/variables.scss" file:

/* -------------------------------------------

fonts

------------------------------------------- */

$font-1: var(--font-secondary),
sans-serif;
$font-2: var(--font-primary),
sans-serif;

/* -------------------------------------------

colors

------------------------------------------- */

$m1: #353639;
$m2: #808080;
$m3: #D8D8D8;
$m4: #ECECEA;

$a1: var(--accent-color, #FEAF62);
$a2: #37CC8D;

/* -------------------------------------------

transition

------------------------------------------- */

$tsm: .2s cubic-bezier(0, 0, 0.3642, 1);
$tmd: .4s cubic-bezier(0, 0, 0.3642, 1);
$tlg: .6s cubic-bezier(0, 0, 0.3642, 1);
$txl: .8s cubic-bezier(0, 0, 0.3642, 1);

By default, the template load Outfit font and Anton font from Google Web Font Services, you can change the font with the one that suits you best.

Font code can be found in the "/src/app/layout.jsx" file:

import { Outfit, Anton } from 'next/font/google'

const primary_font = Outfit({
  weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
  style: ['normal'],
  subsets: ['latin'],
  variable: '--font-primary',
  display: 'swap',
  adjustFontFallback: false,
})

const secondary_font = Anton({
  weight: ['400'],
  style: ['normal'],
  subsets: ['latin'],
  variable: '--font-secondary',
  display: 'swap',
  adjustFontFallback: false,
})

You can find more information and working examples on official nextjs documentation