{
  "version": "0.2.0-preview.1",
  "content_digest": "70ac710f4d22dce040e7ac593379ba8aca9dcb59a0b9c0f839819cae0e2bb721",
  "status": "preview",
  "authority": {
    "repository": "cloakedinc/design",
    "path": "packages/design-system",
    "catalog": "packages/design-system/catalog.json",
    "status": "preview"
  },
  "provenance": {
    "repo": "cloakedinc/automation",
    "commit": "f96f416e1c3bfbfaffcd155a88b87b18b8bb25f1",
    "path": "packages/design-system",
    "imported_spec_status": "approved"
  },
  "adaptations": [
    {
      "id": "button-content-gap",
      "status": "preview",
      "description": "Use the specification's 4px content gap instead of the inherited 8px implementation gap."
    },
    {
      "id": "keyboard-focus",
      "status": "preview",
      "description": "Add visible Button and Input keyboard focus and an overridable inset focus default for shared button resets, including FAQ cards and ListItem rows."
    },
    {
      "id": "supporting-text-contrast",
      "status": "preview",
      "description": "Map light secondary text to the existing grey-04-strong primitive for readable helper text on white and cream."
    },
    {
      "id": "danger-text-contrast",
      "status": "preview",
      "description": "Separate readable danger text/borders from destructive fills; preserve the primary danger-button fill and label pair."
    },
    {
      "id": "preview-status",
      "status": "preview",
      "description": "Local components, specs and token adaptations await human sign-off; upstream approved status is provenance only."
    },
    {
      "id": "motion-comparison-accessibility",
      "status": "preview",
      "description": "Preserve the original MotionShowcase comparisons while requiring explicit replay, responding to live reduced-motion changes, and keeping duration tracks usable on small screens."
    },
    {
      "id": "list-item-ownership",
      "status": "preview",
      "description": "List owns listitem wrappers for its content rows, while section labels stay outside the row count and standalone rows retain their existing semantics."
    },
    {
      "id": "card-delta-text-contrast",
      "status": "preview",
      "description": "Mix Card.Delta foregrounds from 60% existing tone solid and 40% primary text for readable contrast in both themes; preserve the four original tone fills."
    },
    {
      "id": "carousel-keyboard-access",
      "status": "preview",
      "description": "Keep all native-scrolling carousel slide controls exposed to assistive technology and keyboard navigation; pause autoplay while focus is inside the carousel."
    }
  ],
  "id": "typography",
  "name": "Typography",
  "summary": "Give the message a clear hierarchy. Compare the real type styles, try your own words, and see each role in context.",
  "demo": "foundation-typography",
  "guidance": [
    {
      "title": "Use the whole style",
      "body": "Keep family, weight, size, line height, and letter spacing together. Changing only the size creates a different style from the one shown here."
    },
    {
      "title": "Give each family a job",
      "body": "The current web sans stack follows the platform system font. Simula supplies the editorial serif, and mono gives identifiers a consistent rhythm. Documentation chrome has its own brand sans treatment."
    },
    {
      "title": "Let real content set the test",
      "body": "Try long headings, short labels, and identifiers. Allow wrapping, preserve text scaling, and check narrow layouts rather than truncating meaningful content to fit a specimen."
    }
  ],
  "source": "packages/design-system/foundations.json",
  "tokens": [
    {
      "name": "--cds-font-sans",
      "value": "-apple-system, BlinkMacSystemFont, 'SF Pro', system-ui, sans-serif",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-font-mono",
      "value": "ui-monospace, 'SF Mono', Menlo, monospace",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-font-serif",
      "value": "'Simula', Georgia, serif",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-display-1-family",
      "value": "var(--cds-font-sans)",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-display-1-weight",
      "value": "400",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-display-1-size",
      "value": "4.5rem",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-display-1-line-height",
      "value": "1.1",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-display-1-letter-spacing",
      "value": "0",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-display-2-family",
      "value": "var(--cds-font-sans)",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-display-2-weight",
      "value": "400",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-display-2-size",
      "value": "3rem",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-display-2-line-height",
      "value": "1.1",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-display-2-letter-spacing",
      "value": "0",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h1-serif-family",
      "value": "var(--cds-font-serif)",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h1-serif-weight",
      "value": "400",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h1-serif-size",
      "value": "2rem",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h1-serif-line-height",
      "value": "1.1",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h1-serif-letter-spacing",
      "value": "-0.02em",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h2-serif-family",
      "value": "var(--cds-font-serif)",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h2-serif-weight",
      "value": "400",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h2-serif-size",
      "value": "1.75rem",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h2-serif-line-height",
      "value": "1.1",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h2-serif-letter-spacing",
      "value": "0",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h3-serif-family",
      "value": "var(--cds-font-serif)",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h3-serif-weight",
      "value": "400",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h3-serif-size",
      "value": "1.5rem",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h3-serif-line-height",
      "value": "1.1",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h3-serif-letter-spacing",
      "value": "0",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h1-family",
      "value": "var(--cds-font-sans)",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h1-weight",
      "value": "400",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h1-size",
      "value": "2rem",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h1-line-height",
      "value": "1.1",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h1-letter-spacing",
      "value": "0",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h2-family",
      "value": "var(--cds-font-sans)",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h2-weight",
      "value": "400",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h2-size",
      "value": "1.75rem",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h2-line-height",
      "value": "1.1",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h2-letter-spacing",
      "value": "0",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h3-family",
      "value": "var(--cds-font-sans)",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h3-weight",
      "value": "400",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h3-size",
      "value": "1.5rem",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h3-line-height",
      "value": "1.1",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h3-letter-spacing",
      "value": "0",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h4-family",
      "value": "var(--cds-font-sans)",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h4-weight",
      "value": "400",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h4-size",
      "value": "1.25rem",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h4-line-height",
      "value": "1.2",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h4-letter-spacing",
      "value": "0.005em",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h5-family",
      "value": "var(--cds-font-sans)",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h5-weight",
      "value": "510",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h5-size",
      "value": "1rem",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h5-line-height",
      "value": "1.2",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-h5-letter-spacing",
      "value": "-0.02em",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-body-family",
      "value": "var(--cds-font-sans)",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-body-weight",
      "value": "400",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-body-size",
      "value": "1rem",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-body-line-height",
      "value": "1.3",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-body-letter-spacing",
      "value": "-0.02em",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-body-small-family",
      "value": "var(--cds-font-sans)",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-body-small-weight",
      "value": "400",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-body-small-size",
      "value": "0.875rem",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-body-small-line-height",
      "value": "1.2",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-body-small-letter-spacing",
      "value": "-0.02em",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-link-family",
      "value": "var(--cds-font-sans)",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-link-weight",
      "value": "400",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-link-size",
      "value": "0.75rem",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-link-line-height",
      "value": "1.3",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-link-letter-spacing",
      "value": "0",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-overline-family",
      "value": "var(--cds-font-sans)",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-overline-weight",
      "value": "600",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-overline-size",
      "value": "0.6875rem",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-overline-line-height",
      "value": "1.1",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-type-overline-letter-spacing",
      "value": "0.06em",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--pui-font-scale",
      "value": "1",
      "selector": "html",
      "source_path": "packages/design-system/src/tokens/typography.css"
    },
    {
      "name": "--cds-font-scale",
      "value": "var(--pui-font-scale)",
      "selector": "html",
      "source_path": "packages/design-system/src/tokens/typography.css"
    }
  ],
  "example": {
    "id": "foundation-typography",
    "title": "Typography",
    "source": "packages/design-system/examples/foundations/FoundationTypography.tsx",
    "export": "FoundationTypography",
    "components": [],
    "description": "An editable Text specimen, complete type ramp, and real Simula italic emphasis.",
    "synthetic_data": true,
    "storybook_id": "foundations-typography--explore",
    "code": "import { useId, useState } from 'react';\nimport { Text } from '../../src';\nimport { TEXT_VARIANTS, type TextVariant } from '../../src/components/primitives/Text/Text';\nimport { FoundationDetails, FoundationFrame } from './FoundationShared';\n\nexport function FoundationTypography() {\n  const [sample, setSample] = useState('Your privacy. Your pace.');\n  const [variant, setVariant] = useState<TextVariant>('h1-serif');\n  const specimen = sample || 'Write something that matters.';\n  const editorId = useId();\n  const styleId = useId();\n  return <FoundationFrame controls={<>\n    <div className=\"demo-control\"><label htmlFor={styleId}>Type style</label><select id={styleId} value={variant} onChange={event => setVariant(event.target.value as TextVariant)}>\n      {TEXT_VARIANTS.map(item => <option key={item} value={item}>{item}</option>)}\n    </select></div>\n    <div className=\"demo-control foundation-sample-control\"><label htmlFor={editorId}>Sample text</label>\n      <textarea id={editorId} rows={2} maxLength={240} value={sample} onChange={event => setSample(event.target.value)} />\n    </div>\n  </>} code={`import { Text } from '@cloakedinc/design-system';\\n\\n<Text as=\"h2\" variant=\"${variant}\">{${JSON.stringify(specimen)}}</Text>`}>\n    <div className=\"foundation-type-specimen\">\n      <span className=\"demo-eyebrow\">{variant} · Live specimen</span>\n      <div className=\"foundation-type-preview\" tabIndex={0} role=\"region\" aria-label=\"Live typography preview\"><Text as=\"p\" variant={variant} testId=\"type-specimen\">{specimen}</Text></div>\n      <p className=\"foundation-caption\">The size, family, weight, line height, and tracking come from the selected type tokens.</p>\n    </div>\n    <div className=\"foundation-editorial-pair\">\n      <div><Text as=\"h2\" variant=\"h3-serif\">Calm by design.</Text><Text as=\"p\" variant=\"body-small\" color=\"secondary\">Serif titles introduce a thought. Clear sans-serif copy helps people act on it.</Text></div>\n      <p className=\"foundation-italic\">A little more <em>you.</em></p>\n    </div>\n    <FoundationDetails label=\"Explore all 14 type styles\">\n      <div className=\"foundation-type-ramp\" tabIndex={0} role=\"region\" aria-label=\"Complete type scale\">{TEXT_VARIANTS.map(item => <div key={item} data-testid=\"type-ramp-item\">\n        <code>{item}</code><Text as=\"p\" variant={item}>{item.startsWith('display') ? 'Aa' : 'Privacy, made personal.'}</Text>\n      </div>)}</div>\n    </FoundationDetails>\n  </FoundationFrame>;\n}\n"
  },
  "visual_reference": {
    "stories": [
      {
        "id": "cloaked-design-system-foundations-overview--typography",
        "name": "Typography",
        "title": "Cloaked Design System/Foundations/Overview",
        "exportName": "Typography",
        "source_path": "packages/design-system/src/foundations/Foundations.stories.tsx",
        "source_digest": "02b89302834e3cdcee9f8e4762838a3baade84a5ffb336904f0df924bb29506e",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-foundations-overview--typography&viewMode=story"
      },
      {
        "id": "cloaked-design-system-foundations-overview--font-families",
        "name": "Font Families",
        "title": "Cloaked Design System/Foundations/Overview",
        "exportName": "FontFamilies",
        "source_path": "packages/design-system/src/foundations/Foundations.stories.tsx",
        "source_digest": "02b89302834e3cdcee9f8e4762838a3baade84a5ffb336904f0df924bb29506e",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-foundations-overview--font-families&viewMode=story"
      }
    ]
  },
  "links": {
    "human": "/typography",
    "json": "/data/foundations/typography.json"
  }
}