Before: one-off choices
Cards use near-matching colors, radii, spacing, and button styles, creating drift across similar content.
Core idea
A design system starts when repeated decisions get names. Tokens name values, components name reusable pieces, and patterns name repeated workflows.
- Use tokens for repeated values such as surface, ink, action color, spacing, and radius.
- Use components for repeated UI pieces such as buttons, cards, inputs, and navigation items.
- Use patterns for repeated arrangements such as signup, settings, filtering, and checkout steps.
- Keep the system small at first. Name what repeats before adding variants.
Visual example
A small system makes repeated cards feel intentional.
Before and after
Name the repeated decisions.
After: small reusable rules
The same surface, ink, spacing, radius, and action treatment repeat across cards, so differences are about content instead of styling drift.
Worked example
Why the improved version works
The improved cards do not need a large design system. They need named decisions: one surface, one text color, one action style, one card radius, and two spacing values.
Once those decisions are named, new cards can reuse them. That reduces tiny inconsistencies and leaves the designer free to make content decisions.
Common mistakes
Watch for these patterns
Creating many component variants before the repeated need is clear.
Naming tokens by raw color instead of role, such as blue-1 instead of action.
Treating a design system as decoration rather than shared decision memory.
Ignoring accessibility, focus, and error behavior when documenting a component.
Visual comparison
Which card set behaves like a small system?
One set repeats near-matching choices by accident. The other reuses named roles for surface, ink, spacing, and action.
Select an option to see the design reasoning.
Practice completed
Small exercise
Diagnose system drift
Pick the card set that behaves like a small system, then spot the repeated choice that should be named and reused.
Locked — coming soon