Notes: s10, the frontend-design skill

Concept: "We will never rush you": a page made of smiles, real ones wherever it says they're real (the twelve staff portraits, the patients' before/afters), stock ones for atmosphere (families, a child, friends).

Main decisions

• Type: Marcellus (a flared, inscriptional roman, close to the logo's Trajan-style caps but set in sentence case) for headlines and quotes; Figtree for text. No Garamond and no italic accent words. The display is used big, as the hero itself.
• Color, all from the logo and the photos: porcelain #F3F6F9 (cool, not cream), Vienna blue #2C67AE (the logo's gradient), sky #D6E6F3, ink #2A2421 (the logo's "DENTAL" brown-black), and backdrop #57524F (the gray of the team's studio backdrop). No navy-and-gold, no cream.
• Imagery: photography carries the page: a full-height hero photo melting into white, real cases large (the makeover face pair at about 380×470 each), the team wall, two half-page photo stories, and a photo in the booking block.
• Signature (the one bold thing): the team wall. Twelve 4:5 portraits edge to edge on their shared gray backdrop, so they read as one group photograph; names and roles sit on the black scrubs, under Dr. Paino's quote about why he became a dentist. The doctors are in the wall as equals, not beside the headline.
• Layout: left-aligned; alternating full-bleed photo/text halves; services as three groups of plain links, each with one line saying what it is. No cards, no numbers, no all-caps eyebrows, no stat strip, and no tenure anywhere.
• Tenure: left out entirely (Trish since 1989 and the rest). The owner said it's a detail; on a homepage it had no place that wasn't fuss.
• Phone: the hero photo stacks above the text; a call/book bar slides in once the hero's buttons have scrolled away (CSS scroll timeline, no JS).

Stock photos used (all Burst, free license, no attribution needed)

• img/hero.jpg: "Father And Daughter Having Fun", https://www.shopify.com/stock-photos/photos/father-and-daughter-having-fun
• img/swing.jpg: "Child Smiles Big On Swing Set", https://www.shopify.com/stock-photos/photos/child-smiles-big-on-swing-set
• img/friends.jpg: "Three Mature Women Laugh In Friendship", https://www.shopify.com/stock-photos/photos/three-mature-women-laugh-in-friendship
• img/morning.jpg: "Woman Cup" (Kristin Hardwick, via Openverse/StockSnap, CC0), https://stocksnap.io/photo/woman-cup-7JTOLHNSDI

None of them is captioned or named as a patient, staff member or the office. Alt text describes only what's in the picture.

Placeholders / not real yet

• Booking: "Request an appointment" in #book links to #book; there's no form or online booking yet.
• Staff roles: only the roles in the facts are shown; Nancy, Jordan, Kathia and Jenefer have no role listed, so they appear with their names only.
• Instagram link: built from the handle (@viennafamilydental).
• No prices, numbers or claims beyond facts.md. The Google rating links to the listing.

With better assets or more time

• Real photos of the office, the chair with its TV and blankets, and the team at work. The comfort section in particular wants a real photo instead of stock friends.
• A photo of Maple Avenue or Vienna for the booking block (the stock searches for Vienna, VA returned Vienna, Austria).
• An interactive before/after slider (it would need a little JS), and a real booking form.
• A second hero crop made for phones.

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

• Helped most: its calibration list of AI-design tells (cream + serif, eyebrows, middle dots, "→", numbered markers, card kits) mapped directly onto the owner's round-1 complaints, and it made me check each choice against it. "Spend your boldness in one place" pushed me to pick the team wall and keep everything else quiet. "Write from the user's perspective" improved the copy ("Start with a call on Zoom", plain service descriptions).
• The plan-then-review step was useful: my first instinct (doctor's portrait beside a serif headline, a ruled services list) was exactly the round-1 look, and the review step is where I caught it (see plan.md).
• Left me guessing: it says nothing about photography: how to choose, crop or combine stock with real photos, or how photo-heavy a page should be. For a local business that's the biggest lever, and the owner's main complaint. All my imagery decisions came from TASK.md and facts.md, not from the guide.
• Got in the way a little: "identify the subject and confirm with the client" can't be done here, so I just proceeded. The ban on labels above content is fine, but small text group labels ("For your smile") are genuinely useful in a services list. I kept them in sentence case and noted it.
• It's a generic web-UI guide: nothing about local-business essentials (tap-to-call, hours, address, map, trust signals, a sticky mobile CTA). I had to bring all of that myself.
• Tooling: after about eight parallel tools/stock.ts runs, the Node fetches to Burst/Openverse started coming back empty (curl still worked), so every later search returned 0 photos. Run searches one at a time.