Colors

<h2 class="fractal_h2">Brand</h2>
<div class="fractal__color-box-container">
    <div class="fractal__color-box bg-brand-hhnavy"><span>hhnavy</span></div>
    <div class="fractal__color-box bg-brand-hhgrey"><span>hhgrey</span></div>
    <div class="fractal__color-box bg-brand-hhred"><span>hhred</span></div>
</div>

<hr class="fractal__hr">

<h2 class="fractal_h2">Secondary</h2>
<div class="fractal__color-box-container">
    <div class="fractal__color-box bg-secondary-n90"><span>n90</span></div>
    <div class="fractal__color-box bg-secondary-n50"><span>n50</span></div>
    <div class="fractal__color-box bg-secondary-n25"><span>n25</span></div>
    <div class="fractal__color-box bg-secondary-b90"><span>b90</span></div>
    <div class="fractal__color-box bg-secondary-b50"><span>b50</span></div>
    <div class="fractal__color-box bg-secondary-b25"><span>b25</span></div>
</div>

<hr class="fractal__hr">

<h2 class="fractal_h2">Accent</h2>
<div class="fractal__color-box-container">
    <div class="fractal__color-box bg-accent-blue-01"><span>blue-01</span></div>
</div>

<hr class="fractal__hr">

<h2 class="fractal_h2">Neutral</h2>
<div class="fractal__color-box-container">
    <div class="fractal__color-box bg-neutral-none"><span>none</span></div>
    <div class="fractal__color-box bg-neutral-white"><span>white</span></div>
    <div class="fractal__color-box bg-neutral-black"><span>black</span></div>
    <div class="fractal__color-box bg-neutral-light-grey-01"><span>light-grey-01</span></div>
    <div class="fractal__color-box bg-neutral-grey-01"><span>grey-01</span></div>
    <div class="fractal__color-box bg-neutral-grey-02"><span>grey-02</span></div>
    <div class="fractal__color-box bg-neutral-grey-03"><span>grey-03</span></div>
    <div class="fractal__color-box bg-neutral-dark-grey-01"><span>dark-grey-01</span></div>
</div>

<hr class="fractal__hr">

<h2 class="fractal_h2">Shade</h2>
<div class="fractal__color-box-container bg-brand-hhnavy">
    <div class="fractal__color-box bg-shade-10"><span>10</span></div>
    <div class="fractal__color-box bg-shade-15"><span>15</span></div>
    <div class="fractal__color-box bg-shade-25"><span>25</span></div>
    <div class="fractal__color-box bg-shade-50"><span>50</span></div>
    <div class="fractal__color-box bg-shade-75"><span>75</span></div>
</div>

<hr class="fractal__hr">

<h2 class="fractal_h2">Light</h2>
<div class="fractal__color-box-container bg-brand-hhnavy">
    <div class="fractal__color-box bg-light-5"><span>5</span></div>
    <div class="fractal__color-box bg-light-25"><span>25</span></div>
    <div class="fractal__color-box bg-light-50"><span>50</span></div>
    <div class="fractal__color-box bg-light-75"><span>75</span></div>
</div>

<hr class="fractal__hr">

<h2 class="fractal_h2">Misc</h2>
<div class="fractal__color-box-container">
    <div class="fractal__color-box bg-misc-blue-01"><span>blue-01</span></div>
    <div class="fractal__color-box bg-misc-blue-02"><span>blue-02</span></div>
    <div class="fractal__color-box bg-misc-blue-03"><span>blue-03</span></div>
    <div class="fractal__color-box bg-misc-blue-04"><span>blue-04</span></div>
    <div class="fractal__color-box bg-misc-red-shade-25"><span>red-shade-25</span></div>
</div>

<hr class="fractal__hr">

<h2 class="fractal_h2">Info</h2>
<div class="fractal__color-box-container">
    <div class="fractal__color-box bg-info-positive"><span>positive</span></div>
</div>