Generative Assets · Industry Demos · how it was made

How the Northline Building Design demo was built

Northline Building Design is a fictional Joondalup building design practice — concept design and 3D views, working drawings, council and engineering coordination for new homes, extensions, second storeys and renovations across Perth's northern corridor. The page exists for one reader: the owner with a block or a house and a brief, who wants the design fee priced honestly before they book a consult. Its single job is a design-consult request with the project, floor area and scope already attached.

The Design Planner

The signature element is a drawn SVG elevation on a drafting sheet — white sheet, thin ultramarine border, tan ruled margin with fold marks, a faint drafting grid, a legend, an honest "NTS" notes block and the sheet note "concept elevation · not for construction". The project chip redraws the elevation; every other control redraws a detail and reprices the fee from the pinned anchors:

• Project chip — new home draws a full single-storey elevation in ultramarine with a skillion roof falling to the right, a porch post and slab, a front door and a garage door; extension (the rest scene) draws an existing hipped-roof house in graphite with the new rear wing in ultramarine off its eave — a picture window, a sliding door; second storey draws the graphite ground floor with its old roof dashed for removal and the upper level rising in ultramarine with a new hip roof and a balcony balustrade; renovation drafting draws a section — graphite outer walls and roof, an existing internal wall solid, a demolished wall dashed and crossed, the new wall and new kitchen joinery in ultramarine.
• Floor area 40–400 m², steps of 20 — the drawn width scales with the square root of the area between the chip's floor and 400 m² (400 → 700 scene units), so every value is drawable and the badge carries the honest m². A chip whose floor is above the current area clamps the area UP silently (the stepper label reads "min 120 m²"); a lower floor leaves the area where it is — there is no restore memory on the area.
• Working drawings adds two dimension strings below the ground line, a hatched section cut through a new wall and W1/W2 window tags on the new windows. The dimension strings are illustrative proportions (overall ≈ 1.4 × √area, in millimetres) and the page says so beside the ledger — the m² is what's priced.
• Council & engineering coordination draws a rotated LODGED stamp in the sheet's upper-right corner — never "approved", because a designer lodges and a council decides. The toggle requires working drawings: with them off it is disabled with the reason "needs working drawings" and forced off for pricing; turning working drawings off while council is on forces council off; turning them back on restores council's remembered state. The memory is cleared only by an explicit council change, which is impossible while the control is disabled, so it survives — exactly as pinned.
• NatHERS energy assessment draws a dashed tan sun-path arc over the roof with the winter sun, its rays and E/W marks. Live at every combination.
• The plotter pen. A slow loop traces the ultramarine outline of the new work with a pen cursor (dash-draw, butt caps so no stray dot at zero length), holds with the pen lifted, and restarts; a ghost of the same outline at 0.4 opacity sits underneath so the signature is never invisible at any capture instant. Reduced motion renders the outline complete with the pen parked at the last corner.
• The title block is the price badge. Two lines always — the total and the timeline line ("about 6 weeks to council-ready drawings" with working drawings on; "about 3 weeks to concept and 3D views" without) — plus the footnote "+ engineer's fees and council lodgement, quoted by the engineer and the council" whenever council is on, and absent when it is off. It sits on the sheet's lower-right at ≥641 px (never above the dimension strings — at narrow widths it hangs below the sheet and the container grows) and docks directly beneath the sheet at ≤640 px. The concept pinned no short form for the footnote or the timeline, so all three surfaces — badge, ledger and the screen-reader mirror — carry the full strings at every width.

Pinned anchors (GST inclusive design fees)

Council & engineering coordination is +$1,200 flat and requires working drawings; the NatHERS energy assessment is +$450 flat at every combination. The concept per-m² and the working-drawings per-m² multiply the floor area; the bases, council and energy are flat. Structural engineering, surveys, soil tests and council lodgement fees carry no number anywhere — the footnote wherever the total prints, the declaration line in the ledger and mirror, the services note and the FAQ. There is no empty state: a project chip is always selected and the area has a floor. Every rate is a whole dollar and every area a whole multiple of 20, so no total ever needs rounding — totals display to the whole dollar with thousands separators.

Worked examples measured from the running page

All twelve pinned worked figures, the four cheapest-output floors (equal to the services grid), the display-line variants, the lock drive by click, forty random control vectors and two rapid-fire bursts were cross-checked against an oracle reimplemented from the anchors in the verification harness, not from the page's own code — 603 assertions in the final pass (the site's 584 plus 19 on this guide), all green.

Palette — argued from drafting paper, a graphite pencil, ultramarine ink and tan trace

Warm-white paper ground, graphite body ink, ultramarine for CTAs, links and the drawn lines, tan trace for fills only. Contrast ratios below were computed with WCAG arithmetic from the shipped tokens in Pass 1 (role, hex and ratio from the same script row).

Every spec figure measured within 0.1 of its computed hypothesis (graphite 13.05 vs 13.1, ultramarine CTA 7.24 vs 7.2, link 6.75 vs 6.8, tan-ink 5.05 vs 5.1). One derived pair was held back: tan-ink on the tan tint measures 4.51:1, so tan-coloured small copy sits only on paper or white, never on the tint. Map labels are graphite with a paper or ocean halo (paint-order: stroke) and measure 10.89–13.05:1 against every fill they cross.

Type

The display moment is the rest-state line set over the sheet — "$6,910 · EXTENSION · 80 M² · COUNCIL-READY IN 6 WEEKS" — rebuilt from state on every change (the separators travel with the token that follows them, so a wrap never strands a middle dot at a line end). With working drawings off the last token becomes "CONCEPT & 3D VIEWS IN 3 WEEKS".

Techniques

• Procedural SVG scene, no libraries. The sheet (border, margin, fold marks, grid, notes) is drawn once; the elevation, sun, stamp, dimensions, legend and pen live in a dynamic group rebuilt on every state change from a few parametric heights and the √area width. Hatching is an SVG pattern rotated 45°; the stamp is a rotated group; the title block is an HTML element positioned from the SVG's rendered scale.
• Dual-speed redraw (W21). First paint staggers each drawn part at 26 ms (1.4 s cap); every later state change redraws at 10 ms per part with a 500 ms cap via a firstDraw flag. Parts animate opacity only — never a property they also set as an SVG attribute.
• Token-invalidated plotter loop (W25). The trace runs in one requestAnimationFrame loop whose token is bumped in every control handler before the state swap; the old loop exits on its next frame, the rebuilt scene starts a fresh one, and the probe's loops count settles back to exactly one — asserted after two rapid-fire bursts. Delta time is clamped at zero and capped at 50 ms (W29); the loop idles while the tab is hidden. Trace duration scales with the outline's length (3.2–7 s) then holds 2.2 s with the pen lifted.
• Title block placement. Right-anchored inside the sheet's ruled margin; its top is the greater of "bottom-aligned to the margin" and a pinned minimum scene y (440) below the dimension strings, so at narrow on-scene widths the block hangs past the sheet and the holder grows its padding rather than the block covering the drawing or the controls. At ≤640 px a cropped viewBox enlarges the drawing and the block docks below as a full-width strip.
• Reduced motion. CSS media query plus a matchMedia check: no loop starts, the outline is painted complete with the pen parked, the entrance transitions are disabled and the hero's rise animation is off.
• State probe. window.__buildingdesign carries project, area, floor, the three toggles (council both as effective state and remembered preference, plus its disabled flag), every ledger line, the total, timeline, footnote string and presence flag, the declaration, the display line, the revision letter, loops and a settled flag (set after the redraw cap) — QA gates on state, never on seconds. probe.set(vector) sets the full control vector explicitly for oracle drives.

Conversion decisions

• Above the fold at 375 px: the practice name in the eyebrow and wordmark, "Building design for Perth's northern suburbs — new homes, extensions and second storeys drawn to be built, from concept to council", Book a design consult + Call (08) 9000 0369, and the since-2013 / BDP 00000 / $2M indemnity trust line — all inside the first viewport, measured (trust line bottom at 625 px of 667).
• Consult vs call: design work starts with a conversation, so the primary CTA is "Book a design consult" with the phone a visible ghost button; on phones a sticky bar carries Call now + Book a consult above the thumb, solid white, 48 px targets, no backdrop filter.
• The Planner feeds the form. Project, area, scope, the total, the timeline and the footnote pre-fill the consult textarea; "Book this design consult" refreshes it and focuses the name field. Fields are what a designer needs before the first visit: name, mobile, suburb, where you're starting from (a block / a home to extend / going up a storey / renovating inside) and the details block.
• Honest floors. The services grid's "from" prices are the Planner's cheapest outputs per project — $2,140 / $2,920 / $3,680 / $4,760 — and the timeline line, the footnote and the "quoted by the engineer and the council" declaration appear wherever the total does. Council coordination cannot be priced without working drawings, so the control is disabled with the reason on-page rather than computing a lodgement with nothing to lodge.
• Local confirmation, no fake network. Empty submit flags the required fields inline, moves focus to the first one and keeps the confirmation hidden; a valid submit shows the designed panel ("Thanks — consult request received. We'd call you back within one business day…") naming the suburb and the estimate, clearly marked as a demonstration.

Local SEO we'd implement for the real business

The live page carries only WebPage, WebSite and BreadcrumbList structured data naming it a demonstration — a fictional practice must not mark itself up as a real one. For the real client we would ship the block below. The top-level type is ProfessionalService: a building design practice is a design service, not HomeAndConstructionBusiness, which would imply a builder — and this practice says plainly that it is not one. Real reviews would be pulled from Google Business Profile and marked up only with the reviewer's consent.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ProfessionalService",
  "name": "Northline Building Design",
  "description": "Building designers in Joondalup — concept design and 3D views, working drawings, council and engineering coordination for new homes, extensions, second storeys and renovations across Perth's northern suburbs.",
  "url": "https://www.example-northline.com.au/",
  "telephone": "+61 8 9000 0369",
  "image": "https://www.example-northline.com.au/studio.jpg",
  "priceRange": "$$",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Joondalup",
    "addressRegion": "WA",
    "postalCode": "6027",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.74, "longitude": 115.77 },
  "areaServed": ["Joondalup", "Hillarys", "Kingsley", "Currambine", "Duncraig", "Wanneroo", "Scarborough", "Mindarie", "Padbury"],
  "openingHoursSpecification": [
    { "@type": "OpeningHoursSpecification", "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"], "opens": "08:30", "closes": "17:00" }
  ],
  "knowsAbout": ["building design", "concept design", "3D visualisation", "working drawings", "building permit documentation", "NatHERS energy assessment", "second storey additions", "home extensions"],
  "hasOfferCatalog": {
    "@type": "OfferCatalog",
    "name": "Design services",
    "itemListElement": [
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Renovation drafting — concept design and 3D views" }, "priceSpecification": { "@type": "PriceSpecification", "price": "2140", "priceCurrency": "AUD", "description": "from, 40 m²" } },
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Extension — concept design and 3D views" }, "priceSpecification": { "@type": "PriceSpecification", "price": "2920", "priceCurrency": "AUD", "description": "from, 40 m²" } },
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Second storey — concept design and 3D views" }, "priceSpecification": { "@type": "PriceSpecification", "price": "3680", "priceCurrency": "AUD", "description": "from, 60 m²" } },
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "New home — concept design and 3D views" }, "priceSpecification": { "@type": "PriceSpecification", "price": "4760", "priceCurrency": "AUD", "description": "from, 120 m²" } }
    ]
  },
  "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "64" },
  "review": [
    {
      "@type": "Review",
      "author": { "@type": "Person", "name": "Real client, with consent" },
      "datePublished": "2026-05-02",
      "reviewRating": { "@type": "Rating", "ratingValue": "5" },
      "reviewBody": "Pulled from the live Google Business Profile feed — never hand-written."
    }
  ]
}
</script>

Alongside the schema: a Google Business Profile with the studio pinned, "building designer Joondalup" / "second storey addition Perth northern suburbs" / "house extension design Hillarys" as the page's core phrases with the suburbs above as secondary, NAP consistency across the Building Designers Association listing and the council-adjacent directories, and a reviews feed that updates without anyone touching the page.

What changes for the real client

• Drawings and deliverables: the practice's own ArchiCAD or Revit sets — the Planner's elevation would be replaced by a real 3D view viewer embed (the kind we'd wire) of the studio's actual concept models, with the drafting sheet as the art direction around it.
• Builder hand-off: Buildxact or a builder's tender hand-off so the working-drawings set goes straight to quoting, and the consult request becomes the first job record rather than a textarea.
• Xero for the design-fee invoice in stages (concept, working drawings, lodgement); the Planner's ledger maps line-for-line onto it.
• A council-lodgement tracker behind the LODGED stamp — the real permit application status, updated from the council portal, so "lodged" means lodged and "approved" appears only when the council says so.
• The studio's own 3D views and finished-project photography, a Google reviews feed, the real ABN, practitioner registration and indemnity certificate, and the real phone number in place of the reserved pattern.

Iteration log

• Pass 1 — Craft. Contrast measured from the shipped tokens: every spec figure held within 0.1 (graphite 13.05 / ultramarine 7.24 / link 6.75 / tan-ink 5.05); the derived tan-ink-on-tan-tint pair (4.51:1) was kept off the page, and the map's nine labels measured 10.89–13.05:1 with their halos. The first build's title block covered the dimension strings at 1200 and the whole lower-right of the drawing at 641 (the harness's coverage probe flagged 12 overlaps) — the block now stops at a pinned minimum scene y below the dimensions and hangs past the sheet at narrow widths, the ground line moved up (380 → 345), the drawing widened (300–560 → 400–700 units) and every wall gained height so an 80 m² extension fills the sheet instead of floating in it. The LODGED stamp moved from the upper-left (where the sun-path arc crossed it at large areas) to the upper-right; the legend went to the upper-left; the sheet note moved to the bottom margin and an honest NTS notes block filled the lower-left. The second storey's balustrade overlapped its right window (windows lifted 6 units) and carried a near-duplicate second dimension string (dropped); the renovation section's "W1" tag made no sense on a section (dropped). The display line was wrapping at 1200 (21 px cap) and the 375 fold overran by 58 px (lede 16 px, h1 26 px, tighter rhythm) — the trust line now ends at 625 px. 576 assertions green after the fixes.
• Pass 2 — Depth. Second-read detail: the title block carries a revision letter (A-01 · REV A) that ticks up with every change you make to the brief, the way a real sheet does — capped at Z, never ticked by a clamped no-op, exposed on the probe and asserted through a chip → stepper → toggle sequence. Micro-interaction: the stepper value pulses on change (a 260 ms scale pulse, off under reduced motion). The plotter pacing was re-read against the four outlines — duration now scales with the traced length (3.2–7 s) so the short renovation trace no longer races and the long new-home outline no longer crawls, with a 2.2 s lifted-pen hold. Pass 2 drove every worked example, the lock drive by click, the 80 → new home clamp-up and the no-auto-lower return, the forty random vectors and two rapid-fire bursts — all green, one loop after each burst.
• Pass 3 — Hardening. 375 masthead measured wordmark right 147 px vs call button left 223 px (no collision), scrollWidth 375 with zero offenders, sticky bar in the bottom 140 px, h1 + CTA + trust line inside the first viewport; the badge docks at 640 and sits on-scene at 641 and 1000 with zero coverage of the drawing in all eight project × area screenshots; reduced motion verified (no loop, complete outline, pen parked, controls still work); the v-flag form patterns compiled in the harness and surfaced no console errors; the Chanel rule removed the map's "Perth CBD 25 min south" note and the Hillarys-marina label; the title block's head wrapped onto two lines once the revision letter arrived, so it now reads "Northline · design" beside "A-01 · REV A" on one line; the hero motto was re-set as one sentence (its middle dot was stranding on a wrap) and the scope toggles keep left-aligned labels when they wrap at 375; final copy read in Australian English. Guide page probed at 375 (no overflow, tables in .table-scroll, one h1, colophon, would-ship panel with ProfessionalService at the top level).

Spec semantics resolved by the builder and worth flagging: the concept pinned no SHORT form for the footnote or the timeline line, so the badge carries the full strings at every width (the docked badge at 375 has the room); the dimension strings are declared illustrative on-page; the rest-state total measured from the running page is $6,910 and the cheapest output is $2,140 — both equal to the spec.