Learning Path: Design System Architect
Target learner
This path is for engineers responsible for a design system, component platform, or cross-product UI foundation. The goal is to build components that preserve accessibility, theming, product velocity, and long-term API stability across many consumers.
Prerequisites
You should understand component composition, semantic HTML, ARIA basics, CSS architecture, package versioning, Storybook or equivalent documentation workflows, and design-token concepts.
Recommended chapter sequence
| Phase | Chapters | Outcome |
|---|---|---|
| Senior baseline | Part 0 forms, testing, tooling, security, accessibility-related material | Understand interaction, verification, and delivery constraints. |
| Architecture | Part IV module and package chapters | Design package boundaries and dependency policy. |
| Component systems | Part VII | Build tokens, headless primitives, inclusive recipes, theming, governance, and API design. |
| Reliability | Part VIII accessibility and reliability chapters | Treat component defects as production risks. |
| Practice | part-vii/tutorial-production-design-system-kernel | Build a practical system kernel. |
Seven-week study plan
| Week | Focus | Required output |
|---|---|---|
| 1 | Token model | Define semantic tokens for color, spacing, typography, state, and density. |
| 2 | Primitive contracts | Specify button, field, dialog, tabs, tooltip, table, and notification contracts. |
| 3 | Accessibility | Write keyboard, focus, name, state, and announcement requirements. |
| 4 | Package architecture | Design package boundaries, exports, release policy, and migration support. |
| 5 | Theming | Add white-label and dark-mode rules without leaking brand semantics into components. |
| 6 | Governance | Create contribution, review, deprecation, and adoption workflows. |
| 7 | Capstone | Complete the enterprise design system platform capstone. |
Required exercises
- Write an accessibility contract for a dialog and data table.
- Create a component API decision matrix for controlled, uncontrolled, and headless patterns.
- Design a token migration from raw colors to semantic tokens.
- Write a deprecation ADR for a widely used component.
Capstone project
Complete capstones/capstone-enterprise-design-system-platform. The system must include tokens, primitives, accessibility contracts, Storybook documentation, release governance, theming, adoption support, and a GenUI registry compatibility note.
Portfolio artifacts
- Token taxonomy
- Component contract examples
- Package dependency diagram
- Contribution and release policy
- Accessibility verification checklist
- Migration plan for legacy components
Self-assessment rubric
Use rubrics/design-system-architect-rubric. A strong score requires API judgment, accessibility depth, governance skill, and evidence that product teams can adopt the system without local overrides.
Review checklist
- Do components encode behavior, not just visuals?
- Are tokens semantic and product-safe?
- Are accessibility obligations impossible to bypass accidentally?
- Is versioning compatible with many product release cadences?
- Does the system have a path for GenUI and AI-generated surfaces?