Notes: Vienna Family Dental, Clean modern (method: blueprint remix)

Concept in one line: an independent neighborhood shop's website (Mjölk, Toronto) rebuilt for a dentist: big edge-to-edge photographs alternating with a calm 3-column photo grid on one quiet ground, nothing decorative between.

Main decisions

• Blueprint: Mjölk (mjolk.ca), chosen from ~15 candidates (refs/blueprint.md). Kept its system: 1140 container, 3 × 360 columns with 30px gutters, full-bleed photo with the nav on it, one ground for the whole page including the footer, section title left with a "View more" + long hairline arrow right, an object grid with centered captions, two-up overlay tiles, a row of three tall portrait cards, a quiet list footer.
• Changed on purpose: Mjölk's hero has no words; ours carries the H1 and actions on a left-side scrim (the library photo's "empty wall" is really a dark blurred door frame). Their serif headings became one contemporary sans (Instrument Sans, secondary reference Frama for the type), because the owner rejected Garamond-style serifs and the direction asks for a contemporary sans. Their greige ground went cool (#eef0ef) to stay away from cream.
• Color: ground #eef0ef, ink #17212b, gray #56606a, the logo's deep blue #1f5595 only for Book, stars and the doctors' role lines; paper #f8f8f6 for panels. Color otherwise comes from photos.
• Type: Instrument Sans 400/500/600. H1 84px/0.98, section heads 40px, captions 15-18px.
• Imagery: library still lifes as the services grid (they echo Mjölk's objects-on-a-pale-ground grid), the real before/after face cases as two-up tiles, real dentists as tall portraits plus all nine team members in a row, two full-bleed bands (people-07 for "Open before school", the Freeman Store for "Find us in Vienna").
• Signature: restraint: one ground, the long hairline arrow links, full-bleed bands alternating with the grid.
• Layout order: hero → services → see the work → reviews (+ booking cell) → open before school → team → insurance → articles → find us → book (form) → footer.
• Headlines: The dentist you'll keep · Care for every age · See the work · Ask our patients · Open before school · The people you'll see · Insurance, filed for you · Good to know · Find us in Vienna · Book your visit. The slogan ("We will never rush you…") and 7:30 are only in body copy.
• Header: transparent on the hero; on desktop it sticks and turns paper once you scroll past the hero via a CSS scroll-driven animation (no JS). Browsers without animation-timeline keep a non-sticky header.

Photos used

Library: hero-01 (hero), hero-04 (checkups), detail-08 (children's visits), people-02 (Invisalign), detail-07 (crowns), detail-03 (sedation), people-07 (mornings band), detail-02 (insurance), people-05 (first-visit article), people-03 (veneers article, uncaptioned), place-06 (emergency article). Real practice photos: all 12 team portraits; cases veneers-after (services tile), veneers-face before/after, makeover-face before/after. Logo: logo-white.png on the hero; a transparent PNG I made from logo.jpg (color-to-alpha) for the paper header and footer.

Stock: The Freeman Store, Vienna (stock/freeman-store-vienna/01.jpg), Wikimedia Commons, by Jerrye & Roy Klotz MD, CC BY-SA 3.0, https://commons.wikimedia.org/wiki/File:FREEMAN_STORE.jpg (credited on the page). W&OD Trail photos were downloaded but not used.

No generated or stock person is captioned as staff or a patient; the mood photos have no captions.

Placeholders

• Fees: the practice publishes no prices; a marked placeholder in "Insurance, filed for you".
• The form posts nowhere (action="#book"); it needs the real request handler and a thank-you page ("Thanks, [name]. We'll call you at [phone] to confirm a time. Need us sooner? (703) 281-7104."), which the round-2 review asked for and I left out of this static page rather than fake it with JavaScript.
• Roles for Nancy, Jordan, Kathia and Jenefer aren't in the facts, so they're shown with names only.
• Response time after a booking request isn't known; the copy only says "we'll call you back to confirm".

With better assets or more time

• A real photo of the office or the building on Maple Avenue for the "Find us" band (the Freeman Store stands in as "our neighbor"), and one of the team at work: the page has no picture of the practice itself.
• Grade the real case photos and team portraits a little toward the page (they're on a dark gray studio backdrop and clinical lighting, unlike the warm library light). I left them untouched because they're evidence.
• Self-host and subset the font; AVIF/WebP with srcset.

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

• Helped: having to pick one real site and measure it gave the page a system I wouldn't have invented: the single ground and the "title left, long arrow right" rhythm are what make it look calm and expensive rather than like a dental template. The mapping table made section shapes a decision instead of a habit. Choosing a shop instead of a dental site kept it local and un-SaaS.
• Got in the way: research was the expensive part. About half of the candidates failed to screenshot (bot walls, region modals, maintenance, lazy images, 100vh heroes that blow up the full-page shot). The guide warns about video heroes but not about Cloudflare checks or modals; a pre-vetted list of 20 screenshot-friendly references by category would save half an hour. Reading the blueprint from desktop-full.png is also misleading when the hero is 100vh (it's enormous in the full shot); slices are the reliable view.
• Left me guessing: the best blueprints for "clean modern, photo-rich, local" are shops, and shops have no reviews, team, booking or hours sections. The guide says "keep their shapes", but half of a dentist's page has no shape in a shop's homepage; I built those in the blueprint's grid and reused its full-bleed shape. A line on what to do with modules the blueprint lacks would help. "Two side-by-side passes" overlaps a lot with the review loop.
• Review loop: helpful; two rounds, verdict "ship" after round 2 (scores 7.5 → 8). The most important point was one I'd missed completely: every Book button landed on an address panel whose Book button pointed at itself. Second: the Freeman Store photo under "Find us on Maple Avenue" read as the office. Both were real trust problems that the blueprint comparison couldn't catch.