Color Family

Gray

Universally legible grayscale values for product UI, dense typography, and form systems.

TrustworthyUtilitarianExecutive

Positioning DNA

Gray remains the most versatile palette in digital design because it behaves predictably under every lighting condition. The 400-700 steps provide balanced contrast ratios that read well in screenshots, presentations, and printed decks, which is why enterprise teams rely on it for design systems.

Treat Gray as the scaffolding of your interface: build surfaces with 900-800, drop copy onto 100-200, then weave accent hues only where intent matters. Because the palette is emotionally neutral, the focus shifts entirely to hierarchy and motion.

UX Applications

  • Form-heavy SaaS flows and admin portals
  • Documentation libraries or knowledge bases
  • Iconography and pictogram systems that must scale

Sample Palette

Drop-in hex codes with usage notes

FAQ

How is Gray different from Neutral or Zinc?

Gray is calibrated to sit exactly in the middle of warm and cool. Neutral leans slightly warm, while Zinc leans cool and editorial. Use Gray when you need absolute versatility.

What is the best contrast combo inside the Gray palette?

Gray 900 text on Gray 50 backgrounds yields a 15.3:1 ratio, while Gray 100 text on Gray 800 backgrounds still hits AAA, giving you flexibility for dark or light shells.