s10 (frontend-design skill): Vienna Family Dental homepage

Concept, in one line: the neighborhood practice on Maple Avenue, told in photographs: a family morning, real Vienna, the real team as one wall of faces, and real smiles, with the logo's own blue as a bold flat fill.

Main decisions

• Color. It starts from the logo:
• the wordmark's blue #2C6CB0, used as a big flat fill (the hero block, the booking band), never as a gradient;
• its light end #DCEAF6 for quiet panels;
• the brown-black of "DENTAL" (walnut #2E2421) for text and the one dark band (the smile cases);
• a cool dogwood white #FBFBF8 page;
• brick #9A4632 only for hover and focus.

No cream, navy or gold.

• Type. Marcellus for headings: a flared Roman, a cousin of the logo's Trajan-style caps, set large in sentence case, so it reads as the practice's own signage rather than a book serif. Libre Franklin for text and UI: plain American gothic. The scale is 1.333 from 17px. No all-caps labels, no eyebrows, no one-word accents.
• Imagery. Every section has photography, and the photos sit edge to edge with 6px gutters, like windows. There are no cards, no shadows and no rounded corners beyond 3px on buttons.
• The signature. The team wall: all twelve real portraits shoulder to shoulder, full bleed, six by two on desktop and three across on the phone. Their shared gray backdrop reads as one group photograph, with names set on the black scrubs. Under it are three short bios of the doctors. Tenure appears nowhere except in the "same faces every time" idea; no years are shown.
• Layout, top to bottom:
• the hero: a blue text block, the family-morning photo, the real Vienna depot and a kid with a toothbrush;
• the 7:30 hours panel;
• the team wall;
• the care section: three photo-led entries plus the full list as links;
• the walnut cases band;
• sedation: a photo with Dr. Paino's own words;
• a quote pause;
• paying;
• Meadowlark full bleed with the Freeman House photo overlapping it;
• the booking form;
• the footer.
• Booking. The header is sticky with the phone number and Book. There's an inline Book plus the number in the hours, sedation and paying panels. On the phone, a Call/Book bar slides in once the hero's own buttons are scrolled away; this uses a CSS scroll-driven animation, no JavaScript. The page has no JS at all.

Photos used

• Library: hero-01 (father and daughter brushing; a tight crop is made from it for the hero), people-01 (boy with toothbrush), people-07 (tying a shoe before school), people-05 (mother and toddler), people-02 (aligner case), people-03 (man laughing over coffee, cropped square), people-06 (headphones and blanket), detail-05 (dogwood in a vase). None is captioned as staff or a patient.
• Stock (Wikimedia Commons, via tools/stock.ts --place), credited in the footer:
• stock/w-od-trail/01.jpg: Vienna Washington & Old Dominion Depot, by Matthew Zisi, CC BY-SA 4.0. https://commons.wikimedia.org/wiki/File:Vienna_Washington_%26_Old_Dominion_Depot.jpg
• stock/meadowlark-botanical-gardens/04.jpg: Meadowlark Botanical Gardens in October, by DC Gardens, CC BY 2.0. https://commons.wikimedia.org/wiki/File:Meadowlark_Botanical_Gardens_in_October_(22784191736).jpg
• stock/freeman-house-vienna/02.jpg: Freeman House, Vienna, Va., National Photo Company Collection (Library of Congress), public domain, with the scan border cropped. https://commons.wikimedia.org/wiki/File:Freeman_House,_Vienna,_Va._LCCN2016825846.jpg
• The practice's own: all twelve team portraits; the cases makeover-face, veneers, bridge and chipped; the logo, made transparent from logo.jpg, and logo-white.png.

Placeholders and calls I made

• The booking form posts nowhere (action="#"). It says "We'll call you back to settle on a time", which is how the practice's current request form works in effect, but the call-back promise is my wording.
• Missing roles. Nancy, Jordan, Kathia and Jenefer have no role in facts.md, so their tiles show only their names.
• No invented numbers. No prices, no stats. The 4.9/292 rating appears once, as a plain sentence linking to Google.
• Kadie B.'s quote is shortened with an ellipsis. It sits apart from the makeover case so it isn't read as being about that patient.
• The depot photo is captioned only "The old W&OD depot, Vienna". I didn't claim it's near the practice.

With better assets or more time

• A real photo of the building and Maple Ave W frontage, and of the front desk. Facts says none exist, and that's the biggest gap.
• Colour-matched case photos. The makeover pair has a purple cast I chose not to "fix" on real clinical photos.
• A real map tile for the location section.
• A JS-free before/after toggle, if the owner wants the cases bigger.

The guide: where it helped, where it got in the way

Helped:

• The "calibration" list of AI clusters (cream plus serif plus terracotta, the broadsheet, the SaaS-card kit, eyebrows and middle dots, the → on links). This was the most useful part. It matched the owner's round-1 complaints almost exactly and made me throw out my reflexive first plan (Cormorant, cream, navy, gold, a portrait beside the headline, a stat strip). I recorded that in plan.md.
• "The industry's materials and vernacular are where choices come from" sent me to the logo for the palette and type (its gradient blue as a flat fill, its Trajan caps leading to Marcellus) and to real Vienna places.
• "Spend your boldness in one place" gave me the team wall as the single memorable thing.
• The writing section kept the copy plain and in the practice's voice.

Got in the way or left me guessing:

• Booking. The skill is written for product UI. It says nothing about conversion or a local business's needs (hours, phone beside every CTA, the booking path). The reviewer had to supply all of that; my first build had a 7,000px gap with no Book button.
• Photography. It's silent on art direction: crops, faces, what a stock person may imply. Every image problem the reviewer found (the blank-wall hero crop, the makeover crop, a quote placed beside the wrong patient) was outside the guide's frame.
• Over-reading the rules. "Avoid all caps for labels" and "visual structure is information" are good, but they made me nervous about any caption at all, which I think is over-reading.
• Inapplicable steps. "Confirm with the client" can't be done here, and "use one family or two" is fine. Its "Elements of Typographic Style" pointer is vague; I picked a 1.333 scale myself.
• The motion section was mostly irrelevant. The one place motion helped (the phone bar appearing) is a booking concern the guide doesn't think about.

The review loop

It helped a lot: from 7 to 8 overall, with the phone and booking-path scores moving most. The points that mattered most:

1. Round 1, Kadie's quote sat beside the makeover photos, implying a false identity. This was the most important catch: a facts problem I couldn't see. 2. Round 1, the booking path on desktop: the sticky header, plus Book in the hours, sedation and paying panels. 3. Round 1, the phone dock covered the hero's buttons on the first screen. 4. Round 3, a footer regression I introduced in round 2 by adding a grid rule with no media query, which crushed the phone footer.

The crops (hero, makeover) took two passes each. The reviewer was good at precise numbers, and once suggested a nose-down crop the source photo couldn't give.

All three rounds ended "another round". I fixed the round-3 points without a fourth review, as REVIEW.md caps it at three.