Color

Twelve slightly different grays and a blue that drifts across the app. That's not a palette. That's residue.

Build a ramp first: one hue, stepped from 50 to 900. Those steps are facts. Then map semantic roles onto them. primary, background, foreground, border, muted, destructive, success, warning. Components use the roles. They never touch a ramp step.

Contrast is a readability problem, not a token-structure problem. Grade covers the ratios. This lesson is the wiring.

Residue on the left — three leftover blues. Roles on a ramp on the right. Components never touch a step.

The leftover blues never agreed. primary points at one step, so every piece does.