Sage Spa
Sage leaves, warm stone and a quiet classical sans that breathes slowly.
This style
$9$19
One-time, no subscription · instant download · client use · 7-day refund before download
The idea
A retreat in a browser: soft sage and limestone tones, a calm classical display face with open capitals, and photographs of steam, water and eucalyptus in diffused light. Outlined buttons and flat surfaces keep everything light. Serene, natural and restorative.
Sage Spa is a serene wellness system that slows the reader down from the first second. It draws from classical bathhouse architecture, Japanese onsen restraint and the soft-focus photography of contemporary retreats: a pale sage canvas with a whisper of grain, warm limestone and clay accents, an open classical display face, and photographs of steam, water and herbs in diffused light. Buttons are outlined, surfaces are flat and motion follows the pace of a breath. It should feel calm, natural and restorative.
Principles
- Move at the speed of breathing — 1.2 seconds or slower.
- Prefer outline and flat over fill and shadow.
- Photograph elements, not people: water, steam, stone, leaves.
- Leave enormous space; emptiness is the treatment.
- Write softly and specifically — temperatures, minutes, herbs.
Motion
Everything fades in on a slow, breath-length 1.3 seconds with a 10px rise; the hero photograph's steam is echoed by a gentle 6-second opacity pulse on the background, like inhaling and exhaling.
Do & don't
Do
- ✓ Keep animations at 1.2 seconds or slower.
- ✓ Use outline buttons as the default.
- ✓ Mention temperatures, durations and herbs specifically.
Don't
- ✕ Don't use filled bright buttons.
- ✕ Don't use pure white or black.
- ✕ Don't show faces or massage clichés.
+ 3 more of each, and component rules, in the full DESIGN.md.
What's in the DESIGN.md
- 01Overview & principles
- 02Colors (tokens + proportions)
- 03Typography (families + 12-role scale)
- 04Layout & spacing scale
- 05Elevation & depth
- 06Shapes & radii
- 07Motion (easing, durations, signature)
- 08Imagery + generation prompt
- 09Components (button, card, nav, input, badge)
- 10Do's and don'ts
- 11Responsive behaviour
- 12Iteration guide + agent checklist
Plus theme.css (Tailwind v4 @theme), tokens.json (W3C) and the preview page source — 363 lines of DESIGN.md in total.
More like this
All Industry →
Bright Neobank
No. 050A bank that feels like a good app: electric violet, mint and fat friendly numbers.
Atelier Plan
No. 081An architecture studio's drawing set: plan-paper white, tracing grid, titleblock captions.
Blue Property
No. 082Cobalt blue, a muscular grotesk and a bento of listings, maps and numbers.
Blush Skincare
No. 083Blush pink, clean white space and an italic serif as soft as a moisturiser.
Chambers Heritage
No. 084A heritage law firm: Caslon headings, deep navy, oxblood seals and quiet panelled rooms.
Cream Estate
No. 085Cream paper, black ink and photographs of houses big enough to walk into.