Design Language

A design language is the system behind a UI: a small set of repeatable decisions (tokens) that make everything feel like one product. Consistency comes from systems, not from styling each screen by hand. (For per-screen review rules — placement, a11y, UX states — see web-design-guidelines; for distinctive aesthetic direction, see project briefs.)

Tokens are the foundation

Express every visual decision as a named token, then build components only from tokens. Three tiers:

• Primitive (raw scale): blue-500, space-4, font-size-2.
• Semantic (intent): color-bg-surface, color-text-muted, space-inset-md, radius-control.
• Component (optional): button-bg, card-shadow.

Components reference semantic tokens, never raw values — so theming/dark mode is just swapping the primitive→semantic mapping.