# Warm Editorial — complete design language A design language for work that needs to feel calm and expensive: spas, clinics, boutique hotels, architecture studios, wellness and recovery brands. No pure black, no pure white, no cold grey. ## Tokens ```css /* Warm Editorial — design tokens Light is the default. Dark is opted into with [data-theme="dark"] on . Never write a raw hex outside this file. */ :root { /* Surfaces — every neutral leans warm. No pure white, no cold grey. */ --bg: #EDE8DF; --bg2: #F6F3ED; --bg3: #E4DED2; --border: #DAD3C6; --border2: #C6BDAC; /* Text */ --text: #22201D; --text2: #5C574F; --text3: #8C857A; /* Bronze — the only accent that speaks */ --accent: #A38A6A; --accent-h: #8D7352; --accent-text: #7D6644; /* darkened for TEXT — see note */ --accent-s: rgba(163,138,106,.12); --accent-b: rgba(163,138,106,.30); --on-accent: #FFFFFF; /* Sage — the quiet second voice, for status and small marks only */ --sage: #7C8A76; --sage-s: rgba(124,138,118,.12); /* Inverted chapter — light mode flips cream to warm black */ --invert-bg: #151210; --invert-bg2: #1E1A17; --invert-bg3: #262119; --invert-border: #2E2822; --invert-border2: #40382F; --invert-text: #EDE7DD; --invert-text2: #A79E92; --invert-text3: #8A8177; /* Shape — corners are large and soft. Nothing is sharp. */ --radius: 28px; --radius-lg: 24px; --radius-md: 16px; --radius-sm: 12px; --radius-pill: 999px; /* Depth — barely there. Wide and soft, never a hard drop shadow. */ --shadow-sm: 0 1px 2px rgba(34,32,29,.05); --shadow-md: 0 18px 48px -24px rgba(34,32,29,.22); /* Type */ --font-display: 'Inter Tight', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --ease: cubic-bezier(.22,.61,.36,1); } [data-theme="dark"] { --bg: #151210; --bg2: #1E1A17; --bg3: #262119; --border: #2E2822; --border2: #40382F; --text: #EDE7DD; --text2: #A79E92; --text3: #8A8177; --accent: #B39B7C; --accent-h: #C4AE91; --accent-text: #C0A888; --accent-s: rgba(179,155,124,.13); --accent-b: rgba(179,155,124,.28); --on-accent: #1B1613; /* NOT white — see note */ --sage: #93A08C; --sage-s: rgba(147,160,140,.13); /* In dark mode an inverted chapter does not jump to cream — it lifts. A cream band mid-way down a dark page destroys reading. */ --invert-bg: #1E1A17; --invert-bg2: #262119; --invert-bg3: #2E2822; --invert-border: #40382F; --invert-border2: #4E4438; --invert-text: #EDE7DD; --invert-text2: #A79E92; --invert-text3: #8A8177; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 18px 48px -24px rgba(0,0,0,.7); } /* Two contrast traps this file exists to prevent: 1. --on-accent is #1B1613 in dark mode, not white. Bronze is light enough there that white text on it fails AA. 2. --accent is a FILL colour. For small text use --accent-text, which is darkened (light) / lightened (dark) to clear AA. */ ``` ## Floating Pill Nav The signature element of the Warm Editorial language. Circle badge and two-line brand on the left, links in the middle, pill CTA on the right. On mobile the links drop into a panel that keeps the same corners and blur. ```html
``` ## Anchored Hero The gradient is anchored to the copy in the lower left instead of darkening the whole frame. The photograph keeps its brightness, the text still clears contrast, and the buttons use the fixed photo variants rather than theme tokens. ```html
A treatment room filled with soft natural daylight

01 — Nervous system downshift

Restore your body with calm, structured recovery.

A studio built around one idea: recovery works when it is measured, repeatable and unhurried. No noise, no upsell, no guesswork.

Book a visit Our approach
``` ## Button Set Every button in this language is a pill. Primary, accent, outline and solid follow the theme; the two photo variants deliberately do not, because a button on an image must stay light-on-dark in both themes. ```html
``` ## Editorial Card The workhorse surface of this language. 28px corners, a hairline border, near-invisible shadow, and an image that keeps a margin from the card edge rather than bleeding to it. ```html
A quiet treatment room in warm daylight

Recovery

Contrast therapy

Alternating heat and cold, structured into a protocol your nervous system can actually adapt to.

Read the protocol
Hands resting during a breathing session

Nervous system

Breath downshift

Twenty minutes of guided work that moves you out of a sympathetic state and keeps you there.

Read the protocol
``` ## FAQ Accordion Each item is its own rounded card with a 12px gap, rather than rows sharing hairline dividers. Built on real buttons with aria-expanded and aria-controls, and animated with grid-template-rows so the panel height is never hard-coded. ```html

``` ## Pricing Cards Three package cards plus a pill toggle for single session versus course pricing. The recommended card is distinguished with an inverted surface and a small marker, not with a saturated accent band. ```html

Rates

Pay per visit, or commit to a course.

Assessment

Ninety minutes. Measurement, baseline, a written plan.

£90

per visit

  • Full intake and baseline
  • Written protocol to take away
  • No package required
Book

Most taken

Recovery

Contrast therapy, breath work and a guided downshift.

£140

per visit

  • Everything in Assessment
  • Contrast and breath protocol
  • Progress measured each visit
Book

Sustained

For people training hard or recovering from load.

£190

per visit

  • Everything in Recovery
  • Extended session, two hours
  • Between-visit check-ins
Book
``` ## Booking Form Panel Asymmetric two-column layout: fields on the left, a sticky summary on the right that updates as the form is filled. Inputs are soft-cornered rather than pills, because a pill text field is unreadable at length. ```html

Book a visit

Tell us what you need.

About you
Your visit

We reply within one working day. No card details at this stage.

``` ## Schedule Table Warm hairline rules, an uppercase header, sage and bronze status pills. Below 720px each row turns into a card and every cell carries its own label, so nothing is lost to a horizontal scrollbar. ```html
This week at the studio
Session Day Duration Places
Contrast therapy Monday, 07:00 90 min 4 open
Breath downshift Tuesday, 18:30 45 min 2 open
Assessment Thursday, 09:00 90 min Waitlist
Sustained recovery Saturday, 10:00 120 min Full
``` ## Editorial Footer The last chapter of the page, inverted so it reads as an ending. A display-size sign-off, three link columns, and a bottom rule carrying the legal text. ```html ``` ## Dialog Modal Built on the native dialog element so focus trapping and the top layer come from the platform. Warm scrim, 28px corners, scroll lock, and focus restored to the trigger on close. ```html

Callback

Leave a number, we will call.

Weekdays between nine and six. No queue, no script — you get whoever is on the floor that day.

```