Color tokens define the shared, reusable color values that power both design and code. This page shows what each color looks like. For the full token list with values, see the Tokens page.
Colors are organised into two layers: primitive tokens (raw values) and semantic tokens (intent-based aliases). Always use semantic tokens in production code — primitives are the building blocks that semantic tokens reference.
Brand Palette
The core brand colors that define the project identity. These are set per-project in the Brand Tokens section of design-system.css.
Accent Colors
Primitive Scales
Neutral
Warm grey ramp from lightest to near-black, used for backgrounds, borders, and secondary text.
Black Alpha
Semi-transparent black values for overlays, shadows, borders, and tints.
White Alpha
Semi-transparent white values for highlights and light overlays. Shown on a dark background for visibility.
Semantic Colors
Semantic colors map primitive tokens to meaning and intent. Use these in layouts and components — never use primitives directly.
Text
Background
Solid colour backgrounds
Solid colour blocks for hero sections, callouts, ad units, and any marketing surface that needs to lean on a brand colour. Each token resolves to the brand primitive when overridden in a client theme — otherwise the design system default applies.
Border
Button
Status
Status tokens now reference the dark shade of each accent colour family. maps to (previously ), aligning with the conventional use of blue for informational states. In dark mode, status tokens flip to the light shades for readability.
Dark Mode
The design system uses a data-theme attribute to switch between light and dark modes. Light mode is the default — dark mode is an opt-in override, not a baseline. Activate it by setting data-theme="dark" on any element; tokens inherit through the cascade.
Dark mode values (e.g. , ) are overrides applied via [data-theme="dark"] — never use them as primary values, and never hardcode them. If you're working from a dark-looking screenshot, confirm the intended theme before writing code.
How It Works
:root— light mode tokens (always present)[data-theme="dark"]— overrides semantic tokens with dark values@media (prefers-color-scheme: dark)— no-JS fallback for users with a dark OS preference
The toggle button in the site header sets data-theme="dark" on <html> and persists the choice in localStorage.
Scoped Usage
You can apply dark mode to any element, not just the page:
Light mode
Primary text Faded text Accent textDark mode
Primary text
Faded text
Accent text
<!-- Dark card on a light page -->
<div data-theme="dark" class="card">
<p>This section uses dark mode tokens</p>
</div>
All semantic tokens inside that element resolve to their dark values via CSS custom property inheritance.
Customizing Dark Mode
Edit the [data-theme="dark"] block in design-system.css (section 2b). When changing a value, also update the @media (prefers-color-scheme: dark) fallback (section 2c) to keep them in sync.