CSS tokens
The CSS custom-property contract, the theming tokens the platform base declares and every island/page consumes. A template overrides them via :root:root in its theme.css. Additive-only: tokens are never removed or repurposed within a contract major.
| Token | Purpose |
|---|---|
--bg |
Page background. |
--bg-tint |
Subtle tinted background (footer, wells). |
--surface |
Card/panel surface. |
--ink |
Primary text colour. |
--muted |
Secondary text colour. |
--primary |
Brand primary (progress, links, selected states). |
--primary-strong |
Darker primary (hover/emphasis). |
--primary-soft |
Translucent primary wash (selected fills, chips). |
--accent |
Action accent (the donate CTA family). |
--accent-strong |
Darker accent. |
--gold |
Highlight tint (marks, ratings). |
--marker |
Impact-map pin colour (the live-map markers are a zoom-scaling circle layer that take this colour). Defaults to –accent. |
--map-mode |
Impact-map basemap colour mode read by the map island: auto (derive the map’s paper/ink from the theme), light, dark, or muted. Default auto. |
--map-projection |
Impact-map projection: flat (default) or globe, the planet as a rotatable sphere with atmosphere. |
--line |
Hairline borders. |
--line-strong |
Emphasised borders (selected, focus). |
--danger |
Errors and destructive affordances. |
--cta-hover |
The donate-button hover ‘go’ colour. |
--cta-hover-strong |
Darker CTA hover. |
--shadow-sm |
Small elevation shadow. |
--shadow |
Large elevation shadow. |
--radius |
Large corner radius (cards, bands). |
--radius-sm |
Small corner radius (inputs, chips). |
--container |
Max content width. |
Override them in your assets/theme.css with doubled specificity so the theme wins over the platform base:
:root:root { --primary: #0f766e; --accent: #ea580c; --radius: 18px;}