Consistency is not a matter of discipline. It is a matter of there being exactly one place a value can come from. When a component hard-codes a hex value, the system already has a crack in it — the token is the contract.
One layer of tokens
@theme {
--color-accent: oklch(0.68 0.16 250);
--color-border: oklch(0.92 0 0);
--radius-lg: 0.625rem;
}Components reference the token, never the value. Rebrand the whole product by editing one file, and every surface follows — because nothing downstream ever knew the raw number.
The point of a token is not the value it holds today. It is that there is only one of it.
- #Developer Experience
- #React
- #Architecture