{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "typography",
  "name": "Typography",
  "category": "Data display",
  "description": "Headings, lead, body, links, quotes and lists that follow the noodle's heading and body fonts.",
  "tags": [
    "typography",
    "heading",
    "text",
    "prose",
    "article"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "headings",
      "text styles",
      "prose",
      "rich text",
      "lists and quotes"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/typography",
  "markdownUrl": "https://mian.ro/ai/components/typography.md",
  "classes": [
    {
      "name": "mn-h1 … mn-h4",
      "description": "Heading styles for any element."
    },
    {
      "name": "mn-lead · mn-muted · mn-small",
      "description": "Intro paragraph · secondary text · small text."
    },
    {
      "name": "mn-link",
      "description": "Inline link."
    },
    {
      "name": "mn-prose",
      "description": "Styles raw HTML: Markdown output, CMS content."
    }
  ],
  "accessibility": [
    "Keep heading levels in order; the mn-h* classes let you pick the look independently of the level."
  ],
  "examples": [
    {
      "title": "Prose",
      "description": null,
      "html": "<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>"
    }
  ],
  "css": ".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; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/typography.json"
  }
}