Tripbooks design system / lab 17 / dark and narrow

Lab 17 / the last two open items

Both are about what you refuse to do.

A dark theme is not the light one inverted, and a narrow screen is not a desktop with things removed. Doing either badly is worse than not doing it, because a wrong number in a low contrast cell and a quotation composed on a phone are both ways this platform loses money for somebody.

So both answers here are partly a list of what the system declines. Dark is a selected palette with its own measured values. And there is no phone view. Tripbooks is a desktop and tablet product, three supported widths, and below 768 pixels it says so rather than degrading into something that half works.

01 / dark

The register, in its own palette.

Every value below was checked rather than chosen by eye. The five disposition texts clear 6.3 to 9.6 against the card, well above the readable floor, and the sequential ramp is monotonic in the opposite direction to the light one.

CRM · Sales · CustomersSM

Customers

Customers
214
Active
148
Outstanding
$830,025
Total spend
$21,558,179
Conversion
48.5%
Search customers, references, travellers Filter3ViewsColumns 43 of 214
CustomerTypeStatusTotal spendOutstanding Enquiry · quote · bookingLast bookingAgent
Sterling Capital GroupCCN-1001Corporate Active2,453,870386,720 57·53·47 24 Jul 2026Sarah Mitchell
Crestview PartnersCCN-1004Corporate Inactive1,560,0000 38·30·25 22 Jul 2025Sarah Mitchell
Marchetti GroupCCN-1055Corporate Active1,284,50076,300 18·14·11 02 Aug 2026Sarah Mitchell
Aurora Travel PartnersACN-3001Agency Active940,0750 23·18·15 23 Sep 2025Emily Rodriguez
Globe OTA HoldingsACN-3009Agency Prospect58,9000 22·13·8 13 Jan 2026Sarah Mitchell
Brooks Travel CoACN-3006Agency Completed22,400195 18·11·4 02 Apr 2025Nour Haddad
Vertex Trading FZECCN-1019Corporate CancelledAED 25,700AED 17,160 3·3·1 12 Jun 2026Sarah Mitchell
Halloran & CoCCN-1077Corporate Sent41,70041,700 8·6·2 14 Aug 2026Huda Aziz
8 of 43 shown6,387,145522,075187·148·113
Total sell
$196,300.00
Paid
$120,000.00
Issued
$118,400.00
Headroom
$1,600.00

Surfaces, measured

TokenLightDarkContrastNote
Canvas#F4F6F4#16191B-The ground the page sits on.
Card#FFFFFF#1C2022-Content lifts above the canvas in both. On dark it lifts by getting lighter, which is the only inversion that is genuinely symmetrical.
Rail#EDEFED#121517-Recedes below the canvas in both. Deeper on light, darker on dark.
Ink#14181A#E8EAE914.8Primary text.
Ink 2#5D6765#A2ABA87.4Secondary text and cell values.
Ink 3#697270#79827F4.6 / 4.6Labels and references. The one token that gets darker on dark, because a mid grey that works on white glares on near black.
Rule#E2E6E3#2A2F31-Row separators.
Rule strong#C6CCC8#3B4245-Header underlines, totals, borders.

Dispositions, measured against the dark card

DispositionMarkTextContrast and note
Resting#7A8286#9AA2A56.32 · still achromatic, still the absence of a signal.
Ours#3D7BFF#8FB4FF7.93 · the light blue would vanish here, so this is a different colour and not a lightened one.
Theirs#FF9F1C#F5B65B9.17 · amber gains contrast on dark, which is the opposite of its behaviour on paper.
Won#16C98D#57DCAF9.59 · the strongest of the five on dark and the weakest on light.
Ended#FF5647#FF90897.51 · reads hotter on dark, so the mark is pulled back rather than pushed further.

The sequential ramp reverses

#16264A
#1E3A73
#2A52A6
#3D6FD4
#6494ED
#9CBAF6

Monotonic dark to light, verified. On paper more is darker; on a dark ground more has to be brighter, because a heatmap where the busiest week disappears into the background is not a heatmap. This is the clearest example of why dark cannot be an automatic flip: reversing the light ramp would produce a picture that is exactly wrong.

02 / the rule

Four things a naive inversion breaks.

What breaksWhy, and what we do instead
The sequential rampInverted, more becomes darker on a dark ground, so the highest value hides. The dark ramp is its own set, running dark to light.
The hatchOn paper the hatch is drawn in the rule colour on white and reads as texture. Inverted it becomes light lines on near black and reads as a highlight rather than an absence. On dark the hatch stays in the rule colour, so open still recedes.
The exposure tick and the destructive buttonRed on white is a warning; the same red on near black is a neon sign. Both step back to the dark ended mark so they still stop a person without dominating the screen.
The muted inkThe one token that goes darker in dark mode. A grey that sits quietly on white glares on near black, so labels and references get less contrast rather than more, which is the opposite of what an inversion would do.

D1Dark is selected, never computed

Every dark value is authored and measured against the dark surface. No filter, no inversion, no automatic derivation from the light palette.

D2Three states, not two

An explicit choice stamps light or dark. The default stamps nothing and follows the system. Every token is defined for the unstamped case first, so a page never renders one theme's text on the other theme's ground.

D3Meaning survives the theme

Solid is settled, hatched is open, outline is dormant, in both. A person who learns the fill rule in one theme reads it in the other without relearning anything.

03 / narrow

Three supported widths, and the table never loses a column.

Chrome gives up space first. The rail collapses to icons at 1024 and to a drawer at 768. The table keeps every column it had and scrolls sideways inside its own frame, which is the honest answer for a register whose columns were all chosen for a reason.

1280 and above · desktop · everything visible

1280 × desktop
Entity
Northline Travel LLC
Sales
Customers
Enquiries
Quotations
Bookings
CustomerTypeStatusTotal spendOutstandingE·Q·BRSSCountryLast bookingAgent
Sterling Capital Group CCN-1001CorporateActive2,453,870386,72057·53·479United States24 Jul 2026Sarah Mitchell
Marchetti Group CCN-1055CorporateActive1,284,50076,30018·14·118Italy02 Aug 2026Sarah Mitchell
Aurora Travel Partners ACN-3001AgencyActive940,075023·18·157United States23 Sep 2025Emily Rodriguez
Globe OTA Holdings ACN-3009AgencyProspect58,900022·13·86United States13 Jan 2026Sarah Mitchell

1024 · laptop · rail collapses to icons, table starts to scroll

1024 × laptop · scroll the table sideways
CustomerTypeStatusTotal spendOutstandingE·Q·BRSSCountryLast bookingAgent
Sterling Capital Group CCN-1001CorporateActive2,453,870386,72057·53·479United States24 Jul 2026Sarah Mitchell
Marchetti Group CCN-1055CorporateActive1,284,50076,30018·14·118Italy02 Aug 2026Sarah Mitchell
Aurora Travel Partners ACN-3001AgencyActive940,075023·18·157United States23 Sep 2025Emily Rodriguez
Globe OTA Holdings ACN-3009AgencyProspect58,900022·13·86United States13 Jan 2026Sarah Mitchell

768 · tablet · rail is a drawer, same ten columns, same rows

768 × tablet · scroll the table sideways
Customers
Filter · 3ViewsColumns43 of 214
Customer stays put · 8 more columns to the right
CustomerTypeStatusTotal spendOutstandingE·Q·BRSSCountryLast bookingAgent
Sterling Capital Group CCN-1001CorporateActive2,453,870386,72057·53·479United States24 Jul 2026Sarah Mitchell
Marchetti Group CCN-1055CorporateActive1,284,50076,30018·14·118Italy02 Aug 2026Sarah Mitchell
Aurora Travel Partners ACN-3001AgencyActive940,075023·18·157United States23 Sep 2025Emily Rodriguez
Globe OTA Holdings ACN-3009AgencyProspect58,900022·13·86United States13 Jan 2026Sarah Mitchell
Every law survives every supported width, with no exception

I had drafted a phone layout in which the register became a list of two line cards, which meant writing a boundary into the one line per cell law. With no phone view and no dropped columns, the law holds absolutely. A register is the same table at 768, at 1024 and at 1280. Thirty-one pixel rows, one line per cell, ten columns, no wrap. The narrower the screen, the more of it you reach by scrolling.

04 / what scrolling costs, and how it is paid

Nothing is dropped, so one thing must be pinned.

A table that scrolls sideways has one failure mode, and it is a serious one on this platform: you scroll to the outstanding balance, look up, and no longer know whose balance it is. So the identity column is sticky and everything else moves under it. That single decision is what makes horizontal scrolling safe for money.

RuleDetail
The identity column pinsCustomer, or booking, or item: whichever column names the row. It sits on the left, keeps the card background so scrolling content passes behind rather than through it, and carries a hairline plus a soft edge so it reads as a fixed layer.
Only the table scrollsThe KPI strip, the toolbar, the chips row and the pager stay full width and still. They are about the whole set, not about the columns, so moving them sideways would be nonsense.
The totals row scrolls with its columnsA total has to sit under the column it totals. It is part of the table and it moves with it.
The page never scrolls sidewaysThe frame scrolls, the document does not. A person should never lose the rail or the toolbar by scrolling a table.
The reach is statedA quiet line above the table names what is off screen, "8 more columns to the right", so a scrollbar is not the only clue that the register has more to say.
Columns is still the editing toolScrolling means nobody has to hide a column to see another one. Hiding is now purely a preference, which is what it always should have been.

R1Columns are never dropped by width

Every column an agent turned on stays on at every supported width. What changes is how much of it is on screen at once.

R2The identity column is sticky wherever a table can scroll

On every register, every item table and every ledger. Without it, horizontal scrolling is a way to read the right number against the wrong row.

R3Chrome gives up space before content

Icon rail at 1024, drawer at 768, right rail becomes a toggle. The table is the last thing asked to make room, and it makes room by scrolling rather than by shrinking.

R4A record page stacks, it never becomes a list

On a tablet the right rail collapses to a toggle and the tab row scrolls. The facts band wraps. Nothing turns into cards, because a booking is a document and a document does not become a feed.

What this replaced

I had written a three tier priority system where each field declared whether it survived to 768, 1024 or 1280. It was tidy and it was wrong, because every column on a Tripbooks register was put there by somebody who needed it, and a system that decides on their behalf which of their columns matter is making an editorial judgement it has no standing to make. Scrolling makes that judgement unnecessary.

05 / the part that is a decision, not a gap

Below 768, the platform says so.

There is no phone view and there is not going to be one. Tripbooks is an operating system for a travel business: ten column registers, six figure documents, a margin floor, a credit gate. None of that becomes safer by being reachable from a pocket, and a composer that technically renders on a phone gets used twice and produces two quotations somebody has to apologise for.

So the boundary is drawn once, at 768, for the whole platform, and it is a designed screen rather than a broken one.

below 768 · every route
Tripbooks
Tripbooks needs a wider screen The platform is built for desktop and tablet, from 768 pixels up. Registers, records and money need the width to stay readable, and we would rather tell you that than show you a version that leaves something out. Email myself this link BKG-7QP2K4M9
Why it carries the reference

Somebody who opens a link on a phone was sent that link for a reason, usually by a colleague, usually about one record. The screen shows the reference they were sent and offers to put it back in their inbox for when they are at a desk. That is the entire job, and it is the difference between a dead end and a hand-off.

What this saves

Every register, every record, the composer, the marketplace, the settings page and six customer facing documents, each of which would otherwise need a phone layout, a phone test and a phone bug list. The one place a narrow screen still matters is the customer facing share pages, which stay fully responsive to 375, because a traveller reading an itinerary on a train is the primary case there and always was.

R5The operator interface starts at 768

Three supported widths: tablet, laptop, desktop. Below 768 every route renders one designed screen naming the record and offering to send it on.

R6Customer facing pages are the exception, and they always were

The six share routes stay responsive to 375. A traveller has no desk, no account and no choice about the device in their hand.

The list is closed

Everything under Not Decided is decided, except charts.

  1. No phone view, ruled. Operator surfaces start at 768. Below that, one designed screen per route carrying the reference and a way to send it on. The customer facing share pages remain responsive to 375, which is unchanged from Lab 09 and is the only place a phone was ever the primary case.
  2. Tables scroll, columns are never dropped. This replaced a three tier priority system that decided on an agent's behalf which of their own columns mattered. The cost is one companion rule: the identity column pins, so nobody ever reads the right number against the wrong row.
  3. A law got stronger rather than weaker. The phone layout I had drafted would have forced a boundary into one line per cell, since a card list is not a table. With no phone and no dropped columns the boundary is gone: the law holds at every supported width with no exception.
  4. Ink 3 gets darker in dark mode. The one token that moves against the grain, because a grey that sits quietly on white glares on near black. It will look like a bug to whoever implements it, so it is written down with its reason.
  5. Next. I fold labs 13 to 17 into the specification so it is one document again rather than a document plus five updates. Then charts, whenever you want to reopen them.