s1-baseline: Vienna Family Dental

Concept: a portrait studio for a practice of long-serving people. The logo's ivory paper and engraved blue serif frame the team's own gray-backdrop portraits, and the years each person joined (1989, 1991, 2005...) recur as the page's numerals.

The brief and art direction, written before any code as the guide asks, are in plan.md.

Main decisions

• Type: Cormorant Garamond 600 for headings (it echoes the logo's classical caps), Source Sans 3 for text at 18px. Small-caps eyebrows in brand blue, each led by the logo's tapered rule (a CSS clip-path), echoing "— DENTAL —". I set lining numerals everywhere except the team timeline, where the old-style 1989 looks right.
• Color: ivory #FBFAF5 (sampled from the logo's ground), stone #F1EDE4 to group sections, ink #231F1C (the logo's "DENTAL"), brand blue #2A5E95, navy #14273F as the one dark surface (the anxiety section and the footer). Brass #C49A58 is used only for the Book button.
• Surfaces and details: three backgrounds (ivory, stone, navy). Corners are 2px and nearly square, there are no shadows and no icons (except the phone glyph), and hairline rules carry the structure in place of cards.
• Signature: the team timeline under the heading "Trish has answered our phone since 1989." Six portraits sit on a ruled line with their joining years in large serif numerals, followed by a compact roster of the other six with face-cropped thumbnails.
• Layout and pacing:
• The hero is a split, chosen on purpose: the H1 sits on the left and Dr. Paino's portrait on the right. The portraits are the only good photos, and his is the strongest.
• Then, in order: a quiet ruled proof row; a navy section with his "old school dentist" quote large, and Jason A.'s anxiety review beside the comfort facts; services as four grouped, ruled lists; the smile gallery with one large lead case, the composite-veneers feature and Jonathan V.'s Invisalign review beside it (that case included Invisalign), then three smaller cases.
• After that: the first-visit steps with a children's panel; the team; insurance, with Lynne's face next to "ask Lynne"; a big "4.9" with Kadie B.'s quote featured; articles as a plain list; booking (form beside hours, address and phone); the footer.
• I placed each review next to the claim it supports.
• Header: a navy utility bar with hours and address above a sticky header holding the logo, six nav links, the phone written out and Book. At 1440 everything didn't fit inside the 1200px content width, so the header and utility bar use a wider 1320px container (a deliberate exception), and the nav says "Insurance" rather than "Insurance & financing". On phone, the header keeps the logo, a call icon button and Book.
• Images: resized to WebP in site/img/. Portraits are 4:5 and case pairs 5:3; the hero crops to 1:1 on phone only. I didn't show the face-shot cases large: their clinical flash lighting is unflattering, so only the makeover pair appears, small, with its story.

Placeholders and gaps

• Fees: [PRICE GUIDE: new-patient exam and cleaning fees, to confirm with the practice], shown in the insurance section.
• Roles: none given for Nancy, Jordan, Kathia or Jenefer, so they're shown by name only. I didn't make any up.
• Joining years: only Trish (Feb 1989), Ann (1991), Dr. Paino (2005), Nancy (2009), Lynne and Jordan (2013) have one. The others are in the roster without a year.
• The form: it posts to # (no back end in this exercise). The page never states a reply time, because we don't know one.
• Owner questions: the year the practice opened; the form's reply time; staff roles.
• Shot list:
• the building on Maple Ave W (daylight)
• Trish at reception
• a treatment room with the TV, blankets and headphones
• Dr. Paino at the CEREC mill
• a child's Happy Visit (with consent)
• a group shot of the team

With better assets or more time

• One real photo of the place or of people at work would let the hero go full-bleed or become a mosaic. Right now the page leans entirely on studio portraits and teeth.
• A keyboard-accessible before/after slider for the lead case.
• Self-hosted, subset WOFF2 fonts (the build standard), a real form handler and thank-you page, and per-service pages so the links stop going to #.
• The phone page is long (about 15,400px). A next pass could fold the services into a disclosure per group, or drop the articles block on phone.

Where the guide helped, and where it got in the way

Helped:

• Writing the brief and the per-section table first. Reading the headlines on their own exposed the story and forced every section to justify itself. It's why "Trish has answered our phone since 1989" became the team headline instead of "Meet our team".
• "Proof sits next to the claim". It turned three loose reviews into three well-placed ones: anxiety beside sedation, Invisalign beside the Invisalign case, and the mold beside the review score.
• The amateur-tells list and "no two neighbours share a layout". Both are concrete and checkable, so I actually used them during critique.
• "Never invent". It caught things I had written on autopilot: roles like "patient care" and invented service descriptions ("laser for soft tissue"). I removed them.
• The cut-on-sight and machine-writing lists. Useful as a final filter.

Got in the way or left me guessing:

• Too much to read for a one-page job. It's about four files, and SKILL.md is long and mostly irrelevant here: factory builds, design directions, the spread table, pages and the proposal. TASK.md had to tell me what to skip. A short "homepage only" path would save time.
• Module count versus page length. The spine plus 3-5 extras for a dentist (featured service, team, first visit, insurance, gallery, FAQ, articles) gave me 13 sections and a very long phone page. The guide says nothing about total length or what to fold together on mobile.
• The 1200px content width doesn't fit the header the guide requires. Logo, up to 7 nav items, the phone written out and the primary button don't fit in 1120-1240px with a real logo. I had to widen the header and shorten a nav label. The guide should anticipate this, for example with a two-row header or a utility bar holding the phone.
• "Accent reserved for the primary action" versus "brand color from the logo". When the logo is all blue, it isn't clear whether the button should be blue (on-brand) or a new accent. I picked brass for contrast against both ivory and navy, which is a guess about what "traditional and premium" wants.
• Little help with the real asset problem. Here every photo is a studio portrait on the same backdrop or a clinical close-up, with no place and no work in progress. "Use the best one or two large" was the only guidance. Ideas on how to make a page from portraits alone (a timeline, numerals, typography) had to come from me.
• Contradictory critique tooling. The critique section's screenshot recipe (Chrome CLI at 1440×4000) differs from the provided shoot.ts, and the build standard's Worker, header and Rich Results checks aren't applicable to a static file. The guide doesn't say how to treat "can't apply" items.
• Two rounds of critique were enough here. Round 1 found real breakage (a grid bug in the steps, nav wrapping, an overlapping "4.9"). Round 2 found polish issues (repetition of the 1989 fact, the logo's size, a long stretch with no call to action). The guide's "a way to act is visible at least every second section" check is ambiguous when the header is sticky; I added a Book button in the reviews section anyway.