Style Guide — Version 1.0
The house style
Colour, type, buttons and motion — the system every page in this template is built from. Edit a style once and it updates everywhere.
(01)
Colour
One paper, one ink, one accent. Oxide is used sparingly — for hover states and a single word at a time.
Paper
#F2EFE9
Stone
#E6E1D8
Ink
#171614
Ink Muted
#5E5A53
Oxide
#A6452A
Line
Ink · 14%
Inverse Surface
#171614
Inverse Text
#F2EFE9
(02)
Typography
Bodoni Moda for headlines, with one italic word for emphasis. Geist for everything you read and click. Nothing smaller than 14px.
Display XL
Bodoni Moda 400 — 200 / 150 / 104 / 60
Sit well.
Display L
Bodoni Moda 400 — 136 / 112 / 80 / 48
Quiet objects
Heading 1
Bodoni Moda 400 — 96 / 80 / 60 / 42
Made to be lived with
Heading 2
Bodoni Moda 400 — 64 / 56 / 44 / 34
Oak, linen and patience
Heading 3
Bodoni Moda 400 — 40 / 36 / 30 / 26
The Arlo lounge chair
Heading 4
Geist 500 — 26 / 24 / 22 / 20
Solid European oak, oiled by hand
Body Large
Geist 400 — 22 / 21 / 20 / 18
Every piece is made to order in our workshop and finished by the same pair of hands that started it.
Body
Geist 400 — 18 / 17 / 17 / 16
Lead time is six to eight weeks. We deliver across Europe and take the packaging back with us.
Price
Geist 500 tabular — 24 / 22 / 22 / 20
€2,480.00
Meta
Geist 400 — 15 / 15 / 14 / 14
01 — Seating · W 82 × D 76 × H 71 cm
Label
Geist 500 — 16 / 16 / 15 / 15
Add to order
(03)
Buttons & links
Square corners, no pills. Hover a button to see the oxide fill rise and the arrow pass through.
(04)
Spacing & grid
12 fluid columns, 64px outer margins, 24px gutters, content capped at 1792px. Sections breathe with 200px of space on desktop.
8
16
24
40
64
96
160
240
(05)
Motion
Every animation shares one easing and respects reduced-motion settings.
cubic-bezier(0.16, 1, 0.3, 1) for reveals · (0.65, 0, 0.35, 1) for page transitions
0.35 – 0.6s — fills, underlines, arrow swaps, letter rolls
Lines rise 110% from behind a mask, 0.08s stagger
Unmask from the bottom while scaling 1.15 → 1, 0.9s
±10% max, hero and lifestyle images only
0 → 100 counter with stacked images, once per visit
Ink panel wipe, 0.8s