Tripbooks design system / lab 04 / saturation and severity

Lab 04 / the consequence of turning it up

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.

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.

Restingmark #9AA29Ftext #6B7472nothing is owed
Oursmark #1246E8text #0F3DC4we must act
Theirsmark #EE8A00text #A85F00waiting on them
Wonmark #00A86Btext #067A50settled with value
Endedmark #F0392Btext #C22317settled without value

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.

Treatment A · filled pill

Customers24 rows · full chroma background
CustomerStatusTotal spendAgent
Sterling Capital GroupCCN-1001Active2,453,870Sarah Mitchell
Crestview PartnersCCN-1004Inactive1,560,000Sarah Mitchell
Aurora Travel PartnersACN-3001Active940,075Emily Rodriguez
Mr. Jonathan PierceICN-2007Active803,465James Carter
Meridian Health GroupCCN-1002Active1,920,090James Carter
Blue Ridge VenturesCCN-1003Prospect990,875Sarah Mitchell
Globe OTA HoldingsACN-3009Prospect58,900Sarah Mitchell
Northgate EquityCCN-1031Active46,987Jessica Thompson
Silverline LogisticsCCN-1040Inactive38,676Olivia Bennett
Ms. Jennifer CarterICN-2011Inactive28,900Sarah Mitchell
Brooks Travel CoACN-3006STOPActive22,400Nour Haddad
Ms. Leila SaabICN-2019Active10,573Nour Haddad
Vertex Trading FZECCN-1019ProspectAED 25,700Sarah Mitchell
Mr. Karim SalehICN-2031Active1,028Jessica Thompson
Harbour Point CapitalCCN-1012Active612,400Huda Aziz
Ms. Alice BergeronICN-2048Prospect0Olivia Bennett
Cedar Grove HoldingsCCN-1024Active274,910Marcus Webb
Lakeshore Travel GroupACN-3014Inactive96,240Emily Rodriguez
Mr. Daniel OkonkwoICN-2062Active187,300Karim Fares
Pinewood IndustriesCCN-1038Active431,780Huda Aziz
Ms. Sofia MarchettiICN-2074Prospect4,900Nour Haddad
Ironbridge PartnersCCN-1047Inactive65,120Marcus Webb
Summit Ridge TravelACN-3021Active118,650Olivia Bennett
Mr. Elias FournierICN-2088Active39,470Karim Fares

Treatment B · tinted pill

Customers24 rows · pale ground, saturated edge and text
CustomerStatusTotal spendAgent
Sterling Capital GroupCCN-1001Active2,453,870Sarah Mitchell
Crestview PartnersCCN-1004Inactive1,560,000Sarah Mitchell
Aurora Travel PartnersACN-3001Active940,075Emily Rodriguez
Mr. Jonathan PierceICN-2007Active803,465James Carter
Meridian Health GroupCCN-1002Active1,920,090James Carter
Blue Ridge VenturesCCN-1003Prospect990,875Sarah Mitchell
Globe OTA HoldingsACN-3009Prospect58,900Sarah Mitchell
Northgate EquityCCN-1031Active46,987Jessica Thompson
Silverline LogisticsCCN-1040Inactive38,676Olivia Bennett
Ms. Jennifer CarterICN-2011Inactive28,900Sarah Mitchell
Brooks Travel CoACN-3006STOPActive22,400Nour Haddad
Ms. Leila SaabICN-2019Active10,573Nour Haddad
Vertex Trading FZECCN-1019ProspectAED 25,700Sarah Mitchell
Mr. Karim SalehICN-2031Active1,028Jessica Thompson
Harbour Point CapitalCCN-1012Active612,400Huda Aziz
Ms. Alice BergeronICN-2048Prospect0Olivia Bennett
Cedar Grove HoldingsCCN-1024Active274,910Marcus Webb
Lakeshore Travel GroupACN-3014Inactive96,240Emily Rodriguez
Mr. Daniel OkonkwoICN-2062Active187,300Karim Fares
Pinewood IndustriesCCN-1038Active431,780Huda Aziz
Ms. Sofia MarchettiICN-2074Prospect4,900Nour Haddad
Ironbridge PartnersCCN-1047Inactive65,120Marcus Webb
Summit Ridge TravelACN-3021Active118,650Olivia Bennett
Mr. Elias FournierICN-2088Active39,470Karim Fares

Treatment C · mark and word, no container

Customers24 rows · full chroma in a 7px mark only
CustomerStatusTotal spendAgent
Sterling Capital GroupCCN-1001Active2,453,870Sarah Mitchell
Crestview PartnersCCN-1004Inactive1,560,000Sarah Mitchell
Aurora Travel PartnersACN-3001Active940,075Emily Rodriguez
Mr. Jonathan PierceICN-2007Active803,465James Carter
Meridian Health GroupCCN-1002Active1,920,090James Carter
Blue Ridge VenturesCCN-1003Prospect990,875Sarah Mitchell
Globe OTA HoldingsACN-3009Prospect58,900Sarah Mitchell
Northgate EquityCCN-1031Active46,987Jessica Thompson
Silverline LogisticsCCN-1040Inactive38,676Olivia Bennett
Ms. Jennifer CarterICN-2011Inactive28,900Sarah Mitchell
Brooks Travel CoACN-3006STOPActive22,400Nour Haddad
Ms. Leila SaabICN-2019Active10,573Nour Haddad
Vertex Trading FZECCN-1019ProspectAED 25,700Sarah Mitchell
Mr. Karim SalehICN-2031Active1,028Jessica Thompson
Harbour Point CapitalCCN-1012Active612,400Huda Aziz
Ms. Alice BergeronICN-2048Prospect0Olivia Bennett
Cedar Grove HoldingsCCN-1024Active274,910Marcus Webb
Lakeshore Travel GroupACN-3014Inactive96,240Emily Rodriguez
Mr. Daniel OkonkwoICN-2062Active187,300Karim Fares
Pinewood IndustriesCCN-1038Active431,780Huda Aziz
Ms. Sofia MarchettiICN-2074Prospect4,900Nour Haddad
Ironbridge PartnersCCN-1047Inactive65,120Marcus Webb
Summit Ridge TravelACN-3021Active118,650Olivia Bennett
Mr. Elias FournierICN-2088Active39,470Karim Fares
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.

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.

All nineteen · dark
ActiveProspectInactive NewQualifyingReady to quote ConvertedLostSpam DraftSentApproved AcceptedExpired IssuingConfirmedIn service CompletedCancelled

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.

S1 · the leading edge

Fulfilment queuesolid edge already broken · hatched edge about to break
TaskBookingCustomerDue
Ticketing deadline · 4 flight itemsBKG-7QP2K4M9Marchetti Group3h left
Payment overdue · INV-2026-118BKG-1MC8V4TASterling Capital Group22d overdue
Service SLA breachedSRV-3K8WQ2L1Aurora Travel Partners6h overdue
Unissued item · departs in 2 daysBKG-M4X8T2VCMr. Jonathan Pierce2d left
Free-cancel deadline · Park Hyatt KyotoBKG-9WD3R7KPNorthgate Equity19h left
Documents missing · 2 passports, 1 lead guestBKG-2LF6H8QAGlobe OTA Holdings4d left
No supplier confirmation · transferBKG-4TB1N5ZESilverline Logistics31h left
Credit release pending · finance signatureBKG-8YV2C6MRCrestview Partners2d left
Arrives before check-in · 06:20 against 15:00BKG-5HK9J3WTMs. Leila Saab11d left
Weather watch · storm window, ReykjavikBKG-6NR4Q1XDVertex Trading FZE9d left

S2 · ground inversion

Fulfilment queuealready broken inverts · about to break sits on a raised ground
TaskBookingCustomerDue
Ticketing deadline · 4 flight itemsBKG-7QP2K4M9Marchetti Group3h left
Payment overdue · INV-2026-118BKG-1MC8V4TASterling Capital Group22d overdue
Service SLA breachedSRV-3K8WQ2L1Aurora Travel Partners6h overdue
Unissued item · departs in 2 daysBKG-M4X8T2VCMr. Jonathan Pierce2d left
Free-cancel deadline · Park Hyatt KyotoBKG-9WD3R7KPNorthgate Equity19h left
Documents missing · 2 passports, 1 lead guestBKG-2LF6H8QAGlobe OTA Holdings4d left
No supplier confirmation · transferBKG-4TB1N5ZESilverline Logistics31h left
Credit release pending · finance signatureBKG-8YV2C6MRCrestview Partners2d left
Arrives before check-in · 06:20 against 15:00BKG-5HK9J3WTMs. Leila Saab11d left
Weather watch · storm window, ReykjavikBKG-6NR4Q1XDVertex Trading FZE9d left

S3 · the clock made visible

Fulfilment queuethe track is the time remaining against this task's own window
TaskBookingCustomerTime left
Ticketing deadline · 4 flight itemsBKG-7QP2K4M9Marchetti Group 3h
Payment overdue · INV-2026-118BKG-1MC8V4TASterling Capital Group 22d over
Service SLA breachedSRV-3K8WQ2L1Aurora Travel Partners 6h over
Unissued item · departs in 2 daysBKG-M4X8T2VCMr. Jonathan Pierce 2d
Free-cancel deadline · Park Hyatt KyotoBKG-9WD3R7KPNorthgate Equity 19h
Documents missing · 2 passports, 1 lead guestBKG-2LF6H8QAGlobe OTA Holdings 4d
No supplier confirmation · transferBKG-4TB1N5ZESilverline Logistics 31h
Credit release pending · finance signatureBKG-8YV2C6MRCrestview Partners 2d
Arrives before check-in · 06:20 against 15:00BKG-5HK9J3WTMs. Leila Saab 11d
Weather watch · storm window, ReykjavikBKG-6NR4Q1XDVertex Trading FZE 9d
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.

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.

Flags beside the name
CustomerStatusWhat the flag means
Brooks Travel CoACN-3006STOPActiveBlacklisted. A hard stop that blocks every action, and the relationship status survives beside it
*** M***** H*****ICN-2044PRIVWithheldPrivate record. Name masked, detail withheld, reference kept so somebody can ask for access
Ironbridge PartnersCCN-1047ARCHInactiveArchived. Answers a search, always below live results, never in a count
Meridian Health GroupCCN-1002SUPPActiveAlso a supplier. Purchases from this account live in Accounting
Marchetti GroupCCN-1055LOCKAcceptedFrozen. The commercial content cannot change and the database refuses

What I need from you

Three, and then the register is finished.

  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.