Design guide
How this site was made.
Maison Nacre is a fictional pearl-only high-jewelry house, built as a static site — hand-written HTML, CSS and vanilla JS, no build step, no frameworks. This page documents the thinking, in the site's own design system.
The concept
Pearls are the only gem grown by a living animal, so the page argues that thesis in order: lagoon → years → harvest, then presents three pieces like couture looks, then asks for one thing — a private viewing. The art direction is "French quietness": deep abyssal teal-black against nacre ivory, a whisper of gold, and iridescence handled as light, never as glitter.
The three photographs (South Sea strand, golden pearl ring, Tahitian baroque drops) were pre-generated with Nano Banana Pro. Everything else on the page is drawn in code.
Palette
The three "orient" pastels never appear as flat fills — they exist only inside the sheen canvas and the hover sweep, at 8–16% alpha, the way orient exists on a real pearl: only when the light moves.
Type
A pearl is not found. It is raised.
maison nacre · paris
Cormorant + Cormorant SC. An elongated, high-contrast garalde with real small caps — the letterspaced small-cap labels are the maison's voice, exactly the register of a Paris jewelry house's engraved stationery.
High jewelry in South Sea, Tahitian and Akoya pearls — each one grown over years inside a living oyster.
Jost, light. A quiet geometric sans in the Futura tradition — the default typographic accent of French fashion — used small, letterspaced, and never bold. It stays out of the serif's way.
Technique — the nacre sheen
The signature element is a fixed, pointer-events-none canvas over the whole page. It draws one rotated band of layered gradients — rose, pearl-white, sea-green, pale blue — whose centre eases toward the pointer at 4.5% per frame. The lag is the point: light doesn't jump across mother-of-pearl, it rolls.
// the band: four orient hues, low alpha, one crest of white var g = ctx.createLinearGradient(0, -band/2, 0, band/2); g.addColorStop(0.22, 'rgba(231,198,204,0.085)'); // rose g.addColorStop(0.50, 'rgba(255,255,255,0.16)'); // crest g.addColorStop(0.58, 'rgba(191,220,203,0.10)'); // sea green g.addColorStop(0.78, 'rgba(194,211,232,0.075)'); // pale blue // the roll: ease toward the pointer, never arrive abruptly x += (tx - x) * 0.045; y += (ty - y) * 0.045;
Touch devices get a slow autonomous drift (a Lissajous path, one cycle per minute). With
prefers-reduced-motion, the band is drawn once and stays still — present, but calm.
Technique — the strand atlas
The five strand lengths (collar, princess, matinée, opera, rope) are cubic Bézier arcs on an SVG neck silhouette. The pearls are not circles — each strand is one path with a round-capped dotted stroke, so a single line of SVG renders a whole string of pearls:
<path d="M 243 205 C 243 348 317 348 317 205"
stroke-width="10"
stroke-dasharray="0.1 14" <!-- dot, gap = pearl, knot -->
stroke-linecap="round"/>
The depth of each arc was solved from the cubic midpoint formula (lowest point = (P₀ + 3C₁ + 3C₂ + P₃)/8) so the five drops sit in true proportion to their centimetre ranges. Hover, click or focus a length in the list and the matching strand lights from 13% to full ivory.
The three passes
- pass one · correctnessMade the reveal system robust so the page can never be captured half-blank (a no-human-input fallback shows everything after 900 ms), deepened the gold used for small caps on ivory grounds for legibility, rewrote the hero label so it no longer repeated the nav brand, and set the guide's palette swatches on a strict three-column grid.
- pass two · elevationAdded the pearl-settle micro-interaction — choosing a length rolls the pearls
into place along the string via
stroke-dashoffset— gave the sheen a faint counter-glow opposite the band (nacre never has one highlight), lifted the ghost strands from 13% to 16%, and tightened the hero display tracking. - pass three · tasteChanel rule: removed the hero's scroll cue — it made the words "La Culture" appear three times on one screen. Dropped the hero strand below the CTAs at 390px so pearls stop colliding with buttons, and re-verified reduced motion, keyboard focus, and both widths.
Do this yourself
- Choose a thesis, not a topic. "Pearls are grown, not mined" gives you structure, copy, even section numbers for free. Ask Claude for the one true sentence first.
- Commission an art direction in writing — palette with hex values, two named typefaces, and one signature element — before any HTML exists. Refuse defaults.
- Build the signature element alone in a blank page until it feels right, then wrap the site around it. Here: the sheen canvas came first.
- Make structure carry information. Number the sections after the argument (culture → atlas → pieces → rendez-vous), and let every stat be true.
- Draw what you can, generate only what you must. The atlas is 30 lines of SVG; only the three product photographs are generated imagery.
- Screenshot, critique, repeat — three times. Read the screenshots like an art director: spacing rhythm, contrast, type scale, mobile. Fix, then elevate, then remove one thing.
- Test the quiet paths: keyboard focus, reduced motion, 390px. Luxury is when the edge cases are also composed.