Styleguide
The tokens, text styles and components behind Maison. Everything on this page is a live style or component you can change in the Assets panel.
Colour
Background
rgb(255, 255, 255)
Surface/Dark
rgb(59, 42, 33)
Text/Ink
rgb(42, 31, 26)
Text/Inverse
rgb(255, 255, 255)
Text/Muted
rgba(42, 31, 26, 0.6)
Text/Muted Inverse
rgba(255, 255, 255, 0.6)
Overlay/Image
rgba(42, 31, 26, 0.18)
Border
rgba(59, 42, 33, 0.14)
Border/Inverse
rgba(255, 255, 255, 0.18)
Surface/Light
rgb(242, 237, 232)
Text/Soft Inverse
rgba(255, 255, 255, 0.72)
Border/Inverse Strong
rgba(255, 255, 255, 0.4)
Text/Faint
rgba(42, 31, 26, 0.18)
Typography
Maison
Mega · Inter Display 500 · 144 / 80 / 56 px · h1
Calm rooms
Page Title · Inter Display 500 · 64 / 52 / 38 px · h1
Hudson
Work Title · Inter Display 500 · 112 / 60 / 48 px · h2
Our services
Section Headline · Inter Display 500 · 50 / 40 / 34 px · h2
Spaces made to last.
Statement · Inter Display 500 · 50 / 40 / 28 px · p
A short summary in a larger size.
Lead · Inter Display 400 · 32 / 26 / 22 px · p
Lime plaster walls
Item Title · Inter Display 500 · 32 / 28 / 24 px · h3
Section label
Section Label · Inter Display 400 · 20 / 18 / 16 px · p
Subtitle beside a section headline.
Section Subtitle · Inter Display 400 · 20 / 17 px · p
Body text for articles and long reads, set for comfortable reading.
Prose · Inter Display 400 · 20 / 18 / 17 px · p
Body text for rows and tables.
Body · Inter Display 400 · 16 px · p
Secondary body text.
Body Muted · Inter Display 400 · 15 px · p
Caption and small meta
Caption · Inter Display 400 · 13 px · p
Link text
Link · Inter Display 400 · 20 px · p
Button label
Button · Inter Display 600 · 13 px · p
Components
PillLink: the one button style, used for every call to action.
Arrow Button: previous and next in the testimonials.
Layout
Breakpoints at 1200, 810 and 390. Content sits in a 1136 px column with 32, 24 and 16 px side margins. Every section opens with a line and a small label, and the right-hand column always starts on the same vertical line.
Motion
On the first visit a loader counts to 100, then lifts away. The Home hero plays a muted looping video, and scrolling glides on desktop. Pages fade in as they rise. Headlines rise word by word, body text and blocks fade in as you scroll, testimonials crossfade every 6 s and the footer wordmark rises letter by letter. Card images zoom slightly on hover.
Content
Six CMS collections: Projects, Insights, Services, Team, Awards and Offices. Each project picks one of six editorial photo layouts with its Layout field, and every image has its own alt text.