Marrowfield, on the web
A homepage concept for our fictional coffee roaster, built inside the brand system we wrote for it.
The brief
Marrowfield is the fictional small-batch roaster from our demonstration brand system, fifteen spreads in a warm register a long way from our own. A brand book that never touches a real surface is decoration. So this is the follow-through: the homepage the system promises, built from the book's own rules rather than around them.
The approach
- Everything on the page is specified in the book. The coded coffee-cherry mark, the roast-in-five-tones palette, Fraunces display over Newsreader text with IBM Plex Mono carrying the roast data, the 12-column grid.
- The hero is the book's own applied-layout exercise, promoted to a full page: Coffee for the people who stay, with the standing order carried through to the close.
- The voice spread drives the copy. Tasting notes stay plain (plum, jasmine, a little honey), the freshness claim is a date on a bag, and nothing is a symphony of anything.
- One coded HTML page, rendered at 1440 and 390 through real device emulation. The grain is CSS noise, the mark is SVG, and there is no photography or generated imagery anywhere.
The result
- A homepage concept that proves the system survives contact with a real surface: a shelf of three coffees, a freshness manifesto, named origins, and a standing order, all inside the book's rules.
- The two pieces read as one engagement, the brand system first and then the site built on it. That continuity, system to surface, is the deliverable a real client would buy.
The artifact
See the real thing
Every page below is the real render. Click any spread to view it full size.
Want this caliber on your brand?
Book a call and we'll walk you through how a piece like this gets made, and what it looks like pointed at your business.