Fable 13 · Guide 08 · Spa

Building Stillwater

The brief: a salon/spa with a booking calendar, service menu and before/after gallery. The idea: a Dales bathhouse where the design itself decompresses — arches, eucalyptus and stone, one breathing image, and copy that promises nobody will sell you a serum.

The signature — an honest before & after

Spa before/afters are usually fibs. Ours says so: the comparison is the same photograph twice — the "before" desaturated and dulled, the "after" gently brightened — labelled on-page as a simulation of typical post-facial glow. The slider is a real control: pointer-draggable via a clip-path driven custom property, keyboard-operable with arrow keys, and announced as a role="slider" with live values.

The calendar

A real month grid generated from today's date — past days, Mondays (closed) and a seeded scattering of full days disabled — then arrival-time chips and treatment chips feeding a live summary. "Hold this booking" answers like the place would: we'll keep it warm for 48 hours; bring nothing, we have the robes.

Colour & type

stone eucalyptus moss ink clay

Marcellus — roman inscription letterforms at whisper volume — over Nunito Sans light. The arch (bath-house architecture) is the recurring form: hero image, ritual cards, calendar day circles. The only continuous motion is a 9-second breathing scale on the hero image, stilled under reduced motion.

Process — three passes

Pass 1 (visual): hero stat labels ran into their values — labels made block with breathing room, like everything else here.
Pass 2 (complexify): menu rewritten with dotted leaders and one-line personalities per treatment; the pair ritual and full-morning bundle added.
Pass 3 (QA): slider verified by script at multiple positions, booking flow driven end-to-end, 390px pass, reduced-motion stills the breathing, zero console errors.

← All thirteen sites