Build a Design System
Build a small set of reusable, accessible primitives — Button, Input, Modal — documented in Storybook. A design system is an API, not just a style guide: this project designs component APIs flexible enough for real product needs but constrained enough to stay visually consistent, and sets up visual regression checks.
The hard part of a design system isn't the CSS — it's designing component APIs (props, variants, composition points) that are flexible enough for real product needs but constrained enough that every screen in the product actually looks consistent. This project builds Button, Input, and Modal primitives with variant props, documents them in Storybook, and sets up visual regression checks so a future change can't silently break an existing component's appearance.
Step 1 — Design a Button API around variants, not one-off props
Step 2 — Document components in Storybook
Step 3 — Build a Modal with a real composition point
Step 4 — Catch visual regressions automatically
Secret Mission: build a compound component
Before You Go
Test what you just learned
Self-testing is one of the best ways to retain new skills. Unlock project quizzes to check your understanding.
Log in to unlock0 / 7 complete
