Colour Tokens — ELF Design System 2.0

Colour Tokens

ELF Design System 2.0 uses a strict three-tier colour token hierarchy. Tier 1 — Primitive (--prim-*): raw palette values, 8 families × 10 steps, never change. Tier 2 — Semantic (--brand, --btn-*, --bg-*, --text-*, --border-*): brand-aware roles that resolve differently per theme. Tier 3 — Component (--button-*, --chip-*, etc.): component-scoped tokens consumed directly in component CSS. Switch to residential-lt below to watch values cascade through all three tiers.

Three-Tier Architecture

A single brand colour change at Tier 2 propagates instantly through every component via the alias chain.

Tier 1 Primitive

--prim-blue-70

Raw value

#006CB6

8 colour families × 10 steps each. Hardcoded hex values — never referenced by components directly.

Tier 2 Semantic

--brand

→ --prim-blue-70

#006CB6

Brand-aware roles: brand, btn, bg, text, border. Values swap when theme changes.

Tier 3 Component

--button-primary-bg

→ --btn-primary-bg

#006CB6

Component-scoped tokens for Button, Alert, Chip, Checkbox, Input, Progress, Breadcrumb, Icon.

Tier 1 Primitive Tokens

The raw colour palette — 8 families × 10 steps. All Tier 2 semantic tokens resolve to values in this palette. Steps lighten from 10 → 100. Hover any swatch to copy its hex value.

Colour Families

/ 10/ 20/ 30 / 40/ 50/ 60 / 70/ 80/ 90 / 100

--prim-grey / special

Theme Mode

Controls Tier 2 & Tier 3 resolved values

Tier 2 Semantic Tokens

Brand-aware roles that alias into Tier 1 primitives. Residential-lt overrides are applied at the html.theme-residential-lt selector — all other tokens inherit commercial-lt values.

--brand-*

--btn-*

--bg-*

--text-*

--border-*

Tier 3 Component Tokens

Component-scoped tokens that alias into Tier 2 semantic roles. Components consume these tokens directly in their CSS — never referencing primitives or hardcoded hex values.

--button-*

--alert-*

--chip-*

--checkbox-*

--input-*

--progress-*

--breadcrumb-*

--icon-*