Lab 17 · Dark and narrow · rebuilt on Untitled UI

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.

The screens, rebuilt

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

The sequential ramp, and why dark cannot be a flip
Light · more is darker
Dark · the ramp reverses: more is lighter
Three widths, and one refused
1280 and up
Everything at rest.
1024 to 1279
The rail collapses to icons; the table keeps every column.
768 to 1023
Rail becomes a drawer; the table scrolls, never shrinks.
below 768
One designed screen: the hand-off, naming the record and offering to send it on.
Below 768 · the hand-off
Tripbooks needs a wider screen

You were sent BKG-7QP2K4M9. We can put it back in your inbox for when you are at a desk.

Send it to my inbox

Below 768, every route renders this one designed screen: a hand-off, not a dead end.

Skeleton rows at exactly 44px · no shimmer

The reasoning, kept

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.

02 / the rule

Four things a naive inversion breaks.

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.

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.

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.

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.

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.

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.

What this lab asked

  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.
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