The shared design tokens live in src/styles/var.css. Change them to adjust colors, typography, spacing, borders, shadows, and layout widths across the website.
You can always see the original version of the var.css file on the GitHub repository.
What you can change
--color-accent-*defines the accent palette. Semantic tokens such as--color-accent-text,--color-link, and--color-focus-ringapply it to specific interface roles.--color-backgroundand--color-surfacecontrol the main theme colors. The--color-text-strong,--color-text,--color-text-subtle, and--color-text-mutedtokens define the text hierarchy.--font-familyand--font-monocontrol the typefaces.--space-*controls gaps, margins, and padding.
For example, to change the accent from blue to purple, update each accent value:
--color-accent-100: var(--color-purple-100);
/* Continue through --color-accent-900. */Keep related values together and check that text, links, and buttons remain easy to read. If you change the accent color, you may also want to update themeColor in src/config.ts.
Neutral colors and surfaces
The neutral palette uses a subset of Flexoki’s original scale, preserving its numbering: 50, 100 through 900 in steps of 100, and 950. These tokens use the --color-neutral- prefix. Chromatic palettes use 100 through 900. The --color-black and --color-white tokens hold Flexoki’s black and paper colors.
Semantic tokens assign palette colors to interface roles. The template uses these mappings:
| Token | Dark theme | Light theme |
|---|---|---|
--color-background |
Neutral 950 |
Neutral 50 |
--color-surface |
Neutral 900 |
Neutral 100 |
--color-text |
Neutral 200 |
Neutral 800 |
--color-text-strong |
Neutral 50 |
Neutral 950 |
These are custom theme mappings; Flexoki itself uses black and paper as its main backgrounds. To change a surface without changing text, update --color-surface rather than a shared neutral shade. Use semantic tokens in components so both themes follow the mappings in var.css.
Light sections
The website is dark by default. Add data-theme="light" to any section that should use the light colors:
<section data-theme="light">
<!-- Your content -->
</section>Edit the [data-theme="light"] values in var.css to customize that theme.