Coffee subscription product page example: whole beans roasted days before shipping
A product page for Kettleby, a fictional coffee roaster. It opens on the roast date, then explains the subscription in three steps, the three current origins and why roast date matters, and ends with a short sign-up form.
Part 1 of 3One brand, three pages- Page type
- Product page
- Canvas
- Desktop · 1280 px
- Sections
- 6
- Brand
- Kettleby (demo brand)
Download and usage details
- Files
- HTML + CSS · images included
- Usage
- Free to edit and use in personal and commercial projects. Attribution is optional. Do not resell or redistribute the templates themselves as templates.
- Forms, if included
- They look complete but do not send anything. Point the form at your own form service or email tool before you publish.
- Fonts
- Fonts load from Google Fonts
- Demo content
- Every brand is a fictional demo brand, and the copy was written for that demo. Replace product facts, offers and any testimonials with your own, and check every claim before you publish.
What we typed
A product page for Kettleby Fresh Beans, a whole-bean coffee subscription. Each delivery is one 250 g bag roasted within 3 days of shipping, sent every 2 or 4 weeks, at $16 per bag; customers can pause, skip or cancel at any time. Explain how the subscription works in three steps, show the three current origins with short tasting notes, explain why roast date matters for freshness, and answer common questions about grind, delivery and cancelling. Main action: Start my subscription. Do not invent reviews, ratings, statistics, awards or customer quotes. In the footer, add one line: Kettleby is a demo brand created to show what Octet Prow can build. It is not a real company and nothing here is for sale.
Kettleby — Roastery Ledger
- primary · #4A2C1B
- secondary · #C2761F
- tertiary · #5E7355
- surface · #FBF6EE
- outline · #C9BBA8
- inverse · #241A13
- Serif · Fraunces
- Sans · Inter
- Mono · IBM Plex Mono
Generated once for the project from its brief. Every page in the project follows it.
How the page is put together
- OpeningCoffee that was roasted three days before it shipped.The roast-date promise, the price per bag and the subscribe action, beside a photo.
- 01Three steps, then it just shows up.How the subscription works, in three numbered steps.
- 02Three origins on the shelf this month.The three current origins as cards with tasting notes and spec rows.
- 03A bag of coffee is a clock, not a bottle.Why roast date matters, with the facts set out as spec rows.
- 04The questions people actually ask.Grind, delivery, price, pausing and cancelling.
- 05Pick your rhythm. We'll handle the roasting calendar.A short form: delivery rhythm, brewer, first bag and email.
What we checked and changed
We read the three Kettleby pages side by side. On this one the opening said the beans were ground fresh, while the page sells whole beans only, so we asked the editor to say whole beans. We also removed an answer comparing the price of a hand grinder with the subscription, a figure we had not supplied. The three origins, with their altitudes and processes, were written by the model: the brief named none. As the brand is fictional, we kept them. Before publishing we generated the images in the editor and linked the Kettleby wordmark to the top of the page.