Lab 04 · Saturation · rebuilt on Untitled UI

Saturation up, area down.

You pushed the five dispositions louder. That buys a register you can read from across the room, and it spends two things I now have to earn back.

First, the christmas tree. A saturated hue repeated forty times as a filled pill is unreadable, so the answer is not to quieten the hue but to shrink the area it occupies. Full chroma in a seven pixel dot reads as loud as full chroma in a pill, and forty of them still read as a list. Three treatments below, tested at twenty-four rows, so this is settled by looking rather than by arguing.

Second, severity has nowhere left to shout. If Active is electric blue and Cancelled is a strong red, a breached SLA cannot be a slightly stronger red. So severity moves off colour entirely and onto position, ground and time. Three mechanisms, tested on the real fulfilment queue.

The screens, rebuilt

Drawn fresh from the Untitled kit and the system’s ruled tokens, not restyled from the originals.

Two dimensions: colour is whose move, fill is whether a clock runs
Resting · nothing owed by anyoneOurs · the platform’s moveTheirs · waiting on the other sideWon · settled with valueEnded · settled without it
hatched · a clock is runningsolid · settledoutline · dormant
All nineteen statuses · the ruled pill, disposition on the ground, the clock in the dot
CustomerActiveProspectInactive
EnquiryNewQualifyingReady to quoteConvertedLostSpam
QuotationDraftSentApprovedAcceptedExpired
BookingIssuingConfirmedIn serviceCompletedCancelled
The sequential ramp, and why dark cannot be a flip
Light · more is darker
Dark · the ramp reverses: more is lighter

The reasoning, kept

01 / the five, turned up

Full chroma in the mark, a readable step in the text.

Each disposition carries two values, not one. The dot runs at full saturation because a seven pixel square has no legibility burden. The text runs a step darker so it clears contrast on paper. This is what lets the palette be loud and the page stay readable at the same time.

02 / the area test

The same twenty-four rows, three amounts of coloured area.

Same palette, same statuses, same order. Only the size of the coloured surface changes. Scroll between them without stopping to read and pick the one where you can still find a customer's name.

03 / the other theme

The same five on graphite.

Saturation behaves differently on a dark ground: the same hue reads hotter and contrast inverts, so these are not the light values lightened. Shown as a tinted pill because on dark a tint is nearly free, and again as mark and word.

04 / severity, with no colour left

The fulfilment queue, three ways, zero hue.

Real task types from the queue: ticketing deadlines, free-cancel deadlines, missing confirmations, missing documents, credit releases, service SLA, check-in gaps, weather watches. Four critical, four warning, two informational. None of the three mechanisms below uses a single unit of colour, which is precisely the point: colour is fully spent on disposition now.

05 / the flag layer

Blacklisted is a flag, not a status. Here is where flags live.

You ruled it stays separate, so it sits beside the name with the other marks that describe the record rather than its lifecycle. Achromatic, because these are conditions rather than dispositions, and a hard stop earns solid ink.

What I see, for what it is worth

A is unusable at this length. The eye goes to the colour block every time and the customer's name, which is the thing a person came to find, loses. B is comfortable but it turns the status column into a wall of soft rectangles that all weigh the same. C is the only one where the name still leads and the colour still works, because chroma is doing the signalling and area is doing none of it. C also degrades best: strip the colour and it is still a clean word column, which is the R1 ledger you already chose.

The trade in one sentence each

S1 is quiet, cheap and works on any row anywhere, but it is a category and it cannot tell you that three hours is worse than two days. S2 is unmissable and it is the only one that would still register at the bottom of a long scroll, but four inverted rows on a screen is a lot of black and a queue that is entirely critical becomes a solid slab. S3 is the only one carrying the actual quantity, which is what a deadline is, and it degrades honestly: the track empties, then it fills solid when the clock has run out. S1 and S3 combine cleanly. S2 does not combine with anything.

What this lab asked

  1. Badge treatment: A, B or C. This is the one that decides how the whole platform feels, because the badge appears on more rows than any other component. My read is C, mark and word with no container, because it keeps your saturation and gives back the name.
  2. Severity mechanism. S1 the leading edge, S2 ground inversion, S3 the visible clock, or S1 and S3 together. Whatever we pick governs the fulfilment queue, the attention rail, departures, approvals and the service desk.
  3. Are these the right five hues? Electric blue, amber, green, red, graphite, at the saturation you asked for. Now is the moment to say if any single one of them is wrong, because after this they start appearing in charts, meters, buttons and focus rings.
The original document, in its own chrome and drawings, is kept unedited: open the original.
Tripbooks Design SystemBuilt on Untitled UI · Inter for language, IBM Plex Mono for every figureLight and dark from the same tokens