Lab 09 · The customer side · rebuilt on Untitled UI

The one surface that is not ours.

Six routes: the quotation, the itinerary, the vouchers, the delegate pack, the flyer and the published table. Unauthenticated, opened from a token link, usually on a phone, by somebody who has never used Tripbooks and never will.

And here is the thing that decides the whole design: these pages carry the agency's brand, not ours. A traveller sees Northline Travel, or Northline, or whoever sold them the trip. Tripbooks appears nowhere. So this is not a design, it is a skin: a document that has to be well set with any tenant's colour dropped into it, and still look like the most expensive thing that agency has ever sent.

Everything decided for the operator side, thirty-one pixel rows, ten columns, badges, hatched fills, is wrong here. What carries over is the three faces and the discipline. What does not is every unit of density.

The screens, rebuilt

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

The share page · the agency’s brand, the platform’s honesty
NNorthline Travel
Kyoto incentive, autumn board offsite
TRP-4KM2XN8Q · version 1.2 · prepared by Sarah Mitchell
How long this holds: flights are guaranteed until tickets are issued; the hotel holds free cancel until 2 Sep. Fixed and may-change are marked on every line.
Tokyo Haneda to Osaka Itami · fixed
Park Hyatt Kyoto · 4 nights · may change until issued
Total$196,300.00
Accept this itinerary

Two tenant tokens: the logo mark and one brand colour. The type, the validity block and the mono money are the platform’s and do not move.

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.

The reasoning, kept

01 / the quotation, as the customer receives it

One promise, and exactly how long it holds.

02 / the skin test

The same document, a different agency.

One token changes. If the design only works in one colour, it is not a platform surface, it is a brochure for one customer.

03 / where it is actually opened

375 pixels, on a train, one hand.

The token link arrives by email or WhatsApp, so the phone is the primary case and the desktop is the courtesy. The item row loses its time column and stacks, the validity lines wrap under their tags, and nothing else changes.

04 / the contract for every customer facing page

What may never appear, and what must always.

Three rules doing quiet work in there

No supplier is named anywhere: the hotels are named because the customer is staying in them, but the wholesaler that priced the room is not, and neither is any internal identifier. The only reference shown is your reference with us, and when the hotel's own confirmation number arrives it will be added beside it, because that is the number a traveller actually needs at a front desk. And the validity block does not say "valid for 7 days". It says which parts are contractually fixed and which parts the airline can move, because a quotation that over-promises on a fare is the single most expensive thing an agency can send.

What a tenant may change

Exactly two things: a logo mark and one brand colour. Everything else, the type, the scale, the rhythm, the way validity is stated, is the platform's and it does not move. That is not a limitation, it is the product: an agency of four people gets a document that looks like it came from an agency of four hundred, and the platform can guarantee that the honest bits stay honest.

What a tenant may not change

The validity block, the reference line, and the absence of supplier names. Those three are compliance surfaces rather than design surfaces. An agency that could delete the "may change" tag on a fare would delete it, and the first time an airline repriced, the platform would be the reason a customer was misled.

The one place I kept the operator language

Money is still mono, and the totals still align on the decimal. On a dense register that was a legibility decision. Here it is a trust decision: a price set in the same face as the surrounding sentence reads like a claim, and a price set in a ledger face reads like an account. For a document that is asking somebody to commit two hundred thousand dollars, that difference is worth more than the aesthetic consistency it costs.

What this lab asked

  1. Two tokens, no more. A tenant gets a logo and one brand colour. Everything else is fixed. That is a strong position and some agencies will want their own typeface. I would hold the line, and the reason is the validity block: the moment a tenant can restyle, a tenant can bury it.
  2. Zero radius, on the customer side too. I kept it. It reads precise rather than severe at this scale and with this much air, but it is the decision most likely to feel cold to an agency selling honeymoons rather than board offsites.
  3. Fixed against may change. The plain-words treatment of hard and soft clocks. This is the most important thing on the page and the thing an agency is most likely to ask us to soften. Confirm it is non negotiable and I will build it as a platform guarantee rather than a template choice.
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