Source: https://octet-prow.app/examples/one-brand-three-landing-pages

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
01 / THE THREE PAGES

## Same project, three jobs

Product page Live 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 →
Advertorial Live 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 page Live 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.
03 / WHAT CARRIED OVER

## Element by element, across the three pages

| Element | Product page | Advertorial | Campaign page |
| --- | --- | --- | --- |
| Colour roles | Same Roast-brown headings and buttons, amber for prices and offers, sage for freshness tags. | Same | Same |
| Typefaces | Same Fraunces headings, Inter body text, IBM Plex Mono for labels and specs. | Same | Same |
| Buttons | Same Solid roast brown; amber on the dark footer band. | Same | Same |
| Spec rows | Same Origins and the freshness facts. | Same The subscription card and the checklist. | Same Dates, the box contents and the fine print. |
| Section layout | Same | Same The same label column and wide content column, used once per cause. | Same |
| Dark bands | Same One: the footer. | Missed Two: a band in the middle of the article and the footer. | Same One: the closing band runs into the footer. |
| Photography | Same Framed photos: the hero, one per origin and one beside the freshness facts. | Adapted One photo, beside the offer. The article itself is text. | Same Framed photos: the hero and one per item. No full-width photo, though the system allows one on campaign pages. |
| Tone of voice | Same | Adapted Explains first and says who paid for the page before it sells. | Same |
| Facts written in the brief | Same 250 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 | Fixed Said “ground fresh” on a whole-bean page; added a grinder price comparison. | Fixed A monthly delivery option and a roast choice the product page does not offer. | Fixed A ground option and a shipping refund on a box that ships free. |
| Links between pages | Fixed The wordmark had no link; we pointed it at the top. | Fixed Both 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. |

- Same consistent across the pages
- Adapted changed on purpose for the page type
- Fixed we changed it after generation
- Missed the design system asked for it; the page did not do it

### What this tells you

The look and every fact written into a brief carried over without help. What did not carry over were facts nobody wrote down: each page filled in details such as delivery options, grinding and late deliveries on its own, and the three versions did not agree. If several pages share product facts, put them in the project brief, not only in each page brief.
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.
06 / THE BRIEFS

## 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.

## Start your own project and keep every page on brand.

Start creating