Style Guide

The colors, typography, and thoughtful details that bring Klak to life.

01. Colors

A soft, balanced palette for thoughtful care. These swatches use Klak’s existing color variables.

Primary
#80A685

Sage green · primary actions

Secondary
#B28D82

Warm neutral · secondary accents

Accent
#B76B79

Rose · links and highlights

Heading
#37384C

Deep ink · headings

Body
#656675

Muted ink · body text

White
#FFFFFF

White · clean surfaces

Border
#D4D7DD

Soft gray · borders and dividers

02. Typography

Marcellus brings warmth to headings. Open Sans keeps supporting text clear and comfortable to read.

Heading 1 · Marcellus
Care that feels personal
Heading 2 · Marcellus

Beauty begins with care

Heading 3 · Marcellus

A moment for yourself

Heading 4 · Marcellus

Thoughtful treatments

Heading 5 · Marcellus
Every detail matters
Heading 6 · Marcellus
Made for your wellbeing
Body text · Open Sans

At Klak, thoughtful care begins with you. Discover personalized treatments, experienced specialists, and a welcoming space to feel your best.

03. Buttons & links

Use clear, action-led labels. These examples reuse Klak’s existing primary and secondary button classes.

04. Text & quotation

Keep content easy to scan with short paragraphs, clear links, and generous space.

Our approach combines expert knowledge with attentive, personal care. Each visit is an opportunity to pause, reset, and choose what feels right for you.

A little time for yourself can make a beautiful difference.

05. Form fields

Simple labels and comfortable input areas help visitors share their details. These are editable style examples; no information is submitted.

Thank you for contacting Klak. Our team will be in touch soon.
We couldn’t send your message. Please check your details and try again.

06. Spacing

Consistent space creates a calm rhythm. Use smaller gaps for related content and larger spacing between sections.

16 px
Compact details
24 px
Cards and controls
40 px
Section introductions
80 px
Section spacing