Contact travel routes

A getting-here section for a place guests travel to once: a wedding, a retreat, a venue in the country. The postcode is what everyone types into a car or a taxi app, so it is the headline, and each route below is timed from where people start. It sits in the contact section beside cta-call-now (the phone number is the headline, a closing ask), contact-getting-here (an address card on the room) and service-areas-columns (towns served).

On an inverted slab, the postcode at display size, then three ruled columns, each an origin as a label (From London, By car, From the airport), its journey time as a large figure and three numbered steps. A strip of practical notes follows (taxis, overnight parking, the ride home) and one maps link. On a phone the routes stack and each figure is about 40px.

1. The postcode and the address line.
2. The three routes: the origin, the time and the steps.
3. The taxi number (01632 960 488 is a reserved example number) and the parking and ride-home notes.
4. The maps link. It searches OpenStreetMap for the postcode; paste your own map link instead if you have a pin for the gate.

• Typeface. The base states no font family.
• Palette. An inversion: your contrast ground with base text, labels and rules, so it reads as a slab in any theme.
• Buttons. One underlined text link in the text colour.

• The postcode. A display size off the ladder, about 72px on a phone and 11rem from 1280 up. It has no spaces to wrap on beyond the one in the middle, so keep it a postcode or a short place name.
• The routes. A grid of 20rem minimum columns: three across on a wide screen, two on a tablet, one on a phone.

Part of the Vow Pattern Set, a couple's whole wedding website in one design language: wisteria white ground #f7f5fb, a wisteria band #ebe6f3, card white #ffffff and a midnight slab #1f2240; midnight ink, dusk #555a78 for secondary copy, peony #a8365a labels on light grounds and pale peony #f2b8c9 on the slab, wisteria hairlines #d9d3e6. Headings and names are Didot at 400 (Bodoni MT, Hoefler Text, Baskerville, Times New Roman, serif), body, labels and buttons Gill Sans (Seravek, Trebuchet MS, sans-serif). Cards and buttons are square; the primary button is a filled midnight rectangle, the secondary an underlined peony link. Every text pair is measured on the ground it is painted on. Take the base for your theme's colours, or the look's Use my theme chip.

• Core blocks only: group, heading, paragraph, list, buttons, button. No plugin, nothing to keep updated.