Fable 13 · Guide 06 · Dental clinic
The brief: a medical/dental clinic with appointment booking, doctor profiles and a services list. The idea: most people fear this category — so the design leads with empathy ("dentistry for people who'd rather be anywhere else") and gives anxiety one interface it can control: tap the tooth that hurts.
The upper arch is fourteen SVG teeth generated parametrically along a semicircle — molars wide,
incisors tall, each wrapped in a rotated <g> and keyboard-operable
(role="button", Enter/Space). Choosing a zone swaps the panel: what usually helps,
honest price ranges, and a "book this" that pre-selects the right visit type in the booking
flow below. A subtle build note: SVG's transform attribute and CSS hover transforms
share one property — the rotation has to live on a wrapper group or half the arch vanishes.
Found in pass one, kept for the record.
Three steps, no phone call: visit type chips → a fourteen-day calendar (Sundays closed, availability seeded deterministically) with time-slot chips → details and a drawn-on-confirm checkmark. Motion (motion.dev) springs the step transitions and moves focus to each new step's heading. Slot-picker anatomy referenced from booking components on 21st.dev, rebuilt in clinic dialect.
Gabarito is round enough to be kind and bold enough to be credible; Karla keeps body copy plain-spoken. Coral is the anxiety-softener — it marks the chosen tooth, the primary CTA, and nothing else. Copy does the heavy lifting: numb-first promise, prices before treatment, zero lectures.
Process — three passes