Notes: s9 section posters, "Warm and friendly"

Concept in one line: "You're in gentle hands": a page that talks to a nervous parent's worries one at a time, with each worry answered by its own poster-like section, in soft blue and apricot with smiling families.

Main decisions

• Type: Fraunces with the SOFT axis at 100: a rounded, warm serif, with one italic word for emphasis per big headline ("gentle", "welcome"). Nunito Sans for the text, chosen for its rounded terminals. Not a Garamond: friendly, and still grown-up enough for "premium & refined".
• Color: two strong colors only, used as full sections. Bluebell #3D6FA8 is the logo's blue, softened. Apricot #F2A981 is morning light and the friendliest moment (kids). Ink #1E2B3A for the cases and the footer; milk, oat and mist as neutrals. Apricot doubles as the primary button on blue and dark grounds; blue is the primary button on light grounds.
• Imagery: warm library photos of families at home, the real team portraits and the real before/after cases, real Vienna (Meadowlark Botanical Gardens with a light apricot wash, the Freeman Store), two library line illustrations recolored through their CSS variables, and a drawn tooth-and-leaf pattern.
• Signature: the apricot "Little teeth are welcome" poster. The boy's photo in an arch breaks out of the top of the block, and the library's tooth-with-a-balloon is recolored ink and milk beside the buttons.
• Layout (the method's section plan): photo-field hero → icon row on blue → split (nervous) → mosaic (services) → color block on apricot (kids) → editorial on ink (cases) → film strip on the pattern (team) → big quote on a Meadowlark photo → color block on blue (paying) → map/place with the booking form → ink footer. No two neighbours share an idea or a background type. Phone: a sticky Call / Book bar.
• Voice: the H1 is "You're in gentle hands." The headlines, top to bottom: The easy parts, sorted · Nervous? We get it. · From checkups to new smiles · Little teeth are welcome · Smiles from this chair · The faces you'll see · (Kadie B.'s words) · Insurance, filed for you · Come say hello. The 7:30 opening and "never rush you" appear only in body copy.

Photos used

Library: hero-01 (hero), people-06 (nervous split), people-02 (Invisalign tile), people-03 (implants tile), people-01 (kids), detail-06 (paying). illustration-01 (ghost tooth on the blue band) and illustration-03 (tooth with balloon) are inline SVGs. Business assets: all 12 team portraits; cases makeover-face, chipped, bridge, veneers-after; logo.jpg (margins cropped) and logo-white.png. Stock (Wikimedia Commons via tools/stock.ts --place):

• Meadowlark Botanical Gardens in October (22189089383), DC Gardens, CC BY 2.0, https://commons.wikimedia.org/wiki/File:Meadowlark_Botanical_Gardens_in_October_(22189089383).jpg (big-quote ground, apricot wash 0.25). Credited on the image.
• FREEMAN STORE, Jerrye & Roy Klotz MD, CC BY-SA 3.0, https://commons.wikimedia.org/wiki/File:FREEMAN_STORE.jpg (visit section, wash 0.2). Credited in the caption.

Considered and cut in review round 1: detail-02 (mint) and detail-07 (instruments). people-07 and detail-04 were not used.

Placeholders and assumptions

• The booking form posts to #: there's no back end, and the owner has no online booking yet. "We'll call you back to set it up" assumes the request-form workflow the current site uses.
• The map is an illustration (labelled "not to scale"), not real geography. Only Maple Ave W and the pin are meaningful. The real one would be a static map image.
• Roles: I gave roles only where facts.md states them (Trish front office, Ann hygienist, Jan and Diane RDH, Lynne insurance). Nancy, Jordan, Kathia and Jenefer appear with names only: [CONFIRM roles].
• No prices are shown (none published). The paying section explains how insurance and CareCredit work instead.
• Trish is described as running the front office (she is the front office manager in facts.md).

With better assets or more time

• Real photos of the office, the front door on Maple Avenue and the team at work: the page has no picture of the place itself. That's the biggest gap for local feel.
• A real static map of the block.
• Self-hosted, subsetted fonts. A real form handler and thank-you page.
• An AVIF/WebP srcset for the hero. The library hero is only 1536px wide, so it's slightly soft at 1440 with the 112% scale.

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

• Helped: the section-idea menu and the variety rules (no neighbours sharing an idea or background type, minimum photo, color and pattern counts) made the page varied by construction. The "is it a poster?" question per section was useful. The 5-6 color palette with exactly two strong colors kept a friendly direction from turning into a kids' brand.
• Guessing: whether a split screen counts as a "photo" or a "light neutral" background for the adjacency and "max 2 plain light" rules. I counted it as photo. The rules don't cover a section that changes background halfway.
• Got in the way a little: "every section is a poster" pushes every section to be loud, so the page is long (about 9,300px at desktop). The method has no step for "which section should be quiet". The variety rules also turned the reviewer's sensible suggestion (insurance on oat) into a rule conflict.
• "Build and review one section at a time" with a screenshot after each wasn't practical with full-page shots: I built the page in one pass, then reviewed every section from the slices. A per-section screenshot tool (shoot by selector) would make that step real.
• Review loop: three rounds, scored 7 → 8 → 8, ending in "ship". It was worth it. Its most important point was the pattern running under the team's text, which I had read as texture; it looked like a print error. The mosaic cut (removing filler stills) was the second. Round 2 caught a regression I made myself: the desktop fix to the hero (a 112% scale) wrecked the phone crop. The fix was a separate phone crop served through <picture>. Round 3 was small typographic polish (a doubled opening quote).
• I also softened one line myself at the end: "We show you what the result will look like before we begin" became "With veneers and smile makeovers, you see the new shape before we begin", because the facts only support the preview for those.