Styleguide

Markstein AG

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

Palette

primary
#8E202B
primary-ink
#FFFFFF
accent
#B08D57
bg
#FBF9F6
surface
#FFFFFF
ink
#14110F
muted
#6E6862
line
#E2DBD1
success
#3F6B4A
warn
#A8791E
danger
#9B3A2E
primary-deep
#6E1822
secondary
#7C8087
secondary-ink
#FFFFFF
surface-alt
#F1ECE5
surface-deep
#14110F
ink-soft
#3B3632
line-strong
#CFC5B8
scrim
rgba(20, 17, 15, 0.52)
scrim-strong
rgba(20, 17, 15, 0.74)

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
64px
--s-9
96px
--s-10
144px
--s-11
200px

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