Design System
Davaar House
Instrument Sans body · Big Caslon CC headings · Warm cream & champagne gold
Typography
Body regular — Davaar House is a place where people can come to take care of their mental, emotional, and physical wellbeing. Our mission is to provide services and products that support individuals and groups in enhancing their body, mind, and soul — delivered every day with exceptional care.
Body small / muted — Infrared heat is the invisible part of the sun's spectrum. It is the warmth we feel from sunlight, delivering natural heat directly to the body without harmful UV rays.
Colour
Buttons
Chips & Labels
Treatment Card
The primary repeating unit — used across the treatments grid.
RecoveryInfrared Sauna
The warmth of sunlight. A deeper, more cellular sweat.
- Deep cellular detoxification
- Pain & inflammation relief
- Skin purification
Body TherapyMassage
Expert hands. Lasting relief. Simply for you.
- Stress and tension relief
- Improved flexibility
- Enhanced immune function
Oxygen Therapy
Pressurised oxygen to restore energy, clarity and recovery.
- Enhanced mental clarity
- Faster athletic recovery
- Immune function support
Gift Card — Option A: Editorial cells
No card boxes. 2×2 grid divided by thin gold lines. Very premium, lots of breathing room.
1hr Facial
A full-hour, results-driven facial tailored to your skin on the day.
1hr Massage
An hour of expert therapeutic massage — tailored to what your body needs.
Me Time Package
A curated combination to give them — or yourself — a complete reset.
Custom Value
Choose your own amount. Perfect when you want to give the gift of choice.
Gift Card — Option B: Light cards
Cream-2 background with gold border. Keeps the card structure, matches the light palette.
1hr Facial
A full-hour, results-driven facial tailored to your skin on the day.
1hr Massage
An hour of expert therapeutic massage — tailored to what your body needs.
Me Time Package
A curated combination to give them — or yourself — a complete reset.
Custom Value
Choose your own amount. Perfect when you want to give the gift of choice.
Form Controls
Editorial Section
Pattern for about/mission sections — large serif heading with body text and a gold rule.
Not just a spa.
A sanctuary.
Davaar House was created with a single intention — to be a place where people feel genuinely cared for. Founded by Fiona, a remedial massage therapist with over a decade of experience, it is a space built on the belief that mental and physical wellbeing are inseparable.
Split Hero
50/50 editorial split — homepage hero or treatment feature banner. Text left, image right.
A place to return
to yourself.
Davaar House is Adelaide's premium day spa and wellness hub — a sanctuary where ancient wisdom meets modern recovery science.
Metadata Strip
Labeled key-value columns — treatment detail pages and individual treatment cards.
Used on /treatments/[slug] pages and optionally in expanded card states.
Filter Tabs
Category filter row for the treatments grid page. Active state uses primary (gold fill).
Infrared Sauna
Ice Bath
Float PodDark CTA Band
Full-width dark section for homepage gift card push or booking call-to-action.
Give the gift of wellbeing
The gift of
genuine care.
Give the people you love an experience they'll actually remember. Davaar House gift cards available for all treatments and packages.
Editorial Image Grid
Heading + descriptor row + 3-column image strip — for the treatments overview page header and story pages.
Treatments
& Experiences
From deep recovery to movement and ritual — every treatment is chosen with intention. Book online or call us to talk through what's right for you.
Spacing Reference
Container Widths
max-w-prose — body copy (65ch)max-w-3xl — privacy / legal textmax-w-xl — centered CTA copymax-w-xs — card sub-copy columnsLayout Rules — Full Width
.container-full (wide, padded) and true full-bleed (0 padding, edge-to-edge) are different tools. Use full-bleed for hero/marquee/photography moments that should run to the literal viewport edge. Use.container-full for grids and sections that should feel wide but still keep a consistent gutter.
Going full width is a decision about the section, not the text inside it. Paragraph copy, form labels, and CTA blurbs always sit on max-w-prose / max-w-xl / max-w-3xlregardless of how wide the section around them is — never let a sentence stretch edge-to-edge.
.container-full tops out at 1800px. Genuinely unconstrained width makes grids and photography stretch awkwardly on ultrawide/4K monitors and starts to feel sparse rather than editorial — "full width" here means wide-but-bounded, not literally 100vw.
Full-bleed and full-width images now render up to 1800px+ instead of a 1152px ceiling. Source assets andsrcset/sizes need to account for that or large images will upscale and look soft on big screens.
The floating nav pill does not follow section width changes — it stays at its current fixed size regardless of page content width. Nav, footer, and forms are reviewed case-by-case, not swapped wholesale with content sections.
Always use the standard gap scale on content grids — never arbitrary values.
gap-6 md:gap-8Card grids, bento grids, tile layoutsgap-8 md:gap-12Looser three-column layoutsgap-12 md:gap-24Two-column editorial / image+text layouts