D-TOK

Twenty literal colours, three decisions.

Everything else in the sweep is mechanical. These three need eyes, because each one either adds a token to the ramp or moves something on screen. Nothing here is applied to the site yet.

1. Body copy

p { color: ? }

Today it is #5c5c5c at 6.69:1 — a fifth neutral that is not on the ramp, and lands exactly halfway between --ink-2 and --ink-3. Read a full sample, not a swatch. Use Solo to see them one at a time; side by side, the lighter grey always looks lighter than it really is.

2. Near-white surfaces

4 fills within 1.04–1.33:1

A figure background, the wireframe bars, the progress rail and the ghost button’s border. All four are almost paper. The question is whether they are one surface or a scale — look at the wireframe bars against the figure behind them, since that is the only pairing where the steps do any work.

One surface--surface + --line
3-step scale--surface 1–3
Mockups stay literalcarve-out

Schemes 2 and 3 are pixel-identical — they differ only in whether the mockup greys are named. Scheme 1 flattens the wireframe bars into the figure behind them. The ghost border moves in all three: #dfdfdf today vs --line-2 #e7e7e7 proposed.

3. The alpha greys

rgba(147,147,147, .16 / .55)

Three marks are struck from #939393 at 16% and 55%: the header dot grid, the link underline and the annotation chip. Over paper the two columns below are identical — flattening costs nothing. The bottom row is the same code over a dark plate, which is where a baked value stops being a tint and starts being a light patch.

Flattened#eeeeee / #c4c4c4
tae-london.com Finding 01
Alpha keptcolor-mix on --tint
tae-london.com Finding 01
Flattened, on darkbaked for paper
tae-london.com Finding 01
Alpha kept, on darkstill a tint
tae-london.com Finding 01