{ "$schema": "https://raw.githubusercontent.com/design-tokens/community-group/main/schema.json", "$description": "Domaine Design System — machine-readable design tokens. Source of truth is tokens.css; this file mirrors it 1:1 for programmatic/AI consumption. Values are exact brand values from Domaine's design system (Claude Design export). Never invent one-offs; compose from these.", "$meta": { "name": "domaine-design-system", "version": "0.1.0", "brand": "Domaine", "tagline": "We are purpose-built for ambitious & beloved brands.", "cssVarPrefix": "--" }, "color": { "$description": "Editorial greyscale ramp is the foundation. Chromatic color is a single 'punctuation' moment per context — never a palette of accents.", "greyscale": { "black": { "value": "#000000", "cssVar": "--color-black", "type": "color", "note": "ink — primary text / foreground" }, "grey-800": { "value": "#3A3A3A", "cssVar": "--color-grey-800", "type": "color", "note": "body text" }, "grey-600": { "value": "#686C6D", "cssVar": "--color-grey-600", "type": "color", "note": "secondary / meta / ghosted stats" }, "grey-400": { "value": "#A5A7A8", "cssVar": "--color-grey-400", "type": "color", "note": "tertiary / captions" }, "grey-200": { "value": "#DBDBDB", "cssVar": "--color-grey-200", "type": "color", "note": "hairlines, rules, dividers" }, "off-white": { "value": "#EDEDED", "cssVar": "--color-off-white", "type": "color", "note": "secondary bg / hover / inset panel" }, "white": { "value": "#FFFFFF", "cssVar": "--color-white", "type": "color", "note": "default ground, elevated cards" } }, "semantic": { "bg": { "value": "#FFFFFF", "cssVar": "--bg", "type": "color", "note": "default ground (white)" }, "bg-elevated": { "value": "#FFFFFF", "cssVar": "--bg-elevated", "type": "color", "note": "elevated cards / inset panels (define with border)" }, "bg-sunken": { "value": "#EDEDED", "cssVar": "--bg-sunken", "type": "color", "note": "subtle / secondary / hover bg" }, "bg-inverse": { "value": "#000000", "cssVar": "--bg-inverse", "type": "color", "note": "inverted sections" }, "fg": { "value": "#000000", "cssVar": "--fg", "type": "color", "note": "primary text / headlines" }, "fg-2": { "value": "#3A3A3A", "cssVar": "--fg-2", "type": "color", "note": "body text" }, "fg-muted": { "value": "#686C6D", "cssVar": "--fg-muted", "type": "color", "note": "secondary / meta / eyebrow" }, "fg-subtle": { "value": "#A5A7A8", "cssVar": "--fg-subtle", "type": "color", "note": "tertiary / captions" }, "fg-inverse": { "value": "#FFFFFF", "cssVar": "--fg-inverse", "type": "color", "note": "text on ink" }, "border": { "value": "#DBDBDB", "cssVar": "--border", "type": "color", "note": "all hairlines" }, "border-strong": { "value": "#000000", "cssVar": "--border-strong", "type": "color" }, "focus-ring": { "value": "#000000", "cssVar": "--focus-ring", "type": "color" } }, "accent": { "$description": "Studio Blue is THE punctuation accent — one high-impact moment per context, never decorative, never twice where once will do.", "studio-blue": { "value": "#2749FF", "cssVar": "--accent-punctuation", "type": "color", "note": "signature electric blue" } }, "secondary": { "$description": "One muted secondary tone per context only — accent backgrounds, category coding, data-viz. Pair against ink or paper.", "bubblegum": { "value": "#F1C5D2", "cssVar": "--color-bubblegum", "type": "color" }, "plum": { "value": "#A75C7A", "cssVar": "--color-plum", "type": "color" }, "eggplant": { "value": "#8B605D", "cssVar": "--color-eggplant", "type": "color" }, "clay": { "value": "#BC6445", "cssVar": "--color-clay", "type": "color" }, "tan": { "value": "#F0B285", "cssVar": "--color-tan", "type": "color" }, "cashmere": { "value": "#ECC49A", "cssVar": "--color-cashmere", "type": "color" }, "beige": { "value": "#FFFDDC", "cssVar": "--color-beige", "type": "color" }, "goldenrod": { "value": "#E4E2A4", "cssVar": "--color-goldenrod", "type": "color" }, "asparagus": { "value": "#9CAE7F", "cssVar": "--color-asparagus", "type": "color" }, "cyan": { "value": "#9EC2B8", "cssVar": "--color-cyan", "type": "color" }, "lemongrass": { "value": "#939E96", "cssVar": "--color-lemongrass", "type": "color" }, "boulder": { "value": "#6D7D77", "cssVar": "--color-boulder", "type": "color" }, "indigo": { "value": "#4963A6", "cssVar": "--color-indigo", "type": "color" }, "cloud": { "value": "#A8BDD6", "cssVar": "--color-cloud", "type": "color" }, "periwinkle": { "value": "#CFD9E4", "cssVar": "--color-periwinkle", "type": "color" }, "moondust": { "value": "#D9E0DB", "cssVar": "--color-moondust", "type": "color" }, "bone": { "value": "#DDDBD4", "cssVar": "--color-bone", "type": "color" } } }, "typography": { "family": { "display": { "value": "'Suisse Intl', -apple-system, 'Helvetica Neue', Arial, sans-serif", "cssVar": "--font-display" }, "sans": { "value": "'Suisse Intl', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif", "cssVar": "--font-sans" }, "mono": { "value": "'Suisse Intl Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace", "cssVar": "--font-mono" } }, "fallbackRule": "ALWAYS render in real Suisse Intl — it is the brand typeface. Inter (free, SIL OFL) is a LAST-RESORT fallback only, for environments where Suisse genuinely cannot load; never design for Inter or ship it as the intended face. If Suisse isn't installed, get it from the downloads page: https://brand.domaineworldwide.com/downloads (Fonts or Brand Kit). Never Calibri/Aptos/Times/Verdana or any rounded humanist sans.", "bundledWeights": { "$note": "Only these OTFs are licensed/bundled and will actually render; other weights in @font-face fall back.", "sans": [300, 350, 400, 500, 600, 700], "mono": [100, 400, 700] }, "weight": { "light": { "value": 300, "cssVar": "--fw-light", "note": "big stat numerals; optional oversized editorial headline" }, "regular": { "value": 400, "cssVar": "--fw-regular", "note": "body copy" }, "medium": { "value": 500, "cssVar": "--fw-medium", "note": "buttons, sentence-case subheads (h3/h4), form labels" }, "display": { "value": 600, "cssVar": "--fw-display", "note": "headings & display — UPPERCASE, tight tracking" }, "semi": { "value": 600, "cssVar": "--fw-semi" } }, "casingRules": [ "UPPERCASE is RESERVED for: display / section-divider titles, eyebrows & kickers, section/nav labels, table headers, stat labels, and every monospace run (metadata, footers, page numbers, indices). Any UPPERCASE Suisse Intl (sans) run is SemiBold (600) with tight tracking.", "Everything else stays SENTENCE CASE — never uppercase it: body copy, buttons (Medium 500; never all-caps a button), form inputs and their labels, card / callout body, and quotes.", "Suisse Int'l Mono is always UPPERCASE and letter-spaced (it keeps its own weight).", "Do NOT default to uppercase or SemiBold. Over-using caps and bold is the single most common way generated output stops reading as Domaine — reach for weight/scale/whitespace before CASE." ], "fontSize": { "display-xl": { "value": "clamp(64px, 9vw, 140px)", "cssVar": "--fs-display-xl" }, "display-lg": { "value": "clamp(48px, 6.5vw, 96px)", "cssVar": "--fs-display-lg" }, "display-md": { "value": "clamp(40px, 5vw, 72px)", "cssVar": "--fs-display-md" }, "h1": { "value": "clamp(36px, 4.2vw, 56px)", "cssVar": "--fs-h1" }, "h2": { "value": "clamp(28px, 3.2vw, 40px)", "cssVar": "--fs-h2" }, "h3": { "value": "clamp(22px, 2.2vw, 28px)", "cssVar": "--fs-h3" }, "h4": { "value": "18px", "cssVar": "--fs-h4" }, "eyebrow": { "value": "12px", "cssVar": "--fs-eyebrow" }, "body-lg": { "value": "20px", "cssVar": "--fs-body-lg" }, "body": { "value": "16px", "cssVar": "--fs-body" }, "body-sm": { "value": "14px", "cssVar": "--fs-body-sm" }, "caption": { "value": "12px", "cssVar": "--fs-caption" }, "label": { "value": "11px", "cssVar": "--fs-label", "note": "mono micro-label" } }, "lineHeight": { "display": { "value": 1.02, "cssVar": "--lh-display" }, "heading": { "value": 1.10, "cssVar": "--lh-heading" }, "body": { "value": 1.55, "cssVar": "--lh-body" }, "tight": { "value": 1.25, "cssVar": "--lh-tight" } }, "letterSpacing": { "display": { "value": "-0.02em", "cssVar": "--ls-display" }, "heading": { "value": "-0.015em", "cssVar": "--ls-heading" }, "body": { "value": "0", "cssVar": "--ls-body" }, "eyebrow": { "value": "0.08em", "cssVar": "--ls-eyebrow" }, "label": { "value": "0.12em", "cssVar": "--ls-label" } } }, "spacing": { "$description": "4px base scale. Whitespace is generous; prefer large steps between sections.", "1": { "value": "4px", "cssVar": "--space-1" }, "2": { "value": "8px", "cssVar": "--space-2" }, "3": { "value": "12px", "cssVar": "--space-3" }, "4": { "value": "16px", "cssVar": "--space-4" }, "5": { "value": "24px", "cssVar": "--space-5" }, "6": { "value": "32px", "cssVar": "--space-6" }, "7": { "value": "48px", "cssVar": "--space-7" }, "8": { "value": "64px", "cssVar": "--space-8" }, "9": { "value": "96px", "cssVar": "--space-9" }, "10": { "value": "128px", "cssVar": "--space-10" }, "11": { "value": "192px", "cssVar": "--space-11" } }, "radius": { "$description": "Softly rounded, matching domaineworldwide.com. Buttons and inputs use sm (3px); md/lg for cards and larger surfaces; pill (999px) is for circular icon buttons only.", "none": { "value": "0", "cssVar": "--radius-none" }, "sm": { "value": "3px", "cssVar": "--radius-sm", "note": "buttons, inputs, tags, small cards" }, "md": { "value": "6px", "cssVar": "--radius-md", "note": "cards, panels" }, "lg": { "value": "12px", "cssVar": "--radius-lg", "note": "large surfaces, media" }, "pill": { "value": "999px", "cssVar": "--radius-pill", "note": "circular icon buttons only" } }, "shadow": { "$description": "Near-flat. Elevation is via whitespace, hairlines, and inversion — NOT shadows. Reserved for floating UI only.", "sm": { "value": "0 1px 2px rgba(15,15,14,0.04)", "cssVar": "--shadow-sm" }, "md": { "value": "0 6px 24px rgba(15,15,14,0.08)", "cssVar": "--shadow-md" }, "lg": { "value": "0 24px 60px rgba(15,15,14,0.12)", "cssVar": "--shadow-lg" } }, "motion": { "$description": "Interactive only.", "ease": { "value": "cubic-bezier(0.22, 1, 0.36, 1)", "cssVar": "--ease" }, "ease-in-out":{ "value": "cubic-bezier(0.65, 0.05, 0.36, 1)", "cssVar": "--ease-in-out" }, "dur-fast": { "value": "180ms", "cssVar": "--dur-fast" }, "dur-base": { "value": "320ms", "cssVar": "--dur-base" }, "dur-slow": { "value": "640ms", "cssVar": "--dur-slow" } }, "layout": { "$description": "12-column grid, 24px gap. Imagery goes full-bleed; text/UI respects the edge margin. Editorial asymmetry (narrow label column vs wide content) is encouraged.", "container": { "value": "1440px", "cssVar": "--container" }, "gutter": { "value": "max(24px, 3vw)","cssVar": "--gutter" }, "grid-columns":{ "value": 12, "cssVar": "--grid-columns" }, "grid-gap": { "value": "24px", "cssVar": "--grid-gap" }, "margin-page": { "value": "max(24px, 3vw)","cssVar": "--margin-page" } } }