Design System
Guide

Get started

The system is structured so an AI tool can read it and produce on-brand Domaine work — web UI or slides — without a human re-explaining the brand each time.

Connect the MCP

A remote MCP endpoint — https://brand.domaineworldwide.com/mcp — lets any Claude session pull the brand on demand: tokens, guardrails, components, and layout recipes, no copy-paste. Connect it the way that matches your tool.

Claude Desktop  most people

The Domaine design system is available as an org connector — nothing to paste. Open Settings → Connectors, find Domaine Design System, and turn it on. New chats can then use it automatically.

Claude Code  CLI

# add the Domaine design system as an MCP server
claude mcp add --transport http domaine https://brand.domaineworldwide.com/mcp

Other MCP clients  Figma agents, etc.

Add a Streamable-HTTP MCP server pointing at https://brand.domaineworldwide.com/mcp. No key or auth required — it's read-only.

What it exposes

Seven read-only tools:

  • domaine_overview — the aesthetic distilled to one screen. Start here.
  • get_guardrails — the pass/fail rules output is measured against.
  • get_tokens — exact, portable values (hex, px and pt, spacing, radii, grid). Filter by category.
  • list_components / get_component — the web (HTML/CSS) UI contracts.
  • list_recipes / get_recipe — composed layout templates.

The same content is also published as MCP resources (domaine://tokens, domaine://component/*, domaine://recipe/*) for clients that prefer them.

Recipes work in any tool

Each recipe is a composed layout on a 1920×1080 canvas — absolute element boxes (x, y, w, h in px) with type and colour drawn from the tokens. Because it is geometry, not CSS, an agent can rebuild it natively in Figma Slides, Google Slides, PowerPoint, or HTML (scale the canvas linearly for other sizes — Google Slides’ 960×540 pt is ×0.5). Deck templates cover cover, agenda, section-divider, statement, content, content-dark, stat, data-table, quote, and closing.

Designing in Figma or Slides? Install Suisse first

The recipes and tokens tell the agent to set the Suisse Intl family — but a design tool can only render a font it actually has. If Suisse isn't present (installed locally, or added as a shared font in your Figma org), the tool silently substitutes a generic sans even though the design specifies Suisse correctly — which is the usual reason output "looks off." Install the desktop fonts from the Downloads page, or have your Figma org admin add Suisse Intl as a shared font. Everything else — casing, weights, colour, spacing, layout — comes through either way.

Without MCP — point at the static specs

  • Read the guardrails first — llms.txt states what exists and the rules output is measured against.
  • Load the values — tokens.json is the machine-readable source; each token carries a usage note (intent, not just a value).
  • Render with tokens.css — compose with CSS variables only. No hardcoded hex, sizes, or radii.
  • Self-check against the guardrails before finishing.
# fetch the machine-readable tokens
curl https://brand.domaineworldwide.com/downloads/tokens.json

# fetch the guardrails
curl https://brand.domaineworldwide.com/downloads/llms.txt

The rules an agent must obey

  • Suisse Intl only (Inter is the sole public fallback). Never Calibri/Times/rounded humanist sans.
  • Every UPPERCASE sans run is SemiBold; every mono run is UPPERCASE.
  • Ground #FFFFFF, ink #000000, hairlines #DBDBDB, secondary bg #EDEDED. One accent per context — Studio Blue #2749FF or a single muted secondary.
  • Flat, hairline-defined; softly rounded (3px buttons/inputs/tags, 6px cards, 12px large surfaces). No shadows. Pills for circular icon buttons only.
  • Compose from tokens — never invent one-offs.