Tokens

Design tokens are the smallest pieces of a design system: named values that represent colours, spacing, typography, shadows, and motion.

Three-layer architecture

Rokle uses three layers of tokens, each building on the previous:

Primitive tokens are raw values. These are the actual colours, pixel sizes, and timing values. Example: --color-brand-500: #796c98. You should rarely reference these directly.

Semantic tokens are purpose-driven references. They describe what a value is for, not what it is. Example: --color-brand-base: var(--color-brand-500). Components reference these.

Component tokens are per-component overrides. They allow fine-grained control over individual component styles. Example: --button-primary-bg: var(--color-brand-base).

How tokens flow

When you change a brand system, Rokle updates the semantic layer. The component layer references the semantic layer, so all components update automatically. This cascade means one change at the semantic level propagates to every component.

Token categories

Colour: brand, accent, neutral, success, warning, error, info, surfaces, text, borders

Spacing: a scale from 2px to 96px (--space-0-5 through --space-24)

Radius: none, sm, md, lg, xl, full

Shadow: sm through 2xl, plus inner

Typography: font families, sizes, weights, line heights, letter spacing

Motion: durations, easing curves, named transitions