How this site
was made.
Everything on the previous page — the concept, the copy, the code, the photography, the 3D stone and the motion — was designed and built end-to-end by Claude (Fable 5), working alone from Danielle's brand documents. These are the field notes.
The whole site is a jewellery box being opened.
Danielle's design system contains one sentence that decided everything: “Every decision prioritises the feeling of opening a jewellery box — unhurried, beautiful, personal.”
So the site takes it literally. It begins closed: near-black garnet, a single stone turning in candlelight. As you scroll, a slit of ivory light opens across the viewport — the lid — and the page emerges into daylight, where the story of a commission unfolds in four chapters: the conversation, the design, the making, the moment.
The other structural decision was honesty. The section called “How we want you to feel” could have been faked testimonials. Instead it sets Danielle's own standard — six sentences she wants every client to be able to say — which is both truer and more distinctive.
Ivory pages, gold threads, garnet moments.
- Never gold on white — only on ivory, linen or garnet, so it reads as thread, not paint.
- A page reads as ivory with gold threads, never as a gold page.
- Garnet is an event. It appears three times on the whole site, and each time it means something: the closed box, the fire of the making, the promise.
- No border-radius anywhere. Squared edges signal precision craft.
Two voices: one romantic, one quiet.
The box opens. That's the point.
Carries all the emotional weight: headings, chapter numerals, pull quotes, the feelings. High-contrast strokes and classical proportions — the voice of the brand. Self-hosted woff2, latin subset only.
Guided, never pushed. Ask every question you have.
Handles all utility: navigation, buttons, labels, body copy. Slightly geometric, always lowercase-calm. Uppercase only ever appears with 0.18em of tracking.
Everything transitions. Nothing jumps.
Three durations, two easings, used everywhere without exception. Hover the cards to feel the difference — the same journey at the system's three speeds.
The bigger choreography runs on GSAP ScrollTrigger: the prologue is pinned for 2.3 viewport-heights while the stone turns and the lid of light opens (a scrubbed clip-path inset); headlines are split into words that rise from behind their baselines; images are revealed by a veil that lifts like tissue paper off a boxed piece; the six feelings illuminate one by one as you pass them. Every effect is disabled for prefers-reduced-motion — the page simply appears, quietly.
No model was downloaded.
The gem is mathematics.
The stone in the prologue (and here, floating beside these notes) is built procedurally in three.js: a crown and pavilion made from two flat-shaded, sixteen-sided solids — the same way a lapidary thinks about a brilliant cut, as geometry.
It refracts a painted garnet backdrop through a physical transmission material with a diamond's refractive index, lit by a generated studio environment and one flickering candle-coloured point light. The gold dust is two counter-rotating particle fields with additive blending.
1.02.32 — just shy of diamond's 2.428 — the fire in the facets#d9c99a — champagne, through 2.6 units16-segment crown + pavilion, flat-shadedintensity 24 ± two summed sine wavesTwelve photographs that were never taken.
Every image on the site was generated (FLUX 1.1 Pro Ultra via fal.ai — the plan was GPT Image 2, which hit its billing cap on the first attempt, so the pipeline pivoted). All twelve share one appended style string, which is why they read as a single photographer's work:
“Warm candlelit fine-art photograph, quiet luxury editorial style. Palette: deep garnet red-black, warm ivory, antique gold. Shallow depth of field, macro lens feel, subtle film grain, painterly light, unhurried and intimate.”
Then every image was individually reviewed at full resolution, and five were rejected and re-prompted: the wax model had gibberish “engraving”, the sketchbook had physical miniature rings sitting on the paper, the workshop looked like a woodturner's, the silk was too gold (the system says gold is an accent, never wallpaper), and a note card had fake handwriting. Taste is mostly the willingness to throw things away.
No framework. No build step. Nothing to break.
Hand-written HTML & CSS
One stylesheet implements the entire design system as custom properties — the same tokens documented on this page. Semantic sections, real headings, alt text on every image.
GSAP + ScrollTrigger + SplitText
Vendored locally — no CDNs anywhere on the site. One pinned scrub timeline for the prologue, batched reveals everywhere else, and full prefers-reduced-motion fallbacks.
three.js, procedural only
A physical transmission material on sixteen-sided solids; generated environment lighting; graceful fallback to a still photograph when WebGL isn't available.
~1.4 MB first view
All twelve photographs together are ~820 KB of WebP. Fonts are subset woff2, self-hosted. The heaviest single asset is the 3D library — and it earns its keep.
Three passes with a fine-toothed comb.
The brief demanded at least three full review passes after the site was “done”. This log is written as they happen — findings, fixes, and the things that got thrown away.
The asset audit
- All 12 generated images reviewed at full resolution; 5 rejected for artifacts (gibberish engraving, impossible objects, wrong craft, palette drift) and regenerated with tightened prompts.
- Total image payload compressed 9.3 MB → ~820 KB WebP with no visible loss at display size.
The fine-toothed comb
- Every image on the site was inset by the browser's default
figuremargins — a one-line reset restored the editorial grid everywhere. - Hero copy could collide with the stone: added candle-dark text shadows, offset the 3D gem right on wide screens (echoing the photograph), and let it settle below the copy on phones.
- The opening lid gained two gold hairlines that ride its expanding edges — the light now has a rim, like a real box.
- Discovered modern three.js splits its minified build (
three.core.min.js) — a missing vendored file that silently broke the module graph. - The preloader could hold the page hostage in a hidden browser tab (rAF never fires there); it now always lets go, animated or not.
- Machines without real GPUs saw console errors and empty canvases: WebGL is now probed silently and every 3D canvas has a photographic understudy.
The refinements
- The hero headline now rises word-by-word from behind its own baselines (SplitText), sequenced label → title → sub-line → cue.
- A one-pixel gold thread grows along the bottom of the navigation as you read — the metaphor doing the job of a progress bar.
- The nav quietly marks which chapter you're in; primary buttons became gently magnetic; the lid's rim got its gilding checked at pixel zoom.
- On machines that fall back to the photograph, the hero recomposes itself: left-aligned editorial type, stone to the right — a different, equally deliberate layout rather than a degraded one.
- The cards became real keyboard controls (tab, enter), and every interactive element gained a visible gold focus state.
Ship-shape
- Full technical sweep: zero console errors on either page, semantic headings, skip links, JSON-LD for the studio, theme-colour, canonical + social meta, sitemap, robots, immutable caching headers.
- A 404 page that stays in character: "This page isn't in the collection."
- Weighed everything: ~2 MB for the whole site including all twelve photographs (~820 KB) and the 3D engine — the heaviest thing on the page is the mathematics, and it earns its keep.
- Deployed, then re-verified every section against the live URL — the last look is always at the real thing, not the local copy.