Home/Catalog/Design
Design — is it beautiful?
Brief 56

Color & Contrast Audit

The palette as it actually ships — every hex in the codebase, contrast ratios computed, semantic drift named, and whether dark mode is a theme or an apology.

COLOR.md4 phases8 lenses~3.1k chars

Free & open · no signup · read-only — it ends by asking · nothing leaves your machine

What it does

You are working inside this repo. Mission: extract the palette this product actually ships — every color in the code, not the brand deck — and audit it for coherence, contrast, meaning, and dark-mode integrity.

Color only, ratios computed. For drift across the whole style system, 15 proposes the tokens and 105 audits their adoption.

Read-only pass. Your only write is the report file.

What it looks for

8 lenses it looks through

Phase 2 sweeps the codebase through every one of these, citing file and line for each finding.

1

Palette sprawl

unique values versus tokens; hardcoded hexes bypassing the system; the #333 living next to the #343434

2

Contrast compliance

compute ratios for the real text-on-background pairs (4.5:1 body, 3:1 large text and UI); name the failures and where they appear

3

Semantic integrity

does red always mean danger; success green colliding with brand green; one hue carrying unrelated meanings

4

Color as sole signal

states communicated only by hue: error borders, chart lines, required fields; what a colorblind user loses

5

Hierarchy of grays

how many grays exist and whether they encode elevation and emphasis consistently

6

Dark mode integrity

a real inverted system with adjusted saturation, or filtered and forgotten; hardcoded values that ignore the theme

7

Interactive-state color

hover, focus, active, and disabled derived from the base systematically, or hand-picked mutations

8

Data-viz palette

categorical colors distinguishable, sequential ramps actually ordered, consistent across charts

The deliverable

What lands in your repo

One structured report at the repo root — or in reports/, if you keep one — the same shape every time, ready for a teammate — or the optional Studio — to act on.

COLOR.md
1
The real palette
every value, clustered, with counts and roles
2
Contrast table
pair · computed ratio · pass or fail · where it appears
3
Findings
ranked, with files
4
The token proposal
the smallest palette that covers today's uses
One file. Evidence-backed. It ends by asking before touching anything. · see a real COLOR.md ↗
How it works

What it makes the agent do

Every Goal Prompt follows the same four steps, so results are consistent and repeatable — no matter which one you run.

1
Phase 1

Extract the real palette

Grep every color out.

2
Phase 2

Audit through 8 lenses

Palette sprawl — unique values versus tokens.

3
Phase 3

Curate

Propose the token set — surfaces, text tiers, borders, brand, states — and the mapping from today's sprawl.

4
Phase 4

Report

Create COLOR.md at repo root.

Get started

Three ways to run this Goal Prompt

01 · COPY

Paste it in

Copy it and paste it into your agent inside the repo you want checked.

02 · INSTALL

As a slash command

Install the goal plugin once — two commands — then just type /goal:color-contrast-audit.

1/plugin marketplace add GhostlyGawd/goal-prompts
2/plugin install goal@goal-prompts

Or install only this Goal Prompt as /goal-color-contrast-audit:

curl -fsSL https://goal-prompts.vercel.app/install | BRIEF=56 sh
03 · AGENT

From an agent (MCP)

Let an agent fetch it mid-conversation, or pull the raw Goal Prompt by URL.

https://goal-prompts.vercel.app/raw/56.md
Transparency

The exact prompt

Nothing hidden — this is the whole Goal Prompt, verbatim. Read it in a minute, edit it, or copy it as-is.

Read the full brief (3,075 characters)
# Goal: Color & Contrast Audit

You are working inside this repo. Mission: extract the palette this product actually ships — every color in the code, not the brand deck — and audit it for coherence, contrast, meaning, and dark-mode integrity.

Color only, ratios computed. For drift across the whole style system, 15 proposes the tokens and 105 audits their adoption.

Read-only pass. Your only write is the report file.

## Phase 1 — Extract the real palette
- Grep every color out: hex, rgb and hsl, named colors, tokens and variables — across CSS, components, inline styles, SVGs, and chart configs.
- Count unique values and cluster the near-duplicates (the four almost-identical grays).
- Map each cluster to its role where discernible: text, surface, border, brand, state (success, warning, error), data viz.

## Phase 2 — Audit through 8 lenses
1. **Palette sprawl** — unique values versus tokens; hardcoded hexes bypassing the system; the #333 living next to the #343434
2. **Contrast compliance** — compute ratios for the real text-on-background pairs (4.5:1 body, 3:1 large text and UI); name the failures and where they appear
3. **Semantic integrity** — does red always mean danger; success green colliding with brand green; one hue carrying unrelated meanings
4. **Color as sole signal** — states communicated only by hue: error borders, chart lines, required fields; what a colorblind user loses
5. **Hierarchy of grays** — how many grays exist and whether they encode elevation and emphasis consistently
6. **Dark mode integrity** — a real inverted system with adjusted saturation, or filtered and forgotten; hardcoded values that ignore the theme
7. **Interactive-state color** — hover, focus, active, and disabled derived from the base systematically, or hand-picked mutations
8. **Data-viz palette** — categorical colors distinguishable, sequential ramps actually ordered, consistent across charts

## Phase 3 — Curate
- Propose the token set — surfaces, text tiers, borders, brand, states — and the mapping from today's sprawl.
- Rank contrast failures by user harm: body text first, decorative last.

## Phase 4 — Report
Create `COLOR.md` at repo root:
1. **The real palette** — every value, clustered, with counts and roles
2. **Contrast table** — pair · computed ratio · pass or fail · where it appears
3. **Findings** — ranked, with files
4. **The token proposal** — the smallest palette that covers today's uses

Start the report with today's date. If `COLOR.md` already exists from a previous run, read it first and lead with what changed since.

## Rules
- Every color claim carries the value and its file; every contrast claim carries the computed ratio
- Meaning first — fixing semantics beats adding shades
- No UI color choices in this repo? Say so in a one-paragraph null report and stop — a null result is a valid finding.
- If a `reports/` directory exists at the repo root, write the report there instead of the root.
- Before asking, present the top findings as a ranked list in plain words
- Report only — end by asking which fixes to make

House rules for this Goal Prompt

  • Every color claim carries the value and its file; every contrast claim carries the computed ratio
  • Meaning first — fixing semantics beats adding shades
  • No UI color choices in this repo? Say so in a one-paragraph null report and stop — a null result is a valid finding.
  • If a reports/ directory exists at the repo root, write the report there instead of the root.
  • Before asking, present the top findings as a ranked list in plain words
  • Report only — end by asking which fixes to make
Keep exploring

Pairs well with

Curated neighbors — briefs that answer the adjacent question, worth running in the same session.

More Design briefs

Runs inside these playbooks — curated sequences you can launch with one paste: