Color systems for product teams that aren't design teams

A product color system has three jobs: identify the brand, organize information, and signal state. Most homemade palettes fail at one or more of these because the team picked colors they liked rather than colors that worked.

The structure

1. 01One primary. The brand color. Used sparingly, primary CTAs, key brand moments, accent on hover. If primary is on every screen, it's wallpaper, not brand.
2. 02A neutral ramp. 10–12 shades of grey. This is the unsung hero of your product. 80% of your UI is greys.
3. 03Three semantic colors. Success (green), warning (amber), error (red). Plus optional info (blue, if your primary isn't blue).
4. 04Optional accents. 1–3 colors for charts, tags, categories. Reserve, don't sprinkle.

The neutral ramp is more important than the brand

Most of your UI is greys. Backgrounds, borders, text, inactive states. A weak neutral ramp produces a flat product. A strong one produces a premium product.

Don't use pure grey. Tint your neutrals slightly toward your brand color or toward a warm/cool reference. Linear's neutrals tilt cool. Stripe's tilt warm. Pure achromatic grey reads as clinical and dated.

• 12 neutral steps from background to text. Steps at 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950.
• Use 4–6 of them per screen. Background, surface, border, secondary text, body text, heading. Past 6, the hierarchy collapses.

Semantic colors

• Success: green. Used for confirmations, positive metrics, checkmarks. Tints toward emerald or forest green for premium feel; avoid neon.
• Warning: amber/orange. For things-that-need-attention-but-aren't-broken. Less alarming than red.
• Error: red. For destructive actions and failure states. Use a slightly muted red, not safety-orange; pure #FF0000 looks like a warning sign.
• Info: blue. For neutral notifications. Skip if your primary brand is blue, since the two compete.

Hover and active states

Hover: 5–10% darker (light mode) or lighter (dark mode). Active/pressed: 10–15% darker/lighter. Disabled: 40% opacity, no color change. Don't change the *hue* on hover, only the brightness.

Accessibility

All foreground/background pairs need to clear WCAG AA, 4.5:1 for body, 3:1 for large text. Run your palette through a contrast checker before shipping. Don't rely on "it looks fine to me", your eyes aren't every user's eyes, especially on lower-quality displays.

Build one

The directory's design foundations collection includes color tokens and tuned prompts. Pair with dark mode, every color needs a dark-mode pair, and you should build them together, not retrofit.