Is vs for

A name records one of two things about a value: what it is, or what it's for. blue-600 is a fact — a point on a ramp, with no opinion about where it's used. accent is a job — the colour that draws the eye. The first is a primitive; the second is a role. This single cut is the one the whole architecture rests on.

They sit on different layers, and the gap between them is where the design lives. --color-accent: var(--color-blue-600) reads as a sentence: the value is blue-600, the job is accent. The primitive is the word; the role is the word pressed into service.

Keep them apart because value and job change on different clocks. Rebrand blue to green and every primitive reference breaks — but every role holds, because a button that asked for accent never cared which blue answered. The role is a promise the value can keep with any ingredient.

It's also why you can build the button and still not understand the system: the tutorial hands you --color-primary and never says it's a role, not a colour. Once said, the fog lifts. Some names are facts, others are jobs. Don't let a fact wear a job's name, or a job freeze into a fact.

Every layer is one more turn of this screw — primitives name what is, semantics name what for, themes change the mapping by context, components speak only in roles and never reach for the raw words. Hold the line, and the rest falls out.