Design Tokens

Foundation contract for designers and developers. Everything token-related is available here in Foundations UI.

Why

Remove ad-hoc styling and align design intent with implementation outcomes.

When

Every new component, redesign, or UI refactor starts from tokens, not random values.

How

Pick semantic role first; if missing, extend token set and then consume.

Why: Defines brand identity, hierarchy, and system feedback language.

When: Any foreground/background/status usage in product and marketing UI.

How: Prefer semantic tokens (`colorTokens`). Use raw scales (`colorPalette`) only when role-based token is missing.

32 semantic values + 42 raw scale steps

Why: Creates visual rhythm, readability, and brand tone.

When: All textual surfaces across app, web content, and export outputs.

How: Use predefined roles from `typographyTokens` and keep hierarchy consistent.

8 typography roles

Why: Keeps spacing, shape, and layering consistent across components.

When: Any container, spacing, border, radius, or stacking decision.

How: Use `spacing`, `radius`, `borderWidth`, and `zIndex` tokens before custom values.

10 spacing + 5 radius + 7 z-index

Why: Makes interaction feel polished and predictable.

When: Hover, open/close transitions, overlays, and state changes.

How: Pick duration by intent (`fast/normal/slow`) and easing from token set.

3 durations + 3 easings