Build your flat white

Design notes

Shape of the page

A wizard. Four choices in the order a barista makes them, each one a group of tiles rather than a list, because somebody chooses a drink by looking rather than by reading.

What it leads with

The one thing that changed. This order is one somebody saved, and it normally takes four taps and no thought; the page exists today because one of those taps is not available, so that is the first thing it says.

Spacing

Touch. Every target is at least forty-four pixels and the pills are forty-eight, because somebody uses this one-handed, walking, a minute from the counter.

The one bold decision

The screen names the shortage at the step it breaks, not at checkout. Most ordering apps let you build the whole drink and then refuse it at the till, which wastes the order and the walk. The unavailable option is still on the screen, disabled, saying why — removing it would leave somebody hunting for the thing they always choose — and the two ways out open the step: another milk, or another shop with the distance stated.

Where the colour comes from

The canvas is a cream rather than white, and white is what a card is made of. That inversion is most of the warmth. One green does the work: the brand green fills the action and marks a chosen tile, and the deep house green is a band rather than a theme — it is that colour whatever else is on the page. The gold this brand publishes is reserved for rewards and appears nowhere here.

Measured

Body text reads 14.87:1 on the cream canvas and the quietest text 5.00:1 on the recessed band. A tile boundary reads 5.00:1 against the same band. White on the green action reads 5.76:1, and a green word on the cream reads 4.71:1, which is why the green used for text is a shade deeper than the green used for the fill.

The press

Every pill and every tile compresses to ninety-five per cent when pressed, which is this language’s signature and the only animation on the page. It is switched off, rather than shortened, for anyone who has asked for less motion — a transform is the one kind of movement a reduced-motion setting is actually about.

Where the type comes from

Two weights, and a default letter-spacing that is slightly negative even at body size. That is unusual and it is carried rather than corrected: it is half of why a paragraph in this language reads as a cafe and not as a bank.