DESIGN-NOTE — AI Friday

Written before any code. Direction, constraints, and the rules that keep three ideas from fighting.

The problem this design has to solve

Three ideas were handed to me at once: a house (structure), a porch (feeling), and hand-painted signs (voice). Any one of them could eat the page. Run all three at full volume and you get a themed restaurant.

So each gets exactly one job, and is forbidden from doing anyone else's:

How they hand off

The handoff is light, and it runs one direction only.

1. Porch → House. The hero is a photograph of a real porch at golden hour. You leave it by walking through the first doorway. After that door, the porch scene is gone for good — no more people, no more sky, no more furniture. What survives the doorway is a single color: haint blue, demoted from sky to trim. Inside the house, haint blue is only ever paint on a door frame, a baseboard, and the door-line. That demotion is the whole handoff. The feeling becomes structure.
2. House → Signs. The house decides where a sign hangs (one per room, on the wall beside the door you just came through) and how big. The house never decides what a sign says.
3. Signs → Porch. One exception, and only one: the big painted board on the porch. It is the loudest object on the page and it is allowed to be, because it is doing the porch's job and the signs' job at the same moment — which is the only moment the page can afford it.

If any of the three starts doing a second job, it gets cut back. Notes in NOTES.md on where that happened.

Structure: the shotgun house

A shotgun house is one room deep and several rooms long, with every door in a line. There is no hallway. To reach the back you walk through every room. That is a scroll.

Six rooms, front to back:

The light is the clock. You arrive at golden hour and leave after dark, which is how a good Friday actually goes.

The signature: the shot line

Every door in a shotgun is aligned — that is the whole joke the house is named for. So one vertical line runs the full height of the page at a fixed x-position, and every doorway aperture is centered on it. Off-center, not middle: the door sits at 3/8 from the left, content in the 5/8. Real shotguns put the doors to one side.

The line is hairline-thin, haint blue, and it never breaks. It is the only element that touches all six rooms. Scroll and you are tracking down it.

Doorways are real, not dividers

The transition between rooms is a generated image of an actual door frame — jambs, header, casing, and the next room's light visible through the opening. Two uprights and a lintel. You pass through it, which means the next room's color starts inside the aperture and floods out as you scroll. A horizontal rule would have been the lazy version; the point is that a doorway has a thickness and a wall has a far side.

Room 5 (kitchen) has no doorway before it — it has a screen door. Different image, brighter light, because you can hear people in there before you get there.

Scene: the porch

First screen only. Golden hour into blue hour. A porch on a New Orleans street, ceiling painted haint blue, a few people already sitting, one empty chair, a bare bulb just coming on, music implied from somewhere down the block.

The empty chair is the argument. It is the entire pitch made without a sentence: there is a seat and nobody is in it. The RSVP under it says Pull up a chair.

Photographic, generated, not illustrated. Not a stock-photo crowd. Three or four people, seen loosely, not looking at the camera, not performing fun. Ordinary evening.

No French Quarter. No balconies, no ironwork, no beads, no brass. This is a residential block — clapboard, a fern, a step, a car parked in front. New Orleans as a place people live, not a place people visit.

Type: hand-painted shop signage

Vernacular: corner store, po-boy shop, laundromat. Not saloon, not farmhouse, not café. That distinction is real and it lives in the letterform:

• A saloon sign is a Clarendon slab with heavy brackets — wanted posters, western. Rejected.
• A farmhouse sign is a script or a rustic serif. Rejected.
• A café sign is a thin geometric or a wobbly hand-script. Rejected.
• A New Orleans corner-store sign is American gothic — Franklin Gothic and its cousins — very bold, slightly condensed, all caps, painted with a brush onto plywood or straight onto the wall, with a hard offset shadow and no blur. That is the alphabet a commercial sign painter actually reaches for.

So:

• Display / signs — Libre Franklin 800–900, all caps, tight tracking. Franklin Gothic's open-source descendant. Set on generated painted board surfaces so the brushwork, weathering, and edges are real photographic texture rather than a filter. Hard offset shadow in enamel red, no blur — a sign-painting convention, not a CSS effect.
• Body — Karla, regular and medium, sentence case, generous leading. Humanist grotesque with slightly odd terminals. Warm, plain, readable, and pointedly not techy. Nothing here says "developer."

Two families. That is all. Weight, case, scale, and the painted board carry the contrast — the way a sign painter got contrast, with one alphabet and a bigger brush.

Sign sizes step 5 : 4 : 3. The big porch board, the room signs, the small painted labels. A 3-4-5 triangle is the square a carpenter uses to frame a house, so the signage is proportioned by the same tool that built the walls behind it.

Where signs are banned: buttons, body copy, project names, footer, captions, numerals, navigation. If it is not a room header, it is Karla.

Color

Haint blue is primary — the pale blue New Orleans paints porch ceilings, traditionally to keep spirits out and honestly to keep wasps from nesting.

Five colors. No green, no purple, no gold. Partly because those are the tourist palette and the brief bans them. Partly because a palette with a deliberate hole in it holds together better than one that covers the wheel — the same reason the porch has an empty chair.

Copy

Short, plain, spoken. The reader is a paralegal, a teacher, a restaurant manager. They already suspect this is not for them, so the copy's only job is to remove that suspicion and then get out of the way.

• No "unlock," "empower," "supercharge," "journey," "community-driven."
• No em-dash cadence. Short sentences and periods.
• Sentence case everywhere except signs.
• Say the concrete thing. "Twelve people's availability in ten minutes" beats "streamline scheduling."
• Every line is a placeholder. A human rewrites all of it.

The first three seconds, in order: 1. You're invited — an empty chair and the words "pull up a chair." 2. This is happening — a date on a painted board: Friday, October 2, 5:30. 3. It's here — a New Orleans porch you can tell is a New Orleans porch without a single postcard cue.

Motion

Very little, and all of it serves one metaphor: walking.

• Rooms lift and settle slightly as you enter them. That is it.
• Doorway apertures move at a fractionally different rate than their walls, so passing through a door has depth. Small enough that you feel it and do not notice it.
• The sign settles onto the porch once, on load, and never moves again.
• No parallax anywhere else, no counters, no scroll-jacking, no reveal-on-scroll for individual words.
• prefers-reduced-motion turns all of it off and the page still works, because the sequence is in the document, not in the JavaScript.

What I am refusing to build

• A dark mode. Anti-goal, and also: the page already gets dark. That is the ending.
• A features grid. The projects are a list on a wall, not cards.
• Eyebrow labels above headings.
• A floorplan diagram, a scroll-progress house icon, or any device that explains the metaphor. If the house needs a legend, the house failed.
• Any texture, surface, or light made from CSS gradients, box-shadows, or filters. Surfaces are photographed. The only shadow in the CSS is the sign painter's hard offset, which is lettering, not lighting.
• A second display face, a third color temperature, or a fourth idea.

NOTES

I built the page as one walk: porch, four rooms, back step, with a photographed doorway between each pair and a single hairline "shot line" running the whole height at the point every door lines up on. All thirteen shipped surfaces are generated photographs (Codex CLI, billed to the ChatGPT subscription) — the porch at golden hour, four beadboard walls under four different lights, four views of the same doorway, the back steps at blue hour, and two blank hand-painted boards left empty so the copy stays live type. A generated floor didn't earn a place and isn't shipped; its source is still in assets/_src/. No texture, light, or surface anywhere is CSS. Type is Libre Franklin 800/900 for the signs (Franklin Gothic is the sign painter's alphabet, and it is neither saloon nor farmhouse nor café) and Karla for everything else, both self-hosted.

What fought with what. Mostly the house fought the porch, and the house won too many rounds before I cut it back. My first pass gave each doorway a near-full-screen band, which put 48% of the scroll inside hallways — the house doing mood and pacing instead of just sequence. I couldn't shorten the bands without cropping the lintel off and turning a doorway into a dark slot, so I rebuilt the door images with mirrored wall extending off both sides (checked pixel-continuous at all four joins after my first attempt got the mirror order backwards and left a visible seam). Now you see the door from across the room, which is the actual shotgun view, and the doorways are down to about a third of the page. The porch fought back on mobile: the painted board sat exactly on top of the people and the empty chair, deleting the entire argument, so on narrow screens the board moves to the top of the screen and the ask to the bottom with the porch left visible between them. The signs were the easiest to keep honest — they never left the headers — but four instances of one plank photo read as four copies of one photo, so two of them hang mirrored. The light progression also fought legibility twice, and both times the photograph was right and my layout was wrong: cream copy in the back room landed on the lamp's amber pool, and the phone crop put beadboard grooves at the same scale as the letter strokes. I mirrored the dim wall so the lamp falls behind the sign instead, and aimed each mobile wall crop at its lit side. I audited contrast by hiding the text, screenshotting the real rendered backgrounds viewport by viewport, and scoring the 5th-percentile pixel under every text box; that cleared all failures, and the remaining warnings sit at median 6–7:1 with only the darkest grooves dipping.

What I'd do next. The four middle rooms are content-light next to how much wall they show — I'd either write more into them or tighten the vertical rhythm, and I suspect the answer is more copy, since the owner is rewriting all of this anyway. The kitchen is supposed to be the room you stop in and it currently uses the same two-column layout as everywhere else; giving it one deliberate break in the pattern would earn the Slack CTA more. I'd also test the walk on a real phone rather than an emulated viewport, since background-attachment: fixed is the one thing here likely to feel different on device. Sources for every generated image are kept in assets/_src/ as the original PNGs; assets/*.webp is what the page loads (~1.5M total).