Build a one-page project landing page for an architecture and interiors studio, presenting a single project (an open-plan shared floor for a marketing team) the way a studio presents work to a client.
Ground: a flat sage matboard (#C9CFB9) with a faint dashed column grid running vertically behind the content. Content sits on white museum-board sheets (#F4F3EB) with a thin ink rule (1px, ink at 28% opacity), square corners, no drop shadows.
Type: Barlow Semi Condensed 600 to 700 for the headline, section titles, labels, and the view switch, set in caps with wide tracking for labels; Literata for all body text at 19px, line-height 1.7, never justified, 60 to 75 characters per line; Sometype Mono only for figure captions and the code sample.
Palette: ink #1F2622 for text, coral #B5482A, teal #22606F, violet #5F4BA8, and mustard #E3B341 as the four audience colors, white text on coral, teal, and violet, ink text on mustard. Links in a deep coral (#8F3418) with a 1px underline. Italic emphasis in a quiet brick tone (#8A4A34), never the loud coral.
Structure, top to bottom:
1. Top nav: studio name left, three text links right.
2. A breadcrumb masthead (Studio index, Projects, Shared floors, then the sheet number in a small bordered tag) instead of a boxed metadata table.
3. Hero in two columns: left, a caps kicker, a large condensed headline (max 13 characters wide), and a 22px deck; right, one photographed presentation model of the floor inside a 1px-ruled plate with a mono figure caption (Fig. 01).
4. A facts block: a six-cell definition list on a white sheet (sheet number, issue date, reading time, client, status, announced at), caps labels over serif values, cells divided by thin rules.
5. A sticky ink-black view switch: "View as" followed by five radio buttons styled as bordered caps tabs (Everyone, Marketer, Designer, Developer, Agency). The checked tab fills with that audience's color. Inputs are visually hidden but keyboard focusable, with a mustard focus ring.
6. Sections as white sheets, each keyed by a circled letter (A, B, C...) in a 46px grid bubble on a left rail with a dashed vertical gridline; on mobile the bubble sits inline above the sheet. Each sheet has a 34px section title and a small caps role line.
7. Inside sections, items separated by a 3px top rule in mid-gray, each opening with a row of solid audience tags (small caps, 3px radius), then a 26px condensed title and one or two serif paragraphs with at most two inline links.
8. The view switch logic in CSS only: body:has(#view-designer:checked) .item:not([data-for~="designer"]) sets opacity to .42; tagged items get their top rule recolored. Nothing is hidden or reordered.
9. A design-move sheet in two columns: prose plus a small mono code block on the left, a second photographed model detail with a Fig. 02 caption on the right.
10. A sources sheet as a numbered register (mono numbers in a narrow column), then a prev/index/next line and a small colophon.
Interaction: 140 to 160ms ease transitions on link underline weight, tab fills, and item opacity; hover on nav links shows a coral bottom rule; respect prefers-reduced-motion by removing transitions.
Guardrails: no gradients, no glow, no drop shadows, no pill buttons beyond the small tags, no accent left-border stripes, no fake search fields or toggles, no emoji, no readable text inside the photographs, all small labels at WCAG AA on their actual fill, images inside plates never taller than the text beside them.
Works in v0, Lovable, Bolt, Cursor, Claude Code, and Beaver Builder AI. Swap the model photographs for your own project imagery and keep the four audience colors on solid fills.
