Light on stone.
The brand system for Serene, a fictional wellness studio: colour from limestone, travertine and eucalyptus; type cut like an inscription; motion that moves like daylight.
Principles
Light, not decoration
Surfaces are stone and plaster lit from one side. No gradients for their own sake, no glass, no glow.
Time is the material
Every screen respects the studio's clock: its time zone, its hours and the real length of a treatment.
Say what is simulated
Anything fictional or simulated is labelled where it appears, not in a footnote.
Colour
One accent, eucalyptus, used for actions and for whole fields of colour. Contrast is measured against the limestone ground; every text pairing meets WCAG AA in both themes.
- LimestonePage ground#ECE8DF · 1.0:1
- PlasterRaised surfaces, fields#F5F2EB · 1.1:1
- TravertineStone panels, texture#DCD3C2 · 1.2:1
- InkText and icons#1C231F · 13.1:1
- Ink, softSecondary text#4A524C · 6.6:1
- EucalyptusThe one accent: actions, links#3B5747 · 6.5:1
- Deep eucalyptusWhole fields of colour#2A3D33 · 9.5:1
- SageQuiet highlights, selection#C7D1C1 · 1.3:1
- Control lineInput and button borders#857A68 · 3.4:1
- ClayErrors only, with an icon#8E3B2B · 6.1:1
Eucalyptus as a field
Large areas of colour carry the brand; the accent is not rationed to small buttons.
Travertine, honed
Type
Marcellus, an inscriptional Roman, for display only. Albert Sans for everything people read and use, with tabular figures for times and prices.
- Display
- Quiet rooms
- Title
- Warm stone massage
- Heading
- Your appointment
- Lead
- Heated basalt stones and slow hands, for seventy-five unhurried minutes.
- Body
- Your therapist asks about pressure before starting and checks in once, then lets the hour be quiet. Tell us about any sensitivities when you book.
- Small
- Free cancellation until 24 hours before your appointment.
- Caption
- Prices include taxes. Times are shown in the studio's time zone (India Standard Time).
- Figures
- 10:15 am ₹6,600 90 min
Space and form
A 4-pixel base, generous gaps between groups, and square corners throughout. The one curve is the arch, kept for windows and portraits.
- 4 px
- 8 px
- 12 px
- 16 px
- 24 px
- 32 px
- 48 px
- 64 px
- 96 px
Motion
One authored moment per view. Arrivals ease out exponentially; exits are quicker. With reduced motion, the scene rests at midday and nothing moves.
- Quick
- 160 ms
- Feedback: press, hover, focus
- Base
- 320 ms
- State: selection, open and close
- Slow
- 720 ms
- Reveals and page arrivals
- Scene
- 1.6 s and longer
- The single authored moment
Controls
Booking parts
Slots for a 1 hr slow massage on Tuesday, 10 November (fictional), with three existing appointments. Each start leaves room for preparation and cleanup.
Treatment rows
- Slow massage
Long, even strokes at a pace that never hurries.
1 hr · ₹4,8001 hr 30 min · ₹6,600
- Deep tissue massage
Firm, focused work on the back, shoulders and legs.
1 hr · ₹5,6001 hr 30 min · ₹7,800
- Warm stone massage
Smooth basalt stones, heated and used as an extension of the hands.
1 hr 15 min · ₹6,9001 hr 45 min · ₹9,200
Evening
The dark theme follows the visitor's system setting: deep eucalyptus instead of black, sage instead of the daytime accent.
- ground #151C18 · 1.0:1
- surface #1D2621 · 1.1:1
- ink #ECE7DC · 14.1:1
- accent #A7C2AF · 9.1:1
- danger #E39A86 · 7.6:1
The same field, in the evening palette.