Lab 05 · Register assembled · rebuilt on Untitled UI

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.

The screens, rebuilt

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

The register · rebuilt on Untitled
Customers
226
Active
165
Open balances
$612,400
Past terms
$2,949,935 135
Search customersFiltersViewsColumnsAdd customer
CustomerReferenceTypeStatusTotal spendE · Q · B
SCSterling Capital Groups.whitlock@sterling.exampleCCN-1001CorporateActive2,453,87057·53·47
BTBrooks Travel Co STOPCCN-1021AgencyActive396,41022·14·9
*** M***** H***** PRIVCCN-1044PrivateWithheld••••
ANAl Noor Trading FZECCN-1078 · DubaiCCN-1078CorporateProspectAED 58,90022·13·8
Page 1 of 16PreviousNext
The peek
Sterling Capital Group
ReferenceCCN-1001
TypeCorporate
OwnerS. Mansour
Open balance$46,900.00

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

Skeleton rows at exactly 44px · no shimmer

The reasoning, kept

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.

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.

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.

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.

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.

What this lab asked

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