Compare the pieces

Six versions, one shop. Each row is one question; each column is one version’s answer, linked to the page where you can see it. Pick a hero from one, a menu from another, a voice from a third. The couplings at the bottom say which picks fight each other.

Versions: Pressing · Reissue · B-Side · White Label · Gatefold · Jukebox · archive

Copy register

How does the site talk?

src/data/copy.ts (v1) · copy.v2.ts · copy.v3.ts · copy.v4.ts
recipe: --copy v1|v2|v3|v4 (Pressing=v1, Reissue+Gatefold=v2, B-Side+Jukebox=v3, White Label=v4)

Pressing

v1. Short warm lines written for the site (“Good coffee, next door.”, “Stop in, stay awhile.”). Numbered features. Some corniness.

Reissue

v2. v1 trimmed: order blurb cut, numbers dropped, About shortened. Same clipped-fragment register; not less corny.

B-Side

v3. Only what the shop wrote or printed: Square descriptions, door decal, cup sticker, chalkboard, IG story, their “Order Online”. No tagline, no story prose; customers quoted for warmth.

White Label

v4. Full plain sentences that state facts. No fragments, closers or rhythm; caveats written out (hours pending, prices may change).

Gatefold

v2, used only as captions. The pictures talk; text is name + price + one intro line.

Jukebox

v3. Their phrases as labels (“milk of choice”, “Order Online”, the board lines as chips).

Hero / first screen

What do you see first?

src/variants/<id>/Home.astro (top section)
recipe: --home <id>

Pressing

Text hero: eyebrow, headline, lede, two pill buttons. No image. Four ruled feature blurbs below.

Reissue

Client lockup (“Good Coffee. / Good Music. / Good Company.”) beside the storefront photo with a slow-spinning record-logo disc. Two buttons.

B-Side

The sign over the door, typeset huge (R&BEANS / COFFEE), the cup-sticker line under it, storefront photo at right. Then the board.

White Label

A heading and one factual paragraph; the hours table is the first thing below it. No image.

Gatefold

Edge-to-edge photo mosaic: storefront big, drink photos with name + price, shop photos interleaved. One intro line in a strip.

Jukebox

The menu itself: a Find box, the board lines as chips, Coffee & Tea starts immediately. Sidebar carries the rest.

Hours / address / ‘today’ block

Where are the facts a customer actually needs?

src/components/parts/TodayStrip.astro (Reissue strip, portable) · otherwise inside <id>/Shell.astro (Gatefold bar, Jukebox sidebar) or <id>/Home.astro
recipe: --home <id> for in-page blocks; Today strip: import parts/TodayStrip.astro into any Home

Pressing

Footer only (hours, address, phone, socials).

Reissue

Today strip under the hero: today’s hours with live Open/Closed state, address + Directions, phone. Also footer.

B-Side

Door decal reproduced as printed (note: differs from IG-bio hours; flagged), address + phone in the decal box; footer columns.

White Label

First section: hours table + address + phone, with the hours-conflict caveat spelled out. Repeated in footer dl.

Gatefold

Thin top bar: both hours rows + address, always visible; Order button in the bar. Footer line.

Jukebox

Sidebar, always visible: hours, address, phone, Order Online button (top bar on mobile).

Menu behavior

How do you move through 76 items?

src/variants/<id>/Menu.astro · portable: parts/StickyRail.astro (Reissue/B-Side rail), parts/MenuTable.astro (White Label table), parts/Caveats.astro (v4 notes). Jukebox: the menu is Home.astro and Menu.astro is a redirect
recipe: --menu <id> (for Jukebox use --home jukebox; its Menu.astro is a redirect)

Pressing

Jump links at the top; single-column list with small thumbnails. Links scroll; nothing sticks.

Reissue

Sticky category rail under the sticky header; scrollspy highlights the section you’re in; counts; Order button in the rail; two columns on wide; item anchors with highlight.

B-Side

Same sticky-rail pattern restyled as chips; their descriptions as typed; *16oz only notes kept inline.

White Label

One dense table (name / description / price). Sticky section headers inside the table plus a sticky text rail; size constraints extracted as “(20oz Iced; oat milk only)”.

Gatefold

Photo-card grid. The sticky bar FILTERS the grid in place (All / sections / With photo) instead of scrolling; no-photo items become text tiles; URL keeps the filter.

Jukebox

No menu page: the home page is the menu. Live search box filters rows and hides empty sections; sidebar categories follow your scroll; monospace prices.

Navigation model

How is the site held together?

src/variants/<id>/Shell.astro (header/sidebar, footer, :root tokens, fonts)
recipe: --shell <id> (the Shell is the base everything else is adapted to)

Pressing

Sticky blurred header: brand left, four links + pill Order right. Classic.

Reissue

Sticky header with a record-dot brand; Order pill; on mobile a two-row header so sticky things beneath it line up.

B-Side

Sticky header with thick black rule; condensed uppercase links; orange Order Online.

White Label

Minimal sticky header; five text links incl. Order; no button styling.

Gatefold

One thin top bar only: brand, links, facts, Order. No footer columns.

Jukebox

No header. Sticky sidebar (desktop) / sticky top panel (mobile) with facts, Order, categories, secondary pages.

Order flow

How do you get to Square?

src/variants/<id>/Order.astro · portable: parts/AlsoOn.astro (the fixed “Also on” line)
recipe: --order <id>

Pressing

Heading, blurb (“Pick your drinks, pay with Square…”), button, hint, “Also onjoe.coffee” (spacing bug).

Reissue

Blurb deleted; “Also on joe.coffee and Grubbio delivery.” fixed; hours dl under it.

B-Side

“Pick up” (the door decal word) + “Order Online” (their Square title) + door hours box.

White Label

States exactly what happens: where orders are placed, where you pick up, pickup hours table.

Gatefold

Photo beside the button; same fixed ‘Also on’ line; facts in small caps.

Jukebox

Order Online button lives in the sidebar on every page; /order is a short confirmation page.

About treatment

How is the story told?

src/variants/<id>/About.astro
recipe: --about <id>

Pressing

Narrative paragraphs from the press profile (v1 telling), lede “A husband, a wife, a coffee shop.”

Reissue

Same facts, shorter; photo sticky at right.

B-Side

No prose: four facts in big condensed type, the sticker, their drink names, customers quoted.

White Label

Plain narrative paragraphs with a sourcing caveat; storefront photo captioned.

Gatefold

Photo-first split: image left, short v2 text right.

Jukebox

Facts list + sticker + quotes, secondary page off the sidebar.

Type & palette

What does it look like?

src/variants/<id>/Shell.astro :root block + font imports
recipe: comes with --shell <id>; pages from other versions are restyled to it (the scaffold lists the tokens to add)

Pressing

Fraunces + Karla. Cream / espresso / caramel. (One of the three clichés; it’s the baseline, kept as-is.)

Reissue

Bricolage Grotesque + Karla. Paper white / ink / chair yellow.

B-Side

Barlow Condensed + Barlow. White / black / logo orange, green + pink highlight boxes.

White Label

IBM Plex Sans only. White / grey rules / one link blue.

Gatefold

DM Sans, small. Charcoal ground, white type, photos do the work.

Jukebox

Red Hat Text + Red Hat Mono. Off-white / panel grey / one electric blue accent.

Couplings: what fights what

Honest notes on which picks are independent and which are tied together. “Fights” means you would have to change one of the two to make it work.

fights Copy v3 (B-Side voice) × Any text hero
v3 has no tagline or intro sentence by design. A text-only hero (Pressing, White Label) needs a line to say; with v3 the hero must be the sign/sticker or a photo. Works with Reissue/B-Side/Gatefold/Jukebox heroes, fights Pressing/White Label heroes.
fights Copy v4 (plain) × Gatefold or B-Side visuals
Plain full sentences are long; Gatefold captions and B-Side highlight boxes need short lines. v4 wants White Label or Jukebox density. Conversely v4’s caveats (hours pending, prices may change) are worth lifting into ANY version’s footer.
compatible Photo-led hero (Gatefold mosaic, Reissue storefront) × Photography supply
These assume the 42 Square photos + 9 shop photos and look thin without them. If the owners send official photos, Gatefold scales up; if they don’t, Reissue’s single storefront hero is the safer bet.
compatible Reissue Today strip × Any version
Self-contained (server-rendered hours + small script). Drops into Pressing, B-Side, White Label unchanged. Already effectively present in Gatefold’s bar and Jukebox’s sidebar.
compatible Sticky category rail + scrollspy (Reissue/B-Side) × Any header that is itself sticky
The rail sticks at --header-h, so the header height must be exact (hence the two-row mobile headers). Works under Pressing’s header with that one fix; not needed in Jukebox (sidebar) or Gatefold (filter bar replaces it).
compatible Gatefold filter bar × Deep links / SEO
Filtering hides items; deep links still work (script un-hides) but search engines and screen readers see one long grid. Scrolling rails (Reissue) are simpler for accessibility; pick filter only if the card grid is the point.
fights Jukebox menu-as-home × Any brand hero
Mutually exclusive: if the menu is the first screen there is no hero. You can put a one-line board strip above it (it has one) but not a headline image. Pairs with v3 or v4 copy, not with v1/v2’s taglines.
compatible B-Side board lines (IG story / chalkboard) × Freshness
They are real but dated (a 2025 special). Fine as a design device; to keep them live the shop would need to type one line into a file or a Square field. Jukebox shows the same lines as chips.
compatible White Label table menu × Photos
The table has no images on purpose. If photos matter, use Reissue/B-Side rows (thumbnails) or Gatefold cards; the table’s sticky section headers can still be borrowed.
compatible Pressing cream/serif look × The brief
It is the client’s pick and the baseline, but it is also one of the three AI-default looks. Any successor that keeps its palette should change type or structure so it reads as a choice, as Reissue does.

Writing a recipe

A recipe is one line that names a version for each piece. It maps one-to-one onto the scaffold command, which copies the right files, rewrites ids and copy imports, writes the route stubs, registers the variant, and prints what still needs adapting:

npm run new-variant -- --id final-a --name "Final A" \
  --shell reissue --copy v3 \
  --home gatefold --menu reissue --about bside --order whitelabel --gallery reissue \
  --line "one-line look" --diff "what is different about this one"

Rules that keep it honest: the --shell is the base (tokens, fonts, header/footer); every page copied from another version is restyled to that Shell, and the scaffold prints the exact tokens and classes it is missing. Portable parts (Today strip, sticky rail, menu table, caveats, “Also on”) are imported from src/components/parts/ and themed through --rail-* / --today-* / --mt-* variables. Jukebox’s menu is its home page, so “menu: Jukebox” means --home jukebox. Check the couplings above before committing to a line; the ones marked fights mean two picks need one of them changed.

Full procedure, including promotion to the real site when one wins: docs/FINAL-ROUND.md.