Customize
As for using SCSS to develop this template, it is very easy to customize colors and fonts. See instructions below:
Colors
Customize colors in the public/assets/css/main.css file.
:root {
--tc-body-font-family: Geist;
--tc-heading-font-family: Geist;
--tc-body-font-size: 16px;
--tc-fs-1: 40px;
--tc-fs-2: 32px;
--tc-fs-3: 28px;
--tc-fs-4: 24px;
--tc-fs-5: 20px;
--tc-fs-6: 16px;
--tc-fs-7: 14px;
--tc-fs-8: 12px;
--tc-ds-1: 80px;
--tc-ds-2: 72px;
--tc-ds-3: 64px;
--tc-ds-4: 56px;
--tc-ds-5: 48px;
--tc-ds-6: 40px;
--tc-ds-xs-1: 64px;
--tc-ds-xs-2: 56px;
--tc-ds-xs-3: 48px;
--tc-ds-xs-4: 36px;
--tc-ds-xs-5: 28px;
--tc-ds-xs-6: 24px;
--tc-body-line-height: 1.5;
--tc-heading-line-height: 1.2;
--tc-neutral-50: #f7f8f9;
--tc-neutral-100: #eaecee;
--tc-neutral-200: #e5e7eb;
--tc-neutral-300: #d1d5db;
--tc-neutral-400: #a7aaaf;
--tc-neutral-500: #75787d;
--tc-neutral-600: #626568;
--tc-neutral-700: #3a3b3d;
--tc-neutral-800: #1a1b1c;
--tc-neutral-900: #0e0e0f;
--tc-neutral-dark-50: #151616;
--tc-neutral-dark-100: #181818;
--tc-neutral-dark-200: #282828;
--tc-neutral-dark-300: #343434;
--tc-neutral-dark-400: #565656;
--tc-neutral-dark-500: #727272;
--tc-neutral-dark-600: #9ca3af;
--tc-neutral-dark-700: #d1d5db;
--tc-neutral-dark-800: #e5e7eb;
--tc-neutral-dark-900: #f3f4f6;
--tc-system-success: #64e1b0;
--tc-system-info: #5577a7;
--tc-system-warning: #f39e0d;
--tc-system-danger: #ec4040;
--tc-system-white: #ffffff;
--tc-system-dark: #000000;
--tc-system-muted: #9ca3af;
--tc-system-dark-success: #10b983;
--tc-system-dark-info: #0f172e;
--tc-system-dark-warning: #fcd34e;
--tc-system-dark-danger: #fca5a7;
--tc-system-dark-white: #222324;
--tc-system-dark-dark: #efeff8;
--tc-system-dark-muted: #9ca3af;
--tc-bg-1: #f2f2e9;
--tc-bg-2: #e3dcf6;
--tc-bg-3: #f2fbf9;
--tc-bg-4: #eef2ff;
--tc-bg-5: #fff7ee;
--tc-bg-dark-1: #1c1b1f;
--tc-bg-dark-2: #1e1c25;
--tc-bg-dark-3: #141817;
--tc-bg-dark-4: #131518;
--tc-bg-dark-5: #100f0e;
--tc-shadow-1: 0px 20px 60px 0px rgba(0, 0, 0, 0.08);
--tc-fw-black: 900;
--tc-fw-extra-bold: 800;
--tc-fw-bold: 700;
--tc-fw-semi-bold: 600;
--tc-fw-medium: 500;
--tc-fw-regular: 400;
--tc-fw-light: 300;
}
Typography
Customize typography in the app/layout.tsx file.
const geist = Geist({
weight: ["400", "500", "600", "700"],
subsets: ["latin"],
display: "swap",
});
...
...
<body className={`${geist.className}`}>{children} </body>