{
 "version": "2",
 "notes": "HTML is exactly what /design/ renders. Load order: base.css, tokens.css, themes.css, components.css.",
 "components": [
  {
   "name": "card",
   "class": "c-card",
   "element": "article",
   "anatomy": "c-pill (optional), heading, body, c-card__foot (optional, pinned to bottom)",
   "variants": {
    "c-card--lead": "the one current thing; 3px accent edge",
    "c-card--media": "no padding, media clipped, body in c-card__body",
    "c-card--quiet": "sunken, no shadow"
   },
   "tokens": [
    "--bg-raised",
    "--bg-sunken",
    "--r-lg",
    "--s-5",
    "--shadow-1",
    "--border",
    "--accent"
   ],
   "a11y": "One heading per card. If the whole card is a link, use only one <a>. No fixed min-height.",
   "html": "<article class=\"c-card\"><span class=\"c-pill\"><span class=\"c-pill__dot\"></span>Now</span><h3>Card title</h3><p>Short supporting text.</p><a class=\"c-card__foot\" href=\"#\">Read more</a></article>",
   "examples": [
    {
     "label": "Base",
     "html": "<article class=\"c-card\"><span class=\"c-pill\"><span class=\"c-pill__dot\"></span>Now</span><h3>Card title</h3><p>Short supporting text.</p><a class=\"c-card__foot\" href=\"#\">Read more</a></article>"
    },
    {
     "label": "Lead",
     "html": "<article class=\"c-card c-card--lead\"><h3>The current thing</h3><p>One per screen.</p></article>"
    },
    {
     "label": "Media",
     "html": "<article class=\"c-card c-card--media\"><div class=\"ds-ph\" role=\"img\" aria-label=\"Placeholder image\">16:9 image</div><div class=\"c-card__body\"><h3>Media card</h3><p>Image clipped to the card.</p></div></article>"
    },
    {
     "label": "Quiet",
     "html": "<article class=\"c-card c-card--quiet\"><h3>Quiet card</h3><p>Sunken, no shadow.</p></article>"
    }
   ]
  },
  {
   "name": "button",
   "class": "c-btn",
   "element": "a|button",
   "anatomy": "c-btn__chip (icon on accent), label",
   "variants": {
    "(base)": "ink pill (light), dark pill (dark) with accent chip",
    "c-btn--accent": "accent fill",
    "c-btn--ghost": "outline only"
   },
   "tokens": [
    "--fg",
    "--bg-page",
    "--pill",
    "--accent",
    "--on-accent",
    "--r",
    "--r-sm"
   ],
   "a11y": "At least 44×44px. Visible :focus-visible ring ≥3:1. Text on accent ≥4.5:1.",
   "html": "<a class=\"c-btn\" href=\"#\"><span class=\"c-btn__chip\" aria-hidden=\"true\">→</span>Primary</a>",
   "examples": [
    {
     "label": "Base",
     "html": "<a class=\"c-btn\" href=\"#\"><span class=\"c-btn__chip\" aria-hidden=\"true\">→</span>Primary</a>"
    },
    {
     "label": "Accent",
     "html": "<a class=\"c-btn c-btn--accent\" href=\"#\">Accent</a>"
    },
    {
     "label": "Ghost",
     "html": "<a class=\"c-btn c-btn--ghost\" href=\"#\">Ghost</a>"
    }
   ]
  },
  {
   "name": "pill",
   "class": "c-pill",
   "element": "span",
   "anatomy": "c-pill__dot (optional), text",
   "variants": {},
   "tokens": [
    "--bg-sunken",
    "--fg-2",
    "--accent",
    "--r-sm",
    "--t-xs"
   ],
   "a11y": "Not interactive. The dot is decorative.",
   "html": "<span class=\"c-pill\"><span class=\"c-pill__dot\"></span>Label</span>",
   "examples": [
    {
     "label": "Pill",
     "html": "<span class=\"c-pill\"><span class=\"c-pill__dot\"></span>Label</span>"
    }
   ]
  },
  {
   "name": "chip",
   "class": "c-chip",
   "element": "button",
   "anatomy": "text",
   "variants": {
    "[aria-pressed=true]": "selected"
   },
   "tokens": [
    "--fg",
    "--bg-page",
    "--fg-2",
    "--r-pill",
    "--border-strong"
   ],
   "a11y": "State via aria-pressed. 44px tap height on touch.",
   "html": "<button class=\"c-chip\" aria-pressed=\"true\">Selected</button> <button class=\"c-chip\" aria-pressed=\"false\">Filter</button>",
   "examples": [
    {
     "label": "Chips",
     "html": "<button class=\"c-chip\" aria-pressed=\"true\">Selected</button> <button class=\"c-chip\" aria-pressed=\"false\">Filter</button>"
    }
   ]
  },
  {
   "name": "tag",
   "class": "c-tag",
   "element": "span",
   "anatomy": "text",
   "variants": {
    "c-tag--pixel": "Geist Pixel label; sparingly"
   },
   "tokens": [
    "--accent",
    "--on-accent",
    "--r-sm",
    "--t-xs",
    "--pixel"
   ],
   "a11y": "Text on accent ≥4.5:1. Never the only signal of state.",
   "html": "<span class=\"c-tag\">New</span> <span class=\"c-tag c-tag--pixel\">BETA</span>",
   "examples": [
    {
     "label": "Tags",
     "html": "<span class=\"c-tag\">New</span> <span class=\"c-tag c-tag--pixel\">BETA</span>"
    }
   ]
  },
  {
   "name": "section",
   "class": "c-section",
   "element": "section",
   "anatomy": "c-section__head, content",
   "variants": {
    "c-section--tight": "smaller block padding"
   },
   "tokens": [
    "--s-8",
    "--s-6",
    "--s-5"
   ],
   "a11y": "Has a heading or aria-label.",
   "html": "<section class=\"c-section c-section--tight\"><div class=\"c-section__head\"><h2>Section title</h2></div><p>Section content.</p></section>",
   "examples": [
    {
     "label": "Section",
     "html": "<section class=\"c-section c-section--tight\"><div class=\"c-section__head\"><h2>Section title</h2></div><p>Section content.</p></section>"
    }
   ]
  },
  {
   "name": "sticky-bar",
   "class": "c-sticky",
   "element": "div",
   "anatomy": "controls",
   "variants": {},
   "tokens": [
    "--chrome",
    "--line",
    "--hh",
    "--s-2"
   ],
   "a11y": "Solid, never translucent. top = header height (--hh). Anchors need scroll-margin-top.",
   "html": "<div class=\"c-sticky\" style=\"position:static\"><div style=\"display:flex;gap:8px;padding-inline:12px\"><button class=\"c-chip\" aria-pressed=\"true\">All</button><button class=\"c-chip\" aria-pressed=\"false\">Notes</button></div></div>",
   "examples": [
    {
     "label": "Sticky bar",
     "html": "<div class=\"c-sticky\" style=\"position:static\"><div style=\"display:flex;gap:8px;padding-inline:12px\"><button class=\"c-chip\" aria-pressed=\"true\">All</button><button class=\"c-chip\" aria-pressed=\"false\">Notes</button></div></div>"
    }
   ]
  },
  {
   "name": "plate",
   "class": "c-plate",
   "element": "figure",
   "anatomy": "img with width/height + alt, figcaption (optional)",
   "variants": {},
   "tokens": [
    "--bg-raised",
    "--r-lg",
    "--shadow-1",
    "--border"
   ],
   "a11y": "Meaningful alt. Lazy-load below the fold.",
   "html": "<figure class=\"c-plate\"><div class=\"ds-ph\" role=\"img\" aria-label=\"Placeholder image\">16:9 image</div><figcaption>Caption</figcaption></figure>",
   "examples": [
    {
     "label": "Plate",
     "html": "<figure class=\"c-plate\"><div class=\"ds-ph\" role=\"img\" aria-label=\"Placeholder image\">16:9 image</div><figcaption>Caption</figcaption></figure>"
    }
   ]
  }
 ]
}