Building a neutral gray palette that is not dead on screen
Pure gray looks fine in a swatch strip and lifeless in an app. The fix is usually a hint of hue — and a ladder you actually use.
Neutrals are 80% of most interfaces. They fail when every step is #808080 with a different label.
Tint your grays
Blue-gray for SaaS, green-gray for health, warm gray for editorial — pick one. Generate steps with the tint and shade generator from a slightly chromatic anchor, not from #888.
Three text grays, not twelve
Primary body, secondary meta, disabled/placeholder. Map them to ramp slots and stop inventing new grays per component.
Borders are half a step, not a new color
Border color is often surface + one lightness tick. Reference Tailwind slate/zinc spacing if you need a benchmark.