Notes: s10 (frontend-design skill), round 5, direction Bauhaus

Concept: the practice as a well-made object. The page is built from blocks that butt edge to edge like a Bauhaus print. The circle, square and triangle each hold real content (the rating, the payment steps, the urgent things); none is there as ornament.

Main decisions

• Type: Archivo, one family, using its width axis. Headlines are expanded black (width 125, weight 850-900); body text is normal width at 400. The contrast comes from width and size. I rejected Jost/Futura as the textbook "Bauhaus" face that every pastiche reaches for. There are no caps labels, eyebrows, arrows or middle-dot strings.
• Color: Maple blue #1C4FA0 (the logo's blue gradient, flattened, so the brand is extended rather than replaced), signal red #D62718 (Book and emergencies only), chrome yellow #F2B705, true black, white, and concrete #E6E5E1. No cream.
• Imagery: hard-edged photo blocks, with no rounding and no shadows. The library's people and detail shots are in full colour. The real cases and team portraits are used as they are. Real Vienna places from Wikimedia Commons are duotoned deep blue/white so four photos of very different quality read as one set (and as cyanotype-ish blueprints, which suits the direction). Two library line illustrations (the moon and the implant) are recoloured inline into the palette.
• Signature: the hero poster. A solid blue block carries "Clean lines. Clean teeth." and butts the father-and-daughter photo, with a yellow 4.9 disc on the seam. Under it, a black/concrete/yellow strip gives the hours, the address and "Toothache? Call."
• Layout: a strict 12-column grid. Section rhythm: poster hero → white services mosaic → cases on black → full-bleed yellow kids band → black "Nervous is normal." band → team in the three primaries → reviews → paying steps → full-bleed blue Vienna band → booking with the form. Full-bleed bands alternate with sections inside the margins.
• Voice: every headline is 2-5 words, with dry wit at most once per section: "We clean, fix and fit.", "Proof, in pairs.", "Small mouths welcome.", "Nervous is normal.", "Twelve people, one office.", "Overheard in the chair." (the subhead adds "Well, written afterwards."), "Paying, in three steps.", "Find us on Maple.", "Pick a morning." The practice's slogan is used once, inside the nervous section, as Dr. Paino's rule. The 7:30 opening appears only in body copy and the hours.
• Booking: the header is sticky, and a red "Book a visit" appears in the hero, under the kids section (as "Book their first visit"), in the team block, under the reviews, in the Vienna panel and in the form at #book. The form says "we'll call to confirm" because the practice has no online booking. Phones get paired Book and Call buttons.
• Tenure: kept to one detail. Trish is "Born and raised in Vienna", which is local rather than a year count. No years anywhere.
• Numbering: used only for the payment steps, which really are a sequence.

Photos used

Library: hero-01-2 (hero), people-02-1 (Invisalign), detail-01-1 (checkups), people-01-1 (children's), people-05-1, people-10-1, detail-08-1 (kids band), detail-03-1 (nervous section). hero-05-1 and people-04-1 were copied into site/img but aren't used.

Business assets: the logo (its off-white background whitened so it sits on the white header), the white logo (footer), all 12 team portraits, and all 5 case pairs except veneers-before/after (I used the veneers-face-* versions of that case).

Stock: Wikimedia Commons, via the API (the --place search returned only Beltway shots), all duotoned:

• Freeman Store: "Freeman House Store and Museum, Vienna, Virginia" by Ron Dicker, CC BY-SA 4.0. https://commons.wikimedia.org/wiki/File:Freeman_House_Store_and_Museum,_Vienna,_Virginia.jpg
• W&OD depot: "Vienna Washington & Old Dominion Depot" by Matthew Zisi, CC BY-SA 4.0. https://commons.wikimedia.org/wiki/File:Vienna_Washington_&_Old_Dominion_Depot.jpg
• Meadowlark: "April at Meadowlark (16538090484)" by DC Gardens, CC BY 2.0. https://commons.wikimedia.org/wiki/File:April_at_Meadowlark_(16538090484).jpg
• Northside Park: "Northside Park" by Punker1999, CC0. https://commons.wikimedia.org/wiki/File:Northside_Park.jpg

All four are credited in the footer.

Placeholders

• The booking form has no back end (onsubmit does nothing).
• "Get directions", the service links and the article links go to #.
• No prices are shown.
• The 4.9/292 rating is static text linking to the real Google listing.

Better assets or more time

• A real photo of 307 Maple Ave W and the waiting room would give the hero and the Vienna band a real building instead of nearby landmarks.
• A photo of the CEREC mill would give "Crowns in a day" a picture instead of a colour block.
• Portraits shot on a coloured seamless (blue/yellow/red) rather than mottled gray would fit the direction far better than the current gray, which is the one off-palette element left.
• A small map drawn in the page's shapes, if the real street geometry were checked.

The guide: where it helped and where it didn't

• Helped:
• The "review the plan against the brief" step caught two real defaults. The first H1 that came to me was "Form follows flossing." (the pun any model makes for "Bauhaus dentist"), and the first font was Jost/Futura. Both were changed before any code was written.
• The list of generated-page tells (caps eyebrows, middle dots, → on buttons, mono labels, one accented word) was concrete and easy to check against.
• "Numbering only when it's a sequence" made the payment steps the one place numbers appear, and they earn it there.
• "Spend your boldness in one place" kept the hero as the poster and the rest disciplined.
• Got in the way or left me guessing:
• It's written for product UI. The writing section ("an empty screen is an invitation to act", errors, toasts) has little to do with a local business homepage.
• "Being specific and legible is always better than being clever" pulls against the direction's "a dry bit of wit allowed". I settled on wit in the headline and plain facts in the line under it, but the guide doesn't say how to resolve the two.
• The guide's "ground it in the subject" says to confirm the subject with the client; here there's no client to ask, so I skipped that.
• It says nothing about photography: sourcing, cropping, tinting, or how many images a page needs. For this owner, imagery is the biggest factor, and all of it came from TASK.md rather than the guide.
• "Hairline rules, zero border-radius" is listed as a default tell. Bauhaus needs zero radius, so I kept it and used thick blocks instead of hairlines. Briefly unclear, but the guide's "the brief's own words always win" covered it.
• The tooling (not the guide): tools/stock.ts --place returned only Beltway and road photos. The Commons category/search API via curl worked.

The review loop

• Did it help? Yes, a lot. It went from 7.5 to 8.5 over three rounds and caught things my own pass missed.
• The points that mattered most:
• Round 1: no Book button for ~4,500px in the middle of the page (now sticky header + 4 more Book buttons), and Dr. Paino's portrait used twice.
• Round 2: the patient quotes were trimmed without ellipses, which breaks the facts.md rule. It also said the phone services mosaic was too narrow.
• Round 3: the Before/After tags were covering the teeth on the phone.
• Less useful: the pixel-alignment points (12px steps, 44 vs 58px edges) were right but small.
• The one suggestion I'd question: "Team" as the role line for the four staff without a stated role. It's honest, but it reads a little flat.

Files

site/index.html is generated from site/src.html by site/build.py, which inlines the recolourable library SVGs. Styles are in site/style.css. The plan is in plan.md; the reviews are in reviews/.