How Coldwater Stone Co. was made

Palette — argued from the slab rack

The shed at 11am: a honed marble face, wet basalt, a verde-alpi slab in the rack, iron-oxide banding in the granite. This ground plus a warm accent lives near the banned cream-and-terracotta default, so the line is held deliberately: the display face is carved roman capitals, not an editorial serif, the accent duty is carried by verde green (dimension lines, template marks, CTA), and oxide stays secondary — links, focus rings, active chips — with a darker oxide-ink derived for small text (the raw oxide measures ~4.8:1 on honed white; the ink token clears it with margin).

Type

Marcellus for display — inscriptional roman capitals, letterforms literally designed by chisels; the masthead and section marks read like an incised sign above a workshop door. Figtree carries body and UI, warm and legible at 16px+. Spline Sans Mono does the honest numbers — lm, mm, dollars — so every figure on the page reads like it came off a cutting ticket.

The Benchtop Studio — signature & implementation

The signature is a conversion tool: material chips (granite / porcelain / marble), a 2–8 lm stepper (0.1 steps), a 0–2 waterfall-end stepper, cutout chips (sink / cooktop / drainer grooves) and a 40 mm mitred-edge toggle drive a procedural SVG plan-view benchtop plus a front-elevation strip and a mono price card. Everything is drawn in millimetre space and scaled with s = min(0.2, 840/L) — a zoom-to-fit template drawing whose verde dimension lines always tell the true mm.

The stone faces are seeded procedural textures (mulberry32, deterministic per configuration): granite is a speckle field of ~1 rotated ellipse per 2,400 mm² (capped at 1,200) in basalt, oxide, quartz-light and mid tones; porcelain is a fine even dot grain with two faint near-straight printed-vein hints; marble is 3–4 quadratic random-walk veins with branch veinlets and one faint oxide micro-vein. A soft white sheen gradient clipped to the slab is the "light banding off the polished face" from the art direction. Cutouts are drawn to actual appliance scale (sink 780×430, cooktop 560×490, five 450 mm grooves) in a flow layout; if a short run can't honestly hold the chosen cutouts, the drawing says so ("tight run — the template confirms spacing") rather than pretending. Waterfall ends appear as dashed fold lines in plan and fold to the floor in the elevation — and on marble, vein strokes chase through the fold, echoing the review copy. A state probe window.__stonemason carries material, metres, toggles, subtotal, total, clamp state and form status on every interaction.

Pricing model — shape and anchors

All anchors pinned by the wave spec (20 mm stone, 600 mm depth, templated + fabricated + installed): granite $850/lm, porcelain $1,100/lm, marble $1,500/lm; waterfall ends +$750 each; sink +$180, cooktop +$160, drainer grooves +$220; mitred 40 mm-look edge +$140/lm as its own line when toggled; minimum job $2,200 — small runs clamp up to it with the reason stated on-card, which is also why the services grid's "vanity tops from $2,200" equals the studio's cheapest possible output (granite 2.0 lm = $1,700 → clamp). Engineered-stone replacements deliberately inherit the same per-lm meters — stated flatly on the card rather than invented as a separate gradient. The rest state (granite, 4.2 lm, one waterfall, sink) computes 4.2×850 + 750 + 180 = $4,500 measured from the running model, matching the spec's anchor arithmetic exactly — no correction needed.

Conversion decisions

• Studio in the hero. The estimator shares the first 750px with the h1 at 1200 wide — the thumbnail sells the tool, not just copy. On mobile the value prop, call CTA and trust chips all land inside the first screen at 375px.
• Studio→form handoff. Every studio interaction rewrites the Job details field ("Granite benchtop, 4.2 lm, 1 waterfall end… — studio estimate $4,500"), so the enquiry arrives warm and the confirmation echoes it back.
• Form fields are the minimum a fabricator needs to book a viewing: name, phone, suburb, benchtop state (new kitchen / replacement / benchtop-only swap), details. Front-end validation with visible errors; a local, clearly-demo confirmation ("request received… we'd call you back within one business day") — no fake network round-trip.
• Two phone paths: header tel: plus a fixed call/book bar on mobile with ≥44px targets.
• The engineered-stone ban gets a full-width band, not a footnote — in 2026 it's the first question every replacement customer has, and being plainly right about it is the page's biggest trust signal.

Local SEO we'd implement for the real business

The demo page ships only honest WebPage schema naming it a demonstration — fictional LocalBusiness/Review markup in a real search index would be dishonest. For a real fabricator we would ship:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "@id": "https://coldwaterstone.com.au/#business",
  "name": "Coldwater Stone Co.",
  "description": "Stone benchtops — granite, porcelain and natural marble —
    templated, fabricated and installed across Perth.",
  "telephone": "+61 8 XXXX XXXX",
  "url": "https://coldwaterstone.com.au",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "O'Connor",
    "addressRegion": "WA",
    "postalCode": "6163",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -32.06, "longitude": 115.79 },
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
    "opens": "07:00", "closes": "16:00"
  }],
  "priceRange": "$$$",
  "areaServed": "Perth metropolitan area",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.9", "reviewCount": "180"
  },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "Real Customer" },
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "reviewBody": "Fed live from the review platform, never hand-written."
  }]
}
</script>

What would change for the real client

• Moraware Systemize — job tracking from template to install, feeding honest lead-time copy ("5–7 working days") from live capacity.
• Digital templating (Proliner / laser workflows) — template appointments booked against the measure calendar, straight from the form.
• Slab inventory with photo library — supplier live feeds so "approve THE slab" happens online first: real slab photos, hold buttons, rack locations.
• Buildxact / Tradify quoting — the studio's estimate becomes a real quote record instead of a textarea pre-fill.
• Xero progress invoicing — deposit on template, balance on install.
• Podium review flow — the reviews section fed from the platform, marked up as the schema above.

Iteration log