Design & engineering guide · Industry demonstration

How Boronia & Bay was built

The concept

Boronia & Bay is a fictional Subiaco flower studio, named for brown boronia — the WA winter flower whose scent sells out every July. The audience is someone who needs flowers somewhere today: birthday, sympathy, anniversary, apology. The page has one job — an order enquiry, with the 1 pm same-day cutoff doing the urgency work honestly — and one signature, the Bouquet Bench, a procedural SVG bouquet that composes itself stem by stem while the ticket beside it stays as disciplined as an invoice.

Palette — botanical warmth against studio cream

The ink/line split rule applies throughout: blush and kraft carry marks and blooms; text sits in stem-brown (or green-ink for links) at ≥4.5:1. The blush CTA carries stem-brown ink text at ≈4.8:1 rather than white at ≈2.8:1.

Type

Gloock (display) has the high-contrast, hand-lettered elegance of a flower-shop window — it carries the wordmark, headings, the ticket total, and the typographic bravery moment: the occasion word set huge in the bench, crossfading as you change occasion. Karla does the working text; the order ticket uses its tabular figures so every price lines up like an invoice.

The signature — the Bouquet Bench

The bouquet is pure procedural SVG, deterministic per selection. A seed hashed from size + palette + occasion feeds a mulberry32 PRNG, so the same choices always compose the same bouquet, and changing the occasion genuinely changes the stems — never the price, which the ticket states outright.

• Composition: bloom tips are placed by golden-angle phyllotaxis over a dome ellipse (posy 7 stems, classic 12, abundant 18), jittered, then sorted back-to-front by y so heads overlap naturally. A collar ring of greenery sprigs fills the silhouette edge, and each palette carries its own bloom recipes — boronia bell clusters, waxflower, billy buttons and gum foliage for WA natives; layered roses, stock spikes and sage for pastels; gerberas, tulips and hot-pink roses for brights.
• Draw-in: stems draw with stroke-dash reveals, kept visibility:hidden until drawn length > 0 (the W15 round-cap dot), leaves fade in along the path via getPointAtLength, and blooms pop at the tips with an ease-out-back scale on a nested group — the outer group holds the SVG transform attribute, the inner one animates, so CSS never discards attribute state (W16/W17).
• Dual-speed redraw: the first compose takes the full ~2.3 s entrance choreography; every subsequent change replays snappy, capped around 0.6 s via a firstDraw flag (W21).
• Race safety: every control handler bumps the compose token before touching state, so a mid-compose swap abandons the in-flight rAF timeline cleanly (W25) — verified with a nine-click rapid-fire drive in one evaluate.
• Rest state: classic natives, fully composed and gently breathing (a CSS sway on a nested group, never below full opacity), ticket showing $95 + $15 = $110, the 1 pm chip visible — and the bench card shares the 1200 × 750 thumbnail frame with the hero. Reduced motion renders the settled, fully-composed frame immediately.

The honest pricing model

Every figure is pinned anchor arithmetic, cross-checked in the verification harness against an independently reimplemented oracle across all 24 size × add-on combinations.

• Occasion and palette are visual-only — the ticket carries the statement "the occasion changes the stems, not the price" (every occasion and palette was driven in the harness and asserted to hold $95/$15/$110 at rest).
• Grid floor: the services grid's "from $65" equals the bench's cheapest bouquet.
• Subscription pinned flat at $55/week: a standing-order rate below the one-off posy — one planned Thursday run, one rate, the drive built in. The flatness is the deliberate pricing statement, shipped on-card.
• Designed price-less lines: events & weddings are "quoted on consult" and sympathy work is "coordinated with the venue" — deliberate states, not missing data.

Conversion decisions

• Above the fold at 375 px: wordmark + phone in the masthead, the h1 promise ("Same-day flowers across Perth — order by 1 pm"), blush order CTA, call link with hours, and three trust chips — all inside the first viewport.
• The bench pre-fills the form: "Order this bouquet" writes the full selection — size, palette, add-ons, total, card copy — into the enquiry notes and sets the occasion select, turning a play interaction into a warm lead.
• The free-delivery hint sells honestly: below $120 the ticket says exactly how many dollars away free delivery is; at the flip it strikes the $15.
• Mobile sticky bar: call + order, 56 px targets, on every phone-width view.
• Form: name, phone, delivery suburb, delivery date, occasion — the fields a florist actually needs for a callback; v-flag-valid phone pattern; graceful local confirmation ("Thanks — your order enquiry is received… we'd call you back within the hour") that names the suburb and declares the demo honestly.

Local SEO we'd implement for the real business

This demonstration page deliberately ships only WebPage schema naming it a demonstration — fictional structured data in a real index would be dishonest markup. For a real florist we would ship:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Florist",
  "name": "Boronia & Bay",
  "telephone": "+61-8-XXXX-XXXX",
  "priceRange": "$65–$140",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "…",
    "addressLocality": "Subiaco",
    "addressRegion": "WA",
    "postalCode": "6008",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.95, "longitude": 115.82 },
  "openingHoursSpecification": [
    { "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
      "opens": "08:00", "closes": "17:00" },
    { "@type": "OpeningHoursSpecification",
      "dayOfWeek": "Saturday", "opens": "08:00", "closes": "14:00" }
  ],
  "areaServed": { "@type": "City", "name": "Perth" },
  "aggregateRating": { "@type": "AggregateRating",
    "ratingValue": "4.9", "reviewCount": "180" },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "…" },
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "reviewBody": "…"
  }]
}
</script>

— fed by the real Google Business Profile and a live reviews feed, never hand-written.

What would change for the real client

Their bouquet photography (or this procedural art kept as a brand system), their reviews feed, and real commerce: a florist POS/e-commerce platform such as Floranext, Lovingly or Shopify + Square for orders and payment; relay membership (Interflora/Petals) if they take network orders; delivery-run routing via Locate2u or Zoom2u with SMS "it's at the door" notifications; an address/suburb autocomplete on the form; and a live cutoff clock wired to the studio's actual run schedule — the demo keeps the 1 pm rule static rather than faking a countdown.

Iteration log

Techniques

• Procedural SVG illustration throughout — bouquet, metro delivery map (Subiaco starred), service icons, favicon. No raster images anywhere.
• Deterministic seeded composition (FNV-hash → mulberry32) per selection.
• Stroke-dash draw-ins, path-following foliage, ease-out-back bloom pops, token-based animation invalidation, dual-speed redraw.
• State probe window.__florist (selection, subtotal, delivery, total, settled) so QA gates on state, never on seconds.
• Headless verification: puppeteer harness with an independently reimplemented pricing oracle, 24-combination sweep, exact-threshold assert at $120, hard-reload empty-submit, filled-submit lexicon check, reduced-motion and 375 px probes, screenshot review each pass.