Customize

The template ships with plain CSS so customizing colors and fonts is straightforward. See instructions below:

---

Colors

Customize colors in the public/assets/css/main.css file.

     
        :root {
            --tc-body-font-family: "DM Sans", sans-serif;
            --tc-heading-font-family: "DM Sans", sans-serif;
            --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

The font family is loaded via a standard <link> tag in index.html and exposed to the template through the --at-ff-body CSS variable. To swap the font, simply change the Google Fonts URL and the CSS variable:

    
<!-- index.html -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
    href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap"
    rel="stylesheet"
/>

<style>
    :root {
        --at-ff-body: "DM Sans", sans-serif;
    }
    body {
        font-family: var(--at-ff-body);
    }
</style>
    
 

Example — replacing DM Sans with Inter:

    
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300..900&display=swap" rel="stylesheet" />

<style>
    :root { --at-ff-body: "Inter", sans-serif; }
</style>