---
title: color-monochromatic
summary: Monochromatic with one or two accents beats a five-color palette. Why bright/purple gradients scream AI.
tags: [color, surface]
---

# Monochromatic palettes

A monochromatic palette — one hue across a wide range of lightness values, plus one or two true accent colors — almost always looks more considered than a five-color palette assembled from "what feels good."

## What to do

1. Pick **one neutral hue** as your base. Pure gray is fine. A subtle warm gray (slight yellow undertone) or cool gray (slight blue undertone) is better.
2. Generate **8–12 steps** of that hue from near-white to near-black. Tailwind's `slate`, `zinc`, `stone`, `gray`, and `neutral` are good starting points. Linear, Vercel, Notion all use this approach.
3. Pick **one true accent** for primary actions. Saturated, intentional. Don't dilute it across the UI — earn its use.
4. Optionally pick **one second accent** for warnings or success states. These should be subdued, not loud. If the brand accent is green, success takes a different hue, or users can't tell "primary action" from "it worked".

Three derivation rules keep the set coherent: neutrals share the brand's temperature (a blue brand wants cool greys; warm greys fight it, and an untinted `#808080` reads as placeholder); light tints come from lowering chroma in OKLCH, not lowering opacity, which greys them out; and disabled gets its own muted token rather than `opacity`, which passes contrast on one background and fails on the next ([[color-token-tiers]]).

That's it. The whole palette is ~14 tokens. Most "design systems" with 60 color tokens are overcomplicating.

## What to avoid

- **Bright purple gradients** (any of the `purple → indigo → fuchsia` variants). Universal AI tell.
- **Five-color brand palettes** with no hierarchy. Every color competes for attention; the eye finds nothing to land on.
- **Adjacent hues without intent.** Red + orange + yellow with no narrative reason is muddy.
- **High saturation everywhere.** Monochrome at 5–10% saturation reads as restrained and confident.

## When to apply

- Designing a new product UI from scratch.
- Refactoring a tokens file that has accumulated 60+ colors.
- Reviewing a landing page or PR where the team has added a new accent for "emphasis."

## Why this works

The eye can only track 2–3 colors at once. A monochrome palette gives the user a single tonal language to read; the one accent stands out by *being* the deviation. A multi-color palette dilutes attention — there's nothing to deviate *from*.

## Gotcha

"Monochromatic" doesn't mean "boring." A monochrome palette with rich texture, considered typography (see [[typography-humanity]]), and tight motion (see [[duration-table]]) feels luxurious. A multi-color palette with bad type and bad motion feels cluttered.

See also [[dark-mode]] for the dark-mode variant of these tokens, [[ai-default-tells]] for what to remove.

## Sources

- guidelines.sh — "Monochromatic with subtle accents; avoid bright/purple gradients."
- Linear, Vercel, Notion — examples of monochrome-with-one-accent in production.
- Emil Kowalski's design-engineering practice, distilled by HKTITAN — status hue, neutral temperature, tints and disabled tokens.