Tripbooks design system / lab 05 / the register, assembled

Lab 05 / everything ruled so far, in one place

The first finished screen.

No variants this time. Every decision you have made is now built into one working All Customers register, with the frame around it, on the real book. If something is wrong, it is wrong here and it is cheap to move before it reaches thirty other routes.

Lab 02R1 Ledger · 31px rows, hairlines, no boxes
Lab 0319 statuses from 5 dispositions · funnel is a primitive
Lab 04Badge C · mark and word, no container
Lab 04Severity S1 · leading edge, zero hue
Lab 04Five hues at full saturation, confirmed
Lab 03Blacklist is a flag beside the name
Lab 05Figures are mono · Archivo titles, Sans language, Mono data
Lab 13Toolbar is words · one magnifier, inside the search field only
Lab 15Light rail · switchers lift as cards, active nav lifts to white

01 / the whole screen

Frame and register, together for the first time.

Graphite rail against paper canvas. The rail is dark because it holds the two facts that must never be mistaken, which entity's books you are in and which application you are in, and a dark ground keeps them from reading as page content. The single accent in the frame is the active nav mark, in the ours blue, because navigation is always a thing you are doing.

Entity
Northline Travel LLC
United States · USD
CRM
Sales & operations
CRM · Sales · Customers Search or jump to a reference⌘K SM

Customers

All customersAll travelers
ExportNew customer
Customers
214
Active
148
Outstanding
$830,025
Total spend
$21,558,179
Conversion
48.5%
Search customers, references, travellers Filter3 Views Columns 43 of 214
Type is any of Corporate, Agency Status is Active Total spend is more than 10,000 Reset
2 selected Change agents Archive customer Clear selection
CustomerTypeStatus Total spendOutstanding Enquiry · quote · bookingLast bookingRSSAgent
Sterling Capital GroupCCN-1001Corporate Active2,453,870386,720 57·53·47 24 Jul 20269 Over-growthSarah Mitchell
Meridian Health GroupCCN-1002SUPPCorporate Active1,920,0900 39·33·31 22 Feb 20268 StrongJames Carter
Crestview PartnersCCN-1004Corporate Inactive1,560,0000 38·30·25 22 Jul 20256 TypicalSarah Mitchell
Blue Ridge VenturesCCN-1003Corporate Prospect990,875139,290 35·25·19 22 Jun 20266 TypicalSarah Mitchell
Aurora Travel PartnersACN-3001Agency Active940,0750 23·18·15 23 Sep 20257 StrongEmily Rodriguez
Mr. Jonathan PierceICN-2007Individual Active803,46556,870 24·18·14 12 Jul 20268 StrongJames Carter
Harbour Point CapitalCCN-1012Corporate Active612,40041,900 21·17·13 02 Aug 20267 StrongHuda Aziz
Pinewood IndustriesCCN-1038Corporate Active431,7800 16·11·8 19 May 20266 TypicalHuda Aziz
Cedar Grove HoldingsCCN-1024Corporate Active274,91012,400 14·9·6 08 Jun 20265 TypicalMarcus Webb
Mr. Daniel OkonkwoICN-2062Individual Active187,3000 10·7·6 27 Jul 20267 StrongKarim Fares
*** M***** H*****ICN-2044PRIV ***Withheld ****** ************
Summit Ridge TravelACN-3021Agency Active118,6503,240 18·10·7 14 Aug 20266 TypicalOlivia Bennett
Lakeshore Travel GroupACN-3014Agency Inactive96,2400 29·16·9 11 Nov 20254 DevelopingEmily Rodriguez
Ironbridge PartnersCCN-1047ARCHCorporate Inactive65,1200 15·9·6 03 Mar 20253 At riskMarcus Webb
Globe OTA HoldingsACN-3009Agency Prospect58,9000 22·13·8 13 Jan 20266 TypicalSarah Mitchell
Northgate EquityCCN-1031Corporate Active46,9876,090 9·9·7 04 Jul 20267 StrongJessica Thompson
Silverline LogisticsCCN-1040Corporate Inactive38,6760 10·5·4 10 Feb 20254 DevelopingOlivia Bennett
Brooks Travel CoACN-3006STOPAgency Active22,400195 18·11·4 02 Apr 20255 DevelopingNour Haddad
Vertex Trading FZECCN-1019Corporate ProspectAED 25,700AED 17,160 3·3·1 12 Jun 20263 At riskSarah Mitchell
Mr. Karim SalehICN-2031Individual Active1,0280 8·5·5 06 Nov 20255 TypicalJessica Thompson
20 of 43 shown10,648,491663,865419·302·231
25 per page‹12›
Four things worth noticing

Every figure is now mono, so the numbers separate from the names without a rule, a shade or a weight change, and the money columns align natively instead of relying on a tabular feature. The status column scans in a single pass while the customer names still lead the row, which is what badge C was meant to buy. The sorted column is marked in its header rather than by shading, because shading a money column in a register full of money columns is how a reader loses which one they asked for. And the search field now carries a magnifier and a longer placeholder, so it says what it actually searches rather than naming the register again, while Filter, Views and Columns stay as words because a word tells you what a button does and a bookmark does not.

02 / the parts, at real size

What opens when you press the toolbar.

Four overlays, and the rule they share: every one of them shows a count before you commit. A filter you cannot see the cost of is a filter you apply twice.

Filter · simple

Filteradvanced
Corporate58
Agency28
Individual128
Active148
Prospect41
Inactive25
Apply · 43 rowsClear

Counts are live and measured against every other running condition, so the number beside a box is what you would actually get.

Columns

Columns10 shown
Customerlocked
Typelocked
Status
Total spend
Enquiry · quote · booking
Country
Billing currency
Created on

Locked columns show as ticked and dimmed rather than hidden, so nobody hunts for a column that was never on the menu.

Views

Viewssaved
My key accounts18
Owes us money37
Corporates, no booking in 12 months9
Agencies at risk6
Save this view

Every saved view re-asks its question on open and shows the answer's size beside it, so a stale view is visible before it is applied.

Row peek · on hover

Sterling Capital GroupCCN-1001 · Corporate · United States
Total spend
$2,453,870
Outstanding
$386,720
Last booking
24 Jul 2026
Relationship
9 · Over-growth
Sarah Mitchell · Huda Aziz · 2 open enquiries

Four facts, no actions. A peek that can do something is a menu, and a menu that opens on hover is a trap.

03 / the states nobody designs

Empty, filtered to nothing, loading, refused.

A register spends more of its life in one of these than most people expect, and the difference between a good product and a demo is which of them were drawn on purpose.

Empty · nothing exists yet

No customers yet Every enquiry needs one, so this is where a trip starts. New customer

Names the next action, and says why it matters. One sentence, and it carries a fact rather than an explanation.

Empty · the filter did it

No customers match these three conditions Total spend is more than 10,000 removed the last 6 rows. Remove that condition

The critical difference: it names which condition emptied the set, because the narrowing bar already knows and the reader should not have to guess.

Loading

Rows at exactly 31 pixels, so the table does not jump when the data lands. No shimmer: a register that pulses on every filter is exhausting by lunchtime.

Refused

You cannot open this record ICN-2044 is private. Huda Aziz and Sarah Mitchell can grant access. Request access

Names the record, names who can help, offers the ask. A refusal that only says no makes the next thing that happens a message on a chat app.

04 / the numbers behind it

The scale, written down.

Everything above is built from these. Four type roles, one four pixel spacing grid, three rules.

RoleSettingWhere
FigureIBM Plex Mono · 400 · tabular · -.03emEvery quantity, at every size. A number is data, not language, and it is never set in a text face
Page titleInter · opsz auto · wght 430 · 27pxOne per screen, never repeated in a card below it
Block titleInter · opsz auto · wght 570 · 15pxSection and panel headings
BodyInter · 12.5px · 400 / 500Names, words, controls. Language only, and no digits a person would compare
LabelIBM Plex Mono · 9px · .13em · upperColumn heads, KPI keys, group names in the rail
ReferenceIBM Plex Mono · 10.5pxEvery ref, code and countdown, in the same face as the figures because they are the same kind of thing
MeasureValueRule
Row height31pxFixed. A badge, a funnel or a flag never changes it
Gutter20pxPage edge, table edge and panel edge all share it
Cell padding5px 10pxOne line per cell, no wrap, no second line
Three facesInter · Plex MonoEverything read, everything counted. Ruled to Inter in Lab 19; the optical axis separates title from body inside one family
Grid4pxEvery gap, pad and offset is a multiple
Rules1px · #E2E6E3 / #C6CCC8Light rule between rows, heavy rule under a header or above a total
Radius0Nothing is rounded. The ledger is a grid of squares and it should look like one

Where we are

The register is done. Three calls before it hardens.

  1. The frame. Graphite rail against paper canvas, entity above workspace, live counts beside each nav item. This is on all one hundred routes, so it is the last cheap moment to change it.
  2. Zero radius. Nothing on this screen is rounded, which is a real position and not a default. It suits a ledger and it will feel severe on a customer facing document. Confirm it for the operator side and we decide the share pages separately.
  3. What comes next. The register archetype covers thirty-one routes. The natural next is the workspace record, the enquiry, quotation and booking pages, because it is nine routes and it is where the money lives.