Design Systems
One color, traced through the three layers every real design system uses — click a layer to see what changes. Runs in your browser — no server call, no tracking.
Atomic Design
Brad Frost's 2013 methodology "Atomic Design" gave the industry a shared vocabulary — atoms, molecules, organisms, templates, pages — for how small, reusable pieces combine into full interfaces. Most modern design systems still organize their component libraries around this exact hierarchy.
Material Design
Google launched Material Design in 2014 as one of the first fully public, comprehensive design systems — documenting not just components but the underlying physics metaphor (paper and ink, elevation, motion) behind every design decision.
Why Three Token Layers
Primitive tokens are raw values (a specific hex code). Semantic tokens name what that value means ("brand primary," "danger," "success"). Component tokens tie a semantic meaning to a specific UI part. This indirection is what lets a whole product re-theme by changing one primitive value instead of hunting through every file.
Public Systems Worth Studying
IBM's Carbon Design System, Salesforce's Lightning Design System, and Atlassian Design System are all published openly, documenting not just components but the reasoning behind them — genuinely useful references for how large organizations keep hundreds of designers and engineers visually consistent.