No design system. No component library. Just HTML.
It handles clicks, keyboard activation, focus, and disabled semantics. The browser gave us that for free.
We want buttons that look good, behave consistently, communicate intent, and work for everyone.
HTML provides the foundation.Native semantics, behavior, and accessibility.
A design system establishes the rules.Consistent visual language, interaction patterns, and conventions.
A design system needs to account for every color, variant, semantic, and theme. Each new dimension adds another combination.
And this is just one button.
The overflow is a metaphor, get it?
Thankfully, others have already built design system foundations that we can use, customize, and extend.
You don't need to build a car to make it yours.
You slap a bumper sticker on it.
Keep honking
I'm making a
design system
from scratch
It's still our design system. It's just built on an established foundation.
A shared vocabulary connects design, product, and engineering. Everyone speaks the same language, and that language becomes an enforceable contract through the component API.
type Color = 'primary' | 'warning' | 'success' | 'error'<Button color="primary">type AlertColor = Exclude<Color, 'primary'><Alert color="primary">One vocabulary. Different constraints. No guesswork.
Once the rules are established, every new component starts with decisions already made.
Updated today
New component. Same language. Fewer decisions.
We can focus on what makes each component unique instead of redefining the rules they all share.
Shared rules let us compose smaller components into larger experiences. And when our visual language evolves, those changes can flow through everything built on it.
Visual language changes. The composition does not.
<Card>
<Input placeholder="Email" />
<Button color="primary">Continue</Button>
</Card>Change the rules once. Let the system carry them forward.
New visual conventions can be adopted centrally, while the components and interfaces built on them continue to work.
A system built on common patterns doesn't just make today's work easier. It makes tomorrow's ideas easier to adopt.
A familiar place for the next idea.
Aura default is on the card.
Component
Style
New ideas shouldn't require new foundations.
When components follow established conventions, new capabilities can be adopted through composition instead of duplicated implementation.
The only difference is you can see it.
A design system is a shared software dependency. It deserves the same scrutiny as any architecture, framework, or library we adopt.
A design system shouldn't change our engineering standards. It should meet them.