{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "typography",
  "type": "registry:ui",
  "title": "Typography (MIAN)",
  "description": "Headings, lead, body, links, quotes and lists that follow the noodle's heading and body fonts.",
  "categories": [
    "data display",
    "typography",
    "heading",
    "text",
    "prose"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/typography.css",
      "type": "registry:file",
      "target": "mian/components/typography.css",
      "content": ".mn-prose { color: var(--mn-fg); font-size: 1rem; line-height: 1.7; max-width: 68ch; }\n.mn-prose > * + * { margin-top: 1em; }\n.mn-prose :where(p, ul, ol, blockquote, pre) { margin-bottom: 0; }\n.mn-h1, .mn-h2, .mn-h3, .mn-h4, .mn-prose :where(h1, h2, h3, h4) {\n  margin: 0; font-family: var(--mn-font-heading); font-weight: var(--mn-heading-weight);\n  letter-spacing: -.02em; line-height: 1.15; color: var(--mn-fg); text-wrap: balance;\n}\n.mn-h1, .mn-prose h1 { font-size: clamp(2rem, 4.5vw, 2.75rem); letter-spacing: -.03em; }\n.mn-h2, .mn-prose h2 { font-size: clamp(1.5rem, 3vw, 1.875rem); }\n.mn-h3, .mn-prose h3 { font-size: 1.25rem; }\n.mn-h4, .mn-prose h4 { font-size: 1.0625rem; letter-spacing: -.01em; }\n.mn-prose :where(h1, h2, h3, h4) { margin-top: 1.6em; }\n.mn-lead { font-size: 1.2rem; line-height: 1.6; color: var(--mn-muted); margin: 0; }\n.mn-small { font-size: .875rem; }\n.mn-prose a, .mn-link { color: var(--mn-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }\n.mn-link:hover, .mn-prose a:hover { text-decoration-thickness: 2px; }\n.mn-prose blockquote { margin-inline: 0; padding-inline-start: 1rem; border-inline-start: 3px solid var(--mn-border); color: var(--mn-muted); font-style: italic; }\n.mn-prose :where(ul, ol) { padding-inline-start: 1.4rem; }\n.mn-prose li + li { margin-top: .35em; }\n.mn-prose hr { border: 0; border-top: 1px solid var(--mn-border); margin-block: 2em; }"
    },
    {
      "path": "mian/examples/typography.html",
      "type": "registry:file",
      "target": "mian/examples/typography.html",
      "content": "<!-- Prose -->\n<article class=\"mn-prose\">\n  <h1>Interfaces cooked differently</h1>\n  <p class=\"mn-lead\">A noodle is a design system: its own palette, radius, type and density over one component set.</p>\n  <p>Switch the noodle in the header and this paragraph, its <a href=\"#typography\">links</a> and its <code class=\"mn-code\">code</code> change with it.</p>\n  <h2>Why noodles</h2>\n  <blockquote>Same flour and water, entirely different results.</blockquote>\n  <ul><li>Twelve design systems</li><li>Light and dark for each</li><li>One class API</li></ul>\n</article>"
    }
  ],
  "docs": "MIAN components are HTML + CSS classes, not React components. The styles are already included in mian-base; this item adds the component's CSS section and example markup for reference. Docs: https://mian.ro/components/typography",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-h1 … mn-h4",
        "mn-lead · mn-muted · mn-small",
        "mn-link",
        "mn-prose"
      ],
      "accessibility": [
        "Keep heading levels in order; the mn-h* classes let you pick the look independently of the level."
      ],
      "intents": [
        "headings",
        "text styles",
        "prose",
        "rich text",
        "lists and quotes"
      ]
    }
  }
}