Notes: Vienna Family Dental, "Country inn" (s10-frontend-design-skill)

Concept in one line: the practice as an old inn at No 307 Maple Avenue: every section is a room with painted walls, every picture hangs in a real frame with a small card under it, and a hanging inn sign greets you in the hall.

Main decisions

• Type. IM Fell English (an old English roman, a little rough, like a painted signboard or a colonial broadside) for headings, quotes and plaque titles; IM Fell English SC only on the sign. Alegreya Sans (humanist, calligraphic roots) for text at 19px/1.6. I picked it to avoid the Garamond look the owner rejected, and because its character comes from the letters themselves, not from styling. No all-caps labels, no eyebrows, no accented words in headlines.
• Color. Painted rooms: hall green #213A2F, claret #5E1E27, ink #1B2433, linen #E6DFCF. The mats are #F3EEE2, and ochre #C9A25B is used only as fine lines and gilt frames. The logo's blue stays in the logo and in links on linen. The dark walls are the library's plaster texture, duotoned into each wall color with tint.ts, so they read as painted plaster rather than flat hex.
• Imagery. Everything is framed: three mouldings (walnut, black, gilt) with mats, a hung-on-the-wall shadow, and a small card beneath. Library photos got a light warm wash (#C8924A, 0.18) so they share one autumn light. The team's own portraits sit in gilt ovals (doctors) and small matted frames (the household). The real before/afters are gilt diptychs on the ink wall. Two real Vienna photos (the Freeman Store, the old W&OD depot) have true captions. The library's line drawings are recolored in the palette and framed like prints.
• Signature. The services as a salon hang: a wall of pictures in different frames and sizes, each with a card naming the service and saying one plain thing about it. It replaces the ruled list or card grid. Its small sibling is the hanging sign in the hero, which swings once on load (off under reduced motion). Nothing else on the page moves.
• Layout. Left-aligned throughout. Header, then the hall (headline, the practice's own "We'll never rush you.", and a framed photo), then the front-desk card (hours, address, phone) overlapping the dado rail, then the parlour (salon hang), the claret room (Dr. Paino's oval and his own words, the two other doctors, the whole team), the ink room (smile cases), the quiet room (nerves and sedation, with Jason's quote), the guest book (two quotes), On Maple Avenue (real Vienna), insurance, Book a visit (a short request form beside the phone number), and the footer. On the phone there's a fixed Call / Book bar, and a no-JS <details> menu below 1180px.
• Copy. Headlines are 2 to 5 words: "We'll never rush you.", "What we look after", "Not an old-school dentist", "Smiles from this chair", "Nervous is normal.", "In their own words", "On Maple Avenue", "About insurance", "Book a visit". Tenure appears nowhere except that Trish "runs the front office" (no years).

Photos used

Library: hero-05-1 (hero), hero-01-1 (checkups), people-01-1 (children), people-05-1 (Happy Visit, cropped 4:5), people-02-1 (Invisalign), people-06-1 and detail-06-1 (nerves), people-09-1 (On Maple Avenue), texture-01-1 and texture-02-1 (duotoned into the green, claret and ink walls), svg/illustration-04 (implants) and svg/illustration-06 (sleep), recolored inline.

Stock (Wikimedia Commons, via tools/stock.ts --place):

• The Freeman Store: "FREEMAN STORE" by Jerrye & Roy Klotz MD, CC BY-SA 3.0, https://commons.wikimedia.org/wiki/File:FREEMAN_STORE.jpg (warm wash 0.25)
• The Vienna W&OD depot: "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 (mono 0.45, then warm wash 0.35)

Both are credited in the footer.

Practice assets: logo-white.png, all 12 team portraits, and the cases chipped, veneers-face, bridge and makeover-face (before and after).

Placeholders and judgment calls

• The booking form has no back end (it posts to #book). The line "The front desk will get back to you to settle a time" is my reading of "the Book button opens a request form"; it promises nothing more specific.
• Roles: only the ones in facts.md (Trish front office, Ann hygienist, Jan and Diane RDH, Lynne insurance); the others are shown by name only.
• The hero caption "one dentist for the whole family" sits under a generated photo. It describes the practice, not the people in the picture.
• Instagram, nav, service and article links go to #.

With better assets or more time

• A real photograph of 307 Maple Ave W (the door, the sign) would be the perfect hall picture. The hanging sign is standing in for it.
• A drawn single-crown illustration for same-day CEREC crowns (the library only has a crown on an implant).
• Real photos of the rooms (the blankets, the headphones) for "Nervous is normal."
• An autumn photo of the W&OD Trail itself in Vienna; Commons has the depot but mostly summer or Arlington trail shots.

The guide (frontend-design SKILL.md): where it helped, where it got in the way

• Helped: the "plan, review the plan against the brief, then build" step. Writing the obvious first draft (navy/cream/brass, Cormorant + Inter, stat strip, cards) and checking it against the prompt showed it was exactly last round's rejected look. That pushed me to the rooms-and-frames idea. "Spend your boldness in one place" kept the salon hang as the one big gesture, and the one swing of the sign as the only motion. The list of AI tells (eyebrows, middle dots, arrows on links, 01/02/03) worked well as a checklist.
• Got in the way / left me guessing: it's written for product UI. Its copy section (errors, toasts, "Save changes") has little for a local business homepage, and it says nothing about photography, which is what this owner cares about most. "Confirm with the client" can't happen here. Its tells list includes "hairline rules, zero border-radius" and "a high-contrast serif on cream", which a country-inn direction partly asks for. I followed the brief, as the guide says to, but it would help if the guide said how to do a traditional look without falling into those defaults. Its type advice ("follow The Elements of Typographic Style") is right but abstract: it doesn't help you choose a face.

The review loop

It ran three rounds. Overall went from 7 to 7 to 8; the phone went from 7 to 6 to 8. Round 3 said ship, and I made its three small fixes after it. It helped, mostly by catching things I'd stopped seeing:

• The point that mattered most: the "Same-day crowns" card showed the library's crown-on-an-implant drawing. That's a factual slip Dr. Paino would catch. The drawing now goes with "Implants and gum care".
• Uneven diptych mats: the before and after case photos aren't the same size, which I hadn't noticed.
• The path to booking: there was no Book button for five rooms between the services and the booking section. "Nervous is normal." and the guest book now each end with Book plus the phone number.
• It also caught a regression I introduced in round 2: an unscoped grid rule broke On Maple Avenue on the phone. Without the loop that would have shipped.

Weaker: some of its polish points went back and forth (where "See the smile gallery" sits; the depot photo's color took three tries). And as it says itself, the page's real ceiling is the lack of real photos of the office and the team at work.