02
1 min read
Primitives
Hex codes and pixel values scattered across the codebase have no meaning and no owner.
A primitive is a raw value with a name. blue-600 is #2563eb. That's a fact, not a decision. You define them once and rarely touch them again.
Nothing in the UI should reference a primitive directly. A primitive sits in the palette until a semantic token points at it. Until then, it does no work.
Named facts on the right. The button is still a hard-coded hex. It does not move.
Learn more
button#2563eb
input#2563eb
link#2563eb
Learn more
blue-600unused
slate-200unused
radius-md8px · unused
You named the facts. Nothing consumed them. That gap is the next two layers.
:root {
/* Facts — not decisions */
--blue-500: #3b82f6;
--blue-600: #2563eb;
--blue-700: #1d4ed8;
--slate-50: #f8fafc;
--slate-200: #e2e8f0;
--slate-900: #0f172a;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
}:root {
/* Facts — not decisions */
--blue-500: #3b82f6;
--blue-600: #2563eb;
--blue-700: #1d4ed8;
--slate-50: #f8fafc;
--slate-200: #e2e8f0;
--slate-900: #0f172a;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
}