s11-local-practice: notes

Concept in one line: 7:30 on a school morning on Maple Avenue. An early-opening neighborhood family practice, shown through its real team, its real results and its real town.

Main decisions

• Type: Young Serif for headings (warm and heavy, like a painted shop sign; traditional without being the Garamond look) and Libre Franklin for text and UI (American civic gothic). Sentence case, no labels above headings.
• Color: from the logo and the autumn photos. Door blue #245b96 is the one button color, with navy #173a61 for the utility bar and footer, a cool paper white #f7f6f2 (not cream), trail green #2f4a3c for the town band, pale sky #e3ecf3 for children, and the team portraits' mottled gray behind the team. Maple #c8742c only for stars, stamps and the focus ring.
• Imagery: library photos of family mornings. The hero is people-07 (a father tying his son's shoe at the door before school), chosen to carry the 7:30 point instead of the obvious hero-01. All 12 real portraits appear as a wall on their own gray. Results are real cases only. Real Commons photos of Vienna appear as postcards.
• Signature: the neighborhood band, with four tilted, stamped postcards of real Vienna places on a green-tinted farmers-market photo.
• Layout, top to bottom:
• Hero: a split, with a paper card on the left and the photo as a right panel.
• Services: a photo bento plus a short list.
• Nervous patients: the photo bleeds left, with Dr. Paino's own quote.
• Gallery: dark, with before/afters.
• Team: the gray wall.
• Children: pale blue, the photo bleeds right.
• Insurance: a linen background.
• Town: the green postcard band.
• Booking: the form beside hours, address and emergencies.
• Articles, then a navy footer.
• On phone, a sticky Call/Book bar.
• Dropped from the plan: a sketch map of Vienna. I couldn't verify the street geography, so I used postcards instead. No proof or stat strip: the rating sits in the hero.

Images used

Library (library/img/):

• people-07: hero
• people-10: family tile
• people-03: cosmetic tile
• people-02: Invisalign tile
• detail-07: crowns tile
• people-06: nervous patients
• people-05: children
• people-08: insurance
• texture-03: linen backgrounds
• place-04: town band background
• people-09: visit section
• hero-04, detail-05, detail-04: article thumbnails

Generated in the library but not used in the final page: hero-03, detail-03, illustration-03 (they were swapped out during review).

Practice assets: logo.jpg, logo-white.png, all 12 team portraits, and all five cases (veneers-face, makeover-face, bridge and chipped in the gallery). The close-up veneers-* pair isn't used; the face version tells the same case better.

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

• Freeman House, Vienna, Va. (National Photo Company Collection, Library of Congress; public domain). https://commons.wikimedia.org/wiki/File:Freeman_House,_Vienna,_Va._LCCN2016825846.jpg (cropped 4% to remove the film edges)
• W&OD Trail, Difficult Run crossing, by Antony-22, CC BY-SA 4.0. https://commons.wikimedia.org/wiki/File:W%26OD_Trail_Difficult_Run_crossing_2020c.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
• Vienna, VA 22180 (panoramio), by Idawriter, CC BY-SA 3.0. https://commons.wikimedia.org/wiki/File:Vienna,_VA_22180,_USA_-_panoramio.jpg

A live site would need visible credits for the CC BY and CC BY-SA photos (not added on the page).

Placeholders

• [PLACEHOLDER: typical fee for a new-patient exam and cleaning]: no prices are published.
• [CONFIRM: how soon the office calls back] after a booking request.
• [CONFIRM: parking].
• Roles for Nancy, Jordan, Kathia and Jenefer are left blank, because facts.md gives none.
• The postcard captions are true, but whether the W&OD photo is close enough to Vienna is a judgment call: Difficult Run is on the trail just west of town.
• The form has no back end, and the booking button goes to #book.

With better assets or more time

• Real photos of the office, the building on Maple Avenue and the team at work. The page now leans on generated people for every human moment except the portraits.
• A real photo of Maple Avenue itself. Commons had nothing usable: the only result was a highway-sign shot.
• Self-hosted, subset fonts; AVIF/WebP with srcset beyond the hero.
• A full smile-gallery page, and credits for the CC photos.

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

• Helped most:
• DESIGN.md step 3 ("what makes it local, at least three with a section and an image") pushed the town, the team and the cases into sections of their own, not footnotes.
• Step 5's list of earlier looks kept me off cream, navy and gold, and off a portrait beside the headline.
• The variety rules for the section table (neighbors differ, at most two plain light sections) gave the page its rhythm almost automatically.
• "Describe the one photograph" was a good concept generator: it produced the 7:30 school-morning idea, and the H1, the hero image and the children's copy all follow from it.
• Got in the way, or left me guessing:
• brief.md and homepage.md point to "SKILL.md" and "docs/site-plan.md", which don't exist here. DESIGN.md says plan.md.
• homepage.md's proof strip ("stats with big numerals") contradicts DESIGN.md's "stat strip" warning. I followed DESIGN.md.
• The build standard is mostly about Workers and servers. Its photo rule ("no stock photos of people") contradicts facts.md and TASK.md, which encourage stock. I followed facts.md.
• Nothing tells you to check height attributes against CSS aspect-ratio. My first render had every case photo at the wrong ratio.
• --place searches came back thin: "Church Street Vienna Virginia" returned an aerial shot and "Maple Avenue" a highway sign. Broader queries ("Vienna Virginia", "Freeman House Vienna", "Washington and Old Dominion Trail") worked better. The guide could suggest them.

The review loop

It helped a lot. Three rounds took the reviewer's score from 7.5 to 8.5, and the verdict to ship.

• Round 1 caught two things I'd missed on my own pass: the header button read "Bookan appointment", and the hero card covered the boy, the subject of the concept photo. Fixing the hero, by making the photo a right-hand panel, was the biggest single improvement.
• Round 2 caught a real-patient problem I'd created: a man's review sat under a woman's face, which misattributes it. It also caught a makeover crop that cut off the smile.
• Round 3 spotted that three generated women wore the same cream sweater, which is a stock tell I wouldn't have seen.

The structured "earlier points" check kept fixes from quietly regressing.