Foundations · Playbook · Frameworks · DesignOps. Four surfaces, one body of work. Each answers a different question about what a design system is, how you build one, and how to keep it alive.
Primitives
Foundations
Build it
Playbook
Organize it
Frameworks
Run it
DesignOps
Four surfaces · one body of work
01 — The four surfaces
Each surface is a self-contained body of work — read top-to-bottom or jump to the chapter you need. Every card opens with a small visualization that previews what the section actually contains.
The primitives
01The constraints a system has to lock first. Color, type, spacing, motion, accessibility, voice. Get these calibrated and components compose without negotiation.
How to build it
02An eight-chapter path from zero to a system that holds up under real product work. Day 1 to Day 90, sequenced. Plus a Migrate track for products already in flight.
How to organize it
03Centralized, federated, hybrid. The org topology decides what your system can ship before any code does. Implementation timing, governance models, contribution shapes.
How to run it
04The strategic layer that operates the system at scale. Four tracks decide whether the system gets used or gets ignored — workflows, adoption, tooling, measurement.
02 — A reading path
The four surfaces compound — each one depends on decisions made in the previous one. The reading path runs left to right. But every section is self-contained, so you can also drop into the one that matches today's question.
The primitives
How to build it
How to organize it
How to run it
Foundations→decide the primitives, then Playbook.
Playbook→build, then organize via Frameworks.
Frameworks→operate the result with DesignOps.
03 — Where to start by role
The four surfaces serve different audiences. Below is the shortest path from what you're actually trying to figure out to the page that answers it.
01 · Designer · need the primitives
“What does a real spacing scale look like? Which easing curve do I use for what?”
Open foundations02 · Lead · about to start the build
“Where do I begin? What's the smallest set of decisions to lock in week one?”
Read the Day 1–90 playbook03 · EM · choosing the org model
“Centralized team or federated contribution? When does the model break?”
Read the frameworks04 · Operator · already shipped, adoption stalled
“We built it, no one uses it. Now what?”
Read the adoption diagnostic04 — Featured
If you only read three things across the four surfaces, read these. Each one answers a question that gets asked weekly in r/UXDesign or r/Frontend with the answer most people would actually take to a meeting.
Foundations · rebuilt
The four jobs of motion, the motion budget, choreography, reduced-motion accessibility, and the anti-patterns that make UIs feel busy instead of alive.
Playbook · 90 days
Eight chapters mapped to a 90-day path. Days 1–7 to orient, 8–30 to build the spine, 31–60 to ship, 61–90 to operate. Three time-budget entry points.
DesignOps · diagnostic
The #1 Reddit pain point treated as a diagnosable problem. Six reasons it stalls, the funnel that shows where, four moves that work, four anti-patterns.
Adjacent
The Learn surfaces give you the frame. The Gallery shows you 70+ real systems with engineering-facet filters so you can benchmark stack and token pipeline. The AI-ready hub covers the 2026 wedge — MCP, W3C tokens, components agents can actually use.
