Northside Physio
A physiotherapy clinic where the booking card sits above the fold, with price and the next free time.
Brief
- Who & when
- An adult with a sports or work injury, on a phone, in some pain.
- Main task
- Pick a service and a time in under 30 seconds.
- Must not look like
- A spa (pastels, script fonts), a hospital (blue, white, stock smiles), a gym ad.
- Success
- Know the first-visit price and the next available time without scrolling.
Three directions
Range of Motion
A goniometer, the ruler physios use to measure joint angles: arcs and degree ticks are the only ornament.
Archivo 500/700/800 + Public Sans
Lime on deep green; lime must never be text on white.
Clinical Grid
An anatomy-chart grid with numbered body regions.
Space Mono + Source Serif 4
Feels academic for someone who just wants to book.
Big Calendar
The booking calendar is the full-width hero.
Manrope 700/400
Zero brand character; no trust for first-time visitors.
Why this one: A keeps booking above the fold (C’s strength) while giving the clinic an identity tied to the work itself.
Design system (DESIGN.md)
Archivo 500/700/800 · Public Sans 400/500
- pine
#10332D - surface
#FFFFFF - mist
#EEF3F1 - ink
#10201C - muted
#4D5F5A - lime
#D4F06B - leaf
#1F6B4F
Result
States that usually get forgotten
What the review caught
Self-review against screenshots at 1440 px and 390 px. Each round lists the issue and the fix.
- 1440 px: the goniometer arc sat off-screen, leaving the hero empty → moved into view.
- Booking states captured as proof: time selected, day fully booked → next free day in one tap.