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-secondary),
cursive;

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

colors

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

$m-1: rgba(36, 47, 53, 1);
$m-2: rgba(99, 112, 118, 1);
$m-3: rgba(163, 169, 171, 1);
$m-4: rgba(226, 238, 238, 1);
$m-5: rgba(243, 247, 248, 1);

$a-1: rgba(242, 167, 61, 1);

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

font size

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

$fs-xxxl: 11rem;
$fs-xxl: 10rem;
$fs-xl: 9.2rem;
$fs-lg: 7.8rem;
$fs-md: 6.4rem;
$fs-sm: 4.8rem;
$fs-xs: 3.2rem;
$fs-xxs: 2.2rem;

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

trasition

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

$t-sm: .2s cubic-bezier(0, 0, 0.3642, 1);
$t-md: .4s cubic-bezier(0, 0, 0.3642, 1);
$t-lg: .6s cubic-bezier(0, 0, 0.3642, 1);
$t-xl: .8s cubic-bezier(0, 0, 0.3642, 1);

By default, the template load Plus Jakarta Sans (primary: "--font-primary") and Reenie Beanie (secondary: "'--font-secondary'") fonts 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 { Plus_Jakarta_Sans, Reenie_Beanie } from 'next/font/google'

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

const secondary_font = Reenie_Beanie({
  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