All work
Studio · Specialty Roaster · 2026 Brand · Web · Graphic · 2026

NORTH FORTY COFFEE.

Concept identity and commerce site for a fictional KC small-batch roaster. Direct-trade single-origin and a monthly subscription.

01 Brief

Imagined client: a 3-person roastery in the West Bottoms running a tight catalog of ~12 single-origin coffees rotating quarterly, plus a subscription that ships every two weeks. The peer set on Shopify all looks identical — same theme, same hero image, same "Our Story" tab. The brief is to teach without lecturing: each coffee has an origin profile, a roast curve, tasting notes, brew suggestions, and an honest acknowledgment of what's *not* there (no asterisk-laden marketing language about "ethically sourced"). Subscription is the conversion goal.

02 Approach

Treated the bag of coffee as the lead product, not the brand. Editorial product pages with origin maps, a tasting-notes flag carousel, brew-method recommendations rendered in plain language. Subscription flow built on a custom Tier 3 commerce stack rather than Shopify — the catalog is small enough to skip a SaaS, and the brand needs more typography control than any Shopify theme gives cleanly. Kraft and terracotta against paper-white. Nothing twee.

03 Outcome

A custom-stack commerce site that feels editorial first and transactional second. Proves Nucifera can ship a real subscription product on the SvelteKit + PocketBase + Stripe stack without falling back to a SaaS platform — and that the result feels less templated, not less polished. Under 50KB of JS shipped to the client.

02 — The system

Aesthetic system.

fig. ii · palette + type
A Palette
Paper
#F4F1EA
paper
Kraft
#9F7E5A
secondary
Espresso
#3B2417
ink
Terracotta
#C56F4D
accent
Oat
#E8DDC9
neutral
B Typography
Display
Recoleta 500
Body
Inter 400
Mono
JetBrains Mono 400
C References
  • Blue Bottle's old packaging (pre-Nestle)
  • Kinfolk magazine layouts
  • Aesop product pages
  • Japanese tea-ceremony minimalism
  • Editorial cookbook pages
04 — Under the hood

Technical notes.

fig. iv
  • 01 Custom commerce on SvelteKit + PocketBase + Stripe — no Shopify, no Squarespace.
  • 02 Product pages render origin maps as static SVGs (free, fast, brand-tunable) instead of Mapbox tiles.
  • 03 Subscription billing handled via Stripe Subscriptions with a custom portal so members can pause / skip / change frequency in one click.
  • 04 Cart is non-modal and persists across page navigation — a small touch that changes the conversion math meaningfully on small catalogs.
  • 05 ~50KB JS payload, ~150KB CSS. Lighthouse 100 across the board.
Web build on the custom skeleton. · Disciplines: brand · web · graphic.
05 — Keep looking

More work.

fig. v