Product pageLive page ↗
Coffee that was roasted three days before it shipped.Sells the subscription: how it works, the origins, why roast date matters and a sign-up form.
Brief and structure →Case study · One project, three page types
One brand, three landing pages: what stays the same when the page type changes
We built a product page, an advertorial and a campaign page for one fictional coffee brand, Kettleby, in a single Octet Prow project. All three follow the project’s design system. This page shows what carried over, what changed on purpose for each page type, and what we still fixed by hand.
- Brand
- Kettleby (demo brand)
- Pages
- Product page · Advertorial · Campaign page
- Canvas
- Desktop · 1280 px
- Design system
- Generated once, used by all three
Same project, three jobs
AdvertorialLive page ↗
Why does my coffee at home taste bitter?Answers a reader’s question first; the subscription appears in the second half.
Brief and structure →
Campaign pageLive page ↗
The Holiday Gift Box: three bags from this season's roasts.A dated offer: what is in the box, the deadline, the delivery terms and one order button.
Brief and structure →02 / THE SHARED DESIGN SYSTEM
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 from the project brief (in section 06). All three pages were built against it.
FROM THE WRITTEN GUIDELINES
Four rules, and whether the pages kept them
“Sage is never used on a purchase button; if a control buys something it is brown or amber, if it informs something it is sage.”
Kept on all three. Every buying button is brown or amber; none is sage.
“Specs are laid out as ledger rows, not as chips or floating cards: name on the left, value right-aligned in mono, hairline between.”
Kept on all three: the origins and freshness facts, the subscription card and checklist, the dates and fine print.
“inverse-surface / inverse-on-surface is the inverted band: footer, newsletter strip, a pull-quote inside a long advertorial. Use it for at most one dark band per page, and put secondary on it for the only bright element inside.”
Kept on the product and campaign pages. The advertorial has two dark bands: one in the middle of the article and the footer.
“Prices, roast dates, weights and any numeric spec use the mono stack via price / type-label — numbers must be set in mono everywhere in the project, including inside prose about a bag weight.”
Kept in spec rows and labels on all three, missed in running text: weights, prices and times inside sentences are set in the body font.
Element by element, across the three pages
| Element | Product page | Advertorial | Campaign page |
|---|---|---|---|
| Colour roles | SameRoast-brown headings and buttons, amber for prices and offers, sage for freshness tags. | Same | Same |
| Typefaces | SameFraunces headings, Inter body text, IBM Plex Mono for labels and specs. | Same | Same |
| Buttons | SameSolid roast brown; amber on the dark footer band. | Same | Same |
| Spec rows | SameOrigins and the freshness facts. | SameThe subscription card and the checklist. | SameDates, the box contents and the fine print. |
| Section layout | Same | SameThe same label column and wide content column, used once per cause. | Same |
| Dark bands | SameOne: the footer. | MissedTwo: a band in the middle of the article and the footer. | SameOne: the closing band runs into the footer. |
| Photography | SameFramed photos: the hero, one per origin and one beside the freshness facts. | AdaptedOne photo, beside the offer. The article itself is text. | SameFramed photos: the hero and one per item. No full-width photo, though the system allows one on campaign pages. |
| Tone of voice | Same | AdaptedExplains first and says who paid for the page before it sells. | Same |
| Facts written in the brief | Same250 g bags, roasted within 3 days of shipping, whole bean, the prices and the footer line held on every page. | Same | Same |
| Facts the brief left out | FixedSaid “ground fresh” on a whole-bean page; added a grinder price comparison. | FixedA monthly delivery option and a roast choice the product page does not offer. | FixedA ground option and a shipping refund on a box that ships free. |
| Links between pages | FixedThe wordmark had no link; we pointed it at the top. | FixedBoth buttons had no link; we pointed them at the product page. | The final order button stays unlinked: there is no checkout behind a demo brand. |
- Sameconsistent across the pages
- Adaptedchanged on purpose for the page type
- Fixedwe changed it after generation
- Missedthe design system asked for it; the page did not do it
04 / WHAT CHANGED ON PURPOSE
Structure follows the job, not the brand
Colours, type, buttons and spec rows stayed the same. What differs is what each page has to do first, so the order of sections, how much text there is and where the button sits change with the page type.
- Product page · Opens on the roast date, the price and the subscribe button, and repeats the button in the header, the sign-up form and the footer.
- Advertorial · Reads as an article. No button appears until a dark band marks the turn and the page says who paid for it.
- Campaign page · Puts the deadline, the delivery date and free shipping in the first screen, then repeats them in a timeline and the fine print.
05 / WHAT WE FIXED
Edits after generation, page by page
- Product page →
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.
- Advertorial →
The subscription card said every 2 weeks or every month and offered light, medium and dark roasts; the product page says every 2 or 4 weeks and has no roast choice. We asked the editor to match the product page, and the first step now asks how often you want a bag. Both “Try your first bag” buttons had no link, so we pointed them at the product page. The page has two dark bands, one mid-article and the footer, where the design system allows one; we left it as generated. The image was generated in the editor before publishing.
- Campaign page →
Two answers had to change. One offered ground coffee at checkout, though Kettleby sells whole beans only. The other promised to refund the shipping cost of a late box, a policy the brief never gave, on a box that already ships free; we replaced it with a rule of our own for the demo: a box ordered by December 15 that has not arrived by December 24 is refunded. The order button inside the order card has no link, because there is no checkout behind a demo brand. The images were generated in the editor before publishing.
What we typed: one project brief, three page briefs
Project brief
Kettleby is a small-batch coffee roaster that sells whole-bean subscriptions online. Its customers brew at home with a pour-over or an AeroPress and want beans that are fresher than what the supermarket sells. The voice is warm, plain-spoken and practical, never snobby about coffee. Pages will include product pages, advertorials and seasonal campaign pages, and they should all look like the same brand. Kettleby is a demo brand created to show what Octet Prow can build; it is not a real company and nothing on its pages is for sale.
Product page
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.
Advertorial
An advertorial: an article-style pre-sell page built around one reader question, why does my coffee at home taste bitter? Near the top, label it clearly as sponsored content from Kettleby. The first half explains five common causes with a fix for each that anyone can use with their own equipment: stale beans, a grind that is too fine, water that is too hot, brewing for too long, and a brewer that needs cleaning. Only in the second half, introduce the Kettleby subscription as one way to fix the stale-bean cause: whole beans roasted within 3 days of shipping, with the first bag at 30% off. No health claims, and no invented studies, statistics, reviews, quotes or expert names. Main action: Try your first bag. 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.
Campaign page
A campaign page for the Kettleby Holiday Gift Box: three 250 g bags of whole-bean coffee from the current origins, a printed tasting card and a handwritten note, for $42. Orders placed by December 15 are delivered before December 24 within the US; shipping is free on the box. Show what is in the box, the order deadline and delivery terms clearly, explain that the giver can add a gift message at checkout, and answer a few short questions about delivery dates, ground or whole bean, and what happens if the box arrives late. Main action: Order the gift box. Do not invent reviews, ratings, statistics 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.