A screen is a snapshot. A system is the grammar that makes every future screen cheaper and more consistent. When you design a screen you solve a problem once; when you design a system you solve a category of problems.
Spend creativity where it counts
Investing in tokens, components, and rules pays off the moment the product grows past one designer. The goal is not to constrain creativity — it is to spend it where it actually matters instead of re-deciding the same padding value forty times.
- Tokens encode decisions once
- Components encode patterns once
- Documentation encodes intent once
Tokens are decisions with names
A raw hex value is a mystery. A named token is an argument you have already won. Once a value has a name, it can change everywhere at once, and nobody has to remember which grey was the right grey.
:root {
--color-text: #121212;
--color-muted: #7e7e7e;
--radius-card: 12px;
--space-section: 2rem;
}
.card {
color: var(--color-text);
border-radius: var(--radius-card);
padding: var(--space-section);
}
The system is never finished
A design system is a product whose users are your own team. It needs maintenance, deprecation, and the occasional hard rewrite. Treat it as infrastructure, not a deliverable, and it keeps paying you back.
A good system makes the right thing the easy thing, and the wrong thing slightly annoying.