Timeline order of service

The order of a wedding day, made as the printed order of service the guests pick up from their chairs. A cover page and a running page sit side by side inside one hairline, like a booklet opened flat. It sits in the timeline section beside about-day-in-hours (clock times at display size down a ruled, left-aligned column beside photos: here the time is small and the event large, centred, on a page), steps-ledger (column heads, printed schedule rows) and timeline-rail and timeline-axis (a rail).

The fold is a change of ground, not a rule. The two pages are the two cells of a grid with no gap, each painting its own ground, so where they meet reads as the spine of a booklet. On a phone the grid stacks and the fold becomes a horizontal seam, which still reads as a page turn. The running page centres each time as a small tracked label over the event in a larger line, with a short centred rule between entries, and the ceremony carries the only line of instruction.

1. The times and events. Duplicate a time group to add one; the first group has no rule above it.
2. The names, date and place on the cover.
3. The photograph.

• Typeface. The base states no font family.
• Palette. The cover page is inverted, your contrast colour with base type; the running page is your base ground with contrast type. The hairline round the booklet and the short rules are currentColor. Labels on the cover page start at base; on the running page they are on the label role.

• The names. clamp(2.75rem, 1.8rem + 3.6vw, 4.5rem), off the ladder: the cover page's size is its point.
• The events. The large rung, as card titles.
• The booklet. 1000px wide, the grid's minimumColumnWidth: 23rem, so two pages from a tablet up (never three) and stacked on a phone.

Part of the Vow Pattern Set, a couple's whole wedding website in one design language: wisteria white #f7f5fb ground, midnight #1f2240 ink, dusk #555a78 muted ink, card white #ffffff on a wisteria hairline #d9d3e6, peony #a8365a labels on light grounds and pale peony #f2b8c9 on the midnight slab. Names and headings are Didot at 400 with an italic ampersand; body, labels and buttons are Gill Sans. Buttons are square midnight rectangles or underlined peony links; cards and photographs are square. 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, image, separator.
• The example photograph is from the WordPress.org Photo Directory (CC0).