Design System
Documentation

The Domaine Design System

An agent-consumable design system encoding the Domaine brand. Framework-agnostic — every value is a design token you compose with, on the web or over MCP.

The non-negotiables

Anything built with this system holds to these. They are what make output recognizably Domaine.

  • Type: Suisse Intl only (Inter is the sole public fallback). Hierarchy from scale, tight tracking, and CASE — never arbitrary bold. Headings/display are SemiBold 600 UPPERCASE; big stats are Light 300; body is Regular 400.
  • Color: warm paper #EFEEEA ground, ink #1B1B1B (not black), hairlines #CCCCCC. One chromatic punctuation moment per context — never a palette.
  • Flatness: structure via 1px hairlines and flat fills, not shadows. Corners 0/2/4px; pills for buttons only.
  • Grid: 12 columns, 24px gap, editorial asymmetry, generous whitespace.

Explore

FOUNDATIONSColorThe greyscale ramp, the single accent, and the secondary palette.FOUNDATIONSTypographyThe weight ladder, scale, and the two casing rules.GUIDEGet startedConnect the MCP so Claude and other agents consume the system.