Kettle & Crow — a store that sells the ritual.

The brief

Kettle & Crow is a fictional small-batch roaster built to show the ecommerce offer end to end. The brief: make four coffees feel like a place, sell recurring subscriptions without a maze, let a local customer choose pickup in one step, and give cafes and offices a wholesale lane that doesn't feel like an afterthought.

It also had to be a theme the owner could edit — copy, colors, sections, announcement — without calling a developer for every seasonal change.

The prototype build

The prototype is a light editorial system built around the bags, not a generic product grid: Fraunces for the voice, Inter for the work, JetBrains Mono for the commerce labels, and a CSS-drawn bag system that keeps four SKUs coherent without a photo shoot per roast.

• Dawn-based theme direction — section and block model designed for hero, featured collection, subscription builder, story, brew guide and footer; theme settings for copy, accent, radius and announcement. Production templates would live in JSON/Liquid.
• Product and cart flow — four roasts with size and grind options, quick add, product dialog, cart drawer, localStorage-backed demo state, and a filter row that actually filters.
• Subscription builder — coffee, grind and cadence in one panel, 10% off, a subscription line in the bag. Production connects to Shopify subscriptions instead of reimplementing billing.
• Local pickup + wholesale — a visible Tuesday pickup window and a wholesale inquiry lane. Production uses Shopify local pickup, B2B, or the client's chosen app.
• Accessibility and restraint — semantic headings, labeled controls, focus states, reduced-motion support, no framework, no invented performance score.

The admin concept

The admin mockup is a design tool, not a Shopify clone. It shows the theme editor a client would actually use: sections on the left, the live storefront in the middle, Hero settings on the right. Change the headline, accent, corner radius, or announcement toggle and the preview updates immediately. A second view shows the commerce dashboard — orders, subscriptions, pickup and low stock — to frame the handoff.

Production uses Shopify's native admin. The concept exists to show the theme-editor experience and the data a store owner manages; it is not connected to a Shopify account.

What's real vs. mocked

The design system