{
  "$description": "Domaine Design System — component contracts. Framework-agnostic HTML/CSS PLUS a resolved, tool-agnostic `spec` per component (absolute px/hex/weight values) so a design tool — Figma, Google Slides, PowerPoint — can recreate each component exactly without resolving tokens or CSS. Load tokens.css + components.css for web; use `spec` for design tools. Every component obeys the brand guardrails: flat + hairline-defined, soft radii (3px buttons/inputs/tags · 6px cards · 12px large surfaces), pills for circular icon buttons ONLY, one accent per view, tokens only.",
  "$meta": { "name": "domaine-design-system", "layer": "components", "version": "0.1.0", "stylesheet": "components.css", "requires": "tokens.css" },

  "components": {
    "button": {
      "description": "Primary interactive control. Small radius (3px, --radius-sm).",
      "spec": {
        "$note": "Fully resolved, tool-agnostic values — recreate the button EXACTLY in any tool (Figma, Google Slides, PowerPoint, HTML) without resolving tokens or CSS. Units are px at 1× (web/Figma); for Google Slides multiply px by 0.75 for pt.",
        "element": "button or link (a) — inline-flex, label centered, single line",
        "typography": {
          "family": "Suisse Intl",
          "fallback": "Inter (last resort only)",
          "weight": 500,
          "weightName": "Medium",
          "case": "sentence",
          "trackingEm": 0,
          "lineHeight": 1,
          "note": "Label is SENTENCE CASE — never all-caps a button. Weight is Medium 500, NOT SemiBold."
        },
        "shape": { "radiusPx": 3, "borderWidthPx": 1, "borderStyle": "solid", "iconGapPx": 8 },
        "sizes": {
          "default": { "fontSizePx": 14, "paddingXPx": 20, "paddingYPx": 12, "heightPx": 40 },
          "sm": { "fontSizePx": 12, "paddingXPx": 14, "paddingYPx": 8, "heightPx": 30 }
        },
        "sizesNote": "Only two sizes exist — default and sm. Do NOT invent a large/medium/small scale.",
        "variants": {
          "primary": { "fillHex": "#EDEDED", "textHex": "#000000", "borderHex": "#EDEDED", "hover": { "fillHex": "#000000", "textHex": "#FFFFFF", "borderHex": "#000000" } },
          "accent": { "fillHex": "#2749FF", "textHex": "#FFFFFF", "borderHex": "#2749FF", "note": "At most one per view — the single Studio Blue moment.", "hover": { "fillHex": "#000000", "textHex": "#FFFFFF", "borderHex": "#000000" } },
          "ghost": { "fillHex": "transparent", "textHex": "#000000", "borderHex": "#DBDBDB", "hover": { "fillHex": "#000000", "textHex": "#FFFFFF", "borderHex": "#000000" } }
        },
        "states": {
          "focus": { "outlineHex": "#000000", "outlineWidthPx": 2, "offsetPx": 2 },
          "disabled": { "opacity": 0.4, "note": "whole button at 40% opacity; non-interactive" }
        }
      },
      "baseClass": "btn",
      "element": "button | a",
      "variants": {
        "btn--primary": "Light fill (--bg-sunken) with ink text — the main action. Inverts to ink fill / paper text on hover.",
        "btn--accent": "Studio Blue fill — use at most once per view (the punctuation moment).",
        "btn--ghost": "Hairline border, transparent — secondary actions.",
        "btn--sm": "Compact size modifier (combine with any variant)."
      },
      "states": ["hover", "focus-visible (ink outline)", "disabled"],
      "disabled": {
        "preferred": "Use a native <button disabled> — it is fully inert (not focusable, not activatable).",
        "linkVariant": "A link styled as a button (<a class=\"btn\">) cannot be fully disabled with CSS alone: pointer-events blocks the mouse but the anchor stays keyboard-focusable and activatable. To disable one, set aria-disabled=\"true\" AND tabindex=\"-1\" AND remove href.",
        "html": "<button class=\"btn btn--ghost\" disabled>Disabled</button>\n<a class=\"btn btn--ghost\" role=\"link\" aria-disabled=\"true\" tabindex=\"-1\">Disabled link</a>"
      },
      "html": "<a class=\"btn btn--primary\" href=\"/get-started\">Get started</a>\n<button class=\"btn btn--ghost\">Learn more</button>",
      "rules": [
        "Radius is --radius-sm (3px); --radius-pill is reserved for circular icon buttons only.",
        "Label is sentence case; never all-caps a button.",
        "At most one btn--accent per context.",
        "For a disabled state prefer <button disabled>; a disabled <a> must also set tabindex=\"-1\" and drop href (CSS can't block keyboard activation on a link)."
      ]
    },

    "card": {
      "description": "Flat, hairline-bordered container. Elevation comes from the border, never a shadow.",
      "baseClass": "card",
      "anatomy": ["card__k (mono kicker)", "card__h (heading)", "card__p (body)"],
      "variants": {
        "card--link": "Whole card is a link (also apply when element is <a class=\"card\">).",
        "cards": "Grid wrapper for a set of cards (auto-fit, 240px min)."
      },
      "html": "<div class=\"cards\">\n  <a class=\"card card--link\" href=\"/docs/color\">\n    <span class=\"card__k\">FOUNDATIONS</span>\n    <span class=\"card__h\">Color</span>\n    <span class=\"card__p\">The ramp, the accent, the secondary palette.</span>\n  </a>\n</div>",
      "rules": ["No drop shadow.", "Corners --radius-md (4px) max."]
    },

    "field": {
      "description": "Form control (input / textarea / select) with label and hint. Sharp corners, hairline border, ink focus.",
      "baseClass": "field",
      "anatomy": ["field__label", "field__control (input/textarea/select)", "field__hint", "field__hint--error"],
      "states": ["hover", "focus (ink inset ring)", "aria-invalid=\"true\" (Studio Blue border)", "disabled"],
      "html": "<label class=\"field\">\n  <span class=\"field__label\">Email</span>\n  <input class=\"field__control\" type=\"email\" placeholder=\"you@brand.com\" />\n  <span class=\"field__hint\">We'll never share it.</span>\n</label>\n\n<label class=\"field\">\n  <span class=\"field__label\">Message</span>\n  <textarea class=\"field__control\"></textarea>\n</label>\n\n<label class=\"field\">\n  <span class=\"field__label\">Plan</span>\n  <select class=\"field__control\"><option>Starter</option><option>Scale</option></select>\n</label>",
      "rules": ["Radius --radius-sm (2px).", "Error state uses the single accent (Studio Blue), not a new red token.", "Label is Medium 500 sentence case."]
    },

    "badge": {
      "description": "Small status / category tag. Mono, UPPERCASE, sharp — deliberately NOT a pill.",
      "baseClass": "badge",
      "variants": {
        "badge--accent": "Studio Blue fill (one per view).",
        "badge--solid": "Ink fill.",
        "badge--outline": "Transparent with hairline."
      },
      "html": "<span class=\"badge\">BETA</span>\n<span class=\"badge badge--accent\">NEW</span>\n<span class=\"badge badge--outline\">DRAFT</span>",
      "rules": ["Mono is always UPPERCASE (casing rule b).", "Radius --radius-sm; never a pill (that's buttons only)."]
    },

    "table": {
      "description": "Data table with hairline rules and UPPERCASE SemiBold column headers.",
      "baseClass": "table",
      "variants": { "table--num": "Tabular-lining numerals for numeric columns." },
      "html": "<table class=\"table table--num\">\n  <thead><tr><th>Brand</th><th>GMV</th><th>Lift</th></tr></thead>\n  <tbody>\n    <tr><td>Example</td><td>$5B+</td><td>+29%</td></tr>\n  </tbody>\n</table>",
      "rules": ["Column headers are UPPERCASE SemiBold (casing rule a).", "Rules are 1px hairlines; header underline is --border-strong.", "No zebra fill — hover highlight only."]
    },

    "stat-block": {
      "description": "A headline figure — big Light numeral over a mono label. The expensive, airy stat treatment.",
      "baseClass": "stat-block",
      "anatomy": ["stat-block__value (Light display numeral)", "stat-block__label (mono)"],
      "variants": { "stat-block--ghost": "Secondary figures ghosted in pale grey (build hierarchy by ghosting, not resizing)." },
      "html": "<div class=\"stat-block\">\n  <span class=\"stat-block__value\">750+</span>\n  <span class=\"stat-block__label\">BRANDS SCALED</span>\n</div>",
      "rules": ["Numeral is Light 300 (--fw-light) — the one place Light is used.", "For several figures, keep the primary full-strength and ghost the rest; don't resize."]
    },

    "callout": {
      "description": "Flat panel with a left hairline rule for asides, notes, and closing statements.",
      "baseClass": "callout",
      "anatomy": ["callout__title", "callout__body"],
      "variants": {
        "callout--accent": "Left rule in Studio Blue (one accent moment).",
        "callout--inverse": "Ink surface, paper text — a closing / high-emphasis panel."
      },
      "html": "<div class=\"callout callout--accent\">\n  <p class=\"callout__title\">One accent per context</p>\n  <p class=\"callout__body\">Studio Blue appears once — a stat, a rule, a closing surface.</p>\n</div>",
      "rules": ["Flat; structure via the left rule + hairline border.", "Radius --radius-sm."]
    },

    "tag": {
      "description": "Content category label (e.g. an industry tag). Sans, soft radius — distinct from the mono UPPERCASE badge.",
      "baseClass": "tag",
      "variants": { "tag--outline": "Transparent with a hairline.", "tag--accent": "Studio Blue fill (one per view)." },
      "html": "<span class=\"tag\">Enterprise</span>\n<span class=\"tag tag--outline\">Fashion &amp; Apparel</span>",
      "rules": ["Sentence/Title case content label — NOT uppercase (that's the badge).", "Radius --radius-sm."]
    },

    "accordion": {
      "description": "Expandable list built on native <details>/<summary>. Hairline dividers, +/- affordance.",
      "baseClass": "accordion",
      "anatomy": ["accordion__item (<details>)", "summary (the header)", "accordion__body"],
      "html": "<div class=\"accordion\">\n  <details class=\"accordion__item\">\n    <summary>Strategy</summary>\n    <p class=\"accordion__body\">Consulting, analytics, and roadmapping.</p>\n  </details>\n  <details class=\"accordion__item\">\n    <summary>Creative</summary>\n    <p class=\"accordion__body\">Brand, art direction, and design.</p>\n  </details>\n</div>",
      "rules": ["Use native <details> for zero-JS disclosure.", "Summary is Medium sentence case; the +/- is generated via CSS."]
    },

    "quote": {
      "description": "Testimonial / pull quote with an accent left-rule and mono attribution.",
      "baseClass": "quote",
      "anatomy": ["quote__text (editorial, Light)", "quote__cite (mono, UPPERCASE)"],
      "html": "<blockquote class=\"quote\">\n  <p class=\"quote__text\">Domaine rebuilt our commerce stack without a dropped beat.</p>\n  <cite class=\"quote__cite\">Michal Russ · SVP Technology</cite>\n</blockquote>",
      "rules": ["Left rule uses the accent (one per view).", "Quote text is Light display; citation is mono UPPERCASE."]
    },

    "logo-grid": {
      "description": "Client / partner logo wall. Greyed and dimmed by default, full-color on hover.",
      "baseClass": "logo-grid",
      "html": "<div class=\"logo-grid\">\n  <a href=\"#\"><img src=\"/brand/client-a.svg\" alt=\"Client A\" /></a>\n  <a href=\"#\"><img src=\"/brand/client-b.svg\" alt=\"Client B\" /></a>\n</div>",
      "rules": ["Logos are grayscale + dimmed so client marks stay quiet against the neutral chrome.", "Provide alt text per logo."]
    },

    "marquee": {
      "description": "Horizontal auto-scrolling ticker (e.g. office times). Pauses for reduced-motion.",
      "baseClass": "marquee",
      "anatomy": ["marquee__track (the scrolling row)"],
      "html": "<div class=\"marquee\">\n  <div class=\"marquee__track\">\n    <span>LOS ANGELES 09:00</span><span>NEW YORK 12:00</span><span>AMSTERDAM 18:00</span>\n    <span>LOS ANGELES 09:00</span><span>NEW YORK 12:00</span><span>AMSTERDAM 18:00</span>\n  </div>\n</div>",
      "rules": ["Duplicate the item set inside the track so the -50% loop is seamless.", "Animation is disabled under prefers-reduced-motion."]
    },

    "cta-band": {
      "description": "Full-width closing prompt pairing a display headline with an action.",
      "baseClass": "cta-band",
      "anatomy": ["cta-band__title (display, UPPERCASE)", "a .btn"],
      "html": "<section class=\"cta-band\">\n  <h2 class=\"cta-band__title\">Let's work together</h2>\n  <a class=\"btn btn--primary\" href=\"/contact\">Get in touch</a>\n</section>",
      "rules": ["Title is SemiBold UPPERCASE display (casing rule a).", "Pair with one primary or accent button."]
    }
  }
}