Loading...
Loading...
Design tokens, governance, semver, Chromatic, a11y CI, and adoption metrics at org scale.
Module 18 · Design Systems at Scale
Design tokens, governance models, semver and codemods, Chromatic visual regression, a11y CI, adoption metrics, and contribution RFC workflows.
Design tokens, centralized vs federated governance, semver with codemods, Chromatic visual regression, a11y CI, adoption metrics, and contribution RFC workflows for org-scale design systems.
A design system at scale is infrastructure — tokens, governance, visual regression, and measurable adoption across product teams.
This module covers three-tier design tokens, centralized vs federated governance, semver with codemods, Chromatic visual regression, accessibility CI, adoption dashboards, and the RFC workflow for federated contributions.
Staff interviews ask how you ship breaking component API changes to 50 teams without a big-bang migration — semver, codemods, and N/N-1 support are the answer.
Pairs with Frontend Platform (Module 17) and Staff Frontend System Design (Module 16).
Design system questions at staff level go beyond Storybook — interviewers want governance models, breaking change policy, and adoption metrics. A DS that 50 teams depend on is infrastructure with operational requirements.
Tokens, governance, and adoption across dozens of product teams.
A design system at scale is not a Storybook — it is infrastructure with versioning, governance, visual regression, and measurable adoption.
Single source of truth for color, spacing, typography, and motion.
| Tier | Example | Owned by |
|---|---|---|
| Primitive | color.blue.500 | Design |
| Semantic | color.text.primary | Design + Platform |
| Component | button.padding.x | Platform |
Centralized vs federated — pick based on org maturity.
| Model | Structure | When |
|---|---|---|
| Centralized | One DS team owns all components | Early stage; <10 teams |
| Federated | Core team + contributing product teams | 10–50 teams; scale |
| Hybrid | Core primitives centralized; recipes federated | Most staff-scale orgs |
Anti-pattern
Breaking changes without breaking 50 teams.
Catch unintended UI changes before they reach product teams.
WCAG compliance enforced in the design system, not per-app.
What gets measured gets adopted.
| Metric | Target | How to measure |
|---|---|---|
| % teams on latest major | >80% within 2 quarters | Import analysis / dep scan |
| Custom vs DS component ratio | Decreasing quarter-over-quarter | AST scan for @corp/ui imports |
| A11y violations in prod | Down 50% YoY | axe monitoring / bug taxonomy |
| Time-to-ship UI feature | Down 20% after DS v3 | Jira cycle time by team |
| Bundle delta per DS upgrade | <5kb gzipped per minor | size-limit in DS release CI |
How product teams add components without chaos.
Design system questions at staff depth.
Design systems at scale interview questions.
Test your understanding — 5 questions
The design system must rename a widely used Button prop, a breaking change for roughly 50 consuming teams. Which rollout gives the smallest blast radius?