Design tokens
Accessible colour tokens generated automatically from a site's palette colours.
Easol automatically generates a set of design tokens from the four palette colours configured in Site Styles.
These tokens are exposed as CSS custom properties (:root variables) at runtime and provide a consistent, accessible colour
system for theme development.
All generated tokens are designed to meet WCAG AA accessibility requirements where appropriate, helping ensure sufficient contrast for text, borders, and UI elements across a wide range of creator-defined colour palettes.
Use design tokens instead of palette colours whenever possible. Tokens automatically adapt to different colour palettes while maintaining accessibility and visual consistency.
Colour scales
Easol generates four 11-step colour scales (50–950) using the OKLCH colour space for perceptually uniform colour
progression.
| Scale | Source | Variables |
|---|---|---|
| Brand | Primary colour | --brand-50 → --brand-950 |
| Accent | Secondary colour | --accent-50 → --accent-950 |
| Neutral | Site background colour | --neutral-50 → --neutral-950 |
| Error | Fixed (#dc2626) | --error-50 → --error-950 |
Scale values progress from lightest (50) to darkest (950).
Text tokens
Use text tokens instead of hard-coded colours to ensure text remains readable across different creator palettes.
| Variable | Description |
|---|---|
--text-default | Default body text colour (creator-defined site text colour) |
--text-muted | Secondary text colour with accessible contrast |
--text-inverse | Text colour for inverse surfaces |
--text-on-brand | Text displayed on brand-coloured backgrounds |
--text-on-accent | Text displayed on accent-coloured backgrounds |
--text-on-neutral | Text displayed on neutral-coloured backgrounds |
Background tokens
| Variable | Description |
|---|---|
--background-default | Default page background colour |
--background-muted | Subtle background for secondary surfaces |
--background-inverse | Inverse background colour |
Border tokens
| Variable | Description |
|---|---|
--border-muted | Subtle border for low-emphasis boundaries |
--border-brand-accessible | Accessible border derived from the brand scale |
--border-neutral-accessible | Accessible border derived from the neutral scale |
--border-accent-accessible | Accessible border derived from the accent scale |
Accessible border tokens are generated to maintain a minimum 3:1 contrast ratio against their intended surface.
--border-muted is designed for lower-emphasis boundaries and automatically adjusts based on the site's background colour:
- Lighter borders on dark backgrounds
- Darker borders on light backgrounds
Use --border-neutral-accessible for important UI boundaries such as form fields, selectors, toggles, and other interactive
controls.
Surface and error tokens
| Variable | Description |
|---|---|
--surface-primary | Primary surface colour for cards and modals |
--surface-elevated | Elevated surface colour for dropdowns, popovers, and overlays |
--error-text | Accessible error text colour |
--error-background | Error background colour |
Usage example
Use design tokens instead of hard-coded colours so your theme remains accessible and adapts automatically when creators change their site palette or adjusts colours within individual blocks or components.
.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);
}