Join the waitlist

The unique design system

Everything the website is built from: warm skin-tone photography and solid cards laid over it, from the client's references, with plaster, arches and the gold mark from the salon itself. Version 0.2, demo phase.

Principles

  • Photo first

    Photography leads: warm skin, light and texture, full-bleed. Arches frame the moments that matter, echoing the interior.

  • Solid on photos

    Over photos, content sits on solid cream or espresso cards with a soft shadow. Never see-through.

  • Slow, not static

    Motion is calm and breath-paced: fades, rises, a drawing stroke. Nothing bounces.

  • Ritual voice

    Copy speaks of rituals, breath and intention. Warm, never mystical or salesy.

Colour

Eight colours sampled from the interior renders. Use them through the semantic roles (--bg, --text, --em…), which flip automatically inside dark sections.

  • Linen

    --linen #F4EBDF

    Page background, light text on photos

  • Plaster

    --plaster #E9DBC9

    Walls: alternate sections, buttons on photos

  • Sand

    --sand #D6BE9F

    Borders, fluting, muted fills

  • Warm tan

    --tan #B98F6A

    Skin-tone sections behind dark text

  • Caramel velvet

    --caramel #A26A3E

    Accent fills, large type only

  • Clay

    --clay #6E4A31

    Muted text, italic emphasis

  • Espresso

    --espresso #2B1F17

    Text, dark sections

  • Gold

    --gold #B8925A

    The mark, hairlines, ornaments

  • Glow

    --glow #F2D7A2

    Halos and light only, never text on light

Pairings & contrast (WCAG 2.1)

  • Aaespresso on linen
    13.6:1 · AAA
    Body text
  • Aaespresso on plaster
    11.8:1 · AAA
    Body text on plaster
  • Aaclay on linen
    6.6:1 · AA
    Muted text, italic emphasis
  • Aaclay on plaster
    5.7:1 · AA
    Muted text on plaster
  • Aalinen on espresso
    13.6:1 · AAA
    Text on dark
  • Aasand on espresso
    8.9:1 · AAA
    Muted text on dark
  • Aaglow on espresso
    11.5:1 · AAA
    Emphasis text on dark
  • Aagold on espresso
    5.6:1 · AA
    Ornaments on dark
  • Aalinen on clay
    6.6:1 · AA
    Text on clay fills
  • Aacaramel on linen
    3.8:1 · AA large
    Large type and fills only
  • Aagold on linen
    2.4:1 · Decorative
    Ornaments only

Typography

Cormorant Garamond for display, always upright; italic is kept for the ritual names and quotations. Jost for body, UI and the wordmark. Display sizes scale fluidly with the viewport.

  • display-xl · Cormorant Garamond 400 · 50→96px · lh 1.02

    Your ritual begins

  • display-l · Cormorant Garamond 400 · 38→72px · lh 1.05

    Six rituals, one sanctuary

  • display-m · Cormorant Garamond 400 · 30→48px · lh 1.1

    Brows & Lashes

  • title · Cormorant Garamond 400 · 22→28px

    Leave lighter, brighter

  • body · Jost 300 · 17px · lh 1.7

    A sanctuary for hair, skin, nails and the quiet moments in between.

  • small · Jost 300 · 14.7px

    Signature cut & style · 60 min · from 90 KM

  • label · Jost 500 · 12px · uppercase · +0.22em · labels and badges only

    Your name

Space & shape

Spacing scale

  • --space-14px
  • --space-28px
  • --space-312px
  • --space-416px
  • --space-524px
  • --space-632px
  • --space-748px
  • --space-864px
  • --space-996px
  • --space-10128px

Radii

  • --r-sm 6px

    Inputs, small chips

  • --r-md 14px

    Gallery images

  • --r-pill 999px

    Buttons, tags

  • --r-arch 999px 999px 0 0

    Signature arch frames

Arch art (when no photo fits)

art="glow"

art="fluted"

art="dusk"

art="velvet"

art="sand"

glow halo

Arch with photo

A cream arch with a round podium
A face in warm golden light

Motion

Slow and calm. Everything is disabled or reduced to a simple fade for people who prefer reduced motion.

  • --ease-calmcubic-bezier(.22,.61,.36,1)Hover and colour transitions
  • --ease-out-expocubic-bezier(.16,1,.3,1)Reveals, image zooms
  • --dur-1400msHover, colour, small UI
  • --dur-2800msScroll reveals
  • --dur-31400msMark drawing, hairlines
  • --breathe6s loopGlow halos, opening-soon dot

Breathing glow · 6s

The intro: lights on, doors open

Plays once per visit. Skip button, Esc, reduced-motion fade.

Replay the intro

Components

Logo

The wordmark is set in Jost as a stand-in until the vector logo files arrive.

Buttons

Section heading

Title with emphasis

Headings stay upright; the emphasis word takes the accent colour. The hero alone gets the gold brush stroke.

Photo card (solid, laid over photography)

RitualsSix rituals, one sanctuaryWaitlistBe first through our doors

Service tile (tap “View menu”)

A facial mask being brushed onto a relaxed face

Skin

from 70 KMMenu
  • Signature unique facial75 min · 135 KM
  • Hydra glow treatment60 min · 125 KM
  • Calming LED ritual30 min · 70 KM
Reserve Skin

Ritual steps & moon phases

  1. Arrive

    Warm light, a cup of tea and a moment to land.

  2. Breathe

    We pause together and listen to what you need today.

  3. Transform

    Skilled hands, slow care, the treatment chosen for you.

  4. Glow

    Leave lighter, brighter and a little more yourself.

Stroke divider

Testimonial (on dark)

“The most peaceful hour of my month.”

Guest name, client

Waitlist form

Voice

Warm, calm, a little poetic. Short sentences. We invite, we never push.

Say

  • Your ritual begins.
  • Reserve this ritual
  • Step in, breathe out.
  • Be the first through our doors.

Avoid

  • BOOK NOW!!!
  • Cheap deals this week only
  • Pamper yourself, ladies
  • Manifest your best skin