# Northlight Sauna Club — design plan (with skill, pass 1 + review)

Subject, grounded: a Finnish-style sauna and cold-plunge club in a coastal town.
Its world is specific: steam (löyly), pale timber benches, a hole cut in cold
sea water (avanto), low northern sunlight, and one real physical fact that
organises everything — the swing between roughly 85°C in the sauna and 4°C
in the sea. The design is built from that material, not from a template.

Audience: local adults considering a membership. The page's one job: make
the ritual feel tangible and get them to book a first visit.

## First draft of the plan

### Color (first draft)
- "Sauna cream" #F4F1EA — page background
- "Clay" #C96F4A — accent
- "Ink" #1E1E1E — text
- "Sage" #9CAF88 — secondary

### Type (first draft)
- Fraunces (serif) for headlines, Inter for body.

### Layout (first draft)
- Centred hero: small label above a big headline, one italic accent word,
  two buttons underneath.
- Ritual as four identical rounded cards in a row, numbered 01–04.
- Membership as three identical rounded cards with soft shadows, middle
  card scaled up.
- All-caps eyebrow labels above every section heading.

### Principles (first draft)
- Warm, calm, premium. Lots of soft shadows and rounded corners.

## Review against the brief — what reads as generic default, and the revisions

I walked the draft against the known AI-default clusters and against this
brief specifically. Four parts were defaults I would produce for almost any
wellness page, not choices made for a Finnish sea sauna:

1. **Warm cream + clay accent + serif display** is default cluster #1
   (cream near #F4F1EA, terracotta accent). It says "spa brand", nothing
   about the North Sea in winter.
   → **Revised:** the base flips cold. Background becomes a cool sea-mist
   pale (#E7EDEA), body sections sit on a deep sea-pine green (#12332E),
   and the warm note is no longer clay — it is low winter sun (#D9A441),
   which is what the club is named for (Northlight) and it is used in
   exactly two places: the thermometer needle and the ember point in the
   thermal scale. Warmth now means "heat", not decoration.

2. **Four identical rounded cards + three identical pricing cards with the
   same shadow** is the SaaS-card kit (default cluster #4).
   → **Revised:** no card grid at all. The ritual is drawn as one
   continuous thermal journey (a scale running hot → cold → warm → hot),
   which is honest numbering — the ritual genuinely is a sequence.
   Membership is drawn as sauna benches: three full-width horizontal
   bench levels, because in a real sauna you literally choose your level —
   lower bench is milder, top bench is hottest. Tier = bench level is a
   metaphor taken from the subject, and it gives the tiers a built-in,
   legible order.

3. **All-caps eyebrow labels and a centred hero with one italicised word**
   are template chrome (default cluster #5, plus the typographic tells).
   → **Revised:** no eyebrows, no caps, no single-word accent tricks.
   Left-aligned throughout. The hero's visual anchor is a CSS-drawn round
   wooden sauna thermometer — the actual object hanging in every Finnish
   sauna — with its needle at 85°. Type does its own work: the Finnish
   word "löyly" set very large as part of the headline block, not as a
   label above it.

4. **Inter as body face** is the reach-for-it-anywhere default.
   → **Revised:** body and UI in Archivo (a grotesque with a slightly
   technical, timetable feel — right for a club with a weekly schedule),
   display in Fraunces kept, but only for headlines and the thermometer
   numerals' surrounding headings; the two are clearly distinct in role.

## Revised plan (this is what gets built)

### Color — final tokens (5)
- Sea mist #E7EDEA — page background, the cold pale of morning water
- Sea pine #12332E — deep green of pine forest and deep water; dark
  sections and primary text on pale ground
- Steam #A8BDB2 — muted green-grey for secondary text and hairlines on
  dark ground
- Winter sun #D9A441 — low northern light; used sparingly (thermometer
  needle, the hot end of the thermal scale, one link underline)
- Ember bark #6B4A2B — the wooden thermometer rim and bench wood tone;
  surfaces, never text

### Type — final
- Fraunces (serif, soft optical sizes) — display headlines and the big
  Finnish word; personality carrier
- Archivo (sans) — body, schedule, prices, buttons; sentence case
  everywhere, line length under 80 characters, serif/sans line-height
  set apart (body 1.6)

### Layout — final concept
Left-aligned, single column of varied-width blocks on sea mist; dark
sea-pine bands for the ritual and footer so the page itself goes
cold → hot → cold like a round of the ritual.
- Hero: two uneven columns on pale ground — left: headline with "löyly"
  set huge, plain-language intro, one button ("Book a first visit");
  right: the round thermometer (CSS only, tick marks + needle at 85°,
  "sea today 4°" noted under it in plain text).
- Ritual + schedule: dark band. The ritual as a horizontal thermal
  scale (85° → 4° → rest → repeat) with four steps beneath their
  temperatures; below it, the weekly schedule as plain ruled rows
  (day, hours, session) — a timetable, set like one.
- Membership: pale band, three full-width bench rows, each row deeper
  in tone as the bench rises; the top bench row carries the "most
  members choose this" note as plain text, not a badge or a scaled card.
- Footer: dark band, one call to action ("Book a first visit" — same
  words as the hero button) and plain contact lines.

### Principles — final
- One memorable thing only: the thermometer. Everything around it is
  quiet, ruled lines and plain type.
- Temperature is the organising idea, never a "big number + label" stat
  block — it appears as an instrument and a scale, i.e. as objects from
  the subject's world.
- No decoration that could belong to another brief: no gradients as
  ornament (the thermal scale's hot-to-cold blend is data, not décor),
  no arrows appended to buttons, no all-caps labels, no monospace data
  labels, no middot-joined meta strings.
- Quality floor without announcing it: responsive to mobile (thermometer
  stacks under the headline, thermal scale turns vertical), visible
  focus states, prefers-reduced-motion respected.