Notes: s3 reference-led, Vienna Family Dental

Concept: a neighbourhood family practice with the manners of a grand hotel. It's built on ivory paper and the logo's deep Vienna blue, with an engraved serif. The people are framed in tall arches like a portrait gallery, and the logo's tapered rule is the one ornament.

Main decisions

• References (refs/moodboard.md): Dentologie (an editorial serif with one italic word, proof under the buttons, a checklist split), Parsley Health (portraits on color fields, a big centered testimonial in the serif, a tan "experts" field) and Rosewood (the two-tier header, tracked small caps, title-left/content-right, tall portrait rows, square corners).
• Type: Cormorant Garamond for display (close to the logo's Trajan-like caps), with one italic phrase per heading in brass or ink. Jost for body (18px) and for 13px small-caps labels tracked at 0.2em.
• Color: ivory #fbfaf5 is exactly the logo's ground, so the JPG logo sits seamlessly in the header. The other surfaces are navy #12304f (hero, comfort, booking) and sand #efe7da (cases, reviews). The logo's mid blue is used for small accents and the brown-black for text. Brass #c9a46a is reserved for the primary button. That was my "one bolder choice": hotel brass rather than yet another blue button.
• Signature: the logo's tapered spindle rule redrawn in SVG, set before every label. The arch frame with a brass hairline offset is used on the hero portrait, the doctors and the 4.9 rating "plaque".
• Layout: the hero is a navy field with a split: the H1, both CTAs and the proof line on the left, and Dr. Paino in an arch with his name card inside the photo on the right. Then come:
• the big-numeral facts row (4.9 / 2005 / 1989 / 7:30);
• services as a numbered two-column ruled list beside a sticky intro;
• featured composite veneers with a face before/after and three smaller cases;
• the nervous-patients band, with Dr. Paino's own "horror stories" quote and Jason A.'s anxiety review beside the sedation list;
• the team: three doctors in arches, then nine staff with their years;
• reviews: the 4.9 arch plus Jonathan V. and Kadie B.;
• insurance, honest about being out of network;
• articles;
• book: the form on an ivory card beside the phone, hours and address;
• the footer with NAP.
• The phone has a compact sticky header (logo, a round call button, Book, and a <details> menu, so no JS).

Placeholders (marked on the page with a dashed brass tag)

• [PRICE TO CONFIRM]: composite veneer pricing. No prices are published.
• [CONFIRM: reply time]: how soon the office calls back after a booking request.
• Kathia's and Jenefer's roles aren't in the facts, so the page shows names only.
• The form has no back end (the task said to ignore that).

With better assets or more time

• A photo of the building on Maple Ave and of the treatment rooms. The page has no sense of place beyond words, and the references all lean on interiors.
• A real photo of Dr. Paino with a patient or a child. That would replace the solo portrait as the hero image.
• Each staff member's role, and a short line from Trish (here since 1989, born and raised in Vienna). She could carry a "the front desk that knows you" moment.
• Self-hosted subset fonts, a srcset for the hero, and a static map image in the booking section.
• A swipeable before/after on phone instead of stacked pairs; the cases section runs long there.

Where the guide helped, and where it got in the way

• Helped: forcing real screenshots of references raised the bar more than any rule would. It showed concretely how the premium sites use few elements: big serif type, tracked small caps, hairlines and color fields. The instruction to "translate the move to these assets" was the most useful line: Parsley's lifestyle hero became a navy field with an arched studio portrait.
• Helped: the cold-critique subagent caught real problems I'd stopped seeing: a five-line H1, too many surfaces, mouths-only clinical photos as the lead image, and the "BOOKAN" spacing bug.
• Got in the way: the research step is fragile. About half the suggested sites failed in headless Chrome:
• Aesop, Le Labo and One Medical returned blank or blocked pages;
• hellotend.com/tend.com now resolve to a farm-software company;
• Aman and Rosewood are covered by cookie walls, Smile Haus by an entry pop-up. It took three rounds of screenshots, and lower sections needed a 6000px window plus cropping with sharp. The guide should ship a vetted, pre-screenshotted reference library per industry, or at least a list of known-good URLs and a screenshot script that dismisses cookie banners.
• Left me guessing: "dental references" mostly use lifestyle and interior photography that this business doesn't have. So the most borrowable moves came from hotels, not dentists. The guide could say that up front.
• Conflict: the critique (and the references' calm) push toward one or two surfaces. Meanwhile, homepage.md wants neighbouring sections to differ, and DESIGN.md encourages rich surfaces. With 11 sections and three surfaces, two neighbours (paying → articles) share ivory, split by a rule. The guide should say which wins.
• Conflict: the cold critic wanted the placeholders removed, but the task requires them to be marked. I kept them and made them quiet (a dashed outline). A standard placeholder style in the guide would settle this.
• The guide's references to SKILL.md, docs/site-plan.md and "Pacing" point to files that aren't in this workspace. They were easy to map, but confusing.