# Color palette method

The goal is a palette that feels **designed and alive**, not a random set of nice colors. The
reliable way to get there is structure + restraint, then judging it *applied*.

## The three roles

Every palette has exactly three jobs. Assign a color (and a ramp) to each and name them for
the user so the logic is legible.

| Role | Job | Surface area | Notes |
| --- | --- | --- | --- |
| **Neutral base** | Backgrounds, tints, borders, most surfaces | Large | Sets the mood. Its *temperature* is the single biggest lever on "human vs. clinical". |
| **Primary / anchor** | Actions, links, focus, trust | Medium | Usually the expected/known brand color. Carries function. |
| **Spark accent** | Marks, underlines, stars, numbers, hover, one logo detail | Tiny | The life. Small areas only — scarcity is what makes it feel intentional. |

The most common mistake is letting the spark spread. If it appears in large fills, it stops
being a spark and the whole thing looks loud/cheap. The base does the warmth; the spark does
the *spark*. That contrast is the brand.

## Choosing the temperatures

- **Warm neutral base** (ivory/paper, a yellow-brown undertone) reads human, crafted,
  approachable — good for local businesses, food, wellness, anything with a person behind it.
- **Cool neutral base** (blue-grey) reads clinical, corporate, technical. Sometimes correct
  (fintech, security) but it's the default "SaaS" look, so choose it deliberately, not by
  accident.
- A **warm base + cool anchor + warm spark** (or any deliberate temperature contrast) creates
  tension that reads sophisticated. Matching everything to one temperature reads flat.

## Build ramps, not single colors

For each role, define a small ramp (roughly 4-5 steps) so the UI has real tokens:

- **Neutral**: `50` page background → `100` tint block → `200` border → `300` divider.
- **Ink/text** (often a very dark version of the base or anchor): `950` primary text →
  `900/800` dark surfaces → `700` muted text. Avoid pure `#000`; a tinted near-black is softer.
- **Anchor**: `600` hover → `500` core → `400` lighter → `50` faint tint fill.
- **Spark**: `500` core → plus a deeper variant and a `50` tint. Keep the count small.

Give each step a one-word purpose. Tokens with purposes are what make the next phases fast.

## The "it feels cheap" fixes

When an accent feels cheap or loud, it's almost always one of these — apply the opposite:

- **Too saturated** → lower the chroma. Muted/deeper colors read more premium than neon.
- **Clashing temperature at equal weight** → either bring the two colors to a **shared value/
  lightness**, or demote one so it's clearly secondary.
- **Too much of it** → shrink the area. Move it from fills to details.
- **Too generic** → shift the hue off the obvious (e.g. a terracotta instead of pure coral, a
  cobalt instead of the default bright blue).

## Judge it applied — always

Render two things and show them together:

1. **The ramps** as labelled swatches (hex + purpose).
2. **An applied mock**: a dark hero using the anchor and spark as soft radial glows; a primary
   button in the anchor; a light card on the neutral base with the spark as one small detail
   (an underline, a star row, a number). Optionally a small "logo-ish" mark placeholder.

The applied mock is non-negotiable. A palette that looks fine as squares can fall apart in use,
and vice-versa. The user is judging a *feeling*, and feeling only shows up applied.

## Locking

Once the user is happy, restate the final palette as a clean token table (role, step, hex,
purpose). That table is both the handoff to the logo phase and the seed of the brand guide.