Tripbooks design system / lab 07 / header height and the gate

Lab 07 / two decisions, both shown rather than described

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.

H1

Merged

The stage bar folds into the facts band. One band carries the chain of references and the six facts. Saves roughly sixty pixels on every record page in the platform.

CRM · Bookings · BKG-7QP2K4M9Search or jump to a reference⌘KSM

Marchetti Group

BKG-7QP2K4M9 RemindShare travel packIssue items···
Issuing Partially paid MICE · 24 pax FROZEN v1.2
Trip chain
ENQ-8TVQ2M4R › QUT-5RD9K3WP › BKG-7QP2K4M9
Customer
Marchetti Group
Agent
Sarah Mitchell
Travel
14 - 21 Sep 2026
Total sell
$196,300.00
Due
$76,300.00
OverviewFulfilment3Payments DocumentsService1ItineraryFlyer

Items

9 items · 6 issued
ItemKindDatesConfirmationSellStateDeadline
Tokyo Haneda to Osaka ItamiITM-2K9DQ4XWFlight · 24 pax14 Sepnot ticketed38,900.00Awaiting issue3h · soft
Park Hyatt Kyoto · 12 roomsITM-7WB3N8LMHotel · 7 nights14 - 21 SepHTL-9920481761,300.00Issuedfree cancel ended
Suiran Kyoto · 6 roomsITM-1FQ6R2ZKHotel · 4 nights17 - 21 Sepawaiting supplier22,100.00Confirming19h · hard
Airport transfers · 4 vehiclesITM-3XN5V9TCTransfer · 24 pax14 Sepno driver assigned4,800.00Confirming2d · hard
Osaka Itami to Tokyo HanedaITM-9LM4C7BDFlight · 24 pax21 SepPNR · 6 tickets35,600.00Issued-
Gion evening walk · privateITM-6TC8H1QNActivity · 24 pax16 SepACT-401183,900.00Issued-
Conference room · 3 daysITM-8DK2W6PYVenue · MICE15 - 17 SepVEN-7732012,400.00Issued-
Gala dinner · KikunoiITM-5JR9B3FSDining · 24 pax18 SepDIN-119389,400.00Issued-
Coach hire · 2 daysITM-4PV7Z5GHTransfer · 24 pax15 - 16 SepTRF-602447,900.00Issued-
ActivityDiscussion
Today · 09:12
BookingSarah Mitchell issued 2 items
Today · 08:40
MoneyPayment received, $40,000.00
Yesterday · 17:03
SupplyHotel confirmation landed, HTL-99204817
Yesterday · 11:55
BookingRate drift accepted, +$1,240.00
18 Aug · 14:20
Quotationv1.2 accepted and signed
H2

Four bands

As built in Lab 06. Title, badges, stage bar, facts band. Each answers a different question, and a booking is a record people study rather than skim.

CRM · Bookings · BKG-7QP2K4M9Search or jump to a reference⌘KSM

Marchetti Group

BKG-7QP2K4M9 RemindShare travel packIssue items···
IssuingPartially paid MICE · 24 paxFROZEN v1.2
Enquiry
ENQ-8TVQ2M4R
Quotation
QUT-5RD9K3WP · v1.2 accepted
Booking
BKG-7QP2K4M9 · 6 of 9 issued
Invoice
INV-2026-118 · partially paid
Customer
Marchetti Group
Agent
Sarah Mitchell
Travel
14 - 21 Sep 2026
Departs in
25 days
Total sell
$196,300.00
Due
$76,300.00
OverviewFulfilment3Payments DocumentsService1ItineraryFlyer

Items

9 items · 6 issued
ItemKindDatesConfirmationSellStateDeadline
Tokyo Haneda to Osaka ItamiITM-2K9DQ4XWFlight · 24 pax14 Sepnot ticketed38,900.00Awaiting issue3h · soft
Park Hyatt Kyoto · 12 roomsITM-7WB3N8LMHotel · 7 nights14 - 21 SepHTL-9920481761,300.00Issuedfree cancel ended
Suiran Kyoto · 6 roomsITM-1FQ6R2ZKHotel · 4 nights17 - 21 Sepawaiting supplier22,100.00Confirming19h · hard
Airport transfers · 4 vehiclesITM-3XN5V9TCTransfer · 24 pax14 Sepno driver assigned4,800.00Confirming2d · hard
Osaka Itami to Tokyo HanedaITM-9LM4C7BDFlight · 24 pax21 SepPNR · 6 tickets35,600.00Issued-
Gion evening walk · privateITM-6TC8H1QNActivity · 24 pax16 SepACT-401183,900.00Issued-
Conference room · 3 daysITM-8DK2W6PYVenue · MICE15 - 17 SepVEN-7732012,400.00Issued-
Gala dinner · KikunoiITM-5JR9B3FSDining · 24 pax18 SepDIN-119389,400.00Issued-
Coach hire · 2 daysITM-4PV7Z5GHTransfer · 24 pax15 - 16 SepTRF-602447,900.00Issued-
ActivityDiscussion
Today · 09:12
BookingSarah Mitchell issued 2 items
Today · 08:40
MoneyPayment received, $40,000.00
Yesterday · 17:03
SupplyHotel confirmation landed, HTL-99204817
Yesterday · 11:55
BookingRate drift accepted, +$1,240.00
18 Aug · 14:20
Quotationv1.2 accepted and signed
H3

Sticky

Full header at rest, and on scroll it reduces to one bar carrying the reference, the status and the live coverage state. Scroll this frame to see it work. The gate stays on screen while you work through items, which is when you most need it.

CRM · Bookings · BKG-7QP2K4M9Search or jump to a reference⌘KSM

Marchetti Group

BKG-7QP2K4M9 RemindShare travel packIssue items···
IssuingPartially paid MICE · 24 paxFROZEN v1.2
Enquiry
ENQ-8TVQ2M4R
Quotation
QUT-5RD9K3WP · v1.2 accepted
Booking
BKG-7QP2K4M9 · 6 of 9 issued
Invoice
INV-2026-118 · partially paid
Customer
Marchetti Group
Agent
Sarah Mitchell
Travel
14 - 21 Sep 2026
Departs in
25 days
Total sell
$196,300.00
Due
$76,300.00
Marchetti Group BKG-7QP2K4M9 Issuing gate $1,600.00 headroom
OverviewFulfilment3Payments DocumentsService1ItineraryFlyer

Items

9 items · 6 issued
ItemKindDatesConfirmationSellStateDeadline
Tokyo Haneda to Osaka ItamiITM-2K9DQ4XWFlight · 24 pax14 Sepnot ticketed38,900.00Awaiting issue3h · soft
Park Hyatt Kyoto · 12 roomsITM-7WB3N8LMHotel · 7 nights14 - 21 SepHTL-9920481761,300.00Issuedfree cancel ended
Suiran Kyoto · 6 roomsITM-1FQ6R2ZKHotel · 4 nights17 - 21 Sepawaiting supplier22,100.00Confirming19h · hard
Airport transfers · 4 vehiclesITM-3XN5V9TCTransfer · 24 pax14 Sepno driver assigned4,800.00Confirming2d · hard
Osaka Itami to Tokyo HanedaITM-9LM4C7BDFlight · 24 pax21 SepPNR · 6 tickets35,600.00Issued-
Gion evening walk · privateITM-6TC8H1QNActivity · 24 pax16 SepACT-401183,900.00Issued-
Conference room · 3 daysITM-8DK2W6PYVenue · MICE15 - 17 SepVEN-7732012,400.00Issued-
Gala dinner · KikunoiITM-5JR9B3FSDining · 24 pax18 SepDIN-119389,400.00Issued-
Coach hire · 2 daysITM-4PV7Z5GHTransfer · 24 pax15 - 16 SepTRF-602447,900.00Issued-
Welcome reception · KyotoITM-2QB7M4XJDining · 24 pax14 SepDIN-119020.00Complimentary-

Changes

none applied
No changes or cancellations on this booking.
ActivityDiscussion
Today · 09:12
BookingSarah Mitchell issued 2 items
Today · 08:40
MoneyPayment received, $40,000.00
Yesterday · 17:03
SupplyHotel confirmation landed, HTL-99204817
Yesterday · 11:55
BookingRate drift accepted, +$1,240.00
18 Aug · 14:20
Quotationv1.2 accepted and signed
18 Aug · 09:31
QuotationRate sub-version v1.2.1 minted
Write to the trip thread
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.

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.

Openroom to keep issuing
Total sell
$196,300.00
Paid
$120,000.00
Issued
$86,400.00
Headroom
$33,600.00
Gate openThe next item costs $18,900.00 and there is room for it.
Tightcovered, but not for the next item
Total sell
$196,300.00
Paid
$120,000.00
Issued
$118,400.00
Headroom
$1,600.00
Gate open, barely$1,600.00 of headroom. The next item costs $18,900.00, so it needs a payment or a dual signed release.Request credit release
Shutevery paid dollar is already spoken for
Total sell
$196,300.00
Paid
$120,000.00
Issued
$120,000.00
Headroom
$0.00
Gate shutNothing further can issue. Take a payment, or request a release signed by an admin and by finance.Request credit release
Crossedexposure incident, not a workflow step
Total sell
$196,300.00
Paid
$108,000.00
Issued
$120,400.00
Exposed by
$12,400.00
Exposed A payment of $12,400.00 was reversed after issuance. The agency is carrying that amount. Issuance is blocked and finance has been notified. Open the incident
Settledpaid in full, the gate no longer applies
Total sell
$196,300.00
Paid
$196,300.00
Issued
$145,200.00
Headroom
$51,100.00
Paid in fullEverything remaining can issue on demand.
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 I need from you

The header, and one thing the crossed state raised.

  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.