01
1 min read
What a design system is
Most "design systems" are a Figma file and a components folder that already disagree with each other.
A style guide is a document. A component library is a folder of parts. A design system is the connection between them: values feeding into meaning, meaning feeding into components. The connection is what makes it a system.
Without that connection, every component owns its own blue. They match on day one. The first brand change is where they fall apart.
The brand already moved. The folder on the left missed it. The system on the right stayed coherent.
Learn more
button#7c3aed
input#2563eb
link#2563eb
Learn more
buttonprimary
inputprimary
linkprimary
The folder painted one component. The system painted a token, so every connected piece moved.
:root {
--blue-600: #2563eb;
--color-primary: var(--blue-600);
}
.button { background: var(--color-primary); }
.input:focus { outline-color: var(--color-primary); }
.link { color: var(--color-primary); }:root {
--blue-600: #2563eb;
--color-primary: var(--blue-600);
}
.button { background: var(--color-primary); }
.input:focus { outline-color: var(--color-primary); }
.link { color: var(--color-primary); }