Design tokens
The platform automatically generates a set of CSS custom properties from the four palette colours defined in Site styles. These variables are injected as :root properties at runtime alongside the base palette. They provide accessible, consistent colour tokens for theme development and are computed with WCAG AA compliance in mind (4.5:1 contrast for normal text, 3:1 for large text and UI elements such as borders).
Colour scales
Four 11-step colour scales (50–950) are generated using the OKLCH colour space for perceptually uniform steps. Each scale is derived from a single source colour.
| Scale | Source | Example variable |
|---|---|---|
| Brand | Primary colour | --brand-50 through --brand-950 |
| Accent | Secondary colour | --accent-50 through --accent-950 |
| Neutral | Site background colour | --neutral-50 through --neutral-950 |
| Error | Fixed (#dc2626) | --error-50 through --error-950 |
Steps run from lightest (50) to darkest (950).
Semantic tokens — Text
| Variable | Description |
|---|---|
--text-default | Default body text colour (creator’s site text colour) |
--text-muted | Subdued text; meets 4.5:1 contrast, never more prominent than default |
--text-inverse | Text for use on inverse (dark/light-flipped) backgrounds; 4.5:1 |
--text-on-brand | Text on primary-coloured surfaces; white or brand-950, whichever has higher contrast |
--text-on-accent | Text on secondary-coloured surfaces; white or accent-950 |
--text-on-neutral | Text on body background; white or neutral-950 |
Semantic tokens — Backgrounds
| Variable | Description |
|---|---|
--background-default | Page background (creator’s site background colour) |
--background-muted | Subtle tinted background for secondary surfaces |
--background-inverse | Inverse background (same as default text colour) |
Semantic tokens — Borders
| Variable | Description |
|---|---|
--border-muted | Subtle border for non-critical boundaries. Generated from the neutral scale to remain visible on both dark and light backgrounds while staying softer than accessible borders |
--border-brand-accessible | Accessible border from brand scale; 3:1 |
--border-neutral-accessible | Standard accessible border from neutral scale; 3:1 |
--border-accent-accessible | Accessible border from accent scale; 3:1 |
--border-muted targets a subtle contrast band (typically around 1.7–2.4, with tolerance when the palette is constrained). It also flips direction by background luminance:
- lighter border on dark backgrounds
- darker border on light backgrounds
Use --border-neutral-accessible for key control boundaries (inputs, selectors, toggles, and other interactive UI where the boundary must be clearly legible).
Semantic tokens — Surfaces and errors
| Variable | Description |
|---|---|
--surface-primary | Card/modal backgrounds |
--surface-elevated | Elevated surface (e.g. dropdowns, popovers) |
--error-text | Error message text; 4.5:1 contrast |
--error-background | Error background/highlight |
Usage example
Reference these tokens in your theme CSS instead of hard-coded colours so that colours stay consistent and accessible when Creators change their palette.
.card {
background: var(--surface-primary);
color: var(--text-default);
border: 1px solid var(--border-neutral-accessible);
}
.badge {
background: var(--primary);
color: var(--text-on-brand);
}