03
1 min read
Semantic tokens
A hex in forty components looks fine on day one. On day two the brand shifts, and you hunt through forty files.
Nothing should reference a color directly. A fact (blue-600) sits under a decision (primary), which sits under a place (button-bg). The button only asks for the place.
The hex sits on the component on the left. Fact, decision, and place on the right. The button never learns the hex.
Learn more
button#2563eb
input#2563eb
link#2563eb
Learn more
blue-600fact
primary→ blue-600
button-bg→ primary
Same paint. Different hops. Edit above the button — never the button.
:root {
--blue-600: #2563eb;
--color-primary: var(--blue-600);
--button-bg: var(--color-primary);
}
.button {
background: var(--button-bg);
}:root {
--blue-600: #2563eb;
--color-primary: var(--blue-600);
--button-bg: var(--color-primary);
}
.button {
background: var(--button-bg);
}