Lab 23 · The shell · rebuilt on Untitled UI

The frame, whole.

Everything that stays when the page changes, drawn as it stands: the marks the platform is written in, the switcher that names whose books and which application, the rail and its three states, the world clock, the group block, the notification centre, the period selector and the attention rail. The content area is empty throughout, because the shell owns everything around a page and nothing inside it.

The screens, rebuilt

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

The shell · merged switcher, rail, content
Northline Travel LLCCRM · United States
Dashboard
Customers
Enquiries
Quotations
Bookings
The two-level top bar · the horizontal alternative
TripbooksCRMAccountingHRWorkstationContentGroupNorthline LLC
DashboardCustomersEnquiriesQuotationsBookingsAnalytics

Level one is the modules; level two is the active module’s boards. The nav never caps out, because each level carries one family.

The reasoning, kept

01 / the icon family

Two hundred and sixty-seven marks, drawn for this system.

02 / the shell

One card, three states, five clocks, one block.

01 / the notification centre

What the platform actually says.

02 / the world clock

A plus where the eye already is, and a real manager behind it.

03 / the switcher panel

Same card, half the height.

04 / the period selector

Four answers, or your own.

06 / the attention rail, redrawn

Room to breathe, now that it scrolls.

How the family lives

Inline paths in a single component. A mark is corrected in one place, a new mark is drawn rather than imported, and a mark is chosen by name at the point of use so no binding can shadow it.

Where 460px comes from

A headline plus its figure on one line is what sets the width: at 460px "Last free cancellation step reached" and its 50% to 100% chip share a line without either being squeezed. Narrower and the headline wraps, which costs a third line on every row.

Severity, and the count

The edge is hueless as everywhere else: solid ink is broken, hatched is about to break, information carries nothing. The header count stays the platform law, what is BROKEN rather than what is unread, so an unread release note does not put a red number on the bell. Unread rows carry the faintest paper tint, and and with five three-row leads the whole panel is roughly 520px tall, which still clears any laptop without scrolling.

What the day count is for

A range picked by eye is easy to get wrong by a day at either end. Stating "15 days" as the second date lands turns the picture into a fact, and it is the number a person compares periods with anyway.

What the extra room bought

Names no longer truncate ("Overdue receiva…" and "Unissued depart…" are gone), the figures return to full size, and the destination is a legible line rather than a whisper. The cell is 232px against the old 143px floor, and the rail scrolls to reach the tenth.

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