rounds/r5/s7-blueprint-remix/notes.md
Notes: s7 blueprint remix, round 5, direction "Mid-century modern"
Concept in one line: Vienna Family Dental as a well-loved 1960s Main Street shop, built on Van Leeuwen Ice Cream's layout system: flat kitchen-colored panels split by thick walnut rules, every photo set in an arch or rounded frame, round "stickers" on the corners, oval buttons with a hard shadow.
Main decisions
- Blueprint: vanleeuwenicecream.com (see
refs/blueprint.md: 16 candidates screenshotted, 10 usable). I kept its shapes: the split hero, a one-line band, tiles in a ruled grid, framed cards left then right, a row of arch tiles, and split panels at the end. Its black rules are walnut here, its pastels are the direction's kitchen colors, and the script logo is the practice's own. Secondary: Saguaro, for the saturated blocks and an unmissable Book button. - Type: Jost only (Futura class, close to the blueprint's Brandon Grotesque): 600 caps, letterspaced, for headings and labels; 400 for body. No serif anywhere.
- Color: mustard #e9a93a, teal #1d6f6c, tomato #c8452b (the Book button), walnut #4a2e1f (rules, type, shadows), paper/cream, plus pale tints for tiles: butter, sky (from the logo blue), mint and blush. No navy, no gold.
- Imagery: a photo or illustration in every section except Paying. The library's line illustrations are recolored inline into the palette (kids, crowns, sedation, and the moon in a sticker). The real team is in arches on rotating tints, the real before/afters have Before/After badges, and real Vienna photos come from Wikimedia Commons.
- Signature: the ruled color-block grid, and stickers with circular text ("4.9 stars on Google ✦ 292 reviews", "Dr. David Paino ✦ DDS ✦ AACD", "Zoom chat first ✦ no pressure", "Come say hi ✦ Maple Ave W"). Starbursts appear in the hero, the band and as bullets in the kids section; one boomerang in Paying.
- Words: the H1 is "Bright smiles on Maple Avenue". The supporting line is my own ("…a front desk that waves when you walk in. Come on by."); neither the slogan nor the 7:30 opening is used as a headline. 7:30 appears once, as the last bullet in the kids section. Headings in order: Something for every smile · A dentist who gets it · The folks behind the chair · Smiles we've rebuilt · Butterflies welcome · Little teeth, big day · Your insurance, our paperwork · Right around the corner · Pull up a chair. Each review sits beside the claim it supports (Kadie B. by Dr. Paino, Jonathan V. by the Invisalign case, Jason A. by sedation).
- Layout: no two neighbors share a shape. Phone: services in 2-up tiles, the team as a swipe row that ends on a Book tile, and a sticky Call / Book bar.
Photos used
Library: hero-03-1 (hero), hero-04-1 (checkups tile), people-02-1 (Invisalign tile), detail-08-1 and people-09-1 (kids), detail-05-1 (sedation card). Library SVGs: illustration-03, -04, -06, recolored. Business assets: logo.jpg, logo-white.png, all 12 team portraits, cases veneers-face before/after, veneers-after (the veneers tile), chipped before/after, bridge before/after. Stock (Wikimedia Commons, credited on the page):
depot.jpg: "Vienna Washington & Old Dominion Depot.jpg", Matthew Zisi, CC BY-SA 4.0gazebo.jpg: "CherryBlossomsGazeboLakeCaroline.JPG", WBFolsom, CC BY 3.0meadowlark.jpg: "April at Meadowlark (16538090484).jpg", DC Gardens, CC BY 2.0
No tools/stock.ts searches: I fetched straight from the Commons API (Category:Vienna,_Virginia, Category:Meadowlark_Botanical_Gardens) via Special:Redirect/file/...?width=1800, 8 seconds apart. Every download worked.
Placeholders
- Price: "[PLACEHOLDER: typical new-patient checkup cost, to confirm with the office]" in Paying.
- The form posts nowhere (
action="#"), as the task allows. - Five team members (Nancy, Jordan, Kathia, Jenefer, and Lynne apart from "insurance") have no role in facts.md, so they read "Team". Ask the office for roles.
With better assets or more time
- A real photo of the building on Maple Ave W and the front desk would replace the library hero; the arch is made for a shop-front.
- Ask the office for one candid team photo (not studio gray) for the "Come say hi" tile.
- A custom sticker set and a hand-lettered "Vienna" mark in the logo's blue would push the mid-century feel further without going kitsch.
- The LOC's public-domain photos of Vienna ("July 4th celebration, Vienna, Va.") could make a period band, but they're 1910s, not 1960s, so I left them out.
The guide: where it helped, where it got in the way
- Helped a lot: "pick one real site and rebuild its system." Van Leeuwen gave me a complete, coherent grammar (the rules, the arches, the stickers, the oval buttons) that fits the direction without retro clichés. It also gave the rhythm for free: I never had to wonder what the next section should look like. The mapping table is the most useful artifact in the method.
- Got in the way: the direction (mid-century) and the method (research the best of the category) pull apart. Boutique dental sites are almost none of them mid-century, and the best mid-century sites are hotels with video heroes and popups (Parker, Durham, Ojai, Holiday House were unusable). The guide should say: search for the direction first, the category second. About a third of the screenshot budget was wasted on unusable sites.
- Left me guessing: the guide says to build the palette "from the logo blue and the photos", while the direction says mustard, teal, tomato and walnut. I let the direction win and kept the logo blue only as a pale sky tint. The "Proof strip" module also clashes with the owner's "no stat strip"; I put the rating in a sticker and a line under the buttons instead.
- The guide's "two side-by-side passes" against the blueprint caught real bugs (the before/after images rendering 1300px tall, the logo's box), but mostly the same kind of things the review loop caught. One pass would do before the loop.
The review loop
Two rounds. Round 1 scored 8 with "another round"; round 2 scored 8, phone up to 8, and said "ship". What mattered most:
- the boomerang over the insurance heading on the phone (I hadn't seen it);
- Dr. Paino's portrait appearing twice in a row. Swapping his team card for a "Come say hi" Book tile also filled a gap in the Book path;
- the two near-identical windowsill still lifes.
Reviewer mistake: in round 2 it called the hero's library photo "Dr. Paino's warm hero photo". It isn't, and nothing on the page says so.
Build: site/index.src.html + build.py (inlines the library SVGs) → site/index.html; CSS in site/style.css.