Styleguide

Coiffeur Ali Barber

Category: hairdresser. Tokens derived from brand/design-tokens.json. Edit the JSON, re-render, refresh.

Palette

primary
#C9A254
primary-ink
#181410
accent
#B03A34
bg
#181410
surface
#221D17
ink
#F3ECDF
muted
#A79A85
line
#3B342A
success
#5C8A4E
warn
#C9A254
danger
#B03A34
accent-blue
#2D4B8E
surface-oak
#C08A4F

Typography

display
The quick brown fox
h1
Welcomed into a calm room
h2
Treatments & pricing
h3
What to expect
body
Body copy at the default reading size, with a generous line-height. This is the size most visitors will read.
small
Captions, footnotes, microcopy.

Spacing

--s-1
4px
--s-2
8px
--s-3
12px
--s-4
16px
--s-5
24px
--s-6
32px
--s-7
48px
--s-8
72px
--s-9
104px
--s-10
144px

Shape

sm
md
lg
pill

Buttons

Book a Session Learn more Cancel

Cards

Reflexology

60 min standard session. CHF 120.

Book

Maternity

Adapted for pregnancy. CHF 130.

Book

Hand reflex

30 min option for clients with foot sensitivity.

Book

Hero (example layout)

Reflexology in your town
A calm hour for your body to settle.

One-line supporting copy that reassures the visitor, names the practitioner, and points at the booking link.

Book a SessionWhat to expect