Interface guide, quiet by design.
How this site looks and behaves. It replaces the old animation guide: nothing here moves. State changes are instant and the focus ring is always visible.
Colour
Warm paper, deep moss ink and one accent, clay. Values are the tokens in css/site-2026.css.
Paper and ink
- #f8f2ea
--bgPage - #fffaf4
--surfaceRaised panel - #f0e7dc
--surface-2Linen band - #e7dac9
--surface-3Deepest paper - #1b2a23
--inkText and ink buttons - #384a40
--ink-softBody copy - #4a5b51
--mutedCaptions
Accent
- #8f3b26
--clayThe one accent - #742e1d
--clay-hoverPressed and hover - #f8e1d3
--clay-tintSoft background - #f2bba3
--clay-on-darkAccent on moss
Dark bands
- #15281f
--mossDark bands - #1d352a
--moss-2Dark hover - #0f1f18
--moss-deepFooter - #c9d8cf
--moss-dimText on moss
| Pair | Sample | Ratio | Result |
|---|---|---|---|
| Ink on paper--ink on --bg | Aa | 13.5 : 1 | Passes AA |
| Soft ink on paper--ink-soft on --bg | Aa | 8.5 : 1 | Passes AA |
| Muted on paper--muted on --bg | Aa | 6.5 : 1 | Passes AA |
| Clay on paper--clay on --bg | Aa | 6.7 : 1 | Passes AA |
| White on claybutton text on --clay | Aa | 7.4 : 1 | Passes AA |
| Clay on tint--clay on --clay-tint | Aa | 5.9 : 1 | Passes AA |
| Dim on moss--moss-dim on --moss | Aa | 10.5 : 1 | Passes AA |
| Clay on moss--clay-on-dark on --moss | Aa | 9.2 : 1 | Passes AA |
| Danger on surface--danger on --surface | Aa | 7.8 : 1 | Passes AA |
| Success on surface--success on --surface | Aa | 7.6 : 1 | Passes AA |
| Field border on paper--control-line on --bg (needs 3:1) | Aa | 5.0 : 1 | Passes AA |
Type
Fraunces for headings, Outfit for everything else. Both are self-hosted. Nothing renders below 14px.
- A softer pace
- A small room, a slow book
- Signature Glow Ritual
- Our longest, quietest facial. Consultation, facial, and a quiet finish.
- A cushion of moisture and a slow massage for skin that feels tight.
- Guide prices for 2026. Your facialist confirms the ritual after a short conversation.
Controls
The real components, not pictures of them. Buttons are 48px high (44px at least); fields share one border and one focus ring.
Buttons
On a dark band
Field
We only use it to confirm a visit.
Field with an error
Check the email address, it should look like name@example.com.
Options
Switch and segmented control
Day and time picks
Status badges (also used in the studio desk)
requestedconfirmedcompletedcancelledpaidpacking
Focus and states
Press Tab on this page. Every control shows a 2px clay ring with a gap, drawn the moment it is focused.
- Hover changes colour only. Nothing lifts, grows or slides.
- Pressed and selected use a filled ink or clay background, never colour alone: a tick, a label or a border changes too.
- Errors appear beside the field with an icon and words, and move focus to the first problem.
- The menu opens and closes instantly. Esc closes them and returns focus.
No motion
Earlier versions of this guide demonstrated entrances, hover lifts, counters and a preloader. They have been removed, and the guide now documents what replaced them.
| Before | Now |
|---|---|
| Scroll reveals and staggers | Content is in place on load. |
| Button and card lift | Colour change only. |
| Counters | The final figure, printed. |
| Smooth scrolling | Anchors jump. |
| Preloader and theme bar | Removed. |
Minimums
- 14px
- Smallest text anywhere. Body is 16px or more.
- 44px
- Smallest tap target for links and buttons outside running text.
- 4.5:1
- Text contrast (WCAG AA). Form borders and icons need 3:1.
- 0
- Animations, transitions and scripted movement.