@forumone/throughline-reference-ds 0.0.2 → 0.3.0

package/dist/manifest.json

@@ -0,0 +1,2059 @@
+{
+  "contractVersion": "1.0.0",
+  "designSystem": {
+    "name": "@forumone/throughline-reference-ds",
+    "version": "0.3.0",
+    "description": "A brand-neutral reference design system demonstrating contract compliance for Throughline."
+  },
+  "tokens": [
+    {
+      "name": "color.neutral.0",
+      "value": "#FFFFFF",
+      "category": "color"
+    },
+    {
+      "name": "color.neutral.50",
+      "value": "#FAFAFA",
+      "category": "color"
+    },
+    {
+      "name": "color.neutral.100",
+      "value": "#F4F4F5",
+      "category": "color"
+    },
+    {
+      "name": "color.neutral.200",
+      "value": "#E4E4E7",
+      "category": "color"
+    },
+    {
+      "name": "color.neutral.300",
+      "value": "#D4D4D8",
+      "category": "color"
+    },
+    {
+      "name": "color.neutral.400",
+      "value": "#A1A1AA",
+      "category": "color"
+    },
+    {
+      "name": "color.neutral.500",
+      "value": "#71717A",
+      "category": "color"
+    },
+    {
+      "name": "color.neutral.600",
+      "value": "#52525B",
+      "category": "color"
+    },
+    {
+      "name": "color.neutral.700",
+      "value": "#3F3F46",
+      "category": "color"
+    },
+    {
+      "name": "color.neutral.800",
+      "value": "#27272A",
+      "category": "color"
+    },
+    {
+      "name": "color.neutral.900",
+      "value": "#18181B",
+      "category": "color"
+    },
+    {
+      "name": "color.neutral.1000",
+      "value": "#000000",
+      "category": "color"
+    },
+    {
+      "name": "color.brand.primary",
+      "value": "#2563EB",
+      "category": "color"
+    },
+    {
+      "name": "color.brand.primaryHover",
+      "value": "#1D4ED8",
+      "category": "color"
+    },
+    {
+      "name": "color.brand.secondary",
+      "value": "#0891B2",
+      "category": "color"
+    },
+    {
+      "name": "color.text.primary",
+      "value": "#18181B",
+      "category": "color"
+    },
+    {
+      "name": "color.text.secondary",
+      "value": "#52525B",
+      "category": "color"
+    },
+    {
+      "name": "color.text.muted",
+      "value": "#71717A",
+      "category": "color"
+    },
+    {
+      "name": "color.text.inverse",
+      "value": "#FFFFFF",
+      "category": "color"
+    },
+    {
+      "name": "color.bg.primary",
+      "value": "#FFFFFF",
+      "category": "color"
+    },
+    {
+      "name": "color.bg.secondary",
+      "value": "#FAFAFA",
+      "category": "color"
+    },
+    {
+      "name": "color.bg.tertiary",
+      "value": "#F4F4F5",
+      "category": "color"
+    },
+    {
+      "name": "color.bg.inverse",
+      "value": "#18181B",
+      "category": "color"
+    },
+    {
+      "name": "color.border.default",
+      "value": "#E4E4E7",
+      "category": "color"
+    },
+    {
+      "name": "color.border.strong",
+      "value": "#D4D4D8",
+      "category": "color"
+    },
+    {
+      "name": "color.state.success",
+      "value": "#16A34A",
+      "category": "color"
+    },
+    {
+      "name": "color.state.warning",
+      "value": "#CA8A04",
+      "category": "color"
+    },
+    {
+      "name": "color.state.error",
+      "value": "#DC2626",
+      "category": "color"
+    },
+    {
+      "name": "color.state.info",
+      "value": "#2563EB",
+      "category": "color"
+    },
+    {
+      "name": "font.family.sans",
+      "value": "Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif",
+      "category": "font"
+    },
+    {
+      "name": "font.family.mono",
+      "value": "ui-monospace, \"SF Mono\", Monaco, Consolas, monospace",
+      "category": "font"
+    },
+    {
+      "name": "font.size.xs",
+      "value": "0.75rem",
+      "category": "font"
+    },
+    {
+      "name": "font.size.sm",
+      "value": "0.875rem",
+      "category": "font"
+    },
+    {
+      "name": "font.size.base",
+      "value": "1rem",
+      "category": "font"
+    },
+    {
+      "name": "font.size.lg",
+      "value": "1.125rem",
+      "category": "font"
+    },
+    {
+      "name": "font.size.xl",
+      "value": "1.25rem",
+      "category": "font"
+    },
+    {
+      "name": "font.size.2xl",
+      "value": "1.5rem",
+      "category": "font"
+    },
+    {
+      "name": "font.size.3xl",
+      "value": "1.875rem",
+      "category": "font"
+    },
+    {
+      "name": "font.size.4xl",
+      "value": "2.25rem",
+      "category": "font"
+    },
+    {
+      "name": "font.size.5xl",
+      "value": "3rem",
+      "category": "font"
+    },
+    {
+      "name": "font.size.6xl",
+      "value": "3.75rem",
+      "category": "font"
+    },
+    {
+      "name": "font.weight.normal",
+      "value": "400",
+      "category": "font"
+    },
+    {
+      "name": "font.weight.medium",
+      "value": "500",
+      "category": "font"
+    },
+    {
+      "name": "font.weight.semibold",
+      "value": "600",
+      "category": "font"
+    },
+    {
+      "name": "font.weight.bold",
+      "value": "700",
+      "category": "font"
+    },
+    {
+      "name": "line.height.tight",
+      "value": "1.15",
+      "category": "line"
+    },
+    {
+      "name": "line.height.snug",
+      "value": "1.3",
+      "category": "line"
+    },
+    {
+      "name": "line.height.normal",
+      "value": "1.5",
+      "category": "line"
+    },
+    {
+      "name": "line.height.relaxed",
+      "value": "1.65",
+      "category": "line"
+    },
+    {
+      "name": "line.height.loose",
+      "value": "1.8",
+      "category": "line"
+    },
+    {
+      "name": "letter.spacing.tight",
+      "value": "-0.025em",
+      "category": "letter"
+    },
+    {
+      "name": "letter.spacing.normal",
+      "value": "0",
+      "category": "letter"
+    },
+    {
+      "name": "letter.spacing.wide",
+      "value": "0.025em",
+      "category": "letter"
+    },
+    {
+      "name": "spacing.0",
+      "value": "0",
+      "category": "spacing"
+    },
+    {
+      "name": "spacing.px",
+      "value": "1px",
+      "category": "spacing"
+    },
+    {
+      "name": "spacing.0.5",
+      "value": "0.125rem",
+      "category": "spacing"
+    },
+    {
+      "name": "spacing.1",
+      "value": "0.25rem",
+      "category": "spacing"
+    },
+    {
+      "name": "spacing.2",
+      "value": "0.5rem",
+      "category": "spacing"
+    },
+    {
+      "name": "spacing.3",
+      "value": "0.75rem",
+      "category": "spacing"
+    },
+    {
+      "name": "spacing.4",
+      "value": "1rem",
+      "category": "spacing"
+    },
+    {
+      "name": "spacing.5",
+      "value": "1.25rem",
+      "category": "spacing"
+    },
+    {
+      "name": "spacing.6",
+      "value": "1.5rem",
+      "category": "spacing"
+    },
+    {
+      "name": "spacing.8",
+      "value": "2rem",
+      "category": "spacing"
+    },
+    {
+      "name": "spacing.10",
+      "value": "2.5rem",
+      "category": "spacing"
+    },
+    {
+      "name": "spacing.12",
+      "value": "3rem",
+      "category": "spacing"
+    },
+    {
+      "name": "spacing.16",
+      "value": "4rem",
+      "category": "spacing"
+    },
+    {
+      "name": "spacing.20",
+      "value": "5rem",
+      "category": "spacing"
+    },
+    {
+      "name": "spacing.24",
+      "value": "6rem",
+      "category": "spacing"
+    },
+    {
+      "name": "spacing.32",
+      "value": "8rem",
+      "category": "spacing"
+    },
+    {
+      "name": "spacing.40",
+      "value": "10rem",
+      "category": "spacing"
+    },
+    {
+      "name": "spacing.48",
+      "value": "12rem",
+      "category": "spacing"
+    },
+    {
+      "name": "spacing.section",
+      "value": "5rem",
+      "category": "spacing"
+    },
+    {
+      "name": "spacing.container",
+      "value": "1.5rem",
+      "category": "spacing"
+    },
+    {
+      "name": "radius.none",
+      "value": "0",
+      "category": "radius"
+    },
+    {
+      "name": "radius.sm",
+      "value": "0.25rem",
+      "category": "radius"
+    },
+    {
+      "name": "radius.md",
+      "value": "0.375rem",
+      "category": "radius"
+    },
+    {
+      "name": "radius.lg",
+      "value": "0.5rem",
+      "category": "radius"
+    },
+    {
+      "name": "radius.xl",
+      "value": "0.75rem",
+      "category": "radius"
+    },
+    {
+      "name": "radius.2xl",
+      "value": "1rem",
+      "category": "radius"
+    },
+    {
+      "name": "radius.full",
+      "value": "9999px",
+      "category": "radius"
+    },
+    {
+      "name": "layout.container.sm",
+      "value": "40rem",
+      "category": "layout"
+    },
+    {
+      "name": "layout.container.md",
+      "value": "64rem",
+      "category": "layout"
+    },
+    {
+      "name": "layout.container.lg",
+      "value": "80rem",
+      "category": "layout"
+    },
+    {
+      "name": "layout.gutter",
+      "value": "1.5rem",
+      "category": "layout"
+    },
+    {
+      "name": "layout.margin",
+      "value": "1rem",
+      "category": "layout"
+    },
+    {
+      "name": "layout.breakpoint.sm",
+      "value": "40rem",
+      "category": "layout"
+    },
+    {
+      "name": "layout.breakpoint.md",
+      "value": "48rem",
+      "category": "layout"
+    },
+    {
+      "name": "layout.breakpoint.lg",
+      "value": "64rem",
+      "category": "layout"
+    },
+    {
+      "name": "layout.breakpoint.xl",
+      "value": "80rem",
+      "category": "layout"
+    }
+  ],
+  "components": {
+    "CTASection": {
+      "name": "CTASection",
+      "category": "cta",
+      "description": "A page-bottom call to action with a headline, optional supporting copy, and one or two buttons.",
+      "intent": "Close a page with a clear next step. Use at the end of program pages, campaigns, and marketing pages where the reader has enough context to act. Do not use at the top of a page (that is Hero's job) or as a section opener (that is SectionIntro's).",
+      "composition": {
+        "placement": [
+          "page",
+          "section"
+        ],
+        "maxPerPage": 2,
+        "requiredSiblings": [],
+        "forbiddenAdjacent": [
+          "CTASection"
+        ]
+      },
+      "content": {
+        "fields": [
+          {
+            "name": "headline",
+            "type": "text",
+            "required": true,
+            "maxLength": 100,
+            "constraints": "Direct, imperative; reads like an invitation"
+          },
+          {
+            "name": "body",
+            "type": "text",
+            "required": false,
+            "maxLength": 200,
+            "constraints": "One sentence that reduces friction to clicking"
+          },
+          {
+            "name": "cta",
+            "type": "group",
+            "required": true,
+            "of": [
+              {
+                "name": "label",
+                "type": "text",
+                "required": true,
+                "maxLength": 30
+              },
+              {
+                "name": "url",
+                "type": "link",
+                "required": true
+              }
+            ]
+          },
+          {
+            "name": "secondaryCta",
+            "type": "group",
+            "required": false,
+            "of": [
+              {
+                "name": "label",
+                "type": "text",
+                "required": true,
+                "maxLength": 30
+              },
+              {
+                "name": "url",
+                "type": "link",
+                "required": true
+              }
+            ]
+          }
+        ],
+        "variants": [
+          {
+            "name": "primary",
+            "description": "Standard background",
+            "whenToUse": "Default"
+          },
+          {
+            "name": "secondary",
+            "description": "Subtle grey background",
+            "whenToUse": "Most page closes — less visual weight than Hero"
+          },
+          {
+            "name": "inverse",
+            "description": "Dark background",
+            "whenToUse": "Campaign pages or high-stakes calls to action"
+          }
+        ]
+      },
+      "tokens": {
+        "consumes": [
+          "color.bg.primary",
+          "color.bg.secondary",
+          "color.bg.inverse",
+          "color.text.primary",
+          "color.text.secondary",
+          "color.text.inverse",
+          "color.brand.primary",
+          "color.brand.primaryHover",
+          "color.border.strong",
+          "spacing.section",
+          "spacing.container",
+          "spacing.8",
+          "spacing.6",
+          "spacing.4",
+          "spacing.3",
+          "font.size.4xl",
+          "font.size.lg",
+          "font.weight.bold",
+          "font.weight.semibold",
+          "line.height.tight",
+          "line.height.relaxed",
+          "radius.md"
+        ],
+        "configurable": [
+          {
+            "prop": "background",
+            "tokenGroup": "color.bg",
+            "allowedValues": [
+              "primary",
+              "secondary",
+              "inverse"
+            ]
+          }
+        ]
+      },
+      "accessibility": {
+        "keyboardSupport": [
+          "Tab to primary CTA",
+          "Tab to secondary CTA"
+        ],
+        "screenReaderBehavior": "The headline is announced as an h2. CTAs are standard links; their label text is announced as the link name.",
+        "contentWarnings": [
+          "Avoid verb-only labels (\"Click\", \"Go\") — include the destination (\"Start building\", \"Read the docs\")"
+        ]
+      },
+      "examples": [
+        {
+          "label": "Default",
+          "intent": "Two-button page close",
+          "storyId": "cta-section--default"
+        },
+        {
+          "label": "Primary only",
+          "intent": "Single-action CTA",
+          "storyId": "cta-section--primary-only"
+        },
+        {
+          "label": "Inverse",
+          "intent": "High-contrast campaign CTA",
+          "storyId": "cta-section--inverse"
+        }
+      ],
+      "antiExamples": [
+        {
+          "label": "Three or more CTAs",
+          "why": "Too many options reduces conversion; pick the top one, put the rest on a detail page",
+          "useInstead": "One primary + optional secondary"
+        },
+        {
+          "label": "Using CTASection as a page opener",
+          "why": "Readers cannot convert without context; CTA belongs at the end",
+          "useInstead": "Hero"
+        }
+      ],
+      "behavior": {
+        "fetchesData": false,
+        "hasClientState": false,
+        "animates": false,
+        "requiresAnalytics": true
+      }
+    },
+    "Card": {
+      "name": "Card",
+      "category": "card",
+      "description": "A single content card with optional image, eyebrow, title, description, and link. Renders as a link when a link target is provided.",
+      "intent": "Surface a single piece of content in a scannable, consistent shape — a program page, a blog post, a case study, a staff bio. Cards are typically laid out in a CardGrid, but a single Card can appear alone inside a section when the content warrants singular emphasis.",
+      "composition": {
+        "placement": [
+          "section",
+          "inline"
+        ],
+        "maxPerPage": null,
+        "requiredSiblings": [],
+        "forbiddenAdjacent": []
+      },
+      "content": {
+        "fields": [
+          {
+            "name": "eyebrow",
+            "type": "text",
+            "required": false,
+            "maxLength": 30,
+            "constraints": "Short label such as the content type (\"Case study\", \"Program update\")"
+          },
+          {
+            "name": "image",
+            "type": "image",
+            "required": false,
+            "constraints": "Landscape orientation; framing works best for images that read at small sizes"
+          },
+          {
+            "name": "title",
+            "type": "text",
+            "required": true,
+            "maxLength": 100,
+            "constraints": "Sentence case; reads like a headline"
+          },
+          {
+            "name": "description",
+            "type": "text",
+            "required": false,
+            "maxLength": 200,
+            "constraints": "One to two sentences that give the reader a reason to click"
+          },
+          {
+            "name": "link",
+            "type": "group",
+            "required": false,
+            "of": [
+              {
+                "name": "label",
+                "type": "text",
+                "required": true,
+                "maxLength": 30
+              },
+              {
+                "name": "url",
+                "type": "link",
+                "required": true
+              }
+            ]
+          }
+        ],
+        "variants": [
+          {
+            "name": "linked",
+            "description": "Entire card is clickable",
+            "whenToUse": "Teaser for a single piece of content"
+          },
+          {
+            "name": "static",
+            "description": "No link; presentational only",
+            "whenToUse": "Inline informational cards (team bios, program descriptions) that do not link elsewhere"
+          }
+        ]
+      },
+      "tokens": {
+        "consumes": [
+          "color.bg.primary",
+          "color.bg.tertiary",
+          "color.text.primary",
+          "color.text.secondary",
+          "color.border.default",
+          "color.border.strong",
+          "color.brand.primary",
+          "spacing.6",
+          "spacing.2",
+          "font.size.xl",
+          "font.size.base",
+          "font.size.sm",
+          "font.size.xs",
+          "font.weight.semibold",
+          "line.height.snug",
+          "line.height.normal",
+          "letter.spacing.wide",
+          "radius.lg"
+        ]
+      },
+      "accessibility": {
+        "keyboardSupport": [
+          "When linked, the whole card is a single tab stop"
+        ],
+        "screenReaderBehavior": "Linked cards render as a single <a> element announcing the title + description + link label as one unit. Static cards render as <article> with an h3 title.",
+        "contentWarnings": [
+          "Avoid nested interactive elements inside a linked card (buttons, additional links)",
+          "Always author alt text for card images or omit the image entirely"
+        ]
+      },
+      "examples": [
+        {
+          "label": "Default",
+          "intent": "Content teaser with image and link",
+          "storyId": "card--default"
+        },
+        {
+          "label": "With eyebrow",
+          "intent": "Labeled teaser highlighting content type",
+          "storyId": "card--with-eyebrow"
+        },
+        {
+          "label": "No image",
+          "intent": "Text-only teaser for resources or downloads",
+          "storyId": "card--no-image"
+        },
+        {
+          "label": "Static",
+          "intent": "Presentational card without a link target",
+          "storyId": "card--static"
+        }
+      ],
+      "antiExamples": [
+        {
+          "label": "Nesting interactive controls inside a linked card",
+          "why": "A linked card is a single tab stop; adding buttons or additional links creates nested interactive regions that confuse assistive technology",
+          "useInstead": "Use a static card with explicit nested controls, or move secondary actions to a detail page"
+        },
+        {
+          "label": "Using Card as a navigation menu item",
+          "why": "Cards are for content teasers; site navigation belongs in a Menu or Nav component",
+          "useInstead": "A dedicated navigation component"
+        }
+      ],
+      "behavior": {
+        "fetchesData": false,
+        "hasClientState": false,
+        "animates": false,
+        "requiresAnalytics": false
+      }
+    },
+    "CardGrid": {
+      "name": "CardGrid",
+      "category": "section",
+      "description": "A responsive layout container for two, three, or four Cards per row. Reflows to fewer columns on narrow viewports.",
+      "intent": "Lay out multiple Card components inside a section. Use for program lists, blog indexes, staff directories, and any collection of similarly-shaped content. CardGrid is purely layout; it does not fetch data or filter — authors list the Cards they want.",
+      "composition": {
+        "placement": [
+          "section"
+        ],
+        "maxPerPage": null,
+        "requiredSiblings": [
+          "Card"
+        ],
+        "forbiddenAdjacent": [],
+        "allowedSlots": {
+          "children": [
+            "Card"
+          ]
+        }
+      },
+      "content": {
+        "fields": [
+          {
+            "name": "children",
+            "type": "array",
+            "required": true,
+            "constraints": "An array of Card components",
+            "of": [
+              {
+                "name": "card",
+                "type": "group",
+                "required": true
+              }
+            ]
+          }
+        ],
+        "variants": [
+          {
+            "name": "2",
+            "description": "Two columns",
+            "whenToUse": "Lists of 2-4 prominent items"
+          },
+          {
+            "name": "3",
+            "description": "Three columns",
+            "whenToUse": "Default — works for most collections"
+          },
+          {
+            "name": "4",
+            "description": "Four columns",
+            "whenToUse": "Denser lists of 8 or more short cards"
+          }
+        ]
+      },
+      "tokens": {
+        "consumes": [
+          "spacing.container",
+          "spacing.6"
+        ],
+        "configurable": [
+          {
+            "prop": "columns",
+            "tokenGroup": "layout",
+            "allowedValues": [
+              "2",
+              "3",
+              "4"
+            ]
+          }
+        ]
+      },
+      "accessibility": {
+        "keyboardSupport": [],
+        "screenReaderBehavior": "Purely visual layout. Screen readers traverse children in source order; CardGrid itself adds no ARIA.",
+        "contentWarnings": [
+          "Children must be Cards; mixing other components breaks the visual rhythm",
+          "Keep all cards roughly the same content length — dramatically unequal cards look broken"
+        ]
+      },
+      "examples": [
+        {
+          "label": "Two columns",
+          "intent": "Featured program pair",
+          "storyId": "card-grid--two-column"
+        },
+        {
+          "label": "Three columns",
+          "intent": "Standard content index",
+          "storyId": "card-grid--three-column"
+        },
+        {
+          "label": "Four columns",
+          "intent": "Dense staff directory",
+          "storyId": "card-grid--four-column"
+        }
+      ],
+      "antiExamples": [
+        {
+          "label": "Mixing Cards and non-Card children",
+          "why": "The grid assumes uniform children; mixing Stats or MediaBlocks produces broken columns",
+          "useInstead": "Group by type — one CardGrid, then the other components below"
+        },
+        {
+          "label": "Using CardGrid with a single Card",
+          "why": "A CardGrid wrapping one Card is overhead without benefit",
+          "useInstead": "Render the Card directly"
+        }
+      ],
+      "behavior": {
+        "fetchesData": false,
+        "hasClientState": false,
+        "animates": false,
+        "requiresAnalytics": false
+      }
+    },
+    "Divider": {
+      "name": "Divider",
+      "category": "utility",
+      "description": "A horizontal rule for separating sections of content.",
+      "intent": "Mark a visual pause between two blocks of content without introducing a new section header. Use sparingly — a SectionIntro is usually a better signal of a new topic. Divider is for rhythm, not hierarchy.",
+      "composition": {
+        "placement": [
+          "page",
+          "section",
+          "inline"
+        ],
+        "maxPerPage": null,
+        "requiredSiblings": [],
+        "forbiddenAdjacent": [
+          "Divider"
+        ]
+      },
+      "content": {
+        "fields": [
+          {
+            "name": "spacing",
+            "type": "select",
+            "required": false,
+            "constraints": "compact | default | spacious"
+          },
+          {
+            "name": "decorative",
+            "type": "boolean",
+            "required": false,
+            "constraints": "When true (default), the divider is aria-hidden"
+          }
+        ],
+        "variants": [
+          {
+            "name": "compact",
+            "description": "Small vertical margin",
+            "whenToUse": "Between tight pieces of content inside a list"
+          },
+          {
+            "name": "default",
+            "description": "Standard vertical margin",
+            "whenToUse": "Most cases"
+          },
+          {
+            "name": "spacious",
+            "description": "Large vertical margin",
+            "whenToUse": "Between major sections of a page"
+          }
+        ]
+      },
+      "tokens": {
+        "consumes": [
+          "color.border.default",
+          "spacing.24",
+          "spacing.12",
+          "spacing.6"
+        ],
+        "configurable": [
+          {
+            "prop": "spacing",
+            "tokenGroup": "spacing",
+            "allowedValues": [
+              "compact",
+              "default",
+              "spacious"
+            ]
+          }
+        ]
+      },
+      "accessibility": {
+        "role": "separator",
+        "keyboardSupport": [],
+        "screenReaderBehavior": "When decorative=true (default) the divider is marked aria-hidden and assistive tech skips it. When decorative=false it announces as a separator.",
+        "contentWarnings": [
+          "Do not stack two Dividers in a row"
+        ]
+      },
+      "examples": [
+        {
+          "label": "Default",
+          "intent": "Standard section break",
+          "storyId": "divider--default"
+        },
+        {
+          "label": "Compact",
+          "intent": "Between related list items",
+          "storyId": "divider--compact"
+        },
+        {
+          "label": "Spacious",
+          "intent": "Between major page sections",
+          "storyId": "divider--spacious"
+        },
+        {
+          "label": "Meaningful",
+          "intent": "Semantic section break announced by screen readers",
+          "storyId": "divider--meaningful"
+        }
+      ],
+      "antiExamples": [
+        {
+          "label": "Using Divider instead of SectionIntro",
+          "why": "Dividers carry no semantic meaning; readers cannot tell a new section has started without the accompanying headline",
+          "useInstead": "SectionIntro"
+        },
+        {
+          "label": "Decorative dividers announced to screen readers",
+          "why": "Adds noise without value",
+          "useInstead": "Leave decorative=true (the default)"
+        }
+      ],
+      "behavior": {
+        "fetchesData": false,
+        "hasClientState": false,
+        "animates": false,
+        "requiresAnalytics": false
+      }
+    },
+    "FAQ": {
+      "name": "FAQ",
+      "category": "data",
+      "description": "A disclosure-style question and answer list using native <details>/<summary> for keyboard accessibility with no JavaScript.",
+      "intent": "Answer the predictable questions readers arrive with. Use for program applications, purchase funnels, onboarding pages — anywhere the same three to ten questions come up repeatedly. Not for searchable knowledge bases (those need their own search UI).",
+      "composition": {
+        "placement": [
+          "section"
+        ],
+        "maxPerPage": 2,
+        "requiredSiblings": [],
+        "forbiddenAdjacent": []
+      },
+      "content": {
+        "fields": [
+          {
+            "name": "headline",
+            "type": "text",
+            "required": false,
+            "maxLength": 100
+          },
+          {
+            "name": "items",
+            "type": "array",
+            "required": true,
+            "constraints": "Three to ten items; more than that needs its own dedicated page",
+            "of": [
+              {
+                "name": "question",
+                "type": "text",
+                "required": true,
+                "maxLength": 200
+              },
+              {
+                "name": "answer",
+                "type": "richtext",
+                "required": true
+              }
+            ]
+          },
+          {
+            "name": "defaultOpenFirst",
+            "type": "boolean",
+            "required": false,
+            "constraints": "Set true when the first question is one readers always ask"
+          }
+        ]
+      },
+      "tokens": {
+        "consumes": [
+          "color.bg.primary",
+          "color.text.primary",
+          "color.text.secondary",
+          "color.border.default",
+          "color.border.strong",
+          "spacing.16",
+          "spacing.8",
+          "spacing.5",
+          "spacing.4",
+          "spacing.2",
+          "spacing.container",
+          "font.size.3xl",
+          "font.size.xl",
+          "font.weight.semibold",
+          "line.height.relaxed",
+          "radius.md"
+        ]
+      },
+      "accessibility": {
+        "keyboardSupport": [
+          "Tab to each question summary",
+          "Enter or Space opens/closes the current item"
+        ],
+        "screenReaderBehavior": "Each question is a <summary> inside <details>, so screen readers announce open/closed state natively. The answer becomes available to assistive tech when the item is expanded.",
+        "contentWarnings": [
+          "Keep answers short and scannable — a paragraph at most",
+          "Do not nest FAQs inside FAQs"
+        ]
+      },
+      "examples": [
+        {
+          "label": "Default",
+          "intent": "Program application FAQ",
+          "storyId": "faq--default"
+        },
+        {
+          "label": "First item open",
+          "intent": "Lead with the most common question already answered",
+          "storyId": "faq--open-first"
+        },
+        {
+          "label": "Without headline",
+          "intent": "Inline FAQ under a larger section",
+          "storyId": "faq--no-headline"
+        }
+      ],
+      "antiExamples": [
+        {
+          "label": "Twenty-question FAQ",
+          "why": "Past about ten items the disclosure pattern breaks down; readers cannot scan the list",
+          "useInstead": "Split into topic-specific FAQs across multiple pages, or build a searchable knowledge base"
+        },
+        {
+          "label": "Using FAQ to hide primary content",
+          "why": "Important content should be visible by default, not hidden behind a click",
+          "useInstead": "Prose or a proper section with a SectionIntro"
+        }
+      ],
+      "behavior": {
+        "fetchesData": false,
+        "hasClientState": true,
+        "animates": false,
+        "requiresAnalytics": false
+      }
+    },
+    "Hero": {
+      "name": "Hero",
+      "category": "hero",
+      "description": "A page opener with prominent headline, supporting copy, and primary call to action.",
+      "intent": "Establish what a page is about within the first viewport. Use when the page introduces a new topic, program, or initiative that deserves prominent editorial framing. Typically appears once at the top of a page.",
+      "composition": {
+        "placement": [
+          "page"
+        ],
+        "maxPerPage": 1,
+        "requiredSiblings": [],
+        "forbiddenAdjacent": [
+          "Hero",
+          "SectionIntro"
+        ]
+      },
+      "content": {
+        "fields": [
+          {
+            "name": "eyebrow",
+            "type": "text",
+            "required": false,
+            "maxLength": 40,
+            "constraints": "Short kicker label, typically the section or program name"
+          },
+          {
+            "name": "headline",
+            "type": "text",
+            "required": true,
+            "maxLength": 80,
+            "constraints": "Sentence case; avoid all caps; keep scannable"
+          },
+          {
+            "name": "body",
+            "type": "text",
+            "required": false,
+            "maxLength": 240,
+            "constraints": "Two to three sentences that support the headline without repeating it"
+          },
+          {
+            "name": "cta",
+            "type": "group",
+            "required": false,
+            "of": [
+              {
+                "name": "label",
+                "type": "text",
+                "required": true,
+                "maxLength": 30
+              },
+              {
+                "name": "url",
+                "type": "link",
+                "required": true
+              }
+            ]
+          },
+          {
+            "name": "secondaryCta",
+            "type": "group",
+            "required": false,
+            "of": [
+              {
+                "name": "label",
+                "type": "text",
+                "required": true,
+                "maxLength": 30
+              },
+              {
+                "name": "url",
+                "type": "link",
+                "required": true
+              }
+            ]
+          },
+          {
+            "name": "media",
+            "type": "image",
+            "required": false,
+            "constraints": "Required when variant is \"split\"; otherwise optional"
+          }
+        ],
+        "variants": [
+          {
+            "name": "default",
+            "description": "Centered text, no media",
+            "whenToUse": "Editorial pages and mission statements where content carries the weight"
+          },
+          {
+            "name": "compact",
+            "description": "Reduced vertical padding",
+            "whenToUse": "Subpages where the hero is contextual framing rather than primary introduction"
+          },
+          {
+            "name": "split",
+            "description": "Text on one side, media on the other",
+            "whenToUse": "Program pages or anywhere a single supporting image carries meaning"
+          }
+        ]
+      },
+      "tokens": {
+        "consumes": [
+          "color.bg.primary",
+          "color.bg.secondary",
+          "color.bg.inverse",
+          "color.text.primary",
+          "color.text.secondary",
+          "color.text.inverse",
+          "color.brand.primary",
+          "color.brand.primaryHover",
+          "color.border.strong",
+          "spacing.section",
+          "spacing.container",
+          "spacing.12",
+          "spacing.8",
+          "spacing.6",
+          "spacing.4",
+          "spacing.3",
+          "font.size.5xl",
+          "font.size.4xl",
+          "font.size.xl",
+          "font.size.sm",
+          "font.weight.bold",
+          "font.weight.semibold",
+          "line.height.tight",
+          "line.height.relaxed",
+          "letter.spacing.tight",
+          "letter.spacing.wide",
+          "radius.md",
+          "radius.lg"
+        ],
+        "configurable": [
+          {
+            "prop": "background",
+            "tokenGroup": "color.bg",
+            "allowedValues": [
+              "primary",
+              "secondary",
+              "inverse"
+            ]
+          }
+        ]
+      },
+      "accessibility": {
+        "keyboardSupport": [
+          "Tab to primary CTA",
+          "Tab to secondary CTA"
+        ],
+        "screenReaderBehavior": "The headline is announced as an h1 element. The eyebrow is read as supplementary text before the headline. Decorative media is treated as presentational when the alt attribute is empty.",
+        "contentWarnings": [
+          "Avoid text overlay on busy images",
+          "Ensure sufficient color contrast between headline and background"
+        ]
+      },
+      "examples": [
+        {
+          "label": "Default",
+          "intent": "Standard editorial page opener with CTA",
+          "storyId": "hero--default"
+        },
+        {
+          "label": "Program landing page",
+          "intent": "Introduce a new fellowship program",
+          "storyId": "hero--program-landing"
+        },
+        {
+          "label": "Compact subpage",
+          "intent": "Open a secondary page with light framing",
+          "storyId": "hero--compact"
+        },
+        {
+          "label": "Split with media",
+          "intent": "Open a content page with supporting visual context",
+          "storyId": "hero--split"
+        }
+      ],
+      "antiExamples": [
+        {
+          "label": "Multiple heroes on one page",
+          "why": "A page should have a single primary opener; multiple heroes flatten hierarchy and confuse screen readers with multiple h1s",
+          "useInstead": "Use SectionIntro for secondary section headers"
+        },
+        {
+          "label": "Hero at the bottom of a page",
+          "why": "Heroes are editorial openers, not closers",
+          "useInstead": "Use CTASection for page-bottom calls to action"
+        },
+        {
+          "label": "Split variant without media",
+          "why": "The split layout allocates half the space for media; leaving it empty creates awkward whitespace",
+          "useInstead": "Use the default variant when media is not available"
+        }
+      ],
+      "behavior": {
+        "fetchesData": false,
+        "hasClientState": false,
+        "animates": false,
+        "requiresAnalytics": false
+      }
+    },
+    "MediaBlock": {
+      "name": "MediaBlock",
+      "category": "media",
+      "description": "A full-width image or video block with optional caption and configurable aspect ratio.",
+      "intent": "Insert a single piece of featured media inside a content flow. Use for editorial imagery that deserves its own moment — a photograph illustrating a story, a portrait accompanying a quote, or a video introducing a program. Not a gallery; for multiple items compose a custom layout.",
+      "composition": {
+        "placement": [
+          "section"
+        ],
+        "maxPerPage": null,
+        "requiredSiblings": [],
+        "forbiddenAdjacent": []
+      },
+      "content": {
+        "fields": [
+          {
+            "name": "media",
+            "type": "group",
+            "required": true,
+            "of": [
+              {
+                "name": "type",
+                "type": "select",
+                "required": true
+              },
+              {
+                "name": "url",
+                "type": "link",
+                "required": true
+              },
+              {
+                "name": "alt",
+                "type": "text",
+                "required": false,
+                "maxLength": 200
+              },
+              {
+                "name": "poster",
+                "type": "image",
+                "required": false
+              },
+              {
+                "name": "ariaLabel",
+                "type": "text",
+                "required": false,
+                "maxLength": 120
+              }
+            ]
+          },
+          {
+            "name": "caption",
+            "type": "text",
+            "required": false,
+            "maxLength": 200,
+            "constraints": "One sentence that adds context the image alone cannot carry"
+          }
+        ],
+        "variants": [
+          {
+            "name": "16:9",
+            "description": "Cinematic widescreen",
+            "whenToUse": "Most photographs and video"
+          },
+          {
+            "name": "4:3",
+            "description": "Classic television ratio",
+            "whenToUse": "Vintage or squared compositions"
+          },
+          {
+            "name": "square",
+            "description": "1:1",
+            "whenToUse": "Portraits or product shots"
+          },
+          {
+            "name": "auto",
+            "description": "Media's native ratio",
+            "whenToUse": "Diagrams, infographics, or tall images"
+          }
+        ]
+      },
+      "tokens": {
+        "consumes": [
+          "color.bg.tertiary",
+          "color.text.secondary",
+          "spacing.container",
+          "spacing.3",
+          "font.size.sm",
+          "radius.lg"
+        ]
+      },
+      "accessibility": {
+        "keyboardSupport": [
+          "Video: native play/pause/seek controls"
+        ],
+        "screenReaderBehavior": "Images announce their alt text. Videos announce their aria-label (or fall back to native labeling). Captions are associated with the figure semantically via <figcaption>.",
+        "contentWarnings": [
+          "Always author alt text for images that carry information; use empty alt (\"\") for purely decorative media",
+          "Videos with spoken content must ship captions"
+        ]
+      },
+      "examples": [
+        {
+          "label": "Image with caption",
+          "intent": "Editorial photograph",
+          "storyId": "media-block--image"
+        },
+        {
+          "label": "Square crop",
+          "intent": "Portrait or product shot",
+          "storyId": "media-block--square"
+        },
+        {
+          "label": "Video",
+          "intent": "Introductory video with poster",
+          "storyId": "media-block--video"
+        }
+      ],
+      "antiExamples": [
+        {
+          "label": "Stacking three MediaBlocks for a gallery",
+          "why": "MediaBlock is a spotlight element; stacking them creates awkward repetition without true gallery ergonomics",
+          "useInstead": "Build a dedicated gallery component in your client DS"
+        },
+        {
+          "label": "Decorative image with invented alt text",
+          "why": "Screen readers read the alt text; inventing \"people smiling\" for decorative media wastes listener attention",
+          "useInstead": "Use alt=\"\" for purely decorative media"
+        }
+      ],
+      "behavior": {
+        "fetchesData": false,
+        "hasClientState": false,
+        "animates": false,
+        "requiresAnalytics": false
+      }
+    },
+    "Prose": {
+      "name": "Prose",
+      "category": "section",
+      "description": "A typographic container for long-form content — articles, policies, documentation, any flowing prose with headings and lists.",
+      "intent": "Wrap free-flowing editorial content with sensible typography defaults (heading hierarchy, paragraph rhythm, list styling, blockquote treatment). Use any time you have a block of content authored as rich text and you want it to read well without styling each element individually.",
+      "composition": {
+        "placement": [
+          "section"
+        ],
+        "maxPerPage": null,
+        "requiredSiblings": [],
+        "forbiddenAdjacent": []
+      },
+      "content": {
+        "fields": [
+          {
+            "name": "children",
+            "type": "richtext",
+            "required": true,
+            "constraints": "Rich text content authored in the CMS; can include h2-h4, paragraphs, lists, blockquotes, links"
+          }
+        ],
+        "variants": [
+          {
+            "name": "default",
+            "description": "Standard reading rhythm",
+            "whenToUse": "Most articles and editorial content"
+          },
+          {
+            "name": "compact",
+            "description": "Tighter spacing and line height",
+            "whenToUse": "Denser reference content, product docs, or reading-room pages"
+          },
+          {
+            "name": "spacious",
+            "description": "Looser spacing and line height",
+            "whenToUse": "Long-form essays where the reader benefits from breathing room"
+          }
+        ]
+      },
+      "tokens": {
+        "consumes": [
+          "color.text.primary",
+          "color.text.secondary",
+          "color.border.strong",
+          "color.brand.primary",
+          "spacing.container",
+          "spacing.10",
+          "spacing.8",
+          "spacing.6",
+          "spacing.5",
+          "spacing.4",
+          "spacing.2",
+          "font.size.3xl",
+          "font.size.2xl",
+          "font.size.xl",
+          "font.size.lg",
+          "font.weight.semibold",
+          "line.height.snug",
+          "line.height.normal",
+          "line.height.relaxed",
+          "line.height.loose"
+        ]
+      },
+      "accessibility": {
+        "keyboardSupport": [],
+        "screenReaderBehavior": "Children render as their native semantic HTML (h2, h3, p, ul, ol, blockquote, a). Prose adds no ARIA beyond what the authored content provides.",
+        "contentWarnings": [
+          "Author h2 and below inside Prose; never h1 (the page already has one)",
+          "Use real list markup, not paragraphs with bullets"
+        ]
+      },
+      "examples": [
+        {
+          "label": "Default",
+          "intent": "Standard article body",
+          "storyId": "prose--default"
+        },
+        {
+          "label": "Compact",
+          "intent": "Reference or documentation page",
+          "storyId": "prose--compact"
+        },
+        {
+          "label": "Spacious",
+          "intent": "Long-form essay or manifesto",
+          "storyId": "prose--spacious"
+        }
+      ],
+      "antiExamples": [
+        {
+          "label": "Nesting Prose inside Prose",
+          "why": "Creates duplicate typography scales and unpredictable spacing",
+          "useInstead": "Use a single Prose at the outermost level"
+        },
+        {
+          "label": "Putting interactive components inside Prose",
+          "why": "Prose is for flowing editorial content; components like Stats or CardGrid have their own layout",
+          "useInstead": "Close the Prose, render the component, open another Prose for continuing text"
+        }
+      ],
+      "behavior": {
+        "fetchesData": false,
+        "hasClientState": false,
+        "animates": false,
+        "requiresAnalytics": false
+      }
+    },
+    "Quote": {
+      "name": "Quote",
+      "category": "media",
+      "description": "A pullquote or testimonial rendered as a <figure> with a <blockquote> and optional figcaption attribution.",
+      "intent": "Surface a single human-scale quotation — a testimonial, a pullquote, a foundational claim. Use sparingly; quotes lose weight when stacked. The attribution is optional because some quotes stand on their own without a named author.",
+      "composition": {
+        "placement": [
+          "section"
+        ],
+        "maxPerPage": null,
+        "requiredSiblings": [],
+        "forbiddenAdjacent": [
+          "Quote"
+        ]
+      },
+      "content": {
+        "fields": [
+          {
+            "name": "quote",
+            "type": "text",
+            "required": true,
+            "maxLength": 400,
+            "constraints": "One or two sentences; longer belongs in Prose"
+          },
+          {
+            "name": "attribution",
+            "type": "group",
+            "required": false,
+            "of": [
+              {
+                "name": "name",
+                "type": "text",
+                "required": true,
+                "maxLength": 80
+              },
+              {
+                "name": "role",
+                "type": "text",
+                "required": false,
+                "maxLength": 100
+              },
+              {
+                "name": "avatar",
+                "type": "image",
+                "required": false
+              }
+            ]
+          }
+        ],
+        "variants": [
+          {
+            "name": "default",
+            "description": "Standard size",
+            "whenToUse": "Most testimonials and pullquotes"
+          },
+          {
+            "name": "large",
+            "description": "Oversized display treatment",
+            "whenToUse": "Editorial openers or mission-page quotes that carry real weight"
+          }
+        ]
+      },
+      "tokens": {
+        "consumes": [
+          "color.text.primary",
+          "color.text.secondary",
+          "spacing.10",
+          "spacing.6",
+          "spacing.3",
+          "spacing.container",
+          "font.size.4xl",
+          "font.size.2xl",
+          "font.size.sm",
+          "font.weight.semibold",
+          "line.height.tight",
+          "line.height.snug",
+          "radius.full"
+        ],
+        "configurable": [
+          {
+            "prop": "size",
+            "tokenGroup": "layout",
+            "allowedValues": [
+              "default",
+              "large"
+            ]
+          }
+        ]
+      },
+      "accessibility": {
+        "keyboardSupport": [],
+        "screenReaderBehavior": "Rendered as <figure> containing a <blockquote>; attribution is read as the figcaption. Decorative quotation marks are generated via CSS and are not in the accessible name.",
+        "contentWarnings": [
+          "Do not quote someone without permission",
+          "Use their actual words; a paraphrase inside quotation marks misrepresents them"
+        ]
+      },
+      "examples": [
+        {
+          "label": "Default",
+          "intent": "Testimonial with role",
+          "storyId": "quote--default"
+        },
+        {
+          "label": "With avatar",
+          "intent": "Testimonial with portrait",
+          "storyId": "quote--with-avatar"
+        },
+        {
+          "label": "Large",
+          "intent": "Editorial mission statement",
+          "storyId": "quote--large"
+        },
+        {
+          "label": "Without attribution",
+          "intent": "Aphoristic pullquote",
+          "storyId": "quote--without-attribution"
+        }
+      ],
+      "antiExamples": [
+        {
+          "label": "Four quotes in a row",
+          "why": "Quote is meant to punctuate content, not fill a page",
+          "useInstead": "Pick the strongest quote; move the rest into Prose or a CardGrid of Cards"
+        },
+        {
+          "label": "Using Quote for product blurbs",
+          "why": "Quote implies a real human author; marketing copy without a source undermines trust",
+          "useInstead": "CTASection or Prose"
+        }
+      ],
+      "behavior": {
+        "fetchesData": false,
+        "hasClientState": false,
+        "animates": false,
+        "requiresAnalytics": false
+      }
+    },
+    "SectionIntro": {
+      "name": "SectionIntro",
+      "category": "section",
+      "description": "A section opener that establishes what the next block of content is about without competing with the page hero.",
+      "intent": "Introduce a new section inside a page. Use when you need an h2-level heading with optional eyebrow and supporting body copy, such as \"Our approach\", \"Recent work\", or \"What we believe\". Pairs with any content block below it.",
+      "composition": {
+        "placement": [
+          "section"
+        ],
+        "maxPerPage": null,
+        "requiredSiblings": [],
+        "forbiddenAdjacent": [
+          "SectionIntro"
+        ]
+      },
+      "content": {
+        "fields": [
+          {
+            "name": "eyebrow",
+            "type": "text",
+            "required": false,
+            "maxLength": 40,
+            "constraints": "Short kicker label above the headline"
+          },
+          {
+            "name": "headline",
+            "type": "text",
+            "required": true,
+            "maxLength": 100,
+            "constraints": "Sentence case; scannable; reads like a chapter title"
+          },
+          {
+            "name": "body",
+            "type": "text",
+            "required": false,
+            "maxLength": 240,
+            "constraints": "One or two sentences that set up the section"
+          }
+        ],
+        "variants": [
+          {
+            "name": "start",
+            "description": "Left-aligned",
+            "whenToUse": "Default — pairs with left-aligned content blocks below"
+          },
+          {
+            "name": "center",
+            "description": "Center-aligned",
+            "whenToUse": "Landing pages and marketing sections where the intro anchors a centered layout"
+          }
+        ]
+      },
+      "tokens": {
+        "consumes": [
+          "color.text.primary",
+          "color.text.secondary",
+          "spacing.container",
+          "spacing.3",
+          "spacing.2",
+          "font.size.3xl",
+          "font.size.lg",
+          "font.size.sm",
+          "font.weight.semibold",
+          "line.height.snug",
+          "line.height.relaxed",
+          "letter.spacing.wide"
+        ]
+      },
+      "accessibility": {
+        "role": "region",
+        "keyboardSupport": [],
+        "screenReaderBehavior": "The headline is announced as an h2 element. The eyebrow is supplementary text read before the headline. No interactive controls.",
+        "contentWarnings": [
+          "Do not use SectionIntro before Hero on the same page — the page must start with a single h1"
+        ]
+      },
+      "examples": [
+        {
+          "label": "Default",
+          "intent": "Introduce a section inside a content page",
+          "storyId": "section-intro--default"
+        },
+        {
+          "label": "Centered",
+          "intent": "Anchor a centered marketing section",
+          "storyId": "section-intro--centered"
+        },
+        {
+          "label": "Headline only",
+          "intent": "Minimal section divider with just a heading",
+          "storyId": "section-intro--headline-only"
+        }
+      ],
+      "antiExamples": [
+        {
+          "label": "Using SectionIntro as the page opener",
+          "why": "SectionIntro renders h2; a page should begin with an h1 for accessibility and SEO",
+          "useInstead": "Hero"
+        },
+        {
+          "label": "Stacking two SectionIntros with no content between them",
+          "why": "Creates a visual and semantic duplicate that signals nothing new",
+          "useInstead": "Merge into a single SectionIntro with a longer body"
+        }
+      ],
+      "behavior": {
+        "fetchesData": false,
+        "hasClientState": false,
+        "animates": false,
+        "requiresAnalytics": false
+      }
+    },
+    "Spacer": {
+      "name": "Spacer",
+      "category": "utility",
+      "description": "An explicit vertical spacing block that inserts a token-sized gap between adjacent components.",
+      "intent": "Add breathing room between two components when neither component's own margins produce the right rhythm. Prefer component-owned spacing when possible; reach for Spacer only when layout composition requires it, such as between Stats and a following CardGrid on a dense page.",
+      "composition": {
+        "placement": [
+          "page",
+          "section"
+        ],
+        "maxPerPage": null,
+        "requiredSiblings": [],
+        "forbiddenAdjacent": [
+          "Spacer"
+        ]
+      },
+      "content": {
+        "fields": [
+          {
+            "name": "size",
+            "type": "select",
+            "required": false,
+            "constraints": "xs | sm | md | lg | xl"
+          }
+        ],
+        "variants": [
+          {
+            "name": "xs",
+            "description": "Extra small",
+            "whenToUse": "Fine-grained adjustment"
+          },
+          {
+            "name": "sm",
+            "description": "Small",
+            "whenToUse": "Between closely related elements"
+          },
+          {
+            "name": "md",
+            "description": "Medium (default)",
+            "whenToUse": "Most cases"
+          },
+          {
+            "name": "lg",
+            "description": "Large",
+            "whenToUse": "Between page sections that need visual separation"
+          },
+          {
+            "name": "xl",
+            "description": "Extra large",
+            "whenToUse": "Major visual pauses on long landing pages"
+          }
+        ]
+      },
+      "tokens": {
+        "consumes": [
+          "spacing.2",
+          "spacing.4",
+          "spacing.8",
+          "spacing.16",
+          "spacing.24"
+        ],
+        "configurable": [
+          {
+            "prop": "size",
+            "tokenGroup": "spacing",
+            "allowedValues": [
+              "xs",
+              "sm",
+              "md",
+              "lg",
+              "xl"
+            ]
+          }
+        ]
+      },
+      "accessibility": {
+        "keyboardSupport": [],
+        "screenReaderBehavior": "Spacer is a presentational div marked aria-hidden. Assistive technology skips it entirely.",
+        "contentWarnings": [
+          "Do not use Spacer to replace paragraph margins inside Prose — the typography already handles that"
+        ]
+      },
+      "examples": [
+        {
+          "label": "Small",
+          "intent": "Subtle gap",
+          "storyId": "spacer--small"
+        },
+        {
+          "label": "Medium",
+          "intent": "Standard gap",
+          "storyId": "spacer--medium"
+        },
+        {
+          "label": "Large",
+          "intent": "Major section break",
+          "storyId": "spacer--large"
+        }
+      ],
+      "antiExamples": [
+        {
+          "label": "Stacking multiple Spacers to achieve a custom size",
+          "why": "Nesting spacers bypasses the token scale and makes spacing unauditable",
+          "useInstead": "Pick the nearest size in the scale or adjust the neighboring components"
+        },
+        {
+          "label": "Using Spacer for semantic breaks",
+          "why": "Spacer has no semantic meaning; readers cannot tell one section has ended and another begun",
+          "useInstead": "Divider (decorative=false) or SectionIntro"
+        }
+      ],
+      "behavior": {
+        "fetchesData": false,
+        "hasClientState": false,
+        "animates": false,
+        "requiresAnalytics": false
+      }
+    },
+    "Stats": {
+      "name": "Stats",
+      "category": "data",
+      "description": "A numerical data display with two to four stat items, each with a value, a label, and an optional description.",
+      "intent": "Surface a small set of headline metrics in a scannable row. Use for impact reports, program highlights, and annual summaries where numbers tell the story. Not appropriate for dense tabular data — that needs a real table component.",
+      "composition": {
+        "placement": [
+          "section"
+        ],
+        "maxPerPage": null,
+        "requiredSiblings": [],
+        "forbiddenAdjacent": []
+      },
+      "content": {
+        "fields": [
+          {
+            "name": "eyebrow",
+            "type": "text",
+            "required": false,
+            "maxLength": 40
+          },
+          {
+            "name": "headline",
+            "type": "text",
+            "required": false,
+            "maxLength": 100
+          },
+          {
+            "name": "items",
+            "type": "array",
+            "required": true,
+            "constraints": "Two to four items",
+            "of": [
+              {
+                "name": "value",
+                "type": "text",
+                "required": true,
+                "maxLength": 20
+              },
+              {
+                "name": "label",
+                "type": "text",
+                "required": true,
+                "maxLength": 60
+              },
+              {
+                "name": "description",
+                "type": "text",
+                "required": false,
+                "maxLength": 80
+              }
+            ]
+          }
+        ]
+      },
+      "tokens": {
+        "consumes": [
+          "color.text.primary",
+          "color.text.secondary",
+          "color.brand.primary",
+          "spacing.16",
+          "spacing.10",
+          "spacing.8",
+          "spacing.3",
+          "spacing.2",
+          "spacing.1",
+          "spacing.container",
+          "font.size.5xl",
+          "font.size.3xl",
+          "font.size.sm",
+          "font.weight.bold",
+          "font.weight.semibold",
+          "line.height.tight",
+          "letter.spacing.wide"
+        ]
+      },
+      "accessibility": {
+        "keyboardSupport": [],
+        "screenReaderBehavior": "Statistics are rendered as a <dl> with <dt>/<dd> pairs. Screen readers traverse each value + label + description as a definition list entry.",
+        "contentWarnings": [
+          "Keep values concise — \"4,200\" instead of \"4,200,000,000 dollars\"",
+          "Never invent numbers to fill the grid; use the real count even if unequal"
+        ]
+      },
+      "examples": [
+        {
+          "label": "Three stats",
+          "intent": "Annual report highlights",
+          "storyId": "stats--three-stats"
+        },
+        {
+          "label": "Two stats",
+          "intent": "Minimal impact summary",
+          "storyId": "stats--two-stats"
+        },
+        {
+          "label": "Four stats",
+          "intent": "Dense overview",
+          "storyId": "stats--four-stats"
+        }
+      ],
+      "antiExamples": [
+        {
+          "label": "Five or more stats",
+          "why": "Beyond four items the layout cramps on mobile and the individual numbers lose impact",
+          "useInstead": "Pick the top four; move the rest to a full report page"
+        },
+        {
+          "label": "Paragraph-length values",
+          "why": "Stats are designed for at-a-glance reading; long values overwhelm the layout",
+          "useInstead": "Use Prose for extended narrative"
+        }
+      ],
+      "behavior": {
+        "fetchesData": false,
+        "hasClientState": false,
+        "animates": false,
+        "requiresAnalytics": false
+      }
+    }
+  },
+  "build": {
+    "timestamp": "2026-08-12T16:16:55.507Z",
+    "source": "scripts/build-manifest.ts"
+  }
+}