How I stopped picking colors randomly and started using a system

1. The random picker problem

For years I'd open Figma, hit the color picker, and just... vibe. The result looked fine in isolation but fell apart the moment I added a second screen or handed it to a developer.

• Every component ended up with a slightly different shade of the same blue.
• Hover states were improvised each time.
• Dark mode was basically a full redesign.

2. Roles before hues

The fix was embarrassingly simple: decide what each color does before deciding what it looks like.

• Start with: background, surface, border, text-strong, text-muted, accent.
• Only after those six are locked do you pick the actual hex values.
• This makes swapping a brand color a five-minute job, not a day-long one.

3. The five-token minimum

You don't need a 40-shade design system for a client landing page. Five tokens cover 90% of real work.

• bg (page background), surface (card/panel), accent (CTA + links), text (body), muted (secondary text).
• Add a sixth — danger — only when you have forms or destructive actions.
• Document these in a single Figma frame before you start building.

Common mistakes

• Picking the accent color first and building everything else around it.
• Using 12 different grays without naming any of them.
• Skipping the token step because the project feels 'too small'.

Before you ship

• Write down the six role names before opening the color picker.
• Test body text contrast on both white and tinted surfaces.
• Check hover and disabled states before calling the palette done.
• Export the token map to a shared doc so the dev doesn't have to guess.