The system, not the pages

Everything below is a token or a component. There is no page here on purpose: the page types are the next piece of work and they will be built out of these parts rather than alongside them. Every number on this sheet was measured on Airbnb at a real 390 pixel phone viewport, or measured in Chrome on the typeface itself, and the two places it departs from what was measured are marked where they occur rather than in a footnote.

Type — one family, seven combinations

Airbnb renders four hundred and sixty-three text elements in a single family and ships twenty-four size and weight combinations. Seven of those cover four hundred and eighteen elements, so the tail is cut. One person publishing cannot carry twenty-four, and nobody reading in the sun would notice if they could. What is kept is the discipline rather than the count.

The one decision here that is ours and not Airbnb's

Every surface that prints a clock time, a fare, a date or a count switches on tabular figures. Neither Airbnb nor the live site does this. The reason is not tidiness: with the default figures a one is roughly two thirds the width of a zero, so a column of departure times drifts sideways as you read down it, and a drifting column reads as an estimate rather than a fact.

Colour — the discipline is how little there is

On an Airbnb search page showing thirty-six listings with prices, badges and ratings, the only red on the page is the logo. Prices are ink. Badges are ink. Nothing is coloured in order to sell it. Amber here has one job, and the job is not selling: it marks the thing the reader came for, which on a page about a place is the date we last went and looked.

• paper
  #fdfcf9
• quiet panel
  #f4f1ea
• ink 16.9:1
  #1c1a17
• quiet ink 7.4:1
  #5a544c
• amber 8.9:1
  #ffa700
• amber wash — retired, unused
  #fdf2db

Two text greys, not three. Airbnb ships a third at two point one seven to one, used sixty times on one page, and it fails every standard there is. Our quieter ink is seven point four to one, which is forty per cent better than the grey they use for everything secondary. If something needs to recede further than that, it needs fewer words rather than paler ones.

Shape — five values, each with one job

• 0
  full-bleed photo,
  chrome
• 8
  a card, and a
  photo inside one
• 12
  secondary button,
  map, chip
• pill
  primary
  button
• circle
  a cat

The rule that governs all five is about photographs, and it corrects the study that produced it. A photograph running to the edge of the page is square. A photograph inside a card takes the card’s corner. Walking every picture on the Airbnb listing page found the hero at zero, a photograph inside a card at eight and an avatar at a half, all three resolving the same declaration with a value set per instance. Of the twelve rules that touch it, not one sits inside a media query, so the corner belongs to the component’s job rather than to the width of the screen.

The parts

Buttons — rank is carried by shape

A pill is the one thing to do on this page. A twelve pixel corner is everything else. Both are the same height, so the only difference a reader sees at a glance is the corner, and a corner survives colour blindness, glare and a screenshot forwarded on WhatsApp. Airbnb distinguishes their two ranks exactly this way and it is the single most transferable thing they do.

Check today's times Show all 43 places Get this by email

the amber one is the single control that keeps a reader, and a page has at most one

The facts row

Three rows, three states, and the middle one is the whole business. A fact we have is printed. A fact we do not have keeps its heading and puts the reason where the value would be, because a blank is bad and a named absence is trust. A fact that disagrees with the sign on the door gets both halves and a date, because knowing the posted hours are wrong is the thing nobody else has.

Fare

₹40 each way

Hours

Posted: 10am. Actually opens at 11am. We went and checked this on 3 August 2026

How long

We have not timed this crossing since the monsoon.

The trust card

Airbnb’s version of this holds a star rating, a badge and a review count. We have no crowd and cannot manufacture one, so what is taken is the shelf and not the goods: three cells, thin rules between them, a number above its label, and no colour anywhere in it. What sits on the shelf is a record of our own work rather than anyone’s opinion.

The card

What kind of place, and where. Then the name, in grey. Then the facts. Airbnb puts the proper noun third and demotes it, because a reader looking at a list is deciding rather than recognising, and this is the row order a travel index has needed all along. The live site does the opposite.

The sticky action bar

Shown here in the flow of the page rather than pinned, because a bar fixed to the bottom of a specimen sheet covers the specimen. Airbnb’s is a hundred and twenty-seven pixels tall and permanent, which is fifteen per cent of a phone screen given up on every page they publish. Ours is allowed on a venue page and on the itinerary and nowhere else, because a told place has nothing to pin and a hundred and ninety of our pages are told places.

One decision, and it is yours

Adopting one family for everything retires DM Serif Display, the serif in the brand a reader already sees at the top of every page today. That is the largest brand consequence in this system and it has not been assumed. The same masthead is set both ways below. There is no wrong answer, and the honest argument for each is one sentence.