Case study — Specialty coffee e-commerce
Fathom Coffee Roasters
A storefront with a working cart and no backend at all
- Vertical
- Specialty coffee e-commerce
- Year
- 2026
- Tier
- Commerce
- Pages
- 4
Demonstration build
The whole site is live. Go and click around.
01 — The brief
What the client came in with.
Customers abandoned checkout because grind selection was buried on a second screen, and the bag size was a dropdown nobody noticed.
The roastery wanted the site to explain origin and tasting notes with the seriousness of a wine list, without turning the shop into a reading exercise.
02 — The approach
Three decisions that shaped the build.
- 01
Variant selection in the open
Grind and bag size are visible buttons on the product page, with the price updating live. Nothing is hidden behind a dropdown and nothing is a surprise at checkout.
- 02
A cart that genuinely works
Line items, quantity changes, removals and a running subtotal, backed by a reducer and persisted to sessionStorage. It is demonstrably functional while still being a static site with no server.
- 03
Origin notes as the editorial layer
Altitude, process, varietal and tasting notes are set as a typographic data block — the seriousness of a wine list, in a tenth of the words.
03 — Identity system
Typography
- Display
- Spectral
- Body
- IBM Plex Sans
A literary serif for origin storytelling, with IBM Plex Sans handling product data where its figures stay unambiguous.
Palette
Ink Navy
oklch(27% 0.055 255)
Copper
oklch(64% 0.128 56)
Paper
oklch(95.5% 0.014 86)
Sea Glass
oklch(72% 0.068 190)
Built
- Six-product catalogue with origin metadata
- Product page with live-priced grind and size variants
- Working cart drawer with quantity and removal
- Cart persistence across page navigation
- Subscription explainer with cadence options
04 — The build, by the numbers
- Pages built
- 4Pages built
- Products with variants
- 6Products with variants
- Server calls
- 0Server calls