← Back to the atelier Guide · How this site was made

Struck, not templated

Concept & art direction

Atelier Aurum is a one-goldsmith atelier making one-of-one hammered 22-karat pieces to commission — four a season. The direction is fire and metal: forge charcoal, warm 22k gold, ecru linen for the workshop pages, and a single garnet accent (the one stone the bench sets). Everything structural borrows from hallmarking, because hallmarks are the original honest UI: marks that encode who, what, and when.

It is the deliberate opposite of its sister guide, Maison Nacre — nacre is water, layers, and iridescence; Aurum is fire, strikes, and glints. Two jewelry ateliers, two elements, no shared moves.

Palette

The gold is kept warm and slightly muted — 22k is orange-leaning, never lemon. Garnet appears only where meaning does: step numerals, "spoken for" states, temperatures.

Type pairing

Cinzel for marks and display — it is drawn from Roman inscriptional capitals, i.e. letters designed to be cut into material, which is literally what a hallmark punch does. It never appears in lowercase here, only struck caps with wide tracking. Schibsted Grotesk carries the body: a calm, slightly warm grotesk that stays out of the engraving's way. The pairing is stone-cut caps over bench-notes prose.

The signature: a canvas glint engine

The hero band is not an image. It is a 2D-canvas torus built from ~550 facets; each facet gets a fixed random jitter added to its true surface normal — that jitter is the hammering. A point light follows your pointer (or drifts on its own), and each facet is shaded with a diffuse + specular model, mapped onto a five-stop gold ramp:

// facet normal = torus normal + hammer jitter (seeded, permanent)
let nx = c.nx + f.jx, ny = c.ny + f.jy, nz = c.nz + f.jz;

const diff = Math.max(0, nx*lx + ny*ly + nz*lz);
const spec = Math.pow(Math.max(0, nx*hx + ny*hy + nz*hz), 26);
let v = 0.10 + diff * 0.55 + spec * 0.85;   // → gold ramp

if (spec > 0.55) sparkles.push(...)          // this facet throws a glint

Facets whose reflection aligns with the viewer push a drawn sparkle — a radial gradient plus a four-point star, composited with globalCompositeOperation: "lighter". Drawn light, no lens-flare PNGs. With prefers-reduced-motion, the engine renders one static lit frame and stops.

The second signature moment is the hallmark press: when the commission form scrolls into view, the maker's mark drops and stamps into the page — a scale-overshoot keyframe with a shadow that collapses at the moment of impact, leaving a sunken impression behind. The same mark returns when you submit the form: "Received at the bench."

@keyframes stampPress {
  0%   { transform: translateY(-70px) scale(1.5); }  /* raised punch */
  45%  { transform: translateY(0) scale(0.96); }      /* impact */
  62%  { transform: translateY(0) scale(1.03); }      /* rebound */
  100% { transform: translateY(0) scale(1); }         /* struck */
}

Photography

Three photographs were generated with gpt-image-2 (the pour, the anneal, the finished band) from prompts written like an editorial brief — lens, aperture, film stock, one light source — then compressed to JPG. The hero deliberately stays code-drawn so the real band on the page is the one you light yourself.

The three passes

1. Pass 1 — correctness & composition. Scroll-reveals left whole sections blank in any no-scroll context, so a quiet fallback now reveals off-screen content after 1.7 s; on phones the band collided with the buttons, so narrow screens give it its own zone at the foot of the hero.
2. Pass 2 — elevate. Rebuilt the band mesh with shared-vertex jitter so facets are irregular planes with a hammered silhouette, set it turning slowly as if on a mandrel, added the mark-inspection hover on the hallmark strip, and laid a whisper of soot grain over the hero.
3. Pass 3 — taste. Chanel rule: cut the step sublabels that repeated each heading, hid "move your pointer" on touch screens where it would be a lie, thinned the band's tube and added occlusion so the bowl gains depth.

Do this yourself

1. Pick a subject with a real process and learn five of its true words (planish, anneal, fineness…). Copy written in the trade's own language is half the design.
2. Ask Claude for an art direction pinned to the subject's materials — name hexes, name typefaces, and state why each belongs to this subject and no other.
3. Choose one signature element and spend all boldness there. Here it's a canvas light engine; keep everything around it disciplined.
4. Build the structure so it encodes truth: our numerals I–VI are a real order of operations, and the four slots are a real capacity.
5. Generate photos with an editorial brief — lens, light, film — never "a photo of a ring."
6. Screenshot at 1440 and 390, critique like a stranger, and fix what you actually see. Do this three times.
7. Before shipping, remove one accessory. Then check reduced motion, keyboard focus, and the console.

← Back to Atelier Aurum