Pattern
Three-tier design tokens
Primitive → semantic → component tokens, shown live against Motif's own design system. The pattern that makes theming and dark mode one-line changes.
From the Design systems track
A design token is a named decision. The pattern worth stealing is the three tiers: primitive tokens (raw values), semantic tokens that alias them by role, and optional component tokens — where each layer only ever references the one below it.
Get this right and a rebrand or a dark theme becomes a one-line edit to the semantic layer; get it wrong and every theme is a rewrite. The lesson renders Motif's own tokens inspecting themselves, so you can see the layering in a real system.