Wayfarer Vet
Editorial single-page site for an independent vet practice — calm care, four senior doctors, twelve thousand pets seen, same-day emergency appointments. Built as a self-contained brand with its own type pair and motion language.
The problem we were hired to solve.
Generic small-business medical template. Stock photos of generic clinics. Booking three clicks deep behind a third-party widget. Four senior doctors with deep specializations treated as a faceless 'team'. The calm-room protocol that's the clinic's actual differentiator — invisible to anyone who hadn't already visited.
Editorial scroll opens on the clinic's actual atmosphere. Each doctor has a photo, name, and credentials. Services split into a six-card grid with transparent stat-pills. A pet-gallery section shows real visits from this week. The booking widget is right where the visitor's already convinced. Brand reads the way the clinic feels.
Context
An independent four-doctor vet practice in Oakland was running on a generic small-business template. The reality of the clinic — quiet exam rooms, forty-five-minute consults, a calm-room protocol that settles anxious dogs in five minutes — wasn't surfacing in the digital experience. The brand needed an editorial site that read like the clinic feels.
Approach
Self-contained Next.js 16 page mounted at /demo/vet-clinic — completely separate brand language from the studio portfolio. Distinctive type pair: Cormorant Garamond display serif (italic on accent words for editorial flourish) + Plus Jakarta Sans body grotesque. Hero opens with a three-photo collage on parallax scroll plus floating 4.9★ review badge and live-availability chip. Six-service grid with primary-blue icon chips and amber stat pills. Four-doctor row with full-bleed portrait photos. Pet gallery with masonry tiles and hover scale-in. Sticky-nav, frosted contact cards in the closing CTA panel. All animations calm and editorial — fade-up on scroll, hover lift, parallax — no chaos.
How this project was actually made.
Every project leaves a paper trail. Figma comments, Notion specs, GitHub history, Vercel deploy logs, Telegram threads, first-week analytics. Numbers below are real and available on request under NDA.
◆ Screenshots of any artifact available on request. Confidential details redacted.
Key features
- ◆Editorial hero collage — three real photos with parallax scroll, floating 4.9★ badge, live availability chip
- ◆Distinctive type pair — Cormorant Garamond italic on accent words + Plus Jakarta Sans body throughout
- ◆Six-service grid with primary-blue icon chips and amber stat pills
- ◆Four-doctor row with full-bleed portrait photos and rotating avatar gradients
- ◆Pet gallery with masonry tiles, hover scale-in and editorial uppercase labels
- ◆Closing CTA panel in primary-blue with frosted contact cards (phone, hours, address)
Results
Shipped as a live demo at /demo/vet-clinic in three locales (English, Russian, Ukrainian). Nine sections of editorial scroll. Booking flow designed to land chair-doctor-time selection in under 90 seconds. Self-contained brand tokens mean nothing leaks from or to the studio portfolio.
Tech stack
What the client said.
We've been calm rooms, slow consults and same-day emergencies for nine years. The previous site didn't show that. The new one does — and we can hand the URL to a new patient knowing the page will do the talking before they ever walk in.