colour-contract

Any prop that cannot take a className, chiefly Lucide's color, reads its value from useThemeColors(). Never inline a hex there, and never hand-roll an isDark ? ... : ... ternary.

A raw hex is correct only when the surface underneath is fixed in both themes (the gold pay button, the brand-red heroes, the solid feedback flashes). If the container carries a dark: variant, its icon must come from the hook.

Where a component keeps its own hex/hexDark pair, isDark must actually select between them. Reading the light value unconditionally is a silent bug.

Dark tints are solid, not alpha washes. A -900/30 tint over a dark card composites to ~1.1:1 against it, so the swatch disappears. Industry tints use their opaque -900 shade in dark, with -200 glyphs on top.

Related: reserved-gold, skip-is-not-a-warning, design