Build beautiful interfaces without fighting a framework.

    <div class="md:grid grid-cols-3 gap-3">
        
        <div class="card ~neutral !low mb-4 md:mb-0 content">
            <h3 class="heading text-2xl">~neutral !low</h3>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et
                tempor lectus congue et.</p>
        </div>
        
        <div class="card ~neutral !normal mb-4 md:mb-0 content">
            <h3 class="heading text-2xl">~neutral !normal</h3>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et
                tempor lectus congue et.</p>
        </div>
        
        <div class="card ~neutral !high mb-4 md:mb-0 content">
            <h3 class="heading text-2xl">~neutral !high</h3>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et
                tempor lectus congue et.</p>
        </div>
        
    </div>
    

    <div class="md:grid grid-cols-3 gap-3">
        
        <div class="card ~positive !low mb-4 md:mb-0 content">
            <h3 class="heading text-2xl">~positive !low</h3>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et
                tempor lectus congue et.</p>
        </div>
        
        <div class="card ~positive !normal mb-4 md:mb-0 content">
            <h3 class="heading text-2xl">~positive !normal</h3>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et
                tempor lectus congue et.</p>
        </div>
        
        <div class="card ~positive !high mb-4 md:mb-0 content">
            <h3 class="heading text-2xl">~positive !high</h3>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et
                tempor lectus congue et.</p>
        </div>
        
    </div>
    

    <div class="md:grid grid-cols-3 gap-3">
        
        <div class="card ~warning !low mb-4 md:mb-0 content">
            <h3 class="heading text-2xl">~warning !low</h3>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et
                tempor lectus congue et.</p>
        </div>
        
        <div class="card ~warning !normal mb-4 md:mb-0 content">
            <h3 class="heading text-2xl">~warning !normal</h3>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et
                tempor lectus congue et.</p>
        </div>
        
        <div class="card ~warning !high mb-4 md:mb-0 content">
            <h3 class="heading text-2xl">~warning !high</h3>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et
                tempor lectus congue et.</p>
        </div>
        
    </div>
    

    <div class="md:grid grid-cols-3 gap-3">
        
        <div class="card ~critical !low mb-4 md:mb-0 content">
            <h3 class="heading text-2xl">~critical !low</h3>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et
                tempor lectus congue et.</p>
        </div>
        
        <div class="card ~critical !normal mb-4 md:mb-0 content">
            <h3 class="heading text-2xl">~critical !normal</h3>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et
                tempor lectus congue et.</p>
        </div>
        
        <div class="card ~critical !high mb-4 md:mb-0 content">
            <h3 class="heading text-2xl">~critical !high</h3>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et
                tempor lectus congue et.</p>
        </div>
        
    </div>
    

    <div class="md:grid grid-cols-3 gap-3">
        
        <div class="card ~info !low mb-4 md:mb-0 content">
            <h3 class="heading text-2xl">~info !low</h3>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et
                tempor lectus congue et.</p>
        </div>
        
        <div class="card ~info !normal mb-4 md:mb-0 content">
            <h3 class="heading text-2xl">~info !normal</h3>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et
                tempor lectus congue et.</p>
        </div>
        
        <div class="card ~info !high mb-4 md:mb-0 content">
            <h3 class="heading text-2xl">~info !high</h3>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et
                tempor lectus congue et.</p>
        </div>
        
    </div>
    

    <div class="md:grid grid-cols-3 gap-3">
        
        <div class="card ~urge !low mb-4 md:mb-0 content">
            <h3 class="heading text-2xl">~urge !low</h3>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et
                tempor lectus congue et.</p>
        </div>
        
        <div class="card ~urge !normal mb-4 md:mb-0 content">
            <h3 class="heading text-2xl">~urge !normal</h3>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et
                tempor lectus congue et.</p>
        </div>
        
        <div class="card ~urge !high mb-4 md:mb-0 content">
            <h3 class="heading text-2xl">~urge !high</h3>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt euismod nibh, et
                tempor lectus congue et.</p>
        </div>
        
    </div>
    

    <div class="aside ~neutral mb-4 md:mb-0 content">
        <p class="content"><strong>This is a neutral aside.</strong> You can specify priorities, but you probably
            shouldn't. (It's an aside, after all.) What you're seeing here is the default variant &mdash; that is, the
            !normal priority.</p>
    </div>
    

    <div class="aside ~positive mb-4 md:mb-0 content">
        <p class="content"><strong>This is a positive aside.</strong> You can specify priorities, but you probably
            shouldn't. (It's an aside, after all.) What you're seeing here is the default variant &mdash; that is, the
            !normal priority.</p>
    </div>
    

    <div class="aside ~warning mb-4 md:mb-0 content">
        <p class="content"><strong>This is a warning aside.</strong> You can specify priorities, but you probably
            shouldn't. (It's an aside, after all.) What you're seeing here is the default variant &mdash; that is, the
            !normal priority.</p>
    </div>
    

    <div class="aside ~critical mb-4 md:mb-0 content">
        <p class="content"><strong>This is a critical aside.</strong> You can specify priorities, but you probably
            shouldn't. (It's an aside, after all.) What you're seeing here is the default variant &mdash; that is, the
            !normal priority.</p>
    </div>
    

    <div class="aside ~info mb-4 md:mb-0 content">
        <p class="content"><strong>This is a info aside.</strong> You can specify priorities, but you probably
            shouldn't. (It's an aside, after all.) What you're seeing here is the default variant &mdash; that is, the
            !normal priority.</p>
    </div>
    

    <div class="aside ~urge mb-4 md:mb-0 content">
        <p class="content"><strong>This is a urge aside.</strong> You can specify priorities, but you probably
            shouldn't. (It's an aside, after all.) What you're seeing here is the default variant &mdash; that is, the
            !normal priority.</p>
    </div>
    

    
    <span class="icon m-2 ~neutral !low">
        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="13">
            <g stroke-width="2" stroke="currentColor" fill="none">
                <path d="M11.29 11.71l-4-4" />
                <circle cx="5" cy="5" r="4" />
            </g>
        </svg>
    </span>
    
    <span class="icon m-2 ~positive !low">
        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="13">
            <g stroke-width="2" stroke="currentColor" fill="none">
                <path d="M11.29 11.71l-4-4" />
                <circle cx="5" cy="5" r="4" />
            </g>
        </svg>
    </span>
    
    <span class="icon m-2 ~warning !low">
        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="13">
            <g stroke-width="2" stroke="currentColor" fill="none">
                <path d="M11.29 11.71l-4-4" />
                <circle cx="5" cy="5" r="4" />
            </g>
        </svg>
    </span>
    
    <span class="icon m-2 ~critical !low">
        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="13">
            <g stroke-width="2" stroke="currentColor" fill="none">
                <path d="M11.29 11.71l-4-4" />
                <circle cx="5" cy="5" r="4" />
            </g>
        </svg>
    </span>
    
    <span class="icon m-2 ~info !low">
        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="13">
            <g stroke-width="2" stroke="currentColor" fill="none">
                <path d="M11.29 11.71l-4-4" />
                <circle cx="5" cy="5" r="4" />
            </g>
        </svg>
    </span>
    
    <span class="icon m-2 ~urge !low">
        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="13">
            <g stroke-width="2" stroke="currentColor" fill="none">
                <path d="M11.29 11.71l-4-4" />
                <circle cx="5" cy="5" r="4" />
            </g>
        </svg>
    </span>
    
    

    <section class="content">
        <h3>This is a content block</h3>
        <p>This is a paragraph. When you place your body content inside a content class,
            a17t makes sure that the spacing figures everything out automatically.</p>
        <p>While a17t usually tries to avoid '<a href="https://rmrm.io">magic</a>' solutions, type is important
            (and difficult) enough to warrant an exception.</p>
        <blockquote>
            This is a blockquote. Lorem ipsum dolor sit amet. These are words that were once spoken, I guess.
            <cite>This is its source.</cite>
        </blockquote>
        <p>This is a final closing paragraph to show you how it all comes together.</p>
        <h3>Just kidding, there's more.</h3>
        <p>Lorem ipsum dolor sit amet.</p>
        <ul>
            <li>An item</li>
            <li>Another item</li>
            <li>Three items?</li>
        </ul>
        <p>This is <i>real</i>a final closing paragraph to show you how it all comes together.</p>
        <ol>
            <li>One!</li>
            <li>Two?</li>
            <li>Three.</li>
        </ol>
    </section>
    

    <p class="label">This is a label.</p>
    <p class="support">It's like the opposite of a support.</p>
    <p class="support ~critical">These can all have tones, by the way!</p>
    

    <div class="content">
    <p>This is some text, with an inline <code>&lt;code&gt;</code> tag. This requires a content block!</p>
    <pre><code>This is some longer code!

that() {
spansMultipleLines();  
}</code></pre>

<p>To use this <code>code</code><code>block</code>, press <kbd>Cmd</kbd> and <kbd>C</kbd><kbd>X</kbd> together.</p>
</div>

    <p class="supra">This is a supra</p>
    <h3 class="heading">This is a heading</h3>
    

    <table class="table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Status</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Landinator 9000 <span class="badge ~neutral">New</span></td>
                <td><span class="chip ~positive">Completed</span></td>
                <td>$300</td>
            </tr>
            <tr>
                <td>Hammer</td>
                <td><span class="chip ~urge">Waiting</span></td>
                <td>$20</td>
            </tr>
            <tr>
                <td>Computer</td>
                <td><span class="chip ~info">Processing</span></td>
                <td>$500</td>
            </tr>
        </tbody>
    </table>
    

    <h3 class="heading">This is a heading-subheading pair</h3>
    <p class="subheading">I'm the subheading (which shouldn't be followed by a paragraph).</p>
    

    
    <div class="mb-1">
        
        <span class="chip ~neutral !low">Neutral</span>
        
        <span class="chip ~neutral !normal">Neutral</span>
        
        <span class="chip ~neutral !high">Neutral</span>
        
    </div>
    
    <div class="mb-1">
        
        <span class="chip ~positive !low">Positive</span>
        
        <span class="chip ~positive !normal">Positive</span>
        
        <span class="chip ~positive !high">Positive</span>
        
    </div>
    
    <div class="mb-1">
        
        <span class="chip ~warning !low">Warning</span>
        
        <span class="chip ~warning !normal">Warning</span>
        
        <span class="chip ~warning !high">Warning</span>
        
    </div>
    
    <div class="mb-1">
        
        <span class="chip ~critical !low">Critical</span>
        
        <span class="chip ~critical !normal">Critical</span>
        
        <span class="chip ~critical !high">Critical</span>
        
    </div>
    
    <div class="mb-1">
        
        <span class="chip ~info !low">Info</span>
        
        <span class="chip ~info !normal">Info</span>
        
        <span class="chip ~info !high">Info</span>
        
    </div>
    
    <div class="mb-1">
        
        <span class="chip ~urge !low">Urge</span>
        
        <span class="chip ~urge !normal">Urge</span>
        
        <span class="chip ~urge !high">Urge</span>
        
    </div>
    
    

    
    <div class="mb-1">
        
        <span class="badge ~neutral !low">1</span>
        <span class="badge ~neutral !low">New</span>
        
        <span class="badge ~neutral !normal">2</span>
        <span class="badge ~neutral !normal">New</span>
        
        <span class="badge ~neutral !high">3</span>
        <span class="badge ~neutral !high">New</span>
        
    </div>
    
    <div class="mb-1">
        
        <span class="badge ~positive !low">1</span>
        <span class="badge ~positive !low">New</span>
        
        <span class="badge ~positive !normal">2</span>
        <span class="badge ~positive !normal">New</span>
        
        <span class="badge ~positive !high">3</span>
        <span class="badge ~positive !high">New</span>
        
    </div>
    
    <div class="mb-1">
        
        <span class="badge ~warning !low">1</span>
        <span class="badge ~warning !low">New</span>
        
        <span class="badge ~warning !normal">2</span>
        <span class="badge ~warning !normal">New</span>
        
        <span class="badge ~warning !high">3</span>
        <span class="badge ~warning !high">New</span>
        
    </div>
    
    <div class="mb-1">
        
        <span class="badge ~critical !low">1</span>
        <span class="badge ~critical !low">New</span>
        
        <span class="badge ~critical !normal">2</span>
        <span class="badge ~critical !normal">New</span>
        
        <span class="badge ~critical !high">3</span>
        <span class="badge ~critical !high">New</span>
        
    </div>
    
    <div class="mb-1">
        
        <span class="badge ~info !low">1</span>
        <span class="badge ~info !low">New</span>
        
        <span class="badge ~info !normal">2</span>
        <span class="badge ~info !normal">New</span>
        
        <span class="badge ~info !high">3</span>
        <span class="badge ~info !high">New</span>
        
    </div>
    
    <div class="mb-1">
        
        <span class="badge ~urge !low">1</span>
        <span class="badge ~urge !low">New</span>
        
        <span class="badge ~urge !normal">2</span>
        <span class="badge ~urge !normal">New</span>
        
        <span class="badge ~urge !high">3</span>
        <span class="badge ~urge !high">New</span>
        
    </div>
    
    

    
    <div class="mb-1">
        
        <span class="chip ~neutral !low loading text-lg">Loading</span>
        
        <span class="chip ~neutral !normal loading text-lg">Loading</span>
        
        <span class="chip ~neutral !high loading text-lg">Loading</span>
        
    </div>
    
    <div class="mb-1">
        
        <span class="chip ~positive !low loading text-lg">Loading</span>
        
        <span class="chip ~positive !normal loading text-lg">Loading</span>
        
        <span class="chip ~positive !high loading text-lg">Loading</span>
        
    </div>
    
    <div class="mb-1">
        
        <span class="chip ~warning !low loading text-lg">Loading</span>
        
        <span class="chip ~warning !normal loading text-lg">Loading</span>
        
        <span class="chip ~warning !high loading text-lg">Loading</span>
        
    </div>
    
    <div class="mb-1">
        
        <span class="chip ~critical !low loading text-lg">Loading</span>
        
        <span class="chip ~critical !normal loading text-lg">Loading</span>
        
        <span class="chip ~critical !high loading text-lg">Loading</span>
        
    </div>
    
    <div class="mb-1">
        
        <span class="chip ~info !low loading text-lg">Loading</span>
        
        <span class="chip ~info !normal loading text-lg">Loading</span>
        
        <span class="chip ~info !high loading text-lg">Loading</span>
        
    </div>
    
    <div class="mb-1">
        
        <span class="chip ~urge !low loading text-lg">Loading</span>
        
        <span class="chip ~urge !normal loading text-lg">Loading</span>
        
        <span class="chip ~urge !high loading text-lg">Loading</span>
        
    </div>
    
    

    <div class="md:grid grid-cols-3 gap-3">
        
        <progress class="progress ~neutral !low mb-4 md:mb-0" value="60" max="100">60%</progress>
        
        <progress class="progress ~neutral !normal mb-4 md:mb-0" value="60" max="100">60%</progress>
        
        <progress class="progress ~neutral !high mb-4 md:mb-0" value="60" max="100">60%</progress>
        
    </div>
    

    <div class="md:grid grid-cols-3 gap-3">
        
        <progress class="progress ~positive !low mb-4 md:mb-0" value="60" max="100">60%</progress>
        
        <progress class="progress ~positive !normal mb-4 md:mb-0" value="60" max="100">60%</progress>
        
        <progress class="progress ~positive !high mb-4 md:mb-0" value="60" max="100">60%</progress>
        
    </div>
    

    <div class="md:grid grid-cols-3 gap-3">
        
        <progress class="progress ~warning !low mb-4 md:mb-0" value="60" max="100">60%</progress>
        
        <progress class="progress ~warning !normal mb-4 md:mb-0" value="60" max="100">60%</progress>
        
        <progress class="progress ~warning !high mb-4 md:mb-0" value="60" max="100">60%</progress>
        
    </div>
    

    <div class="md:grid grid-cols-3 gap-3">
        
        <progress class="progress ~critical !low mb-4 md:mb-0" value="60" max="100">60%</progress>
        
        <progress class="progress ~critical !normal mb-4 md:mb-0" value="60" max="100">60%</progress>
        
        <progress class="progress ~critical !high mb-4 md:mb-0" value="60" max="100">60%</progress>
        
    </div>
    

    <div class="md:grid grid-cols-3 gap-3">
        
        <progress class="progress ~info !low mb-4 md:mb-0" value="60" max="100">60%</progress>
        
        <progress class="progress ~info !normal mb-4 md:mb-0" value="60" max="100">60%</progress>
        
        <progress class="progress ~info !high mb-4 md:mb-0" value="60" max="100">60%</progress>
        
    </div>
    

    <div class="md:grid grid-cols-3 gap-3">
        
        <progress class="progress ~urge !low mb-4 md:mb-0" value="60" max="100">60%</progress>
        
        <progress class="progress ~urge !normal mb-4 md:mb-0" value="60" max="100">60%</progress>
        
        <progress class="progress ~urge !high mb-4 md:mb-0" value="60" max="100">60%</progress>
        
    </div>
    

    
    <div class="mb-1">
        
        <a class="button ~neutral !low" href="https://rmrm.io">Hello</a>
        <a class="button ~neutral !low" href="https://rmrm.io" disabled>Hello</a>
        <a class="button ~neutral !low loading" href="https://rmrm.io">Hello</a>
        
        <a class="button ~neutral !normal" href="https://rmrm.io">Hello</a>
        <a class="button ~neutral !normal" href="https://rmrm.io" disabled>Hello</a>
        <a class="button ~neutral !normal loading" href="https://rmrm.io">Hello</a>
        
        <a class="button ~neutral !high" href="https://rmrm.io">Hello</a>
        <a class="button ~neutral !high" href="https://rmrm.io" disabled>Hello</a>
        <a class="button ~neutral !high loading" href="https://rmrm.io">Hello</a>
        
    </div>
    
    <div class="mb-1">
        
        <a class="button ~positive !low" href="https://rmrm.io">Hello</a>
        <a class="button ~positive !low" href="https://rmrm.io" disabled>Hello</a>
        <a class="button ~positive !low loading" href="https://rmrm.io">Hello</a>
        
        <a class="button ~positive !normal" href="https://rmrm.io">Hello</a>
        <a class="button ~positive !normal" href="https://rmrm.io" disabled>Hello</a>
        <a class="button ~positive !normal loading" href="https://rmrm.io">Hello</a>
        
        <a class="button ~positive !high" href="https://rmrm.io">Hello</a>
        <a class="button ~positive !high" href="https://rmrm.io" disabled>Hello</a>
        <a class="button ~positive !high loading" href="https://rmrm.io">Hello</a>
        
    </div>
    
    <div class="mb-1">
        
        <a class="button ~warning !low" href="https://rmrm.io">Hello</a>
        <a class="button ~warning !low" href="https://rmrm.io" disabled>Hello</a>
        <a class="button ~warning !low loading" href="https://rmrm.io">Hello</a>
        
        <a class="button ~warning !normal" href="https://rmrm.io">Hello</a>
        <a class="button ~warning !normal" href="https://rmrm.io" disabled>Hello</a>
        <a class="button ~warning !normal loading" href="https://rmrm.io">Hello</a>
        
        <a class="button ~warning !high" href="https://rmrm.io">Hello</a>
        <a class="button ~warning !high" href="https://rmrm.io" disabled>Hello</a>
        <a class="button ~warning !high loading" href="https://rmrm.io">Hello</a>
        
    </div>
    
    <div class="mb-1">
        
        <a class="button ~critical !low" href="https://rmrm.io">Hello</a>
        <a class="button ~critical !low" href="https://rmrm.io" disabled>Hello</a>
        <a class="button ~critical !low loading" href="https://rmrm.io">Hello</a>
        
        <a class="button ~critical !normal" href="https://rmrm.io">Hello</a>
        <a class="button ~critical !normal" href="https://rmrm.io" disabled>Hello</a>
        <a class="button ~critical !normal loading" href="https://rmrm.io">Hello</a>
        
        <a class="button ~critical !high" href="https://rmrm.io">Hello</a>
        <a class="button ~critical !high" href="https://rmrm.io" disabled>Hello</a>
        <a class="button ~critical !high loading" href="https://rmrm.io">Hello</a>
        
    </div>
    
    <div class="mb-1">
        
        <a class="button ~info !low" href="https://rmrm.io">Hello</a>
        <a class="button ~info !low" href="https://rmrm.io" disabled>Hello</a>
        <a class="button ~info !low loading" href="https://rmrm.io">Hello</a>
        
        <a class="button ~info !normal" href="https://rmrm.io">Hello</a>
        <a class="button ~info !normal" href="https://rmrm.io" disabled>Hello</a>
        <a class="button ~info !normal loading" href="https://rmrm.io">Hello</a>
        
        <a class="button ~info !high" href="https://rmrm.io">Hello</a>
        <a class="button ~info !high" href="https://rmrm.io" disabled>Hello</a>
        <a class="button ~info !high loading" href="https://rmrm.io">Hello</a>
        
    </div>
    
    <div class="mb-1">
        
        <a class="button ~urge !low" href="https://rmrm.io">Hello</a>
        <a class="button ~urge !low" href="https://rmrm.io" disabled>Hello</a>
        <a class="button ~urge !low loading" href="https://rmrm.io">Hello</a>
        
        <a class="button ~urge !normal" href="https://rmrm.io">Hello</a>
        <a class="button ~urge !normal" href="https://rmrm.io" disabled>Hello</a>
        <a class="button ~urge !normal loading" href="https://rmrm.io">Hello</a>
        
        <a class="button ~urge !high" href="https://rmrm.io">Hello</a>
        <a class="button ~urge !high" href="https://rmrm.io" disabled>Hello</a>
        <a class="button ~urge !high loading" href="https://rmrm.io">Hello</a>
        
    </div>
    
    

    
    <div class="mb-1">
        
        <a class="portal ~neutral !low" href="https://rmrm.io">Hello</a>
        <a class="portal ~neutral !low active" href="https://rmrm.io">Hello</a>
        
        <a class="portal ~neutral !normal" href="https://rmrm.io">Hello</a>
        <a class="portal ~neutral !normal active" href="https://rmrm.io">Hello</a>
        
        <a class="portal ~neutral !high" href="https://rmrm.io">Hello</a>
        <a class="portal ~neutral !high active" href="https://rmrm.io">Hello</a>
        
    </div>
    
    <div class="mb-1">
        
        <a class="portal ~positive !low" href="https://rmrm.io">Hello</a>
        <a class="portal ~positive !low active" href="https://rmrm.io">Hello</a>
        
        <a class="portal ~positive !normal" href="https://rmrm.io">Hello</a>
        <a class="portal ~positive !normal active" href="https://rmrm.io">Hello</a>
        
        <a class="portal ~positive !high" href="https://rmrm.io">Hello</a>
        <a class="portal ~positive !high active" href="https://rmrm.io">Hello</a>
        
    </div>
    
    <div class="mb-1">
        
        <a class="portal ~warning !low" href="https://rmrm.io">Hello</a>
        <a class="portal ~warning !low active" href="https://rmrm.io">Hello</a>
        
        <a class="portal ~warning !normal" href="https://rmrm.io">Hello</a>
        <a class="portal ~warning !normal active" href="https://rmrm.io">Hello</a>
        
        <a class="portal ~warning !high" href="https://rmrm.io">Hello</a>
        <a class="portal ~warning !high active" href="https://rmrm.io">Hello</a>
        
    </div>
    
    <div class="mb-1">
        
        <a class="portal ~critical !low" href="https://rmrm.io">Hello</a>
        <a class="portal ~critical !low active" href="https://rmrm.io">Hello</a>
        
        <a class="portal ~critical !normal" href="https://rmrm.io">Hello</a>
        <a class="portal ~critical !normal active" href="https://rmrm.io">Hello</a>
        
        <a class="portal ~critical !high" href="https://rmrm.io">Hello</a>
        <a class="portal ~critical !high active" href="https://rmrm.io">Hello</a>
        
    </div>
    
    <div class="mb-1">
        
        <a class="portal ~info !low" href="https://rmrm.io">Hello</a>
        <a class="portal ~info !low active" href="https://rmrm.io">Hello</a>
        
        <a class="portal ~info !normal" href="https://rmrm.io">Hello</a>
        <a class="portal ~info !normal active" href="https://rmrm.io">Hello</a>
        
        <a class="portal ~info !high" href="https://rmrm.io">Hello</a>
        <a class="portal ~info !high active" href="https://rmrm.io">Hello</a>
        
    </div>
    
    <div class="mb-1">
        
        <a class="portal ~urge !low" href="https://rmrm.io">Hello</a>
        <a class="portal ~urge !low active" href="https://rmrm.io">Hello</a>
        
        <a class="portal ~urge !normal" href="https://rmrm.io">Hello</a>
        <a class="portal ~urge !normal active" href="https://rmrm.io">Hello</a>
        
        <a class="portal ~urge !high" href="https://rmrm.io">Hello</a>
        <a class="portal ~urge !high active" href="https://rmrm.io">Hello</a>
        
    </div>
    
    

    
    <div class="md:grid grid-cols-3 gap-3 mb-6">
        
        <input class="input ~neutral !low mb-1" type="text" placeholder="Type something">
        
        <input class="input ~neutral !normal mb-1" type="text" placeholder="Type something">
        
        <input class="input ~neutral !high mb-1" type="text" placeholder="Type something">
        
    </div>
    
    <div class="md:grid grid-cols-3 gap-3 mb-6">
        
        <input class="input ~positive !low mb-1" type="text" placeholder="Type something">
        
        <input class="input ~positive !normal mb-1" type="text" placeholder="Type something">
        
        <input class="input ~positive !high mb-1" type="text" placeholder="Type something">
        
    </div>
    
    <div class="md:grid grid-cols-3 gap-3 mb-6">
        
        <input class="input ~warning !low mb-1" type="text" placeholder="Type something">
        
        <input class="input ~warning !normal mb-1" type="text" placeholder="Type something">
        
        <input class="input ~warning !high mb-1" type="text" placeholder="Type something">
        
    </div>
    
    <div class="md:grid grid-cols-3 gap-3 mb-6">
        
        <input class="input ~critical !low mb-1" type="text" placeholder="Type something">
        
        <input class="input ~critical !normal mb-1" type="text" placeholder="Type something">
        
        <input class="input ~critical !high mb-1" type="text" placeholder="Type something">
        
    </div>
    
    <div class="md:grid grid-cols-3 gap-3 mb-6">
        
        <input class="input ~info !low mb-1" type="text" placeholder="Type something">
        
        <input class="input ~info !normal mb-1" type="text" placeholder="Type something">
        
        <input class="input ~info !high mb-1" type="text" placeholder="Type something">
        
    </div>
    
    <div class="md:grid grid-cols-3 gap-3 mb-6">
        
        <input class="input ~urge !low mb-1" type="text" placeholder="Type something">
        
        <input class="input ~urge !normal mb-1" type="text" placeholder="Type something">
        
        <input class="input ~urge !high mb-1" type="text" placeholder="Type something">
        
    </div>
    
    

    
    <textarea class="field !low mb-1" placeholder="Type something"></textarea>
    
    <textarea class="field !normal mb-1" placeholder="Type something"></textarea>
    
    <textarea class="field !high mb-1" placeholder="Type something"></textarea>
    
    

    
    <div class="md:grid grid-cols-3 gap-3 mb-6">
        
        <div class="select ~neutral !low mb-1">
            <select>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
                <option>This is a very long option and is likely to overlap with the chevron</option>
            </select>
        </div>
        
        <div class="select ~neutral !normal mb-1">
            <select>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
                <option>This is a very long option and is likely to overlap with the chevron</option>
            </select>
        </div>
        
        <div class="select ~neutral !high mb-1">
            <select>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
                <option>This is a very long option and is likely to overlap with the chevron</option>
            </select>
        </div>
        
    </div>
    
    <div class="md:grid grid-cols-3 gap-3 mb-6">
        
        <div class="select ~positive !low mb-1">
            <select>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
                <option>This is a very long option and is likely to overlap with the chevron</option>
            </select>
        </div>
        
        <div class="select ~positive !normal mb-1">
            <select>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
                <option>This is a very long option and is likely to overlap with the chevron</option>
            </select>
        </div>
        
        <div class="select ~positive !high mb-1">
            <select>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
                <option>This is a very long option and is likely to overlap with the chevron</option>
            </select>
        </div>
        
    </div>
    
    <div class="md:grid grid-cols-3 gap-3 mb-6">
        
        <div class="select ~warning !low mb-1">
            <select>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
                <option>This is a very long option and is likely to overlap with the chevron</option>
            </select>
        </div>
        
        <div class="select ~warning !normal mb-1">
            <select>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
                <option>This is a very long option and is likely to overlap with the chevron</option>
            </select>
        </div>
        
        <div class="select ~warning !high mb-1">
            <select>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
                <option>This is a very long option and is likely to overlap with the chevron</option>
            </select>
        </div>
        
    </div>
    
    <div class="md:grid grid-cols-3 gap-3 mb-6">
        
        <div class="select ~critical !low mb-1">
            <select>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
                <option>This is a very long option and is likely to overlap with the chevron</option>
            </select>
        </div>
        
        <div class="select ~critical !normal mb-1">
            <select>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
                <option>This is a very long option and is likely to overlap with the chevron</option>
            </select>
        </div>
        
        <div class="select ~critical !high mb-1">
            <select>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
                <option>This is a very long option and is likely to overlap with the chevron</option>
            </select>
        </div>
        
    </div>
    
    <div class="md:grid grid-cols-3 gap-3 mb-6">
        
        <div class="select ~info !low mb-1">
            <select>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
                <option>This is a very long option and is likely to overlap with the chevron</option>
            </select>
        </div>
        
        <div class="select ~info !normal mb-1">
            <select>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
                <option>This is a very long option and is likely to overlap with the chevron</option>
            </select>
        </div>
        
        <div class="select ~info !high mb-1">
            <select>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
                <option>This is a very long option and is likely to overlap with the chevron</option>
            </select>
        </div>
        
    </div>
    
    <div class="md:grid grid-cols-3 gap-3 mb-6">
        
        <div class="select ~urge !low mb-1">
            <select>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
                <option>This is a very long option and is likely to overlap with the chevron</option>
            </select>
        </div>
        
        <div class="select ~urge !normal mb-1">
            <select>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
                <option>This is a very long option and is likely to overlap with the chevron</option>
            </select>
        </div>
        
        <div class="select ~urge !high mb-1">
            <select>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
                <option>This is a very long option and is likely to overlap with the chevron</option>
            </select>
        </div>
        
    </div>
    
    

    <label class="switch block">
        <input type="checkbox">
        <span>Save my information</span>
    </label>
    <label class="switch block">
        <input type="checkbox">
        <span>I am not a robot</span>
    </label>
    

    <label class="switch">
        <input type="radio" name="rad">
        <span>I am cool</span>
    </label>
    <label class="switch">
        <input type="radio" name="rad">
        <span>I am not cool</span>
    </label>
    <label class="switch">
        <input type="radio" name="rad" disabled>
        <span>Disabled</span>
    </label>
    

    <label class="upload">
        <input type="file">
        <span class="button field">Upload</span>
        <span>Pick a file...</span>
    </label>
    

    <div class="button ~neutral !high">
        More Options
        <span class="icon ml-4 mr-1">
            <i class="chev"></i>
        </span>
    </div>