Alpha Is a Design Smell
SHOULD: Define an explicit opaque token per surface instead of reaching for `rgba()`/`hsla()` to fake a missing palette step — a translucent color's contrast ratio belongs to the backdrop, not the token, so the same `text-white/60` can measure 6.2:1 on one surface and 2.7:1 on the next. Exception: focus rings and transient hover/pressed states, which never carry text.
Define an explicit opaque token per surface instead of leaning on rgba() and hsla() to fake missing palette steps
Bad
Good
Why it matters
A translucent color has no fixed value: the browser flattens it against whatever sits behind it, so the final color — and therefore the contrast ratio — is a property of the backdrop, not of the token. The same `text-white/60` label can measure 6.2:1 on one surface and 2.7:1 on the next, meaning a component that passes AA in the design file silently fails the moment it is reused, and no CI check can catch it because the value only exists at composite time.
Stacked alpha compounds this and adds blending work per layer. When you reach for alpha to get "a slightly lighter gray", what you actually need is another step in the palette. The stated exception: focus rings and interactive states (hover, pressed), where the effect is transient and never carries text.