A white bordered "board" (surface fill, 3 px border, hard shadow) spans columns 1–7 over two grid rows and holds: eyebrow (bold, uppercase), headline at step 6 heaviest weight (max ~12 characters per line), lead subhead, then a row with a medium primary button (arrow) and a medium secondary button. Columns 8–12 hold a 4:5 illustration in an offset-shadow frame. A sticker label (accent2 fill, bordered, rotated −5°) sits in 8–11 on the second row, overlapping the image's foot. A filled accent star (lg, rotated 14°) pins the image's top-right corner in 11–12 and hides at phone width. Phone: board, image, sticker.

The section background is the yellow `surfaceAlt` field. One large bordered window (surface fill, hard shadow) fills the grid: a title bar with a bottom border holds three small filled circles (accent, accent2, bg — like window buttons) on the left and the eyebrow in mono on the right. Inside the window the headline runs 1–8 at step 7, heaviest weight; the action column 9–12 is bottom-aligned with the subhead, a medium primary button and a small muted meta line. Phone: title bar stays one row, then headline, then actions.

Two slabs share borders with no gap. Slab one (1–8) is accent-filled with onAccent text: eyebrow, headline at step 7 heaviest weight, and a large secondary button, all bottom-aligned. Slab two (9–12) is the yellow `surfaceAlt` fill: a big accent2 star (rotated −10°, hidden on phone), the lead subhead and a mono meta line, spread top to bottom. Under both, a full-bleed marquee belt in accent2, directly against the slabs' bottom border, carries the tagline in h3 weight. The hero is full-bleed.

A filled accent circle (xl) sits in 9–12 behind the end of the headline. The headline spans 1–12 at step 8, heaviest weight, uppercase, tight leading, max ~16 characters per line. Below it a row of 3–5 small bordered tag chips (bold label text, surface fill, small hard shadow). Then the subhead (lead) on 1–6 and two large buttons (primary + ghost) right-aligned on 8–12. Phone: the circle hides, chips scroll sideways.

One bordered white bar with the hard shadow and the radius token, spaced away from the page edges. Boxed logo on the left, links as bordered pills in the middle (current page filled accent), a small primary button on the right. Phone: links scroll horizontally inside the bar.

Three bordered tabs that share their borders: an accent tab on 1–3 with the wordmark in onAccent, a white tab on 4–10 with underlined links, and a yellow tab on 11–12 with a small ghost button and arrow. Phone: the CTA tab hides, the link tab scrolls horizontally.

Header row: the h2 (step 4, heaviest weight) left and a tilted accent2 sticker label right. Then 4–6 white bordered cards two per row across the full grid, each with a small filled accent square and a mono number on one line, an h3 at the heaviest weight, and a paragraph (max 48 ch). Every card has the hard shadow. Never three per row.

Columns 1–5: eyebrow, h2 (step 4), a short paragraph and a primary button. Columns 6–12: 4–7 separate bordered rows with gaps between them; each row holds a filled accent2 square (the checkbox), a bold h4 title with a small line under it, and a mono tag on the right (hidden on phone). Works for menus, feature lists and agendas.

Section on the yellow `surfaceAlt` field. Title (h2, step 4) on 1–7, a short note bottom-aligned on 9–12. Then 3–4 white bordered tiles in one row across the full grid, each with a step-6 number at the heaviest weight and an uppercase bold label. Tiles carry the hard shadow. Phone: tiles stack.

Title (h2) on 1–7 and a mono label on 10–12. A 4:5 image on 1–5 spans two rows; a 16:9 image fills 6–12 on the first row; a square image sits on 9–12 in the second row with a tilted accent caption sticker on 6–8 beside it. Every image is framed (3 px border, radius, offset shadow). Phone: images stack in order, the sticker stays under the wide image.

Header row: h2 and a filled accent star. Then 3–6 quotes as a three-column masonry wall of white bordered boxes at natural height; each box holds the quote at step 1 (weight 400), then a row with a small accent2 circle, the bold name and a small role. No stars-rating rows.

A tilted accent2 sticker and the h2. Plans are wide bordered strips stacked with gaps; inside each strip a grid: plan name (h3) 1–3, price 4–6 at step 5 heaviest weight, inclusions 7–9, a small primary button 10–12. The recommended plan's strip is accent-filled with onAccent text; all others are white.

One accent-filled bordered banner with the hard shadow. The headline (step 6, heaviest weight, onAccent) sits on 1–8 rotated −2°; the body and a medium secondary button are bottom-aligned on 9–12. A yellow star (lg, rotated 20°) sits at the top of 7–9, between the headline's end and the body (it may break the banner's top edge), and hides on phone. Use once per page.

Columns 1–4: a tilted accent sticker label and the h2. Columns 5–12: 4–8 separate bordered boxes with gaps; each has the question (h4, heaviest weight) and a cross toggle on one row, the answer below. The toggle reads × while open (the plus rotated 45°) and an upright plus when closed. No chevrons, no ruled list.

A full-bleed belt: 4 px rule, an accent2 band with client or partner names running sideways in h3 weight separated by ★, 4 px rule. No logo images. The belt pauses under `prefers-reduced-motion`.

Columns 1–5: h2 at step 5, a paragraph, then a yellow bordered details box holding the address (bold), email and hours (mono). Columns 7–12: a white bordered card with the hard shadow holding the form; fields have 3 px borders and the radius, labels bold above, the submit button primary with the hard shadow.

Header row: h2 left, secondary button with arrow right. Then 3–6 posts in three columns: each a bordered card with a 16:9 illustration flush to its top edge (border under the image), then an accent2 tag sticker, the h4 title and one small line. Cards carry the hard shadow.

Eyebrow and h2, then 4–8 yellow bordered badges four per row; each holds a square portrait in a bordered frame, the name (h4, heaviest weight) and the role in mono. No circles, no social icons.

For about and article pages. The h1 (step 6, heaviest weight) spans 1–8; a bordered accent2 callout box on 9–12, bottom-aligned, holds the statement in bold lead type rotated 2°. Body copy then runs in two columns (1–6 and 7–12), max 58 ch each.

One yellow bordered box with the hard shadow. Columns 1–5: boxed logo, a one-line tagline, an inline email form (bordered field + primary button on one row). Columns 7–9: links stacked and underlined. Columns 10–12: email in bold and the legal line, bottom-aligned.

One row with pill links on the left and the legal line on the right, then the site name across the full width at step 8, heaviest weight, rotated −2° — the page's last, loudest word.