Styles

styles and typography customization

For customize default UI & Typography template variables (like a default colors, background and fonts values) go to "/src/app/(frontend)/_styles/scss/_variables-friendly.scss" file:

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

fonts

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

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

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

colors

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

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

$a1: #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 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/(frontend)/layout.jsx" file:

import { Outfit } 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,
})

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