HOW THEY RELATE · 60 / 30 / 10

Most of any surface is paper. Ink does the reading. Vermilion is the exception that earns attention.

A guide, not a gate — but if vermilion creeps past ~10% of a view, pull it back. The signal lives on scarcity.

The body pairing is ink on paper, both ways. Vermilion clears 4.0:1 — read it as a large / bold colour only, never small body text.

✓ APPROVED PAIRINGS

✗ AVOID

THE LEGIBILITY WINDOW

Light greys read on ink. Dark greys read on paper. The scale crosses over at 500.

Pick the side first, then the step. The same grey that is invisible on one ground is the right secondary on the other.

TEXT ON PAPER →

TEXT ON INK →

✓ DO

✗ DON'T

An engineered ramp, not an eyeballed one: lightness falls in even steps and the hue never leaves the warm band.

LIGHTNESS · L* FROM 94 → 6

PAPER 100 200 300 400 500 600 700 800 INK

The working range (300 → ink) descends in even ~12 L* steps — no gap, no two steps colliding. Paper · 100 · 200 are deliberately compressed: they are surface tints of the ground, meant to sit close together as a quiet elevation band.

HUE LOCK · EVERY STEP STAYS WARM 34–41°

The signal needs a quiet ground.

Stone is built so the one vermilion can land. But the signal only carries on the ends of the scale — drop it on a mid-grey and it collides with the surface, worst of all on stone-500, which shares its lightness almost exactly.

This is the whole bargain of B2: the neutrals stay quiet and the scale clears its middle, so the single vermilion — never more than ~10% of a view — always lands. The grey is the silence the signal needs.

A SCALE, NOT A PALETTE

The extra weights are roles for the one accent — never a second, third or fourth colour to decorate with.

Base 500 dims against ink. On dark surfaces the signal steps up to 300 — same hue, more light — so it stays unmistakably vermilion.

A functionally weighted scale, not an even one — the steps cluster where the work is.

100 · WASH 300 · ON-INK 500 · BASE 600 · HOVER 700 · PRESS

One hue — so lightness has to do the work.

Because every step shares 13°, colour-blind users can't tell them apart by hue. The scale survives only if the steps separate by lightness — which they do. Under every simulation, the five stay ordered light → dark.

✓

✓ DO

✗ DON'T

TUNED, NOT STOCK

Framework default states are loud and cool — they tear a hole in a warm, printed palette. WCN re-mixes each one to sit inside the system.

--success

--warning

--error

NO BLUE

ERROR ≠ VERMILION

A stop must never look like the brand.

Vermilion is the one voice of attention and invitation — links, CTAs, the live mark. Error is failure. They share a family, so the system pulls them apart on hue and lightness and gives each a single, separate job.

Each state ships two verified pairings — its text on its own tint, and its label reversed out of the solid fill.

AA body ≥ 4.5:1 · AA LG large/bold ≥ 3:1. Warning text on tint uses the darker #7A5E0E; amber fills always take ink labels, never paper.

Success and error collide — so the icon, not the colour, says go or stop.

This is the one real trap in any functional palette: under red-green CVD, green and red converge toward the same khaki — and they sit close in lightness too (111 vs 92 grey). Colour can't be trusted to carry the difference, so the system never lets it.

✓ DO

✗ DON'T

Most of a surface is paper. Ink does the reading. Vermilion is the exception that earns the eye.

60 / 30 is a guide — shift it freely for a dark hero or a quiet document. The 10 is the rule: if vermilion creeps past a tenth of the view, pull it back. Functional state colours sit outside this budget — they appear only on demand.

Every legal text combination at a glance. Read a column onto a row — the sample shows exactly how it lands.

On ink, vermilion and stone step lighter to stay legible — read the vermilion-300 and lighter stones from B2 / B3. Body text never runs at AA LG; reserve those pairings for ≥ 18px or bold.

The matrix samples; this is exhaustive. For every surface in the system, exactly which foregrounds are allowed — each chip rendered on its real ground.

LIGHT GROUNDS · PAPER & STONE 50–300

DARK GROUNDS · INK & STONE 700–800

ACCENT & STATE FILLS · LABELS ONLY

Solid fills take one label colour only — never ink-on-vermilion, never paper-on-amber. Everything not listed here is, by definition, not allowed.

THE CANONICAL PAIRINGS

— the ✓ cells of the matrix, shown at size

FORBIDDEN COMBINATIONS

— the ✗ cells, made visible

ONE ACCENT PER VIEW

Scarcity is the whole point. When everything is vermilion, nothing is — give the eye exactly one place to land.

THE EMPHASIS LADDER

Reach for colour last. Build hierarchy with size and weight first, lean on the ink–stone scale next, and spend vermilion only when nothing else will do.

THE RULES, APPLIED

— the same composition, light ↔ dark

ELEVATION · LIGHT RAISES BY SHADOW, DARK RAISES BY LIGHT

There is no shadow on a dark ground. A surface comes forward by getting lighter — the higher it sits, the lighter the fill.

ACCENT · 500 → 300

FUNCTIONAL · BRIGHT VARIANTS

✓ DO

✗ DON'T