Lab 08 · Forms · rebuilt on Untitled UI

Two thresholds, one form.

New Enquiry is the right place to settle validation, because it carries a problem most forms do not have. It can be saved twice, at two different standards. A draft needs a customer and a title. A real enquiry needs a customer, a title, a source, a destination, at least one adult, an agent, no blacklist, and a billing address on the account.

So the form cannot simply be valid or invalid. It has to say, at every moment, which of the two things you can do right now and exactly what is standing between you and the other one. Everything else in the validation contract falls out of getting that right.

The screens, rebuilt

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

Two thresholds, one honest button
Draft · 2 conditionsReal enquiry · 7 conditionstwo thresholds, one form, never simply valid or invalid
Save enquiry5 of 7 · outstanding: a travel window, and how they heard of you
The field, in its states
Traveler
Family name as the passport shows it
Amount
18,900.00
Focus is the ours blue.
Departure
31 Jun 2026
June has 30 days. The 30th or 1 July?
Margin
6.1%
Below the floor; routes to Huda Aziz.
Entity
Northline Travel LLC
Set by your administrator.
Base currency
USD
Locked · journals exist.
Balance
$23,200.00
Computed, never typed.

The reasoning, kept

02 / the field, in every state it has

Nine states, one field.

Every input on the platform is built from this. The border carries the state, the message carries the reason, and the label never moves.

03 / the contract

Eight rules, and every form on the platform obeys them.

The rule that makes this work

The disabled button never explains itself in a tooltip. The reason sits permanently beside it, in words, naming every outstanding condition rather than only the first, because a person who fixes one thing and finds the button still dead learns to distrust the form. The seven segment bar is the same idea in a glance: five solid, two open, and the two open ones are named in the sentence next to it.

Why the single button needs the counter

Ruled 20 August: one button, not two. The risk with a button that changes its own meaning is that a person presses Save without noticing which save they got. The counter answers that before the press rather than after it: five of seven, and the two outstanding conditions named in the sentence beside it. The button label and the counter always agree, and if they ever could not, the counter is the one that is right.

One deliberate omission

There is no success state on a field. A green tick beside a correctly filled input is decoration: the person can see what they typed, and marking sixteen fields as correct to draw attention to two that are not is a worse way of saying the same thing than the counter at the foot of the form.

What this lab asked

  1. Ruled: one button. A single save that carries the highest threshold currently reachable, never disabled, with the condition counter beside it doing the explaining.
  2. Ruled: validate on leaving a field. Checked on blur, then live once a field has shown an error, so a fix clears the message immediately rather than on the next blur.
  3. Still open from Lab 07. A crossed gate is an exposure incident and currently lives only on the booking that caused it. It needs a home on the attention rail and in a finance worklist, and that lands with the Board and Worklist archetypes.
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