01 · Overview
A shop that behaves like a field journal
Skincare e-commerce has one default: a white grid of jars with a discount badge. For this concept, I imagined a brand that grows its own calendula, nettle and rugosa rose on two acres and pours thirty-four jars per batch. A white grid would flatten the only thing that makes it worth buying.
So the page is warm paper with a fractal-noise grain fixed over the whole surface, the plates are arch-topped the way the product photography is, and the reveals settle out of a two-degree rotation — nothing arrives perfectly square, because nothing here is machine-made.
02 · The idea
Scarcity you can count
The fictional brief called for every batch to be numbered, every jar one of thirty-four — a constraint to design around rather than a marketing device, so the page treats the number as content: it appears in the masthead, in the footer, and on the product shelf.
The arch
A single shape — border-radius: 50% 50% 0 0 — used on plates, product cards and the hero. It is the page's entire ornament vocabulary.
Grain over everything
An SVG feTurbulence fixed above the page. Inline, so it costs one line of markup and not a single request.
Nothing lands square
Reveals settle from −2°, and cards tilt very slightly under a fine pointer. Both disappear entirely under reduced motion.
03 · Goals
What the page had to do
Sell four products properly
A bestsellers shelf with real ingredients and real prices, not a grid of thumbnails and a filter bar.
Tell the field's story once
One field, every jar — the provenance section that justifies the price, placed before the shop rather than after it.
Teach the ritual
An evening sequence in four steps, because the product only works if somebody uses it in order.
Take an email without begging
"Slow letters, first harvests" — a subscription block that names what arrives instead of promising a discount.
04 · Build order
How it was built
The palette from the field
Twenty custom properties sampled from the plants themselves: oat, espresso, moss, sage, tan, cream and a deepened moss for anything that has to be read.
Forty-six inline SVGs
Squiggles, leaves, the wavy underline, every icon and the seal. Nothing rasterised, nothing from an icon set.
The grain layer
Fixed,
pointer-events: none, above the background and below the content, at an opacity low enough to feel like paper rather than noise.The arch system
One radius token applied at three scales — hero, plate, product card — so the shape reads as a system rather than a flourish.
Basket and accordion
Add-to-basket with a re-entry guard so a double click cannot add twice, and an FAQ that keeps one answer open.
05 · Architecture
Three files
├── index.html 40.0 KB — 6 sections, 10 photographs, 46 inline SVG
├── styles.css 31.6 KB — 20 custom properties, 5 media queries
└── script.js 9.3 KB — 299 lines: header · nav · reveals · tilt · basket · accordion
The stack
- feTurbulence
- CSS Grid
- 3D tilt
- Inline SVG
- IntersectionObserver
- Prata
- Nunito Sans
Accessibility
- aria-live basket
- aria-expanded
- Focus move on anchor
- pointer: fine gate
- Reduced motion
06 · What fought back
What fought back
A full-page grain overlay is a fixed element covering the viewport, which is the classic way to make every link on a site unclickable.
pointer-events: none on the layer, and it sits at a z-index below the content rather than above it. The grain is visible over the background and never over a control.
Mouse-tracked 3D tilt on product cards means one listener and one transform per card — with a shelf of them, that is a lot of work per frame for a decorative effect.
The tilt is a CSS hover transform gated behind (hover: hover) and (pointer: fine) and prefers-reduced-motion: no-preference. No listener, no frame cost, and on touch it simply does not exist.
Moss green on oat looks right and measures wrong: the mid-tone I chose for the brand fails contrast at body size.
Two greens. The lighter moss fills shapes and rules; a deepened moss carries every piece of accent text. The palette is unchanged to look at and passes.
Add-to-basket fired on every click, so a double click quietly added two jars from a batch of thirty-four.
A re-entry guard on the button that ignores repeat presses until the confirmation has been announced in the live region — the feedback and the lock share one state.
07 · Worth keeping
The parts worth keeping
The bestsellers shelf
Four arch-topped cards with ingredients, batch numbers and prices — a shelf, not a grid.
One field, every jar
The provenance section, placed before the shop so the price makes sense by the time you reach it.
The evening ritual
Four steps with hand-drawn marks, which is the closest a web page gets to an instruction card in the box.
Batch No. 34 is pouring now
A footer line that changes with the batch — the fictional inventory carried through to the very last word on the page.
08 · Run it live
Run it here
The real build, embedded and running. It loads on demand — nothing is fetched until you ask for it.
Skip the live preview
The real build, running in the page. The live preview is an embedded page; press Escape to leave it.
Open full screen ↗
