FORECOURT Campaign 05
One story,
three channels
Forecourt Market is a fictional weekend market, invented for this piece and staged in the same invented Hudson as its vendors. One brief, one system, three channels; every unit below is live HTML.
01
The brief
A two-day makers market, October 3 and 4, in the yard at Foundry Works. Forty studios open their doors; three neighbors set up tables. Free to walk in, so the only conversion is attendance.
One line everywhere: one yard, forty makers. The email tells the whole story, the feed breaks it into single posts, and the banners cut it to a headline and a date. No unit contradicts another on a date, an hour, or a name.
One brand system has to survive three renderers: a mail client that squares corners and skips webfonts, a feed that bakes everything to pixels, and ad slots down to 300 by 250.
02
The system
forty makers
03
The send
Hybrid 600 pixel tables with an mso conditional wrapper, no images at all, live text throughout, and dark mode declared twice: once as a prefers-color-scheme query, once through the data-ogsc and data-ogsb hooks for the Outlook rewriter, with every background pin repeated under both hooks. Gmail's dark rewrite and the Word engine's inversion take no instruction from the sender, so the light palette is written as the source they start from. The one deliberate move: the hedge-dark bead flips to oat in both dark routes so it stays visible on the dark ground.
The marigold keeps its system rule here too: the band at the top first, then the one button lower down.
04
The feed
Feed · the announcement
Open this tileThe whole story in one tile: the band, the line, the beads, the button.
Feed · the neighbors
Open this tileThe roster on the rye ground: the bookshop, the paper studio, and the drive-in.
Feed · projector night
Open this tileThe subject is dusk, so the system flips to its night palette without adding a color.
Story · last call
Open this tileThe week-of story: the email's details, rewritten to three lines for a thumb.
05
The placements
Billboard · 970 by 250
Open this unitThe widest slot: the line, the where, the when, and the beads minus marigold, because the pill beside them is already wearing it.
Half page · 300 by 600
Open this unitThe tall slot has room for the roster, so it carries the same three names as the feed.
Rectangle · 300 by 250
Open this unitThe smallest slot drops the beads and keeps the four things that matter: who, what, when, and the button.
06
The translation
| Element | In the send | In the feed | In the banners |
|---|---|---|---|
| The serif | Lora loads behind an mso guard with a Georgia stack inline on every line, so Word never touches a webfont | Loads at capture and ships baked into the pixels | Same as the feed: loaded, then frozen |
| The pill | Drawn twice, a VML roundrect for Word and the real anchor for everyone else | One div with a 999 pixel radius | One div, padded to stay a target at 300 wide |
| The beads | A row of colored table cells with rounded corners; classic Outlook squares them and the strip survives as squares | Free circles at 36 pixels and up | The billboard hands marigold to the pill beside it and keeps four at 18 pixels, the half page keeps all five at 14, and the rectangle has no room and goes without |
| Dark mode | Declared twice, the prefers-color-scheme query and the data-ogsc and data-ogsb hooks | Baked pixels carry one palette each; the dusk tile is the dark palette on purpose | One palette per unit |
| The floor | Nothing below 16 pixels, footer and unsubscribe included | Nothing below 30 pixels at 1080 wide | Nothing below 16 pixels at true size |
Spec work by Ryan Allen | all demo concepts
Part of the fullbuild.ai gallery.