OverdeckMezzanines The site Index

How it was made

Two clearances, one fixed axis, and a number that has to be a millimetre.

Overdeck Mezzanines is a fictional Canning Vale mezzanine-floor business, built as an industry demonstration. Its audience is a shed tenant who has run out of floor and has never measured the underside of his own roof structure. The page has one job: turn “can I put a mezzanine in here” into a booked site measure — and it does it by drawing the building in section at true scale, dimensioning both clearances in whole millimetres, and refusing the sale on the page when nothing fits.

The signature: a section on a fixed axis

The whole argument of a mezzanine is vertical, so the drawing is a section and its vertical axis is fixed at 0–9,500 mm and never rescales. That is deliberate: the thing under test is the building’s clear height, and an axis that stretched to fit each state would make every building look the same. 9,500 mm is the ceiling because the tallest shed on the control grid is 9,000 mm and the roof structure needs 420 mm of drawn depth above it.

Both axes share one scale. The scene is held internally in millimetres and mapped to a viewBox laid out in real CSS pixels, so a dimension label is 13 px on a monitor and 11 px on a phone rather than a fixed viewBox rendering type at four pixels. The horizontal frame is derived from the sheet’s measured width at a target of 0.046 px per millimetre, clamped to 13,000–24,000 mm of frame, and the scale factor falls out of that. The 5 m rule with 1 m ticks in the sheet’s title block is the proof: it is drawn from the same factor as the building.

The shallowest floor structure the model can produce is 225 mm — a 4 m span at 3.0 kPa on 25 mm ply — which is 2.37 % of the axis. At the narrowest shipped width that still draws about 6.5 px, so the beam never collapses to a hairline; a minimum 4 px depth is coded as a floor but does not bind anywhere on the grid, and the structural zone always carries an external leader as well.

The beam depth is written across the beam in the reversed ink. A painted steel beam is a dark fill on a light site: the body ink measures 1.75:1 on it, which is unreadable, and re-tinting the beam to make the body ink work would be lying about what a beam looks like. So the label is #F1EFEA at 8.53:1, and where the beam draws under about 15.5 px the depth moves to the external leader in the body ink over the shed interior (10.07:1) instead. It is never set in the body ink on the beam.

The fit test

Three lines of arithmetic, all in millimetres:

structural zone = beam depth + deck thickness
headroom above  = clear height − under-clearance − structural zone
it fits when      headroom above ≥ the use’s own minimum
                  (2,400 mm for an office deck, 2,100 mm for storage)

Beam depth comes from a pinned table, and because depth rises monotonically with span, “fits” is downward-closed in span: if the 4 m span misses, nothing fits and the building is refused.

Beam depth, mm
Span3.0 kPa5.0 kPa7.5 kPa
4 m200250310
5 m250310360
6 m310360410
7 m360410460
8 m410460530
9 m460530610

The price model is separate and simpler: deck area × (load rate + deck rate), plus one AS 1657 stair flight at $4,850, the pallet gate at $3,450 if it is on, handrail at $185 a metre of perimeter less the 3 m stair opening, and $2,850 of engineering, certification and shop drawings. A $18,000 minimum is a floor on the whole job — every line sits inside it, never beside it. Every rate is a whole dollar, so every total is a whole dollar by construction and no rounding rule exists.

Why every clearance on this page is in millimetres

Two buildings, both “2.1 m”, and only one of them is a mezzanine

A 12 × 6 m general-storage deck on a 6 m span, with a counterbalance forklift underneath, in a 6,000 mm shed leaves 2,108 mm over the deck. It fits, by 8 mm. A 12 × 6 m pallet deck on a 9 m span on steel grate, same forklift, in a 6,250 mm shed leaves 2,100 mm — exactly the minimum, dead on, with nothing to spare.

Both of those render as “2.1 m” under toFixed(1). One of them has eight millimetres of tolerance for a slab that is not perfectly flat and a purlin that sags; the other has none. So the model is held in millimetres, the display prints millimetres, and the page never prints a clearance in metres at all. Spans print in metres, because a span is a span.

Both cells are reachable from the control grid and both are distinguishable on the page, not just in the state probe: the badge prints 2,108 mm against 2,100 mm, and a pinned margin note reads “It fits, by 8 mm” in the first case and “It fits, dead on the 2,100 mm minimum, with nothing to spare” in the second. Step the same 6,000 mm shed to a 7 m span and the chip goes dead with its own reason: 42 mm short.

The refusal

Sixty-two thousand one hundred cells of the control grid do not fit, and — swept over the (clear height, load, under-clearance, deck) axes on their own — 162 of 513 buildings have no span that fits at all. That state prints no dollar figure. The deck is drawn at the shallowest floor the model can build, the headroom the load actually needs is drawn as a dashed band above it, and the part of that band that runs into the roof structure is hatched in refusal red and dimensioned. The panel says it in words:

“A mezzanine doesn’t fit in this building. With 4,200 mm needed underneath and 2,400 mm over the deck, the shallowest floor we can build still runs 82 mm into your roof structure. The honest answers are racking, or a taller shed — and we’d rather say that than sell you a deck you can’t stand up on.”

The badge carries the short form — “No mezzanine fits this building — 82 mm short.” — at every width, and the full string lands on the refusal panel, in place of the ledger, and in the plain-text mirror. Three surfaces, no price.

The force, and what happens on the way back

Span is the forced control. The cap on it can be imposed by two different things — the building’s clear height and the design load, because a heavier load means a deeper beam — so the page has to decide what happens when only one of them relaxes. The rule shipped is: the drawn span is the widest span that fits and is no wider than the span you last chose. The memory is replaced by any explicit span click while the chip is live; otherwise it survives until the constraint lifts.

Walked in a 6,750 mm shed with a 12 × 6 m particleboard deck and a pallet gate, and asserted step by step by the harness:

StepChangeDrawn spanWhat happened
1General storage, forklift underneath9 mNothing forced
2Under-clearance → reach truck7 mForced down; memory still holds 9
3Load → pallet storage6 mPartial: the deeper beam takes it down again
4Load → general storage7 mPartial unwind: re-evaluates, does not jump back to 9
5Under-clearance → forklift9 mBoth constraints gone — the memory restores
6Load → office, under → reach truckNo span fits at all — refusal, 82 mm short

The chain is walked over chips only. Nothing in it moves a stepper, so there are no intermediate values that could trip a force or a restore on the way past.

Which controls move the price, and which honestly don’t

Three of the eight controls change nothing about the money, and the page says so rather than letting them look broken:

All three still change the drawing every time they are touched. The under-clearance chip swaps the machine underneath and re-dimensions the gap; the span chip re-cuts the column grid and the beam depth; the clear height moves the roof line and everything measured to it. The design load moves the beam and what stands on the deck — a desk at 3.0 kPa, stacked cartons at 5.0, pallets at 7.5 — so no control on this page is inert.

The palette

Argued from what is actually in the shed: a galvanised purlin with the lights off, a painted steel beam, structural ply, a forklift. Every ratio below was recomputed with WCAG arithmetic from the shipped hexes during Pass 1, not copied from the spec.

Galv paper#DBD7D0

The page ground. A mid-light warm grey with no cream in it — the colour of a galv purlin in an unlit shed. Cards lift to #F1EFEA, hairlines sit at #C7C2B8.

Body ink#191C1E · 11.94:1 on paper

14.9:1 on cards, 9.65:1 on hairlines, 10.07:1 on the shed interior, 8.12:1 on the slab, 6.68:1 on the deck, 4.98:1 on the forklift. Forbidden on exactly one ground: the steel beam, at 1.75:1.

Steel#2C4756 · 6.83:1 on paper

The beam and the columns as a fill; the dimension lines and the CTA fill as a mark. 8.53:1 on cards, 9.8:1 under white button labels. As a scene line it holds 5.76:1 on the shed interior and 4.65:1 on the slab.

Reversed ink#F1EFEA · 8.53:1 on the beam

The pinned label colour on the steel beam and nowhere else. It exists because the beam is the one dark fill on a light site and its depth has to be written across it.

Refusal red#8C3220 · 5.65:1 on paper

7.05:1 on cards, 4.57:1 on hairlines. It hatches the overlap and outlines the refusal panel. It never sets type on a scene fill — the hatch is the mark, the body ink carries the words.

Edge yellow, cased#C9A227 in a #191C1E casing

Never text. Uncased it measures 1.06:1 on the deck and 1.42:1 on the shed interior — invisible. Every stroke of it is drawn with a dark casing underneath, which is what actually carries the contrast (10.07:1 on the shed interior, 6.68:1 on the deck). It marks the AS 1657 deck edge, the handrail, the mid rail and the kickplate, and nothing else on either page.

The scene fills are #CBC6BD shed interior, #2C4756 steel beam, #B79E7C deck, #B7B2A9 slab and #C9762A forklift. Four of the five carry a label in the body ink; the beam carries its label reversed. The service-area map is body ink at 10.07:1 on land and 8.12:1 over water, each label stroked with the fill it sits on so it never loses its edge.

Type

Chivo at 900 and 700 for display — a heavy grotesque with real structural weight, set tight at −0.032 em, which is what a headline about steel should feel like. Barlow at 400/500/600 does the work. Barlow Condensed carries every dimension string, every eyebrow and every price, because a four-digit millimetre figure has to fit inside a 2,100 mm gap on the drawing without dropping below 11 px. Body copy is 17 px on a phone and 18 px from 800 px up.

The typographic bravery is the badge, and it is brave because of where it sits: the live total in Chivo 900 beside the area and the span, the two clearances and the floor depth under it in condensed, hung in the roof space of the drawing rather than in a panel beside it. The sheet reserves exactly the height that box needs beyond the sky the building already leaves, so the type can live on the section without ever touching it.

The independent oracle

The fit test and the price model were reimplemented from scratch, in separate code, before the page was trusted. The oracle walks the full control grid — 19 clear heights × 6 spans × 3 loads × 3 under-clearances × 3 decks × 6 lengths × 5 widths × 2 gate states = 184,680 cells — and reports:

QuantityEnumerated
Cells that price122,580
Cells where no deck fits62,100
Buildings (clear × load × under × deck) where no span fits162 of 513
Cells where the $18,000 minimum binds216
Non-integer cells, on any returned field0
Distinct totals480
Cheapest total (= the services-grid floor)$18,000
Cheapest subtotal, swept — not read off a hand-picked cell$17,685
Dearest total$105,375
Reachable zero-margin cells / cells clearing by 1–10 mm10 / 10

Because every model on this page has a minimum charge, the cheapest total is a tie across many cells and says nothing about the cheapest subtotal. Both were swept separately. The tallest deck top on any fitting cell is 4,850 mm and the tallest roof line is 9,000 mm, so every drawn quantity lands inside the fixed 9,500 mm axis at every reachable state.

A second harness then drove the running page in headless Chrome — 177 assertions: every chip, every stepper to both its clamps, the toggle, the six-step force chain, both boundary cells, the refusal, a rapid-fire drive with no settle between clicks, an empty submit, a deliberately invalid value against every pattern, a filled submit, the 375 px masthead and sticky bar, the badge box against every drawn element at 375/1000/1200 and at DPR 2, keyboard activation, the reduced-motion path, and every figure quoted in body copy re-derived from the shipped model.

Where this build disagreed with its brief

Five, all reported rather than silently resolved. Nothing was changed on either side without saying so.

1 · Two contrast figures in the brief’s prose are transcription slips

The concept quotes the body ink at 8.5:1 on the hairline tint and 2:1 on the steel beam. Recomputed from the same hexes, they are 9.65:1 and 1.75:1 — and the wave’s own contrast log prints those figures too, so this is the prose, not the script. No decision changes: the ink still clears the hairline comfortably and still cannot go near the beam. Shipped the measured values here.

2 · Three controls are price-neutral, not one

The brief pins the under-clearance chip as the price-neutral control and enumerates it. Span and clear height are equally neutral — the beam is inside the per-square-metre rate and the clear height is an input to the fit test, not the meter. Enumerated over the whole priced grid: zero price movement from either. Rather than leave two controls silently no-opping, each carries its own on-page statement and each still changes the drawing.

3 · “Dearest — 9 m spans” is one member of a tie

The pinned dearest cell, $105,375 on an 18 × 10 m pallet deck on steel grate with a gate, is correct — but because span is price-neutral, every span that fits at that vector returns the same figure, and this oracle’s argmax happened to land on a 4 m span in a 5,000 mm shed. The dollar figure is unaffected; the span in that sentence is unlicensed specificity. Shipped the figure, reported the tie.

4 · The full refusal string cannot live in a badge

The brief puts this site in the “growing frame” regime, where the badge carries the full templates above 640 px. The pinned refusal is a 300-character paragraph; at any width it would need about seven-pixel type on the badge. Shipped the pinned short form on the badge at every width and the full pinned string on the refusal panel, in the ledger’s place and in the plain-text mirror — three surfaces, badge text honest. The margin, force and column-cap notes do carry their full templates on the badge above 640 px as pinned.

5 · A claim about a real Australian Standard — flagged, not shipped

The wave brief lists “the 900 mm minimum width” among the things AS 1657-2018 sets. That does not match the standard as we read it: AS 1657-2018’s general minimum clear width for a walkway or platform is 600 mm, and 900 mm is not the base figure. Because a factual claim about a named standard outranks reproducing the brief’s own numbers, no 900 mm minimum-width claim appears anywhere on this site.

What the page does name from AS 1657-2018 is the stair pitch of 20° to 45°, guardrail with the top rail between 900 and 1,100 mm above the platform, and a 100 mm kickplate. This is worth a second opinion before the wave ships.

One further note rather than a disagreement: the drawn cap is pinned as “1 section, up to 4 columns”. At phone widths a 13,000 mm frame cannot hold four column lines at a 9 m span, so the drawn count is min(4, real column lines, what fits the frame) and the pinned indicative-grid note fires whenever the real grid exceeds what is drawn. The count is never fewer than two.

The three passes

Pass 1 — Craft

  • A dead pattern attribute. The phone field shipped [0-9 ()+\-]{8,20}, which Chrome compiles as a v-flag regex and rejects — “Invalid character in character class” — so the field silently validated nothing and checkValidity() returned true for “ring me!!”. Escaping the parentheses fixed it. Found by driving a deliberately invalid value, not by reading the attribute.
  • Chips were a flex row, so their sub-labels ran on. display:inline-flex with a block child renders “Walking and shelving2,400 mm clear”: the child is a flex item, and display:block on a flex item does nothing. Fixed with an explicit column direction. Every state assert was green throughout.
  • The signature was below the thumbnail fold. At 1200 × 750 the sheet started at y = 982. The hero was trimmed, the display scale reduced, the section’s own explanatory paragraph moved below the drawing, and — the real fix — the sheet’s top reserve was made a function of the sky the building itself leaves, so the badge now hangs in the roof space rather than in a blank strip above the axis. The rest total was made to print in both the hero column and the on-scene badge, and both sat inside the first 750 px. It was not enough — see Pass 4.
  • A review quoted a building where nothing fits. The first draft had a customer with “5.8 m to the underside and a reach truck” taking a 7 m general-storage deck. Re-derived: at 5,800 mm clear with a 4,200 mm under-clearance there is no legal deck at all. Rewritten to 6,750 mm, where the office deck misses by exactly 82 mm and the 7 m storage deck clears with 2,108 mm — both figures now come out of the shipped model.
  • Edge yellow was doing decorative work in the masthead dot, the trust-strip bullets, a ledger rule and a Sapience button. The token is pinned to the deck edge and the handrail and nothing else; all four were re-inked in steel or card, and the map’s Canning Vale label was moved off refusal red, which is not a legal text colour on the shed-interior fill.
  • The structural-zone leader collided with the under-clearance dimension at phone widths. The drawing now runs two explicit layouts: below 520 px it names the roof line directly and pushes both dimensions outside the deck, above it the dimensions sit inside the bay.

Pass 2 — Depth

  • The load chip now changes the picture, not just the beam. A desk, monitor and chair at 3.0 kPa; stacked cartons at 5.0; pallets on bearers at 7.5 — all drawn to scale, all drawn behind the handrail, because in this section the rail is the nearest thing to the viewer.
  • A drawing-notes block in the sheet’s reserved band, beside the badge: the three things a section cannot draw — that the clear height is to the underside, that the headroom is measured to the same line, and that the column grid is indicative. It lives in the same reserve as the badge, so it can never reach the drawing.
  • A disabled control that explains itself. Hovering or tabbing to a dead span chip replaces the group’s hint with its own reason — “A 7 m span needs a 410 mm beam — 42 mm more than this building has” — and the chip also carries the shortfall in its own sub-label. A disabled chip is keyboard-reachable for exactly this reason.
  • Second read: the person on the deck is 1,750 mm, the forklift’s lowered mast is 2,150 mm and the reach truck’s is 2,900 mm — all true against the clearance they are drawn under. The struct leader carries a second line that decomposes the floor as 360 beam + 32 particleboard, so the deck chip is visible in the annotation even though 32 mm of deck is a line at true scale.
  • Motion. The deck slots down from the roof line over 900 ms on cold load with a cubic ease, and slides to its new level over 280 ms on every subsequent state change — the dual-speed redraw. The dimension group never drops below 0.6 opacity, so the drawing is legible at any capture instant.

Pass 3 — Hardening

  • The signature settles one-shot by design, which makes it look dead to a passive liveness probe: two screenshots a second apart are byte-identical at rest, and that is correct behaviour, not a defect. The harness proves liveness the only honest way — it drives a control and diffs — and separately asserts the page comes to rest visible: after driving, with nothing poking the page, the deck group is back at translate(0,0), the dimension group is at opacity 1, and every animated group is at least 0.55 opaque.
  • A screenshot must not break the page. Taking a clipped capture changes device metrics and fires the resize handler, so the entrance choreography is gated on a cold-load flag with a settle-timer backstop and a resize can never re-enter it. Resizing redraws without animation.
  • 375 px, masthead first. The header CTA is removed below 640 px and the sticky bar owns the call and the anchor to the form; the wordmark’s right edge is compared against the call button’s left edge explicitly, both tap targets are 48 px, and the sheet goes full-bleed with the badge docked beneath it. Component defaults are declared before every breakpoint so no later rule wins on source order.
  • The badge never covers the drawn subject. The binding contract is a rectangle-intersection assert — the badge’s box against every drawn element with more than two pixels in each direction — run at 375, 1000 and 1200, and again at DPR 2. It passes by construction: the sheet reserves exactly the height the badge needs beyond the sky the building already leaves.
  • Rapid fire. Nine control clicks dispatched in one evaluate with no settle between them: no console error, the scene settles, and the resulting state still matches the oracle. Any control that rebuilds scene data bumps the animation token in the handler, before the state swap.
  • Reduced motion skips the choreography entirely and draws the settled frame; the controls still work and the state probe reports settled immediately. Focus is visible on every control, and Enter on a focused span chip drives the signature.
  • Chanel rule: the little operator figure riding the forklift went. The machine reads better alone and the figure was noise at 375 px.
  • Both pages were scanned for a word character followed by = and a typographic double quote before commit. Zero hits. The body copy uses curly quotes freely; the attributes do not.

Pass 4 — Review, after shipping

  • Every check was green and the thumbnail was still wrong. Pass 1 got the sheet’s top edge and the price badge inside the first 750 px, and the assert that measured them passed. The generated 1200 × 750 capture — cold load, a real seven-second settle — told a different story: masthead, headline, intro, CTAs, trust line, summary card, section heading, the notes box, the badge, and then the frame ran out at the very top edge of the drawing. Not one line of the shed, the deck, the beam, the forklift or the person was in the collection’s headline asset. An assert that measures the frame is not an assert that measures the drawing, and the letter of a rule is not its intent.
  • The fix was compositional, because the defect was. The section moved out from under the hero and into the hero’s second column, where the drawing is the subject rather than a footnote to it. The summary card went with it — it was printing the total and both clearances that the badge already carries. The sheet now runs y = 91 to y = 708 at 1200 × 750, title block included, and the drawn subject alone — deck, beam, columns, rail, the person on top, the machine underneath, both dimension sets — occupies 322 px, 43 % of the capture. Nothing was shrunk to get there: the drawing is still laid out at 0.046 px per millimetre, so a label is the same 13 px it always was.
  • The assert now measures the union box of the drawn groups, not the sheet that contains them — every top-level group except the notes block and the title block — and requires it to sit wholly inside the capture and to hold at least 300 of its 750 px. The old frame-and-badge checks stay, because they were never wrong, only insufficient.
  • The two-column hero opens at 1060 px, not 900. Below that the drawing column falls under 520 px, which is the width at which the section switches to its phone dimension layout; a desktop visitor should not be served the phone drawing. From 900 to 1059 px the hero stacks and the sheet runs full width at three column lines; from 1060 px it takes the second column at two, and says so — in the badge, in the ledger and in the plain-text mirror. That note is the drawn-column cap announcing itself, which it has always done on every phone.
  • What this costs. The controls now sit about 250 px below the drawing instead of directly under it, so at a desktop viewport a visitor working the chips has the sheet just off the top of the screen. The ledger, the notes and the refusal panel all sit with the controls and carry the same answer in words, so nothing is lost silently — but it is a real trade, made deliberately, and the thumbnail is what buys it.

The conversion decisions

Local SEO we’d implement for the real business

Overdeck is fictional, so no LocalBusiness, Review or AggregateRating markup is live on either page — putting invented reviews into a real search index is dishonest markup, whatever the disclaimer says. The live schema is limited to WebPage, CreativeWork, WebSite, BreadcrumbList and ListItem. For a real client we would ship this, populated from their own records:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "GeneralContractor",
  "@id": "https://overdeckmezzanines.com.au/#business",
  "name": "Overdeck Mezzanines",
  "description": "Industrial mezzanine floors, AS 1657 stairs, pallet gates and handrail for warehouses and workshops across the Perth metropolitan area.",
  "url": "https://overdeckmezzanines.com.au/",
  "telephone": "+61 8 XXXX XXXX",
  "email": "office@overdeckmezzanines.com.au",
  "image": "https://overdeckmezzanines.com.au/img/deck-canning-vale.jpg",
  "logo": "https://overdeckmezzanines.com.au/img/logo.png",
  "priceRange": "$$$",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Unit 4, 12 Example Road",
    "addressLocality": "Canning Vale",
    "addressRegion": "WA",
    "postalCode": "6155",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -32.0669, "longitude": 115.9139 },
  "areaServed": [
    { "@type": "City", "name": "Perth" },
    { "@type": "AdministrativeArea", "name": "South West, Western Australia" }
  ],
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
    "opens": "06:30", "closes": "16:30"
  }],
  "hasOfferCatalog": {
    "@type": "OfferCatalog",
    "name": "Mezzanine services",
    "itemListElement": [
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Mezzanine supply and install" } },
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "AS 1657 stairs" } },
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Pallet gates" } },
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Handrail and kickplate" } },
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Engineering and certification" } }
    ]
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8", "reviewCount": "37"
  },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "Verified customer name" },
    "datePublished": "2026-05-14",
    "reviewRating": { "@type": "Rating", "ratingValue": "5", "bestRating": "5" },
    "reviewBody": "Real review text, pulled from the client's own review feed."
  }]
}
</script>

Every value above would come from the client’s records — the rating and the reviews synced from their Google Business Profile rather than typed, the offer catalogue generated from the same service list the page renders, so the markup and the page can never drift apart.

What would change for the real client

This is a demonstration build by Sapience Analytics. Want one pointed at your customers?

Every figure on this page is computed live from a model written down before a line of code — including the buildings where the honest answer is that nothing fits.

sapienceanalytics.com.au · danny@sapienceanalytics.com.au