Lab 07 · Header and gate · rebuilt on Untitled UI

How much header before the work starts.

Three headers, same booking, same content underneath. Each frame is a fixed 560 pixels tall and scrolls inside itself, so what you see is the honest proportion on a laptop rather than a diagram of one. Scroll each frame to feel the difference, and scroll H3 in particular, because its whole argument is what happens after the first inch.

Your ruling on the tabs is already applied: Activity and Discussion have left the tab row and live in a right rail that is present on every record. Seven tabs remain. The rail belongs to the trip container rather than the booking, which is why it sits outside the tabs and stays put while you work.

The screens, rebuilt

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

The header, and what it reduces to

Marchetti Group IssuingPartially paidFROZEN v1.2

BKG-7QP2K4M9 · MICE · 24 pax · departs 14 Sep 2026 · Sarah Mitchell
BKG-7QP2K4M9Issuing
$21,600 headroom

On scroll the header reduces to the three things a person keeps asking for: the reference, the status and the gate.

The coverage meter · the gate, all five states
Open
$34,120 issued of $58,000 paid
Tight
$52,300 issued of $55,000 paid
Shut
$0 headroom
Crossed
exceeds paid by $8,140
Settled
paid in full · fully issued

The reasoning, kept

04 / the gate, all five states

Including the one where it has already been crossed.

You asked for a crossed state, and designing it turned up something worth saying plainly: the gate should make crossing impossible, so a crossed meter is never a normal reading. It happens when money leaves after issuance, a reversed payment, a chargeback, or a revoked credit release. That is an exposure incident, not a workflow step, and it should look like one.

What the sticky bar is really for

It is not a space saving trick. Issuing items is the one job on this page where a person is repeatedly asking the same question, "can I still issue this one", and the answer lives sixty pixels above the fold the moment they start scrolling. The reduced bar keeps the gate, the reference and the status on screen for exactly as long as the work takes.

Why the crossed state inverts

Every other state is information. This one is a claim on somebody's afternoon, so it is the only place in the entire operator interface where a block of solid ink carries a message. The overrun is drawn as a real quantity in red rather than as a tick that happens to sit in the wrong place, because the number the agency needs is not "you crossed" but "by how much".

What this lab asked

  1. H1, H2 or H3. Scroll all three at the same size before deciding. H3 is the only one that keeps the gate on screen while you work, which on this particular page may outweigh everything else.
  2. The right rail. Applied here as you ruled. It is 272 pixels and it is present on enquiry, quotation and booking alike. Confirm it should also appear on profile records like customers and suppliers, or stay on transactional records only.
  3. Exposure needs a home. A crossed gate is an incident, and right now it only exists on the booking that caused it. It probably also belongs on the dashboard attention rail and in a finance worklist, since nobody discovers an exposure by opening a booking at random. Worth designing now, or park it.
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