The bench under the lamp — how this demo was made

Gilt & Grain Fine Jewellers is a fictional Subiaco custom-jewellery workshop, built to show what Sapience Analytics would ship for a real one. The page has one job: a design-consult booking with the ring already configured and honestly priced — the Ring Bench does the configuring, the ledger does the honesty.

Palette — argued from the velvet pad, the stone and the lamp

The wave's first dark site. A jeweller shows one ring on a velvet block under a bench lamp, so the page does the same: velvet-charcoal ground, diamond-white ink, champagne-gold marks. Every ratio below is measured WCAG arithmetic from the shipped tokens, not the spec's hypotheses.

Velvet charcoal#221E2A — page ground; the pad the ring stands on.

Diamond white#F0EDF4 — body ink, measured 14.08:1 on the ground (spec hypothesised ≈14).

Champagne gold#C9A24B — the glint: marks, chrome, CTA fill. Measured 6.80:1 on charcoal and 6.80:1 under charcoal button labels (spec ≈6 / ≈7) — no remedy needed.

Gold-light ink#E0C283 — display line, badge figures, declarations; 9.49:1.

Moonstone grey#8B84A3 — setting linework, callouts, rules. Lines and marks only: 4.60:1 on the ground but 4.18:1 on panels, so label text got its own ink.

Moonstone ink#A7A0BE — minted in Pass 3 (the W33 remedy, run dark-ground-wise) for small labels on panel surfaces; 5.93:1 on panel, 7.05:1 on wells.

Type

Cormorant Garamond 600 is the display face — an engraver's serif with real jewellery manners; it sets the headline, the prices, and the page's typographic bravery: the configured stone written huge ("ONE CARAT, HELD IN FOUR CLAWS") and re-written live as the chips change. Mulish is the workhorse — quiet, legible at 16px+, and happy in small caps for chrome labels.

The Ring Bench — techniques

The signature is pure SVG, no libraries. The band is a stroked circle whose three gradient stops are re-stopped per metal (9ct/18ct yellow, 18ct white, platinum each carry a light/base/deep triple), with grain arcs at three radii for the drawn metal-sheen. The stone is a 16-gon brilliant built in JS — girdle polygon, octagonal table, sixteen crown facet lines — resized per carat (26/33/34/40 SVG units) and re-stopped blue for the Australian sapphire. Settings redraw the head: four tapered claws with knobs, a double-walled bezel, or a 14-stone melee halo that pops in stone by stone (32 ms stagger). The engraving is a script-like wobble path along the band's inner edge revealed by pathLength=100 dash-draw, hidden until drawn length > 0. The glint sweeps the stone through a girdle-shaped clip on a rAF loop with the delta clamped at zero and capped, and its opacity floored at 0.55 so the thumbnail can never catch it invisible.

Race-safety: every chip handler bumps an animation token before the state swap, and the melee stagger timers and settle timer check it — the harness's rapid-fire drive (eight dispatched clicks in one evaluate, twice over) lands on honest totals with zero console errors. Redraws are dual-speed: the entrance choreography runs once; every later chip tap redraws in ≤560 ms. State lives on window.__jeweller with a settled flag the QA harness gates on.

Honest pricing — the ledger's contract

Anchor	Pinned	Measured on page
Bands (made to size)	$950 / $1,350 / $1,450 / $1,850	exact
Stones (flat across metals)	$900 / $1,900 / $3,200 / sapphire $1,100	exact
Settings (flat everywhere)	solitaire incl. / bezel +$250 / halo +$650	exact
Hand engraving	+$85, live at every combination	exact
Rest state (18ct · 1.00 ct · solitaire)	$3,250	$3,250
Cheapest output	$1,850 = services floor	$1,850

All seven pinned worked examples were driven with the full control vector set explicitly and asserted against an independently reimplemented oracle — zero corrections. The old-gold trade-in is the W25 price-less primitive: it never subtracts a figure. When it's on, the ledger prints "− your old gold, credited at the day's assay price" and the badge appends "less your old gold" — the declaration verified on both surfaces, because assay prices move daily and any printed number would be the dishonest choice. The flatness statements sit on-card ("the stone doesn't care what holds it", "the halo prices its melee, not your metal") so no control ever silently no-ops.

Conversion decisions

The price lives inside the artwork. The $3,250 badge is painted on the velvet block, inside the first 750px at 1200 wide — the thumbnail is the commercial argument. Below 480px the badge swaps to a tight variant (158px, short subtitle) so it never covers the ring at 375.
Call twice, book twice. Tel link + consult button in the masthead; sticky call/consult bar at the bottom on mobile. On small screens the masthead number collapses to "Call" — the sticky bar carries the full action.
The configurator feeds the form. Every chip tap rewrites the consult textarea ("Ring Bench configuration: 18ct yellow band… bench price $3,250"), so the enquiry arrives pre-qualified — the W12 handoff.
Form fields: name, phone, suburb, occasion, configuration — what a bench jeweller actually needs to prepare a consult. Front-end validation only; the confirmation panel is hidden until a valid submit and says plainly that nothing was sent.
FAQ answers are honest: lab prices keep falling and we say so; custom takes four to six weeks and we say that too.

Local SEO we'd implement for the real business

This demo deliberately ships only WebPage/CreativeWork/BreadcrumbList structured data — fictional review markup in a real index would be dishonest. For the real client we'd ship JewelryStore (the exact schema.org subtype) with real NAP, hours, geo and a moderated review feed:

{
  "@context": "https://schema.org",
  "@type": "JewelryStore",
  "name": "Gilt & Grain Fine Jewellers",
  "image": "https://example.com.au/workshop.jpg",
  "telephone": "+61-8-XXXX-XXXX",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "XX Rokeby Road",
    "addressLocality": "Subiaco",
    "addressRegion": "WA",
    "postalCode": "6008",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.949, "longitude": 115.826 },
  "openingHoursSpecification": [
    { "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Tuesday","Wednesday","Friday"],
      "opens": "10:00", "closes": "17:00" },
    { "@type": "OpeningHoursSpecification",
      "dayOfWeek": "Thursday", "opens": "10:00", "closes": "19:00" },
    { "@type": "OpeningHoursSpecification",
      "dayOfWeek": "Saturday", "opens": "09:00", "closes": "14:00" }
  ],
  "priceRange": "$$$",
  "aggregateRating": { "@type": "AggregateRating",
    "ratingValue": "4.9", "reviewCount": "180" },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "Real Customer" },
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "reviewBody": "Sourced from the client's verified review feed."
  }]
}

What changes for the real client

Their ring photography replaces the drawn scene's supporting role (the configurator stays — it converts), their verified reviews replace the demo copy, and the price table binds to their actual bench rates. Integrations we'd wire: Lightspeed Retail for stock and the workshop job book, Square for consult deposits and counter payments, and Xero for the accounts — plus a daily assay-price feed so the old-gold declaration quotes the live rate, and a booking calendar so "book a consult" ends in a confirmed slot, not a callback.

Iteration log

Pass 1 — Craft

The 51-assert headless harness caught the one real layout defect: the hero grid never collapsed below its two-column minimums, so 375px rendered at 718px scrollWidth — fixed with a 900px breakpoint. Screenshot review at native resolution caught the masthead CTA wrapping to two lines at 375 (masthead first, per W18) — the number now collapses to "Call" and the button holds one line. The bench lamp was redrawn from a kite-like sketch into a proper angled arm, shade and glow; the solitaire's claw knobs slimmed from 3.4 to 2.7 units; the badge widens to 258px when "engraved" joins the subtitle so text never touches the border.

Pass 2 — Depth

Added the second-read detail: a real hallmark stamped on the band's upper shoulder that changes with the metal — 375 for 9ct, 750 for 18ct, 950 for platinum. Stone changes now land with a 320 ms settle-pulse (scale .94→1, style-only so no SVG attribute collision), the sparkle twinkles on the glint clock, and the engraving line was lifted from floating mid-hole onto the band's inner edge where an inscription actually lives.

Pass 3 — Hardening

Measured every contrast hypothesis: moonstone grey read 4.18:1 on panel surfaces — under the 4.5 floor — so a lighter moonstone ink (#A7A0BE, 5.93:1) was minted for panel labels, the W33 two-token remedy run dark-ground-wise; gold measured 6.80:1 and needed nothing. Chanel rule: the white sheen arc on the band was removed — the gradient and grain arcs already carry the metal. SVG callouts bumped 12.5→14 for 375 legibility. Final sweep: 51/51 — worked examples vs an independent oracle, trade-in declaration on both surfaces, two rapid-fire drives, empty/filled submits on a fresh reload, reduced-motion static frame, 375 masthead edge-compare, and a native-resolution label-collision review of rest, engraved+trade-in, halo and both 375 badge variants.

← Back to Gilt & Grain · Collection index