Four looks, built for the phone
One clear page that a stranger can follow, built for the phone first, in four looks that differ the way four good brands differ: palette, type, photo grading, buttons and details. Same words on all four, your lettering as the wordmark.
Open each page on a laptop and on your phone. A bar at the bottom switches between all six and the study. Nothing on the live site has changed.
Atlas
Indigo and chalk, one bold grotesk, marigold on one button, travel facts as design. Rebuilt phone first: a photo for most of the first screen, two lines, one button, then the departure card. The one you singled out.
Open B
Raspberry
The young one, close to Noma and Nicobar: white, ink, one raspberry accent in pill buttons and price pills (a nod to the colour your old logo pin had), Instrument Sans with a serif italic for one line. The warmest.
Open P
Olive
The palette of this year's hospitality winners (Tengile, Primland): warm white, olive buttons and rules, one bottle green section for The Other Land, Newsreader headlines with Hanken Grotesk. The most grown up.
Open Q
Mono
The fashion house look (Toteme, Design Hotels, The Drake): pure white, ink, no colour but the photographs, Onest with a Garamond italic for one line, square ink buttons. The most precise.
Open RWhat is the same on all six
- One master copy, written for someone who has never heard of Travalong: the curious headline and the priced Sri Lanka departure in the hero; a true split between the two ways to travel (The Other Land on the dark side, Trips made for you on the light side, both on one screen even on a phone); the season as nine portrait posters that scroll sideways; six real trips we drew this year, with photos; your full letter; the five quotes as WhatsApp messages; The First Draft; the closing band. Gone: Why we chose the hotel, How we work, the sample routes, the Recently designed list, every coordinate.
- One page flow and one phone first spec (photo first screen, 52px buttons, 80px between sections, one accent per look, no colour blocks). Headlines never above 52px on laptop or 34 on phones, body 16 to 17.
- One motion budget: a hero entrance, headings and photos settling once, hovers, and exactly one signature moment per page. Phones get the light version.
- Text on photos tested against four stress photos (white sand, bright sky, white temple, pale pool) so the hero still reads when you change the picture.
Verification record
Every page was checked by its builder and then again by me, independently, at 1440 and 390 wide.
| Check | A | B | F | G | H | I |
|---|---|---|---|---|---|---|
| Horizontal overflow, off screen, overlapping or clipped text | 0 | 0 | 0 | 0 | 0 | 0 |
| Text over photos failing contrast on four stress photos | 0 of 22 | 0 of 16 | 0 of 23 | 0 of 22 | 0 of 17 | 0 of 24 |
| Your letter, word for word (10 blocks) | 10 | 10 | 10 | 10 | 10 | 10 |
| Hyphens or dashes in visible text | 0 | 0 | 0 | 0 | 0 | 0 |
| The word luxury, "on a call", seat count in hero | 0 | 0 | 0 | 0 | 0 | 0 |
| Left edges on grid lines only, equal section spacing, three photo shapes | yes | yes | yes | yes | yes | yes |
Round eleven (29 Oct): after a study of how the best brands behave on a phone (30 sites captured at phone size, the design accounts on Instagram, the award winners), four looks on one clear flow; the structural experiments of round ten retired. Found and fixed earlier: a head ordering bug that switched off every animation on real phones, and a smooth scroll rule that hid elements from the checker.