rounds/r2/s7-blueprint-remix/notes.md

Notes: s7 blueprint remix, Vienna Family Dental

Concept: Ace Hotel's layout system (giant condensed-caps titles over rows of photo cards that run off the edge, grainy bands, a colour band and a dark band) rebuilt as a family dentist's homepage in the logo's blue, with the practice's own portraits as an edge-to-edge team wall.

Main decisions

Blueprint: Ace Hotel (acehotel.com); secondary: Mini Rodini (minirodini.com) for the gutterless photo mosaic (the team wall). Why and the measured breakdown are in refs/blueprint.md.
Type: Archivo only, two widths: the 62% width at 800 weight, in caps, for every title and button (stands in for Ace's custom condensed face); normal width for text. No serif anywhere.
Colour: cool light grey paper with fine grain, near-black ink, the logo's deep blue (#1d5b98) for the one colour band, the quote tiles and the logo box, charcoal for the comfort section and footer, and marigold (#f5b335) only for booking. No cream, no navy, no gold.
Imagery: a photo in almost every section. Real: all 12 team portraits, all four before/after cases, and the veneers close-up. Stock (Burst): the hero, 7 service cards, the comfort cards, the kids/articles cards and the booking photo. No stock person is named or captioned as staff or patient; alts describe what's in the photo.
Signature: the title-row system (huge caps title, a plain sentence on its baseline, a link far right), card rows that bleed off the right edge, and the half-height grey band behind the service photos. The team mosaic with Dr. Paino's "horror stories" quote in a blue tile is the page's own moment.
Layout order: hero → intro → services → smile cases (+ Kadie B.) → insurance → nervous patients (+ Jason A.) → team → reviews → kids & articles → book/visit → footer. Tenure appears nowhere as a feature.
Phone: the header's top row (logo, phone, BOOK) stays stuck to the top; card rows become thumb-swipe carousels; the team becomes three across.

Stock photos used (all Burst, free licence, no attribution required)

The Implants card uses Dr. Traboulsi's real portrait; the "Composite vs porcelain" article card uses the real veneers-after case photo.

Placeholders

Veneer and Invisalign price guidance: [PLACEHOLDER: price guidance from the practice] in the gallery.
How soon the office calls back after a booking request: [CONFIRM: how soon] under the form.
Roles for Nancy, Jordan, Kathia and Jenefer aren't in the facts: captioned "Team". Ann's is "Hygienist" (facts say hygienist).
The form has no back end (as instructed); the three articles link to #.

With better assets or more time

A real photo of the office or building, and the team at work: the hero would be theirs, not stock.
Arrow buttons for the card rows (a few lines of JS, or the full list of services as a second row on desktop); right now a desktop mouse user sees four or five of the eight services.
Self-host Archivo as a WOFF2 subset, AVIF/WebP with srcset, and the build standard's Worker items.
A properly cut-out logo (SVG): I used the white PNG on the logo's own blue to avoid the JPEG's off-white box.

The method: where it helped and where it got in the way

Helped.

Having to choose one real site and measure it gave decisions an anchor: the 40px margins, the 30px gutters, the 548/316 card widths, the half-height band, the caps title with a sentence on its baseline. I wasn't inventing a layout, I was translating one, and the page has a coherent system as a result.
The neighbouring-category instruction is what produced something different: dental sites all looked like round 1; a hotel's system gave a dentist a fresh, photo-led shape.
The side-by-side review is concrete: "is our grain as subtle as theirs", "is their headline as wide as ours" are answerable questions.

Got in the way / left me guessing.

Research is fragile in practice. Of 18 candidates, 8 didn't render usefully headless (video heroes, blank lazy images, Cloudflare/CloudFront blocks, cookie modals). Real dental sites (Tend, Dentologie, Grand Street) were either templates or blank. The "12 candidates" rule cost ~15 minutes for mostly unusable screenshots. The method should allow scrolling before the full-page shot, or provide a vetted shortlist of blueprints known to render.
The stock tool was mostly broken during this round: Burst returned HTTP 429 to Node's fetch (probably other agents hitting it at the same time) and Openverse returned 0-8 results per query. I wrote a curl-based Burst fetcher to get photos at all. Without that the page would have had half the images.
"Keep their shapes" vs. the brief's must-haves. Ace's hero is a headline and nothing else; the homepage guide requires a supporting line, two CTAs and a proof line on the first screen. I added them under the headline, which dilutes the blueprint's starkness. The guide doesn't say which wins.
"Keep their shapes" vs. the photo. A centred giant headline over a portrait-led family photo has to sit on someone's face. The method assumes the blueprint's photos and ours have the same composition.
Carousels: Ace's signature (rows that run off the edge, with arrows) conflicts with "little or no JavaScript" and with "no carousels" in the build standard (that rule is about auto-rotating ones, but it's ambiguous). I kept swipeable rows without arrows; it's a real usability cost on desktop.
The hospitality tone vs. "Premium & Refined, Traditional & Trustworthy": a condensed-caps grotesque is confident rather than traditional. Nothing in the method asks whether the blueprint's voice fits the owner's adjectives, only its layout. Worth adding a "does the blueprint's tone match the brief?" check to step 3.