Jewelry · Light

Silversmith

An off-white jewelry editorial: the scroll runs the film of a hand with rings in macro close-up, which shrinks and lands as the first card of the shop, while a condensed serif tells the origin of each stone.

Palette

--bg#F4F2EE
main warm off-white
--bg-2#ECE9E4
background of the product photos
--ink#1A1A1A
serif titles and buttons
--ink-2#66635E
supporting text, prices (5.3:1 on --bg)
--ink-3#C9C6C0
text in reveal (initial state, before lighting up)
--ghost#8C8781
second italic line of the titles (3.2:1, display ≥ 24px only)
--line#DEDBD5
dividers, pill borders
--accent#1F6B4A
tourmaline green of the gem icon and minimal details
--rose#D98AA6
tourmaline pink (only as a reference for the images)

Typography

Display: condensed transitional serif, regular weight, uppercase in the hero and normal case elsewhere, tracking -0.02em, line-height 0.95; hero clamp(56px, 7vw, 110px), sections clamp(36px, 4vw, 64px) — suggestions: Newsreader Condensed (high opsz) / Instrument Serif.
Body: neutral grotesque 11–13px, gray — suggestions: Inter / Geist.
Support/labels: 8–9px uppercase in brackets "[ label ]" with 0.12em tracking.
Treatments: second line of titles in light gray italic; large manifesto paragraph that comes into focus word by word; giant wordmark in the footer with a small 3D gem over the letter.

Sections

Film hero — video/sequence of a hand with three rings on a white background; 2-line uppercase serif title at the bottom left; pill button "collection +"; "[ scroll slowly ]" in the center; material note on the right.
Close-up — the film advances in macro zoom to the main ring; "[ the piece ]" tag with serif name and specification at the top left.
Initial showcase — the film frame shrinks and docks in as the central card of a row of 3 products (photo, name, price).
Origin — raw materials floating (silver nugget, bicolor tourmaline crystal, silver wires, leaf); large serif paragraph that comes into focus; small materials table on the right.
Collection — giant title cropped at the top, description and count; asymmetric grid of products at different heights (large and small cards), name + price under each.
Handmade — 3-line serif title; macro of hammered silver in a vertical strip; two large numbers (weight range, warranty) with captions; text and button.
Atelier — 2-line title (2nd in light italic); strip photo of the workbench; 3 numbered steps with a serif title and description.
Footer — 4 columns (atelier, customer care, socials, newsletter with a pill field); legal line, "[ back to top ]"; giant serif wordmark with a 3D gem.

Motion and interaction

Film on scroll: scroll scrub with pin (GSAP ScrollTrigger) → canvas frame sequence of the hand, from the wide shot to the macro of the ring.
Shrink and become a product: end of the pin → the canvas shrinks (Flip) to the size and position of the showcase's central card; the other two cards enter from the sides.
Glint on the gem: small star of light (sprite) that blinks on the stone in the macro frame.
Text that comes into focus: scrub → each word goes from blur(8px) and light gray to sharp and black.
Floating raw materials: parallax at different speeds + slow rotation.
Collection grid: vertical parallax per column (columns at different speeds).
Lenis: lerp 0.07, slow and heavy scrolling.
Footer 3D gem: slow continuous rotation.

Components

Pill button: 1px --ink border, 8px uppercase text, 16px black circle with "+" on the right.
Bracketed label: 8px uppercase, tracking 0.12em.
Product card: photo on --bg-2 with no radius, 10px name on the left and 10px price on the right, 9px gray material.
Piece tag: bracket + 22px serif name + 8px specification line.
Materials table: 3-column 8px rows with dividers.
Editorial number: 48px serif + 20px serif subtitle + 9px caption.
Atelier step: 8px index, 22px serif title, 10px description.
Newsletter field: 1px pill with an inner black "+ subscribe" button.