Design systems,
explained for people who ship
no theory — just receipts
Choose from 107 design systems, compare the tradeoffs, and leave with an evidence-linked decision brief. Build on it with free token tools and editable references.
Agent-Ready Index · audited 2026-09-04
The systems closest to agent-ready today.
Start where you are
Four paths in. Pick the one that matches your question.
“I'm starting from zero”
Build a design system, day 1 to day 90.
Eight chapters mapped to a 90-day path. Foundations first, tokens before themes, governance before headcount. Practitioner voice, no theory.
“I need to pick what to build on”
Which design system to choose in 2026.
Five team shapes, five concrete recommendations, the anti-patterns to avoid, and the shifts since 2023 that changed the answer.
“I'm trying to drive adoption”
Why your design system isn't being used.
The hard part isn't building it — it's getting other teams to ship on it. The distribution mechanics, the funnel from discovery to maintenance.
“I'm making ours AI-ready”
Tokens, MCP servers, and agents that ship code.
The 2026 wedge: how to expose your tokens, components, and patterns to Cursor, Claude Code, and v0 without drift. Three pillars, a readiness checklist, and a 1-week migration plan.
Explore
The whole site, in five sections.
Playbook
Build a design system in eight chapters — foundations first, governance before headcount.
Foundations
Color, typography, spacing, and accessibility — the primitives everything else assumes.
Design Systems
107 real-world systems compared side by side, each with tokens and a breakdown.
Frameworks
Implementation guides and adaptation patterns across React, Vue, and the rest.
Tools
Generators, calculators, and public-site scanners for your design system.
Free · runs in your browser
Design system tools
A workbench for the day-to-day: generate tokens, model the business case, check contrast, and lay out grids — no signup, nothing leaves your browser.