# Domaine Design System — LLM entry point

> Read this first. Framework-agnostic HTML/CSS + design tokens encoding the Domaine brand.
> Goal: generate on-brand Domaine UI. Compose from tokens only — never invent hex, sizes, or radii.

## Start here
- Tokens (machine-readable): ../tokens/tokens.json
- Tokens (drop-in stylesheet): ../tokens/tokens.css  — link/inline this; fonts resolve from ../tokens/fonts/
- Components (contracts): ../specs/components.json  — variants, anatomy, HTML, per-component rules
- Components (stylesheet): ../components/components.css  — load after tokens.css
- Brand guardrails + roadmap: ../CLAUDE.md
- How consumption works: ../ARCHITECTURE.md

## Brand guardrails (obey these; output is measured against them)
- TYPE: Suisse Intl only (+ Suisse Int'l Mono for labels). Hierarchy from scale + tight negative tracking + CASE, never arbitrary bold. Headings/display = SemiBold 600 UPPERCASE tight-tracked. Big stats = Light 300. Body = Regular 400 (never bold). ALWAYS render in real Suisse — Inter is a LAST-RESORT fallback only (never design for it or ship it as the intended face), and never any other font. Missing Suisse? Install it from https://brand.domaineworldwide.com/downloads.
- CASING: UPPERCASE is RESERVED for display/section titles, eyebrows/kickers, section+nav labels, table headers, stat labels, and all mono runs — any uppercase sans run is SemiBold 600. Everything else is SENTENCE CASE: body, buttons (Medium 500 — never all-caps a button), inputs, card/callout body, quotes. Every mono run is UPPERCASE. Don't default to caps or bold — that's the #1 way output stops reading as Domaine.
- COLOR: white #FFFFFF ground, ink #000000, hairlines #DBDBDB, secondary bg #EDEDED (matches domaineworldwide.com). ONE chromatic punctuation moment per context (Studio Blue #2749FF or one muted secondary). Never a palette of accents; never twice.
- FLATNESS: structure via 1px #DBDBDB hairlines + flat fills, NOT shadows. Softly rounded: sm 3px (buttons/inputs/tags), md 6px (cards), lg 12px; pill (999px) for circular icon buttons only.
- GRID: 12-col, 24px gap, editorial asymmetry, generous whitespace.
- VOICE: declarative, sentence-case body, UPPERCASE short labels only, proof over hype.

## Components
Load components.css after tokens.css, then compose the markup in components.json.
Available: button · card · field (input/textarea/select) · badge · table · stat-block · callout.
Each contract lists variants, anatomy, an HTML example, and brand rules. Pills are for buttons only;
buttons/inputs/tags use the 3px radius (pills are for circular icon buttons only). One accent (Studio Blue) per view. Error states reuse the accent, not a new red.
Also available: tag · accordion · quote · logo-grid · marquee · cta-band.

## Foundation preview
- ../preview/index.html — renders the token system (type ramp, palette, spacing) with the real fonts.