A stage of confetti. Row 1: a triangle (accent, rotated 15°) on 1–2, the eyebrow as a sticker — yellow-ish surfaceAlt fill, 3 px black outline, rotated −4° — on 3–8, and a ring (accent2) on 11–12. Row 2: the headline on 2–11 at step 7, heaviest weight, tight. Row 3: a cross (heading colour) on 1, and on 3–8 an outlined box filled with accent2 holding the lead (onAccent2) and a primary button; a big half-circle (accent, rotated 90°) on 10–12 spanning rows 3–4. Row 4: a squiggle on 4–9. All shapes carry a 3 px black outline. At phone width every shape except the squiggle hides.

Two panels with no gap, both with 3 px black outlines. Left (1–6): a pattern fill made from the palette — black dots on accent, accent2 stripes and black squiggles — filling the full hero height. Right (7–12): surfaceAlt fill with the eyebrow, the headline at step 6 heaviest weight, the lead, a primary and a secondary button, and a star (accent) at the bottom right. At phone width the pattern becomes a 160 px band above the panel.

A giant circle in accent with a 3 px outline on 8–12 across rows 1–2. The headline on 1–10, row 1, at step 8, heaviest weight, uppercase, rotated −6° so it crosses the circle. Row 2: the lead and a primary button on 2–7, and a triangle in accent2 rotated 20° on 10–12. At phone width the circle and triangle hide and the headline keeps a −3° tilt at step 5.

Row 1: a tilted label sticker (surfaceAlt, rotated 6°) on 2–5. Rows 1–3: a 4:5 illustration with a 3 px outline and a hard black offset shadow on 6–11. Row 2: an accent panel with a 3 px outline on 1–6 holding the headline at step 6, heaviest weight, in onAccent — it overlaps the image by one column. Row 3: a page-colour panel with an outline on 3–8 holding the lead and a primary button, and a star on 11–12. At phone width (source order): label, image, headline panel, lead panel; the star hides.

One row, space-between: a 20 px triangle in accent next to the wordmark in an outlined box (surfaceAlt fill); the page links as pills with 3 px black outlines, the current one filled with accent2; a small primary button. At phone width the links scroll horizontally on their own line.

A monogram (outlined circle with the initials) and the wordmark on 1–4; underlined links (3 px underline in accent2) on 6–12. Under them, a full-width zig-zag strip (a squiggle shape, 12 px tall, accent with black outline) as the bottom edge. At phone width the links scroll horizontally.

A section title (h2, heaviest weight) rotated −2° on 1–7 with a star on 11–12. Then four to six cards two per row with 32 px gaps. Each card: 3 px black outline, hard black offset shadow (6 px), alternating fills (surface / surfaceAlt) and alternating tilt (−2° / 2°); inside, a 40 px shape (cycling triangle, circle, cross, half-circle in accent/accent2), the title (h3) and a short paragraph. At phone width one per row, tilt reduced to ±1°.

Title (h2, heaviest weight) first. Then three to six steps with 48 px between them, each on the same ladder: the numeral at step 7, heaviest weight, accent with a 3 px black text outline, on 1–3; an outlined box on 4–9 with the title (h3) and paragraph, its fill cycling surfaceAlt, accent, accent2 (text in the matching on-colour); and a small outlined shape on 11–12 cycling triangle, circle, square, tilted a few degrees. At phone width the numeral sits above its box, left-aligned, and the shapes hide.

Title (h2) on 1–6 with a star (accent) on 11–12 and a squiggle under the title. Then six to nine 4:5 images in a 3-column masonry. Each image: 3 px black outline, 6 px hard black offset shadow, and a small caption sticker under it rotated −3°. At phone width the images run in a horizontal swipe row (about 1.25 visible) and the star hides.

An outlined bubble on the surface colour on 2–9 holding the quote at step 4 (quote role, no explicit weight). A small triangle (heading colour, rotated 180°) under its lower-left edge on column 3 forms the tail. Under the tail on 3–9: the author (h4) and role (small). A large circle in accent2 with a black outline on 10–12 across all rows. At phone width the circle hides.

Two to four stickers in a row with 32 px gaps. Each sticker: 3 px black outline, hard offset shadow, alternating fills (surfaceAlt, then accent, then accent2 — use the matching on-colour for text) and alternating tilt; inside, the number at step 6 heaviest weight and a small uppercase label. At phone width the stickers stack, one per row.

Section background accent, bleeding edge to edge, with a black 3 px rule top and bottom. A big star in surfaceAlt with a black outline on 1–3, rotated 12°. On 4–10: the headline in onAccent at step 6, heaviest weight, rotated −2°, and an outlined secondary button. A cross in the heading colour on 11–12. At phone width the star shrinks to 80 px and the cross hides.

On 1–5: the title (h2, heaviest weight) rotated −3° and a squiggle (accent2) beneath. On 6–12: four to eight outlined boxes on the surface colour, 24 px apart, each with the question (h4, heaviest weight) and the answer. All open, no chevrons. At phone width the title block sits above.

A title (h2), then two or three tickets in one row. Each ticket: 3 px outline, hard offset shadow, surface fill, a slight tilt (−2°, 1°, −1°); a sticker label rotated −3° on surfaceAlt, the plan name (h3), the price at step 6 heaviest weight, inclusions, and a primary button. The recommended ticket is filled with accent2 (text in onAccent2) and sits 16 px higher. At phone width one per row, tilts kept.

Title (h2) on 1–8. Then team members four per row: a circle-cropped portrait (illustrated or duotone) with a 3 px outline, a coloured shape offset behind it (cycling triangle/square/half-circle and fills), then the name (h4, heaviest weight) and role (small) centred under it. At phone width two per row.

For cafés, bars and bakeries. One board on surfaceAlt with a 3 px outline and hard shadow on 2–11: the title (h2) rotated −2°, then five to twelve dishes separated by dashed rules, each a row with the name (h4, heaviest weight) and a one-line description on the left and the price at step 2, heaviest weight, on the right; a squiggle in accent at the bottom. At phone width the board is full width.

A full-width squiggle (accent) opens the section. Row 1: the title (h2, heaviest weight) on 1–6 and a paragraph on 7–12. Row 2: a circle-cropped illustration with a 3 px outline on 1–5, the second paragraph on 6–11, and a small ring (accent2) on 12. At phone width the ring hides.

A title (h2), then posts in a 2-column masonry. Each post: an outlined box on the surface colour with a hard shadow; a category sticker in accent rotated −3° (onAccent text), the title (h3, heaviest weight), a two-line summary and the date in small type. At phone width one per row.

On 1–7: a postcard — surface fill, 3 px outline, hard shadow — with the title (h2) and the form (name, email, message) whose fields have 3 px outlines and the token radius. On 8–12: a large ring in accent2, then the address, email (heaviest weight), phone and opening hours. At phone width the ring hides.

A full-width squiggle in accent opens the footer. Then on one row: the wordmark on 1–4 with a small triangle beside it, outlined pill links on 5–9, the legal line in small type on 10–12. A circle and a cross float in the side margins on desktop only.

Section background accent2 with a 3 px black top rule and a row of small confetti shapes (circle, triangle, cross, star) along the top edge. On 1–6: the tagline (h3, onAccent2) and an inline newsletter form; links stacked on 8–9 in onAccent2; address and legal on 10–12 in onAccent2. At phone width the confetti row keeps four shapes and the zones stack.