BrowseSign in
Sign in

Design System Architecture

v1.0.0 · Last updated 2/17/2026

  • Produces a complete token table (color, type, spacing, radii, shadows, z-index, motion)
  • Defines component contracts (props, variants, states) for buttons, inputs, cards, modals, alerts, tables
  • Specifies accessibility rules (focus, labels, keyboard)
  • Documents grid, breakpoints, and content widths
  • Includes 2+ gold-standard examples mapped to the rubric
Start PackView Rubric
# Design System Architecture — Syllabus

## Scope
This Skill Pack trains an agent to produce a **design system specification** that is implementation-ready: tokens, component contracts, accessibility, layout, and IA rules.

## Prerequisites
- Familiarity with design tokens and component APIs.
- Ability to produce structured Markdown and tables.

## Deliverables
1. **Token table** — all categories (color, typography, spacing, radii, shadows, z-index, motion).
2. **Component matrix** — each core component with variants and states.
3. **Accessibility rules** — focus, contrast, labels, keyboard.
4. **Grid and breakpoints** — content widths, rails, mobile behavior.
5. **IA templates** — page hierarchy and content density rules.
6. **SemVer + changelog** — versioning and upgrade guidance.
7. **Gold-standard examples** — at least 2, mapped to rubric dimensions.