Proof

Best for

• Bakeries, patisseries and cake makers. It's written to Plain English Allergen Labelling, the rules for gluten-free claims, deposits and cancellations, and the card surcharge ban (see "Food: what we build in").
• Anyone who sells food to order or by the batch:
  • pizza and takeaway shops (Forno: pick-up times, allergens on the ticket)
  • butchers and delis (Hartley's: Christmas orders, and sulphites in the sausages)
  • patisseries and wedding cake makers (Sugarbag, the industry template)
• Audiences: regulars ordering their Saturday loaf, people with allergies checking before they buy, and families planning a birthday.

Less suited to: a café with table service (Riso), a restaurant (Mise), or a shop with home delivery across the country.

Personality and voice

Warm and honest, like a baker who tells you what's left, what's in it and when the next tray is out.

• Headlines: "Baked overnight, gone by noon." · "What's coming out." · "Know what's in everything."
• Buttons: "Order ahead" · "Design a cake" · "Order 3 items for Saturday"
• Microcopy:
  • "2 left Saturday"
  • "Contains: wheat, gluten, milk, egg, almond. May be present: hazelnut."
  • "Made without gluten ingredients, baked alongside wheat."
• Words to avoid: "guilt-free", "healthy", "gluten friendly", "99% gluten free", "allergy safe", "famous", "best in town", and reviews or awards you can't show.

Colour

Measured contrast (WCAG).

• Morning bake:
  • ink on paper 15.3:1
  • muted on paper 6.0:1 (5.4:1 on well)
  • crust on paper 6.4:1 (5.8:1 on well, 5.6:1 on its soft fill), white on crust 6.8:1
  • ink on glaze 8.8:1; glaze ink 7.8:1 (7.2:1 on its soft fill)
  • ok 6.0:1, alert 6.1:1
• Night shift:
  • ink 16.2:1
  • muted 7.6:1 (7.0:1 on card)
  • crust 10.1:1 (9.4:1 on card), text on crust 9.4:1, crust on its soft fill 8.5:1
  • glaze 10.1:1 (8.2:1 on its soft fill)
  • ok 11.1:1, alert 9.2:1
• Example dials: Forno tomato, Hartley's green and Sugarbag plum all meet AA, light and dark, and so does each closing card.

Typography

• Display: Corben, 400 and 700. Headlines, item names, totals. A rounded, bakery-sign serif. Its swash ligatures are turned off so words read plainly.
• Body: Cabin, 400–700. Reading, forms, buttons.
• Mono: Cutive Mono, 400. Order tickets, prices, times, allergen chips. It's never faux-bolded.

The signature move: the lit words are iced. They're set in crust brown, with pink icing poured along underneath that slowly drips, the way it runs down the side of a cake.

Layout

• Frame: a 1200px wrap with a max(20px, 4vw) gutter, and an ink top line with a pink label. The header is sticky, with the scored-loaf mark. A sourdough boule sits in a dusting of flour under the hero copy.
• Hero: copy on the left, which stays in view as you scroll down the order on wide screens; order ahead on the right, as a ticket torn along the bottom.
• Then: out of the oven beside its heading, the cake designer full width, the allergen table, questions, and a dark closing card with a cake under a glass dome.

Shape

• Soft: --r-s 10px, --r-m 16px, --r-l 26px.
• Baked goods in CSS: the loaf mark, the boule, the iced bun on the cooling rack in each page head, the cake on its stand and the cake under the dome are drawn in CSS. No images needed.

Motion language

• Icing: the icing pours along under the lit words, then drips.
• Order and cake: totals rise in when they change, and the cake's tiers grow and shrink with the size.
• Elsewhere:
  • The boule slowly proves.
  • Fresh batches glow.
  • The bun drops onto the cooling rack, and the closing cake's icing drips.
  • The mark rises on hover.
  • Sections reveal with a rise.
• Motion switch in the footer ([data-motion-toggle], html.calm, remembered as site-motion, with the default from prefers-reduced-motion). Calm stops all of it.
• Night shift switch ([data-theme-toggle]), remembered as site-theme; theme-color follows.

Imagery and illustration

Your own bakes, ovens and people, shot where they're made. The template draws its bread and cakes in CSS, so nothing is borrowed. No stock "perfect croissant on marble" photos, and no photos of cakes you didn't make.

Signature components

• Order ahead: .order[data-order] (.hero-card in a hero) with script[data-or-data] (key, left as {id: {day: n}} or a number; items not listed are unlimited). It contains:

  • a [data-or-day] segmented control and select[data-or-slot]
  • .or-item rows (data-id, data-price, data-contains, data-may), each with [data-or-step] buttons, output[data-or-n] and [data-or-left]
  • [data-or-lines], [data-or-total], [data-or-contains], button[data-or-go] and [data-or-msg]

  The order is kept for the tab.

• Cake designer: .cake[data-cake] with script[data-ck-data] (lead days, deposit). It contains:

  • [data-ck-size] buttons (data-price, data-tiers, data-serves)
  • flavour radios (data-contains) and icing swatch radios
  • input[data-ck-msg] with [data-ck-count], and extras checkboxes (data-price, data-label)
  • input[data-ck-date], whose minimum is today plus the lead time
  • outputs [data-ck-cake] (--icing, data-tiers), [data-ck-plaque], [data-ck-lines], [data-ck-total], [data-ck-dep] and [data-ck-contains]

• Allergen table: .allergens[data-allergens] with .avoid[data-avoid] toggle buttons, input[data-al-strict], [data-al-count], and a table whose rows carry data-cols and data-may, with td.has and td.may cells. Tree nuts are named in their cell.

• Out of the oven: .ovens[data-ovens] with input[data-bk-now] (minutes since midnight), [data-bk-out], and .bake rows (data-at, data-gone), each with [data-bk-state]. The states are .soon, .next, .fresh (within 30 minutes), .warm and .gone.

• Supporting pieces: .al (an allergen chip), .plan-pair, .card, .facts (--n columns, or .stack), .notice, .side-box, .checks, .faq, .close-card (--close-bg, --close-em).

Multi-page kit

• Phone menu: .menu-btn[aria-controls] opens .site-menu. Escape, an outside click or choosing a link closes it, and Tab stays inside while it's open.
• Current page: aria-current="page", shown as a soft pill.
• Inner pages: .page-head (a cooling rack with an iced bun), .crumbs, a .tag and a smaller .h1.
• Fields: .field, .fields, .field-wide, fieldset.field-set, .check, .form-card, [aria-invalid="true"]; form[data-template].
• Tiles, segmented control, gate, slider, switch, tables: .choices, .seg, [data-gate], input.range, .switch[role=switch], .table.
• Events: order (items, total, day, contains), cake (total, deposit, tiers, ok), allergens (avoiding, ok), ovens (now).
• Helper: Proof.refresh(root), and Proof.last, the latest detail of each event, for scripts that load afterwards.

Food: what we build in

We checked these for Australian food businesses in October 2026:

• Plain English Allergen Labelling:
  • Names: allergens use the required names: wheat, gluten, milk, egg, soy, sesame, peanut, lupin, fish, crustacean, mollusc, sulphites, and each tree nut by name.
  • Summary: the summary starts with "Contains" and is bold.
  • Transition: the transition for stock in trade ended on 25 February 2026.
  • Unpackaged food: sellers must have the information readily available, so the order ticket and the table show it before anyone buys.
• Gluten-free claims: these mean no detectable gluten. They can't sit alongside a "may contain" warning, and "gluten friendly" and "99% gluten free" aren't allowed. A bakery that handles flour says "made without gluten ingredients", never "gluten free".
• Card surcharges: surcharges on Visa, Mastercard and eftpos are banned from 1 October 2026, so prices are the price.
• Deposits and cancellations: the deposit and refund terms are shown before anyone pays, and only cover costs actually incurred.
• Gift cards: these must be valid for at least three years.

These notes are design guidance, not legal advice.

• Understanding Plain English Allergen Labelling (Safe Food Queensland)
• Making a gluten free claim (Coeliac Australia)
• The RBA card surcharge ban (ANZ)

Do and don't

• Do show every allergen before someone buys, in the plain English names.
• Do show what's left, and when the next batch is out.
• Do put the deposit and the cancellation terms next to the price.
• Don't call anything gluten free unless it is, tested, with no traces.
• Don't add a card surcharge, or hide one in the price later.
• Don't put text on the icing in anything but ink.

Accessibility

• AA contrast throughout (measured above), a skip link and a 3px focus ring.
• Order: the day is a segmented control with aria-pressed. Each stepper button is labelled with the item, and the count is announced. "Left" and allergens are text. The total and the "Contains" line are announced.
• Cake: labelled fieldsets, radios and checkboxes. Swatches have their colour names. The cake picture is decoration; everything it shows is in text.
• Allergen table: a captioned table with row and column headers. "Contains" and "may be present" are told apart by shape (filled or ring) and in hidden text. The avoid buttons are toggle buttons, and the count is announced.
• Oven: a labelled slider with the time in text, and states in words.
• Testing: responsive to 360px, and tested with motion on and off, in Morning bake and Night shift.

How to make it yours