How it was made · site 361 · Wave 41

How the Benchline Kitchens demo was built

Benchline Kitchens is a fictional Osborne Park kitchen renovator built as an industry demonstration for kitchen and cabinetry businesses. The audience is the couple in a 1990s Karrinyup house with a tired laminate kitchen, the Mount Lawley renovator who wants the island, and the Scarborough downsizer who wants it done in three weeks — and the page has one job: a design-consult request with the layout, cabinetry, benchtop and extras already priced, honestly, to the whole dollar.

The Kitchen Planner

The signature is a drawn plan-view kitchen in architect's-plan language: wall lines, a window on the back wall, a door swing, cabinet runs as rectangles with door-split lines every 600 mm and brass handle ticks, the benchtop band along the wall side of each run, a sink under the window, a cooktop, a dashed fridge space. Four LAYOUT chips redraw the plan (galley, L-shape, U-shape, L + island with stools); three CABINETRY chips change the door-face fill (flat matte melamine, a soft-sheen 2-pac gradient, veneer with drawn grain lines); three BENCHTOP chips change the bench band (flat laminate, porcelain with drawn vein lines, natural stone with drawn speckle). The splashback toggle draws a tile-hatch strip along every wall run; the appliance toggle draws the induction hob, a dashed rangehood outline, an oven cell and a dishwasher cell into the runs (off, the cooktop stays as a dashed "your cooktop" placeholder). A soft band of sunlight drifts across the plan from the window on a 16-second loop — alive at rest, parked mid-plan under reduced motion. Dimension lines re-measure with a 260 ms tween and a flash on the label on every change. The price lives on the artwork as a sample-swatch tag clipped to the plan's corner with a brass clip, carrying two lines (the total and "about N weeks from strip-out to handover"), the declaration footnote, and the island-edge note when it applies.

The honesty rules in the numbers

• Every figure is pinned-anchor arithmetic: cabinetry lineal metres × finish rate (melamine $1,100, 2-pac $1,600, veneer $1,900) + benchtop lineal metres × material rate (laminate $300, porcelain $950, natural stone $1,100) + a $3,500 base on every job + $1,400 splashback and $4,800 appliance package when ticked. Layouts pin the metres and the weeks: galley 6/5/2, L-shape 7/6/3, U-shape 9/8/3, L + island 10/9/4. All rates are whole dollars, so every total is integer by construction.
• Cabinetry multiplies the layout's cabinetry metres; benchtop multiplies the layout's benchtop metres; base, splashback and appliances are flat. The one-metre gap between the two counts is the drawn tall pantry tower — cabinetry without a bench over it — which is why the ledger says "incl. 1 lm pantry tower".
• Structural wall removal, moved plumbing or gas points, flooring and painting print no number: "quoted after the measure" as designed price-less ledger lines, with the same declaration as the badge footnote wherever the total appears.
• The island-edge note is derived, not hard-coded: on L + island with laminate, it prints benchtop lm × (porcelain − laminate) = 9 × $650 = +$5,850 — the harness asserts that figure equals the measured delta of chipping laminate → porcelain on that layout. Absent on every other layout and on porcelain or stone. Full template on the badge at ≥641 px, the pinned short form ("islands show their edges — porcelain is +$5,850 here") at ≤640 px; the ledger and the screen-reader mirror always carry the full template.
• No locks, no disables, no forced chips: every chip and toggle is live at every combination, and there is no empty state — a layout, a cabinetry and a benchtop are always selected. No engineered-stone chip: it has been banned nationally since 1 July 2024 and the FAQ says so plainly.
• The cheapest output of each layout equals its services-grid floor: galley $11,600, L-shape $13,000, U-shape $15,800, L + island $17,200.

Worked anchors (all measured from the running page and cross-checked against an independently reimplemented oracle)

Palette — argued from a stone benchtop, walnut veneer and brushed brass

Warm stone showroom light: a soft stone ground, near-black ink, walnut CTAs, a brushed-brass line for handles, dimension lines, rules and the badge's clip. It lives near the warm-neutral default on purpose and is held off it by sans faces, walnut-not-terracotta, and brass lines instead of hairline rules. Every ratio below was measured with WCAG arithmetic from the shipped tokens (not estimated).

Nothing failed, so the two-token remedy was not needed beyond the pre-minted brass-ink pair the spec already carried. The brass-ink on the plan ground (4.87:1) is used only for the dimension labels; the plan's other small labels use the muted token at 5.25:1.

Type

Figtree 600 for display — a warm geometric that reads like a joinery catalogue — carries the h1, the section heads, the swatch-tag total and the display moment: the rest-state total set huge beside the plan, "$26,600 · L-SHAPE · 2-PAC · PORCELAIN · 3 WEEKS", re-derived live from the planner state so the copy can never disagree with the estimate. Source Sans 3 is the workhorse for everything else at 17 px on desktop and never under 16 px on a phone; chip sub-lines and ledger sub-lines are 12 px bold, which is legible at that weight and reserved for secondary detail.

Techniques

• Inline SVG, no libraries. The planner is a 1100 × 620 viewBox built from a static layer (floor boards, 14-unit walls with a window and door gap, a door swing, a scale bar and north arrow), a dynamic layer rebuilt on every change, a sunlight layer, a dimension layer and a key. Patterns do the materials: veneerPat grain lines, porcPat vein curves, stonePat speckle, tilePat running-bond hatch, and a linear gradient for the 2-pac sheen.
• Plan language. Each run is described as a segment with a wall side; the bench band sits on the wall side and a 24-unit door-face band on the room side (the architect's-sketch fold-down that lets the cabinetry finish show in plan), with splits every 600 mm and a brass tick per door. Tall pantry segments draw the crossed-box convention and a rotated label. The drawn metres match the priced metres — 4 m top run + 3 m return = 7 lm on the L-shape, with the 1 lm pantry tower explaining the 6 lm of bench.
• Dual-speed redraw. The first draw staggers elements at 26 ms each (1.5 s cap); every later change at 11 ms (520 ms cap) via a first-draw flag, and the probe's settled flag flips after the cap. Dimension lines tween over 260 ms with the label flashed on a nested group (SVG attributes position the line; CSS only animates opacity on a separate text node — never the same property on the same element).
• Token-invalidated loop. Every chip and toggle handler bumps __kitchens.token before swapping state; the settle timer and the dimension tween check the token, so a rapid-fire burst (galley → U → island → L in one evaluate) lands on the L values once. The sunlight band is a polygon whose points and opacity are set in a rAF loop with dt = min(max(now − last, 0)/1000, .05), paused on document.hidden, and simply parked at its mid-drift pose when prefers-reduced-motion is set — checked with matchMedia in JS and a media query in CSS.
• Responsive plan. At ≤640 px the SVG's viewBox crops to the room (34 30 670 570) so the drawing fills a phone, the key is hidden, and the swatch tag docks beneath the plan inside the card; at ≥641 px it sits on the scene, with a tighter 196 px variant from 641–1100 px so it clears the room wall at tablet-landscape widths.
• State probe. window.__kitchens exposes layout, cabinetry, benchtop, toggles, total, weeks, metres, note figure, badge text, the dimension targets and settled; the harness polls it instead of waiting on seconds.

Conversion decisions

• Above the fold at 375 px: the wordmark, the one-line promise naming the trade and the area, "Book a design consult" and "Call (08) 9000 0361", and three trust marks all land in the first screen; the planner follows immediately.
• CTA placement: a design consult is the real conversion for a kitchen renovator — nobody buys a kitchen from a web form — so the consult is the primary CTA in the masthead, the hero, under the planner and in the sticky bar, with the phone beside it everywhere. The planner's own CTA reads "Book a design consult on this plan", and the planner pre-fills the form's notes with the layout, finishes, extras, estimate and weeks, so the lead arrives warm and the conversation starts from a number.
• Form fields: name, phone, suburb (we price metro north and coast flat, so suburb decides the yes/no), the age of the house as a select (pre-1990 / 1990s–2000s / newer — it changes what we check at the measure: asbestos-era sheeting, old wiring, slab versus boards), and the pre-filled notes. Validation is front-end only with visible focus rings; the confirmation panel is hidden on load and on an empty submit, and appears only after a valid filled submit with "we'd call you back within one business day" and the demo disclosure — no fake network round-trip.
• Price anchors: the services grid quotes the four layout floors exactly equal to the planner's cheapest outputs, the per-metre finish rates, and the flat extras; structural, services and floor changes are declared "quoted after the measure" on the grid, in the ledger, on the badge and in the FAQ so the page never argues with itself.

Local SEO we'd implement for the real business

{
  "@context": "https://schema.org",
  "@type": "HomeAndConstructionBusiness",
  "name": "Benchline Kitchens",
  "image": "https://example.com.au/showroom.jpg",
  "url": "https://example.com.au/",
  "telephone": "+61 8 9000 0361",
  "priceRange": "$11,600 – $40,000+",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Unit 0 / 00 Hutton Street",
    "addressLocality": "Osborne Park",
    "addressRegion": "WA",
    "postalCode": "6017",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.90, "longitude": 115.81 },
  "areaServed": ["Osborne Park", "Karrinyup", "Scarborough", "Hillarys", "Balcatta",
                 "Dianella", "Mount Lawley", "Wembley", "Subiaco"],
  "openingHoursSpecification": [
    { "@type": "OpeningHoursSpecification", "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"], "opens": "07:30", "closes": "16:30" }
  ],
  "hasOfferCatalog": {
    "@type": "OfferCatalog",
    "name": "Kitchen renovations",
    "itemListElement": [
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "L-shape kitchen renovation" }, "priceSpecification": { "@type": "PriceSpecification", "minPrice": 13000, "priceCurrency": "AUD" } },
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "L + island kitchen renovation" }, "priceSpecification": { "@type": "PriceSpecification", "minPrice": 17200, "priceCurrency": "AUD" } }
    ]
  },
  "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "86" },
  "review": [
    {
      "@type": "Review",
      "author": { "@type": "Person", "name": "Verified customer" },
      "datePublished": "2026-06-14",
      "reviewRating": { "@type": "Rating", "ratingValue": "5" },
      "reviewBody": "Galley kitchen stripped and rebuilt in eleven days — trades turned up when they said they would."
    }
  ]
}

What changes for the real client

• Their numbers, their brand. The planner's rates and layout metres become the client's actual schedule of rates; the plan drawing keeps its language but takes their door profiles, colours and logo; the photos of finished kitchens replace nothing structural — the drawn plan stays as the interactive centrepiece and their photography sits in the reviews and services sections.
• Quoting and scheduling: the consult request posts into Buildxact as a lead with the planner's selections attached for the formal estimate; Tradify schedules the measure, the strip-out and the trades, and sends the on-the-way texts; Xero carries the invoices and progress claims.
• Design and samples: a 3D kitchen designer export (the kind we'd embed) replaces the 3D render promise with a real walk-through per quote; Polytec and Laminex sample ordering is wired as supplier feeds so the cabinetry and benchtop chips show the client's real colour ranges and order samples to the customer's door.
• Reviews and search: a verified Google reviews feed replaces the three demo cards; the would-ship schema above goes live; suburb sections and a Google Business Profile are set up for the inner north and coast.

Iteration log

Benchline Kitchens is a fictional business — a kitchen renovation industry demonstration designed & built by Sapience Analytics, part of the Generative Assets collection. Back to the site · Index.