Notes: Vienna Family Dental, strategy s4 (surfaces and treatments)

Concept: a Maple Avenue practice with the composure of an old family firm. The type is calm and close to the logo's Trajan caps, the color is the logo's blue, and the tapered rule from under "DENTAL" holds everything in line. The story is the same faces for decades: Trish has run the front desk since 1989 and Ann has been a hygienist since 1991.

Main decisions

• Type: Cormorant Garamond as the display face (500/600, with italic for one emphasised phrase) and Hanken Grotesk for text. Labels are letterspaced caps set between two tapered rules, echoing "DENTAL" in the logo.
• Color: the logo's blue gradient as a ramp, from #F1F5FA through #2F6DAE to #0B1D33. Warm paper neutrals and ink come from the logo's off-white and its brown-black. The secondary color is a warm stone taken from the team portraits' mottled backdrop, so the photos sit on a ground they already match. Brass is reserved for the Book action.
• Motif: the tapered rule. It appears as label brackets, the hero underline, checklist bullets, membership separators, the line through the visit steps, the article card tops and a low-contrast pattern.
• Shape: the arch (the crown of the logo's tooth), used for portraits and the veneers case. The radius scale is 4/10/20. Icons are Lucide at a 1.5 stroke, bare.
• Surfaces (6): paper, tint, stone, deep, field (the one logo gradient) and pattern.
• Treatments (9+):
• hero: a split with overlapping arch portraits and a rating card
• stat wall, ruled index, feature band (veneers before/after)
• gallery wall with a lead case, big quote + sedation card, team gallery with a lead portrait
• bento (insurance), steps on a path, article cards, closing field with the form
• Signature: the hero. It shows Dr. Paino flanked by Trish ("front desk since 1989") and Ann ("hygienist since 1991") in arches, on deep navy. It's the one claim a competitor can't copy, and it uses the strongest real asset (the matched studio portraits).
• Layout: the order follows the buyer's questions: proof → services → the signature service → results → fear → people → cost → first visit → articles → book.

Placeholders

• Veneers price: [CONFIRM: from-price or what sets the price]
• Prices tile: [CONFIRM: typical fees]
• Form reply time: [CONFIRM: reply time]
• Roles for Nancy, Jordan, Kathia and Jenefer are shown as "Team" because the facts give no role.
• The form posts to # (no back end in this round).

With better assets or more time

• Office and street photos. With them, the "photo" surface the guide lists could replace the pattern section, and the Visit block could get a static map.
• A second portrait of Dr. Paino. I used a tighter crop of the same photo in the Team section so it doesn't read as a repeat, but it's still one shoot.
• Gallery photos with matched scale and lighting. The makeover face shots differ in flash and head size, so I made the clean bridge close-up the lead case.
• Phone: the full page is about 15,600px. I trimmed it to fit under the screenshot tool's 16,000px cap, for example by hiding service descriptions and article blurbs on phone. With more time I'd cut a module, such as the articles, rather than trim copy.
• A real hours-today highlight would need JS or a server, so I left it out.

Where the guide helped

• The assembly table was the most useful step. Assigning a surface and a treatment per module before building made the squint test pass on the first build: every section is visibly a different object, and the shared kit keeps them from looking like different sites.
• Asking for a secondary color pushed me to look at the photos. The stone color from the portrait backdrop is the best choice on the page, and the guide's prompt is why I found it.
• "Each section gets at least one detail" plus "one motif used different ways" gave a concrete checklist. The tapered rule ended up doing about eight jobs without feeling repeated.

Where it got in the way or left me guessing

• Variety rules vs homepage.md. homepage.md says "Backgrounds change only to group (2-3 in total)", while DESIGN.md demands at least 5 surfaces with no neighbours sharing one. I followed DESIGN.md, since the task says it's the method being tested. The two files should agree.
• The variety minimums push toward a long page. At least 6 treatments, no repeats between neighbours, plus the spine and extras gave 11 sections. On phone that ran into the screenshot cap. The guide should say how many modules a homepage should have, or allow a treatment to cover two modules.
• Overlapping compositions need guidance on the phone. "Split with overlap" and "image breaks the grid" are easy to sketch and fiddly to make collision-free at two widths. My first two hero builds had captions hidden under arches; it took three iterations. A rule like "overlaps never cover a face or text, and decide the phone version before building" would save rounds.
• Placeholders vs polish. The cold critic called the visible [CONFIRM] marks "broken-looking", but writing.md requires them. The guide should say how to show placeholders in screenshots that are being judged.
• Several references don't fit this setup: brief.md and homepage.md point to SKILL.md, "Pacing" and docs/site-plan.md, which don't exist here. I worked out that brief.md and DESIGN.md play those roles.
• The rules leave rhythm underspecified: "alternate weight" doesn't fit the stricter "no two neighbours share a surface or a treatment" in any obvious way.
• I kept icons bare per the kit, but the guide's own catalogue suggests "on a tint disc" as an option. The cold critic read my step-number circles as violating the kit, so I removed them. The kit's icon rule could cover numerals too.