Color systems that don’t lie

Startup palettes look beautiful in Figma. They break the moment they hit a real product screen, an ad, a print piece, or a dark-mode browser. Here’s why and how to fix it.

The 3 mistakes

Mistake 1: Picking 8 colors

You don’t need 8. You need 4. The more colors you have, the less consistent your work becomes because nobody remembers which is “the third gray.”

Required: primary, secondary, neutral (text + borders), background. Optional: 1-2 accent colors for highlights.

Mistake 2: Not testing on real surfaces

That dusty pink in Figma? On an iPhone OLED screen it’s neon. In print it’s salmon. On a low-end Android it’s gray. Always test your palette on:

• iPhone (OLED screen — colors are punchy)
• Cheap Android (LCD screen — colors are flat)
• Printed on plain paper (gets desaturated)
• Dark mode browser (your light grays disappear)

Mistake 3: Not defining tokens

“#FF5A4A” tells your developer nothing. “--am-primary” tells them everything. Define every color as a CSS custom property so any team member can use it correctly without checking the brand guide.

The system that works

Define 4 tiers:

1. Brand colors (2-3 max): your primary, secondary, accent
2. Surface colors (2-3): background, card, elevated card
3. Text colors (3): primary text, secondary text, muted text
4. Functional colors (4): success, warning, error, info

That’s 11-13 tokens total. Document HEX + RGB + CMYK for each. Test on every surface. Store as CSS variables.

Quick contrast test

Run every text-on-background combo through WebAIM Contrast Checker. Aim for AA (4.5:1 for normal text, 3:1 for large). If you fail, your palette has an accessibility problem — fix it before launch.