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 src\assets\scss\utils\_colors.scss file.

     
        $colors: (
            neutral: (
                50: #f7f8f9,
                100: #eaecee,
                200: #e5e7eb,
                300: #d1d5db,
                400: #a7aaaf,
                500: #75787d,
                600: #626568,
                700: #3a3b3d,
                800: #1a1b1c,
                900: #0e0e0f,
            ),
            neutral-dark: (
                50: #151616,
                100: #181818,
                200: #282828,
                300: #343434,
                400: #565656,
                500: #727272,
                600: #9ca3af,
                700: #d1d5db,
                800: #e5e7eb,
                900: #f3f4f6,
            ),
            system: (
                success: #64e1b0,
                info: #5577a7,
                warning: #f39e0d,
                danger: #ec4040,
                white: #ffffff,
                dark: #000000,
                muted: #9ca3af,
            ),
            system-dark: (
                success: #10b983,
                info: #0f172e,
                warning: #fcd34e,
                danger: #fca5a7,
                white: #222324,
                dark: #efeff8,
                muted: #9ca3af,
            ),
            bg: (
                1: #f2f2e9,
                2: #e3dcf6,
                3: #f2fbf9,
                4: #eef2ff,
                5: #fff7ee,
            ),
            bg-dark: (
                1: #1c1b1f,
                2: #1e1c25,
                3: #141817,
                4: #131518,
                5: #100f0e,
            ),
            shadow: (
                1: 0px 20px 60px 0px rgba(0, 0, 0, 0.08),
            ),
        );

    
 

Typography

Customize typography in the src\assets\scss\utils\_typography.scss file.

     
        // Font Family
        @import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');

        $theme-fonts: (
            body: (
                font-family: 'Geist',
            ),
            heading: (
                font-family: 'Geist',
            ),
        );
        // Font Size
        $font-size: (
            body: (
                font-size: 16px,
            ),
            fs: (
                1: 40px,
                2: 32px,
                3: 28px,
                4: 24px,
                5: 20px,
                6: 16px,
                7: 14px,
                8: 12px,
            ),
            ds: (
                1: 80px,
                2: 72px,
                3: 64px,
                4: 56px,
                5: 48px,
                6: 40px,
            ),
            ds-xs: (
                1: 64px,
                2: 56px,
                3: 48px,
                4: 36px,
                5: 28px,
                6: 24px,
            ),
        );
        // Line Height
        $theme-lh: (
            body: (
                line-height: 1.5,
            ),
            heading: (
                line-height: 1.2,
            ),
        );
        // Font Weight
        $font-weight: (
            fw: (
                black: 900,
                extra-bold: 800,
                bold: 700,
                semi-bold: 600,
                medium: 500,
                regular: 400,
                light: 300,
            ),
        );