NORTH FORTY COFFEE.
Concept identity and commerce site for a fictional KC small-batch roaster. Direct-trade single-origin and a monthly subscription.
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.
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.
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.
Aesthetic system.
fig. ii · palette + type- Display
- Recoleta 500
- Body
- Inter 400
- Mono
- JetBrains Mono 400
- Blue Bottle's old packaging (pre-Nestle)
- Kinfolk magazine layouts
- Aesop product pages
- Japanese tea-ceremony minimalism
- Editorial cookbook pages
Gallery.
fig. iii · 06 framesTechnical 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.