Date in figures

A save-the-date section where the date itself is the headline. A dark slab carries a small label and heading, then the day, month and year as three equal figures at monumental size, each with a small word beneath it, then one line of place and an Add to your calendar button. It sits in the stats section beside stat-monument (one figure at scale), stat-row (metrics on a baseline), events-date-tiles (many calendar leaves) and specials-today-band (today as a text band): none splits one date into its three parts.

Three flex cells that never wrap, each selfStretch: fill, so the figures share the width equally at every size, 19, 06 and 27, with a hairline down the left edge of the second and third cells. The cells carry no padding of their own (the padding is on the group inside), so the rules run the full height of the row. On a phone the figures stay three across at about 72px, with their words at 14px.

1. The figures and their words.
2. The calendar link. It is a Google Calendar template URL with the date, time and place in it; edit its text, dates and location, or upload an .ics file to your Media Library and link to that instead.
3. The place line.

• Typeface. The base states no font family.
• Palette. An inverted slab: your contrast colour as the ground, your base colour for every word and figure, currentColor rules. Labels on the slab start at base, never a ground role. The button inverts back to a base fill with contrast type, so it still reads as the lit thing.

• The figures. clamp(4.5rem, 1rem + 14vw, 12rem): about 72px on a phone, 192px on a laptop. Off the ladder, because their size is the composition.
• The heading. The x-large rung, italic.

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, buttons, button. No countdown, no script.