Typography

<div class="flex flex-col gap-6">
        <sigta:heading level="2" size="display">Written by hand</sigta:heading>
        <sigta:heading level="2" size="xl">Software, shipped like a product</sigta:heading>
        <sigta:heading level="3" size="lg">What we do, and keep doing</sigta:heading>
        <sigta:heading level="4">Panel heading</sigta:heading>
    </div>

<div class="flex flex-col gap-4 max-w-[56ch]">
        <sigta:text variant="lede">We design and build software the careful way — researched, drawn, typed, and tested.</sigta:text>
        <sigta:text>Body text in Newsreader. Comfortable at long line lengths, with a paper-first reading rhythm and <em>true italics</em> where emphasis calls for them.</sigta:text>
        <sigta:text variant="muted">Muted body text for secondary explanations.</sigta:text>
        <sigta:text variant="caption">SIGTA · est. 2017 · made on paper</sigta:text>
    </div>

<div class="flex flex-col gap-6">
        <sigta:heading level="2" size="xl">Technology, translated to <sigta:mark>business</sigta:mark>.</sigta:heading>
        <div class="flex gap-8 items-center">
            <sigta:annot>drawn, not generated ↓</sigta:annot>
            <sigta:annot rotate="4" muted>a real chart, on real paper</sigta:annot>
        </div>
        <sigta:eyebrow>Design &amp; engineering studio · est. 2017</sigta:eyebrow>
    </div>

<div class="flex flex-col gap-6">
        <sigta:rule variant="1" />
        <sigta:rule variant="2" />
        <sigta:separator />
        <sigta:separator variant="dashed" />
    </div>

<div class="flex items-end gap-8">
        <sigta:brand size="sm" />
        <sigta:brand />
        <sigta:brand size="lg" />
        <sigta:brand glyph-only />
        <span class="bg-inverse text-inverse-fg p-3 rounded-base inline-flex"><sigta:brand class="text-inverse-fg" /></span>
    </div>