Design Direction for Websites: Concepts Before Any Code

I've set the direction for Gullstone Bakehouse and picked a concept, since you weren't available to choose. I wrote no code and built nothing.

The three concepts

The Depot Board (chosen). The home page is the tram shed's own timetable: Tuesday to Saturday as ruled rows on a tram-green panel. The Thursday row is twice as tall as the others and holds the headline and the only amber button, "Join the Thursday share". Typefaces: Big Shoulders Display for headings and Public Sans for body text.
2.

The Tear-off Notice. The page picks up the paper notice people just read on the harbour noticeboard. A pinned sheet sits on a grey background, and its tear-off tabs are the sign-up action. Typefaces: Gloock and Instrument Sans.
3.

The Harbour Weekly. The home page looks like one page of a local weekly paper. The bread share is the lead story, and narrow margin notes give today's hatch hours and the Friday cardamom knots. Typefaces: Libre Franklin and Libre Caslon Text.

Why the Depot Board: the tram shed is the one fact in the brief that belongs only to this bakery. A timetable also handles both jobs at once: the Thursday row asks people to join, and the other rows show walk-in visitors the hatch hours. It needs only two free typefaces, two flat colours and ruled lines, so the missing photos and tiny budget don't matter. Green with tall, narrow sign lettering also avoids both looks the owners ruled out (coffee chain and wellness brand).

The Tear-off Notice lost because a drawn paper sheet is the most likely to look like a craft fair. I've kept its best idea as a suggestion: print the noticeboard poster in the Depot Board style. The Harbour Weekly lost because it drifts towards nostalgia and says little that is specific to a tram shed.

The first idea I set aside was the usual bakery look: a soft serif on cream, terracotta, a wheat drawing and rounded cards. It's too close to both looks the owners don't want.

Files

All are in .agentic-web-studio/:

• BRIEF.md: the brief, plus 13 numbered assumptions I made in your place.
• CONCEPTS.md: all three concepts in full and the decision.

DESIGN-DIRECTION.md: the full direction for whoever builds the site (type, layout, colour, states, copy voice, things to avoid). It also lists checks they should run on the finished pages.

• ASSET-LEDGER.json: the two chosen typefaces and where their licences come from.

concept-picker.html: for your partner. It opens in a browser without internet and shows the three concepts side by side, with a box that writes out their pick to paste back. The concept typefaces only show if they're installed on that computer; otherwise the page says a fallback is shown.

Still needs you or the owners

Typeface licences: I couldn't read the licences for Big Shoulders Display and Public Sans at their sources, so both are marked "blocked" in the ledger. Someone needs to check them before the fonts are used.

Facts I didn't invent: hatch times, the Thursday collection window, the price, the address and town, the pause or cancel rules, and how the owners confirm a sign-up. These show as marked placeholders.

Other open questions: whether subscribers can switch loaf each week, and the one-line footer note saying the business is fictional, which I assumed you'd want.

---

The records it wrote, in full (BRIEF.md, ASSET-LEDGER.json and concept-picker.html were written too and are not repeated here):

.agentic-web-studio/CONCEPTS.md

Concepts

Status: FINAL — chosen by the agent because the user was unavailable; the business partner can compare all three in concept-picker.html.

Three distinct directions before any build. Two concepts that share the organising idea or the hero move are too close: replace one. See references/composition.md for the vocabulary and references/typography.md for faces.

All three: no photography; fonts self-hosted woff2, latin subset; unknown facts (hours, price, address, collection window) shown as marked placeholders; no invented reviews, counts or scarcity.

References drawn on

• Tram-depot enamel signage and printed timetables → take: flat enamel colour, condensed signage capitals, hairline-ruled rows, times in fixed columns. Not copied: any transport operator's livery, logo, typeface, map or ticket design.
• Paper notices on a harbour noticeboard (the actual traffic source) → take: one sheet, one message, an informal hierarchy, tear-off tabs as the action. Not copied: any real notice or its wording.
• Small-town weekly newspapers → take: column rhythm, datelines, notes in the margin, heavy grotesk headlines over a serif text. Not copied: any masthead, layout or publication name.
• First instinct, set aside: Fraunces display on warm cream, terracotta accent, tracked uppercase eyebrow labels, a hand-drawn wheat sprig and rounded cards for each loaf. Set aside because it is the bakery category habit and sits right next to both things the owners refuse: the coffee-chain "artisan" look and the cream-and-soft-serif wellness look. None of the three concepts uses cream, wheat or a soft display serif.

Concept 1 — The Depot Board

• Organising idea: System. The home page is the tram shed's own timetable: the baking week Tuesday to Saturday as ruled rows, and Thursday is the "bread share service".
• Dials (variance / motion / density, 1–10): 4/2/7
• One sentence a visitor could say after three seconds: "It's the bakery in the old tram shed — there's a loaf for me every Thursday, and the hatch times are right there."
• Hero move and hero scale: Index-first — the timetable board is the hero; the Thursday row is twice the height of the others and holds the headline, the deck and the action · mid (big condensed type inside a table, not a poster).
• Narrative spine and second-read moment: instrument (a board you read and act on) · a strip of the next four Thursdays with real dates calculated from today, set like departure times.
• Type: Big Shoulders Display (condensed, signage-born grotesk; day codes, headlines, times at size) + Public Sans (plain, sturdy public-information sans with tabular figures, invisible at 17 px). Together they say "public notice from people who run a working building", not "brand"; neither is a food-category face.
• Palette and material: tram green #16392E (ink, board plate, rules), enamel white #F3F4F0 (ground, text on the plate), slate #56655E (secondary text), one accent: signal amber #F0A500, only on the Thursday row marker, the primary button fill and focus on the green plate. Material: flat enamel — no texture, no gradients, no shadows; 2 px rules; one corner radius (4 px) on the plate and button only. No images; nothing to crop.
• Rhythm moves: rule lines as structure (every list is a ruled table, never cards); footer as a page (the full hatch timetable again, how to find the hatch, contact).
• CTA family: block — filled amber with green label (primary "Join the Thursday share"), outlined green (secondary "See hatch hours").
• Motion rule: state motion only — the Thursday row's amber marker and the chosen Thursday on the form change instantly with a 120 ms colour fade; no split-flap effect. Reduced motion: no fades, instant.
• Mobile first viewport: (1) header — wordmark left, "Hatch hours" link right; (2) the green board plate opens with the Thursday row: "THU", H1 "One loaf every Thursday, kept for you at the hatch.", deck, amber button; (3) the "Today" row (day, hatch hours) showing at the bottom edge. Full week follows below.
• The convention it breaks on purpose: no hero image and no brand story first — the home page opens on a timetable, because opening times and the Thursday date are what a person at the harbour needs.
• Risk: can read as cold, municipal or transport-kitsch. Contained by banning tram icons, rivets, ticket stubs and split-flaps; warmth comes from the copy (two bakers talking) and the amber; body at 17 px in Public Sans. Second risk: a timetable can bury the ask — contained by making the Thursday row the hero and putting it first on phones.

Concept 2 — The Tear-off Notice

• Organising idea: Object. The page continues the paper notice the visitor just read on the harbour noticeboard; the notice is the one object everything sits around.
• Dials (variance / motion / density, 1–10): 6/4/3
• One sentence a visitor could say after three seconds: "It's the bread notice from the noticeboard — tear off a tab to get a loaf every Thursday."
• Hero move and hero scale: Hanging hero — one CSS-drawn paper sheet, pinned, tilted 0.5°, on a galvanised-grey board field; its row of tear-off tabs hangs over the edge into the next section · mid.
• Narrative spine and second-read moment: artifact · a second, smaller pinned card ("Hatch hours") overlapping the first notice's corner.
• Type: Gloock (tight, dark display serif with poster weight; reads printed, not soft) + Instrument Sans (clear, slightly condensed text sans that holds up on a phone form). Printed-notice voice without hand-lettering or typewriter grunge.
• Palette and material: board grey #6F7A7C (ground field), paper white #FBFAF6 (notice and reading surfaces), ink #1D1D1B (type), one accent: pin red #C8322A, only for the pin head and the tear-off tab action. Material: one paper sheet with a 1 px shadow and a dashed perforation line; no other shadows, no texture.
• Rhythm moves: varied section height (tall notice, short hours card, plain text sections); broken grid (the tabs and the hours card overlap their neighbours, home only).
• CTA family: tab — a block with a perforated top edge; filled red (primary), outlined ink (secondary).
• Motion rule: the tapped tab tears away (translate 8 px, rotate 4°, 200 ms) before navigation — it shows the action is taken. Reduced motion: no tear, immediate navigation.
• Mobile first viewport: (1) header — wordmark, "Hatch hours" link; (2) the notice at 92 % width: H1 "Bread share: one loaf, every Thursday", one-line deck; (3) three tear-off tabs reading "Join the Thursday share" across the bottom edge of the screen.
• The convention it breaks on purpose: the call to action is not a button but a tear-off tab — the same gesture as the paper notice that brought them.
• Risk: skeuomorphic gimmick and craft-fair look; tabs too narrow to tap. Contained by tabs ≥ 48 px tall with real link semantics, three tabs maximum on phone, no cork texture, no handwriting, no drawing pins elsewhere.

Concept 3 — The Harbour Weekly

• Organising idea: Editorial spread. The home page is one page of a small local weekly: a dated issue, a lead story (the bread share) and notes in the margin.
• Dials (variance / motion / density, 1–10): 6/1/6
• One sentence a visitor could say after three seconds: "It reads like the local paper's front page, and the lead story is a Thursday loaf I can sign up for."
• Hero move and hero scale: Marginalia — a calm lead column (headline, short paragraph, action) with a narrow margin rail of small, dated notes: today's hatch status, "Fridays: cardamom knots", the next Thursday · giant headline, mini notes.
• Narrative spine and second-read moment: archive (a dateline "Week of" followed by the current week's date, calculated live) · a deep drop capital opening the lead paragraph.
• Type: Libre Franklin 800 (heavy news grotesk for headlines, tight) + Libre Caslon Text (book-rough serif for paragraphs and notes). The newspaper pairing in the right order — grotesk shouts, serif reads — instead of serif display on cream.
• Palette and material: newsprint white #F6F6F3 (cool, not cream), ink #1E1E1E, chart blue #1D4E89 (rules, dateline, links), one accent: buoy orange #E4572E, only on the primary button and the "open now" dot. Material: hairline column rules; no texture, no images.
• Rhythm moves: rule lines (column and section rules); density shift (dense margin notes beside one sparse lead story).
• CTA family: text-with-arrow — filled orange block with arrow (primary), underlined text with arrow (secondary).
• Motion rule: none beyond hover and focus; the page is print. Reduced motion: identical.
• Mobile first viewport: (1) masthead strip "Gullstone Bakehouse · Week of" plus the live date; (2) H1 "A loaf for you, every Thursday"; (3) two-line standfirst; (4) orange "Join the Thursday share"; (5) the margin notes collapsed to one horizontal line "Hatch today:" plus the hours (a marked placeholder until confirmed).
• The convention it breaks on purpose: no brand hero at all — the site behaves like a dated weekly page that changes its dateline every week.
• Risk: looks old-fashioned or like heritage nostalgia, and a newspaper page can feel long on a phone. Contained by a cool white ground, a grotesk headline, paragraphs ≤ 25 words and the action in the first screen.

Chosen: Concept 1 — The Depot Board

Why: The tram shed is the one true, ownable fact in the brief, and a timetable does both jobs in one object — the Thursday share row asks for the sign-up while the other rows give a walk-in visitor the hatch hours without a separate section. It needs only two free typefaces, colour and rules, so it is fully buildable with no photography on a tiny budget, and enamel green with condensed signage type points away from both the coffee-chain and the wellness looks.

Rejected because

• Concept 2 — The Tear-off Notice: its continuity with the noticeboard is strong, but a drawn paper sheet carries the highest craft-fair risk and puts the identity in the notice rather than in the bakery; its one good idea (match the paper notice) carries over as a recommendation to print the noticeboard poster in the Depot Board style.
• Concept 3 — The Harbour Weekly: newspaper styling drifts toward heritage nostalgia, the long-page reading mode suits the hatch-hours visitor less than a board, and it says little that is specific to a tram shed.

.agentic-web-studio/DESIGN-DIRECTION.md

Design direction

Status: FINAL — chosen by the agent in the user's absence; open items are listed in BRIEF.md → Assumptions and in ASSET-LEDGER.json.

Authority

This document. No other direction document exists in the project.

Concept

The Depot Board. Organising idea: System. Gullstone Bakehouse bakes in a converted tram shed, so the site is the shed's own timetable: the baking week, Tuesday to Saturday, as ruled rows on a tram-green enamel plate. Thursday is the "bread share service" — its row is twice the height of the others and carries the headline, the deck and the only amber button. The other rows give a walk-in visitor the hatch hours and what is baked that day (Friday adds cardamom knots). Hero move: index-first — the board is the hero. Second-read moment: a strip of the next four Thursdays with real dates, calculated from today, set like departure times. No photography; the identity is type, rules and two flat colours.

Mode

• / Home: Persuade (the share), with the board doubling as a Read block for hatch hours.
• /bread-share Sign-up: Operate (form, errors, confirmation), with a short Read block "What happens next".

Principles

Thursday first. On every screen the Thursday share is the largest thing and the only amber action; the rest of the week supports it.

Times are information, set like a timetable. Days, hours and dates sit in fixed tabular columns, ruled, never in prose.

Enamel, not decoration. Two flat colours, 2 px rules, one radius. No texture, gradient, shadow or illustration stands in for warmth; the copy does.

Say only what is true. Unknown hours, price and address stay as marked placeholders; no counts, no reviews, no scarcity.

• Two bakers talking. Short, plain sentences in the first person plural.

Typography

Display: Big Shoulders Display (variable weight; self-hosted woff2, latin subset). Used at 24 px and above only: H1, H2, day codes (THU), board times at size, the next-Thursdays strip. Weights 800 (H1), 700 (H2, day codes).

Text and UI: Public Sans (variable weight; self-hosted woff2, latin subset). 400 body, 600 labels, buttons and row text.

Source and licence: both are distributed through Google Fonts and @fontsource; the licence of each must be read at the family's own source and recorded before use (ASSET-LEDGER.json, currently blocked).

Scale: ratio 1.333 at desktop, 1.25 on phone. Body 17 px phone / 18 px desktop. H1 clamp(2.6rem, 8vw + 0.5rem, 5.25rem) — the condensed face lets "One loaf every Thursday, kept for you at the hatch." sit on two lines at 1440 and three at 390. H2 clamp(1.9rem, 4vw + 0.5rem, 3rem).

• Measure: body 45–65 characters (max-width: 62ch); board row text 40ch.
• Leading: display 0.95–1.0; headings 1.1; body 1.55.

Tracking: display headlines 0 to −0.005 em (condensed faces do not want tight tracking); day codes uppercase at +0.04 em — the only uppercase on the site; body never tracked.

Figures: font-variant-numeric: tabular-nums on every time, date and price. Check whether Big Shoulders Display has tabular figures; if it does not, set times in the board columns in Public Sans 600 tabular.

• Wrap: text-wrap: balance on headings, pretty on paragraphs. Real dashes in time ranges (09:00–13:00).

Loading: preload Big Shoulders Display (one variable file) and Public Sans (one variable file); font-display: swap; metric-adjusted fallbacks (size-adjust) based on Arial Narrow / Arial so the board does not jump.

Builder's render check: at 390 and 1440 px confirm the webfonts render (compare the condensed letterforms — a fallback will look wide), the H1 does not break to a single orphaned word, and the day codes are not clipped.

Composition

• Grid: 4 columns on phone (16 px margins), 12 columns at ≥ 64 em, container 1200 px; base unit 8 px.

Board (hero): a full-width green plate. Columns: day code (2 cols) · what's baked / what happens (7 cols) · hatch hours (3 cols, right-aligned, tabular). Rows separated by 2 px enamel-white rules at 30 % opacity. Tue, Wed, Fri, Sat rows are 56–64 px tall; the Thursday row is at least twice that and holds H1, deck (≤ 20 words) and the amber button. The current day's row carries a small "Today" tag in Public Sans 600.

Desktop first viewport (1440 × 900): header, then the whole board with Tuesday and Wednesday above Thursday; the Thursday row and its button sit within the first viewport.

Phone first viewport (390 × 844), in order: (1) header: wordmark "Gullstone Bakehouse" left, "Hatch hours" text link right (jumps to the full week); (2) board plate opens with the Thursday row: THU, H1, deck, full-width amber "Join the Thursday share"; (3) the "Today" row (day + hatch hours) visible at the bottom edge. The remaining days follow in week order. On a 390 × 667 screen the button must still be above the fold — shorten the deck before shrinking the button.

• Home sections after the board (heights vary by importance):
  1. Next Thursdays — short strip, enamel-white ground: four dates in Big Shoulders, each a link into the form with that date pre-selected.
  2. How the bread share works — a real three-step numbered sequence (Sign up · We confirm · Collect on Thursdays) as a ruled list with large numerals, not cards. Price and pause/cancel placeholders live here.
  3. What we bake — a density shift: one tall green band with a single sparse statement in display type ("Rye, spelt, seeded. Cardamom knots on Fridays."), no list.
  4. Footer as a page — full hatch timetable again (compact), "Finding the hatch" ([address] placeholder, plain directions placeholder), contact, the fiction note.

Variety check: board (index) → strip (centred row) → numbered list (left) → green band (full-bleed statement) → footer (index). No anchor more than twice in a row; green/white backgrounds alternate.

Sign-up page: slim green page head with H1 "Join the Thursday bread share" and one line; then a single column form (max 34 rem) on white; at ≥ 64 em a right column holds "What happens next" as a ruled list, which sits below the form on phone.

• Second-read moment: the next-Thursdays strip (home) and the same dates as the form's "First Thursday" choices.

Colour and material

• Roles:
  • Tram green #16392E — ink on white, board plate, page heads, rules, outlined buttons.
  • Enamel white #F3F4F0 — page ground, text on the plate.
  • Slate #56655E — secondary text on white only (≈ 5.6:1).
  • Signal amber #F0A500 —

accent, rationed: the Thursday row marker, the primary button fill (green label, ≈ 6:1), the selected Thursday on the form, focus ring on the green plate. Never body text on white, never a background band, never decoration.

• Error #B3261E (text and 2 px border on white); success uses green with a tick and words, not a new colour.

Contrast targets: body and labels ≥ 4.5:1 (green on white ≈ 11:1), large text ≥ 3:1, focus indicators and input borders ≥ 3:1. Amber on enamel white is ≈ 1.9:1 — so on white grounds the focus ring is 3 px tram green with 2 px offset; on the green plate it is 3 px amber.

Surfaces: flat. Borders 2 px green. One radius, 4 px, on the plate and buttons; inputs square. No shadows, no glass, no gradients, no texture.

Missing photography: nothing replaces it with pictures. The board, the dates and the display type are the visual. If the owners later supply photographs, one crop rule applies: wide, level, eye-height views of the shed and hatch, never close-up food styling; record them in the ledger first.

• Wordmark: "Gullstone Bakehouse" set in Big Shoulders Display 700; no drawn logo is designed in this phase.

Interaction and motion

• Purpose: state only — show what is selected, focused, sent or wrong.

Allowed: 120 ms colour fade on button hover/press and on the selected Thursday chip; the "Today" tag is placed by script on load without animation. No split-flap, no scroll reveals, no parallax, no animated counters.

• Reduced motion: all fades removed; changes are instant.
• States, in the same language:
  • Hover: primary amber darkens to #D99500; outlined button fills green with white label.
  • Focus-visible: as above (green ring on white, amber ring on green). Never removed.
  • Selected (loaf, Thursday): radio rows become green-filled with white label; the chosen Thursday gets an amber left bar.
  • Loading: button label "Joining…", button stays the same size; disabled only once the request starts.
  • Error: summary box at the top of the form (2 px error border, heading "Check these before we can add you"), each item a link to its field; field-level message under the input; focus moves to the summary.
  • Success: replaces the form — "You're on the list from Thursday [date]." plus what happens next. Network failure keeps every entry and says nothing was sent.
  • Disabled: slate text, dashed border, never the only signal.
• Touch: all targets ≥ 48 px tall; the next-Thursday links and radio rows are full-width on phone.

Copy voice

Register: two bakers talking, plain and a little dry; "we" for the bakers, "you" for the reader. Sentence case everywhere.

Headlines: 3–10 words, stating a fact, not a mood. Sketches: "One loaf every Thursday, kept for you at the hatch." · "Join the Thursday bread share" · "Hatch hours" · "Rye, spelt, seeded. Cardamom knots on Fridays."

Deck sketch (home): "Rye, spelt or seeded, baked in the old tram shed by the harbour. Pick it up from the hatch." (17 words)

Calls to action: primary "Join the Thursday share" (the same words on home, the strip and the form's submit); secondary "See hatch hours". Never "Sign up", "Learn more", "Subscribe now".

Labels: nouns ("Your name", "Email or phone", "Your loaf", "First Thursday", "Anything we should know?"). Helper text one line.

Proof: facts replace slogans — the days, the hours, the next four Thursday dates, the two-person scale. No reviews, counts, awards or "loved by locals". Unknowns written as [to confirm] in the build, never filled with guesses.

Words to avoid: artisan, nourish, ritual, crafted with love, wellness, journey, community (as a slogan), elevate, handcrafted goodness.

Default check

• Default type formula (serif display on cream + tracked uppercase eyebrows): avoided — condensed grotesk display on cool enamel white, and the only uppercase is the day codes, which are data, not eyebrows.
• Inter / system UI everywhere: avoided — two self-hosted faces with a reason each.

Rows of equal cards: avoided — every list is a ruled table or numbered list; row heights differ by importance (Thursday is double).

• Glass panels: none.
• Gradient hero: none; the hero is a flat green plate with a table.
• No web fonts: web fonts are used, self-hosted; licences pending.
• Eyebrow label over every heading: none. Headings stand alone; the board's day codes do the labelling job.

Three-column feature grid / icon wall: none; the "how it works" section is a real three-step sequence set as a vertical ruled list.

Slogan hero without proof: avoided — the hero is a fact (one loaf, Thursday, the hatch) inside the timetable that proves it.

Anti-patterns for this project

• Tram icons, rivets, ticket stubs, split-flap animation, route-map pastiche, or any real transport operator's livery or lettering.
• Cream or beige grounds, sage green, terracotta, soft gradients, script or handwritten type, wheat sprigs, flour-dust textures (wellness and "artisan" signals).
• Coffee-chain signals: circular badge logos, cup or bean iconography, lifestyle stock, "your daily ritual" copy.
• Amber anywhere except the Thursday marker, the primary button, the selected Thursday and focus on green.
• Cards with shadows, rounded pill buttons, a second corner radius.
• Scarcity or social proof that is not real ("only 4 places left", "200 neighbours have joined").
• Hiding the hatch hours behind a menu or putting them only in the footer.
• Unlabelled icon-only navigation on phones.

Checks for whoever builds it

First-viewport test at 390 × 844, 390 × 667 and 1440 × 900: the Thursday row, H1 and "Join the Thursday share" are visible without scrolling; the hatch hours are visible or one labelled tap away; every element present has a reason.

Render check for type: the webfonts load (no wide fallback), headings balance, tabular times align in their column.

• Contrast: measure every pair named above in the build, including hover and focus states.

Visual review: full-page screenshots at both widths; record concrete faults (clipping, row rhythm, dead space) with the exact selector and value to change.

Truth check: search the build for invented numbers, prices, hours and addresses; every unknown is a visible placeholder.