A consistent point of view.
Shared colour, type and components. Cool neutral surfaces, with blue reserved for actions and selected states.
Colour styles.
Each row shows the light and dark values of a shared colour style. The component examples below follow the active preview theme.
Background
rgb(255, 255, 255)
rgb(12, 14, 18)
Surface
rgb(244, 245, 247)
rgb(20, 23, 29)
Surface secondary
rgb(233, 235, 239)
rgb(29, 33, 42)
Text
rgb(14, 17, 22)
rgb(243, 245, 248)
Text muted
rgb(90, 97, 107)
rgb(154, 161, 172)
Border
rgb(226, 229, 234)
rgba(255, 255, 255, 0.12)
Accent
rgb(30, 80, 229)
rgb(78, 123, 255)
Accent hover
rgb(22, 60, 184)
rgb(46, 91, 255)
Accent subtle
rgba(30, 80, 229, 0.1)
rgba(78, 123, 255, 0.16)
On accent
rgb(255, 255, 255)
rgb(12, 14, 18)
Typography.
Special Gothic · Display
Room to belong.
Special Gothic · Heading
A considered collection.
Inter · Body
A single-storey villa above Port d’Andratx, framing the bay through nine metres of glass.
Inter · Price and specifications
€ 4.950.000 · 420 m²
Components and states.
Layout and motion.
Layouts use native stacks and grids with auto-height content. Phone is below 810 px, tablet starts at 810 px and desktop starts at 1200 px. Shared cards move between one, two and three columns. Colour transitions stay restrained; content remains visible without waiting for a reveal. Reduced-motion support is enabled in site settings.