Lab 10 · Board and worklist · rebuilt on Untitled UI

The two surfaces about now.

A board answers "how did the business do over a period". A worklist answers "what happens if I do nothing". They are neighbours and they are constantly confused, so the rule between them is worth stating: every figure on the board is a cohort over a chosen range, and the only thing on the page that ignores the range is the attention rail, which is about today.

The funnel primitive you made a platform component in Lab 03 does its biggest job here. And the exposure incident from Lab 07, which had nowhere to live, finally has two homes.

The screens, rebuilt

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

The board · cohorts above, consequence below; the exposure row inverts
Needs your attention
11 2 yours
Money billed
$1.28m ↑ 11.2%
Bookings won
41 ↑ 2
Conversion
48.8% ↓ 4.3%
Gate exposure of $12,400Riyadh roadshow · issued beyond paidCRM · Bookings
4 departures unissuedtravelling within 7 days
$214,900 overdue9 customers past terms
7 quotes expiring soonholds lapse within 72 hours
The worklist · ordered by consequence, the exposure row inverted
Gate exposure · $12,400money gone outranks money late1 booking
Overdue · $386,7209 customers past terms
Quotes expiring inside 72h7 quotations
Passports expiring before travel5 travelers

A worklist answers “what happens if I do nothing”. One order: consequence, grouped rather than sorted.

The funnel · two of its four sizes
Enquiries164
Quotations113
Bookings61
E2,224
Q1,533
B1,079
lost0

Each stage measured against the first, never against itself; an empty stage draws an outline, never nought per cent.

The reasoning, kept

02 / a correction I am proposing

The movement chip should not be green and red.

The existing rule is that a delta is coloured green for up and red for down, by direction rather than by judgement. That was a sound instinct, and under the palette we have now built it breaks: green means settled with value and red means settled without value everywhere else on the platform. A green chip on "cancellations up 18%" would be reading the exact opposite of the truth.

03 / the worklist, finished

Grouped by what it costs to ignore.

Not sorted by date, and not filterable into a register. A worklist has one order and it is consequence. The exposure incident sits at the top because there is nothing on the platform that costs more.

04 / the worklist variant that decides rather than links

Approvals.

Every other worklist row sends you somewhere. This one is answered in place, because the decision is one of two words and opening a record to say them is friction with no purpose. It is the only worklist that carries actions on the row.

What the funnel primitive bought

Four columns, each with the same shrinking bar you approved for a register row, at board size. The bar under Quotations is 69 per cent of the bar under Enquiries, not 100 per cent of its own column, so the narrowing is real rather than decorative. This is the same component, at the same scale rule, doing the biggest job on the platform and the smallest job in a table cell.

An empty worklist is the only good empty state on the platform

Everywhere else empty means something is missing. Here it means the work is done, so it should read like a result rather than an absence, and it carries the next thing on the horizon so a person knows the quiet is real rather than a broken query.

The one number that gets coloured outside a badge

Margin below its floor is red, and margin negative is red with a minus sign. This is the second and last exception to the rule that hue belongs to disposition, after the exposure tick. Both exceptions are the same thing underneath: money the agency is losing right now.

What this lab asked

  1. Movement chips lose their colour. This overturns an earlier decision of yours for a reason that did not exist when you made it. Direction becomes a glyph, hue stays reserved for disposition, and "cancellations up 18%" stops reading as good news.
  2. The exposure incident inverts wherever it appears. On the attention rail and at the top of the queue it is solid ink with a red edge, and it outranks a $386,720 overdue balance because an overdue balance is money late and an exposure is money gone.
  3. Approvals carry actions on the row. The only worklist that does. Everything else links out. Confirm that is the line, because the moment a second worklist gets buttons the grammar starts drifting.
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