Headings, lead, body, links, quotes and lists that follow the noodle's heading and body fonts.
A noodle is a design system: its own palette, radius, type and density over one component set.
Switch the noodle in the header and this paragraph, its links and its code change with it.
Same flour and water, entirely different results.
<article class="mn-prose">
<h1>Interfaces cooked differently</h1>
<p class="mn-lead">A noodle is a design system: its own palette, radius, type and density over one component set.</p>
<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>
<h2>Why noodles</h2>
<blockquote>Same flour and water, entirely different results.</blockquote>
<ul><li>Twelve design systems</li><li>Light and dark for each</li><li>One class API</li></ul>
</article>Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/typography.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
| Class / attribute | Description |
|---|---|
| mn-h1 … mn-h4 | Heading styles for any element. |
| mn-lead · mn-muted · mn-small | Intro paragraph · secondary text · small text. |
| mn-link | Inline link. |
| mn-prose | Styles raw HTML: Markdown output, CMS content. |