ALNA
Design Guidelines
The system behind the site — colour, type, and the small decisions underneath them, drawn straight from the theme's own tokens, with every hex verified live in your browser. So this page cannot say something the site does not already do.
“Wellness for everybody.”
01 — Foundation
What the brand stands for.
Purpose — the why
Making holistic recovery accessible for everyone — a science-backed, community-rooted “third place” for wellness where every kind of person belongs.
Vision — the future
Born from Nat & Alex's own wellness journeys, a Coquitlam where cold plunge and sauna aren't an intimidating outlier but an everyday ritual — science meeting soul.
Mission — in practice
Guiding real people through sauna, ice bath and breathwork with care, evidence and zero jargon — led by founders with nearly 50 combined years in athletic wellness.
02 — Core Values
Five things that don't change.
Science-Backed
Every claim grounded in research — the Søberg Institute, Huberman Lab — never hype, never jargon.
Real Belonging
A welcoming "third place," not an intimidating cold-plunge club.
Everybody, Every Age
Benefits built for all ages and backgrounds; the founders live the practice they teach.
Real People, Real Results
Stories come from actual members, never posturing.
Simplicity & Value
Clear, judgment-free guidance — no pressure, no complexity, just practical wellness.
03 — Style & Mood
Warm confidence, never jargon.
The same hot/cold contrast the palette carries, carried into how the brand sounds. Avoid the word “recovery” in copy — prefer ritual, practice, community, gathering.
04 — Logo
Dark and light versions, and they are not interchangeable.
05 — Colour
Deep water, warm terracotta.
Surface
-
Surface · light
Bone
--alna-lightCards, light text on dark -
Surface · page
Page
--alna-page-bgThe default page background -
Text · dominant
Ink
--alna-textBody copy, headings, dark section fills, the footer, and every nav link — one colour, referenced as --alna-ink-deep and --alna-nav
Primary Palette
-
Brand · primary
Teal
--alna-primaryMetadata, secondary links, the legal bar -
Fill only
Sky
--alna-secondarySection fills. 1.85:1 — never text -
Fill only
Sun
--alna-accentSection fills, accent headings on dark. 1.28:1 — never text on light
CTA
-
CTA · default
Terracotta
--alna-ctaEvery button fill and inline link -
CTA · hover
Terracotta dark
--alna-cta-hoverButton and link hover
Greys
One ink at three opacities. Every image on the site sits under one of them.
-
Ink at 17%
--alna-veil-softImage at rest -
Ink at 23%
--alna-veilImage on hover -
Ink at 49%
--alna-veil-strongOver the hero video
06 — Type
Yeseva One for headings. Roboto for everything else.
Yeseva One · 400, self-hosted
Ships in one weight. The bold you see is synthesised by the browser, which is how the site has always rendered — reproduced rather than corrected.
Roboto · variable, self-hosted
Three real weights in use: 300 body, 700 navigation and labels, 900 emphasis.
Scale
Desktop / mobile. One ratio, one breakpoint at 768px.
- Contrast therapy
- Contrast therapy
- Contrast therapy
- Contrast therapy
- Contrast therapy
- Contrast therapy
- Contrast therapy
- Contrast therapy
07 — Spacing
Four steps. Nothing between them.
-
--alna-space-sm10px -
--alna-space-md20px -
--alna-space-lg35px -
--alna-space-section50px
Radius
--alna-radius6px — every content photograph- 0 — full-bleed media, which runs edge to edge
--alna-radius-button10px — buttons only, kept separate from the photo radius above
Measure
--alna-measure 1140px for text and cards. The image bands widen to
1320px because they carry the longest copy on the site.
08 — Buttons