Colors

<div class="container">
    <div class="row">
        <ul class="fractal_colorswatch_list">
            <h3>Pink / Brand</h3>
            <li>
                <div class="fractal_colorswatch" style="background-color: var(--pink-1)"></div>
                <span>--pink-1</span>
            </li>
            <li>
                <div class="fractal_colorswatch" style="background-color: var(--pink-2)"></div>
                <span>--pink-2</span>
            </li>
            <li>
                <div class="fractal_colorswatch" style="background-color: var(--pink-3)"></div>
                <span>--pink-3</span>
            </li>
            <li>
                <div class="fractal_colorswatch" style="background-color: var(--pink-4)"></div>
                <span>--pink-4</span>
            </li>
        </ul>

        <ul class="fractal_colorswatch_list">
            <h3>Yellows</h3>
            <li>
                <div class="fractal_colorswatch" style="background-color: var(--yellow-1)"></div>
                <span>--yellow-1</span>
            </li>
            <li>
                <div class="fractal_colorswatch" style="background-color: var(--yellow-2)"></div>
                <span>--yellow-2</span>
            </li>
            <li>
                <div class="fractal_colorswatch" style="background-color: var(--yellow-3)"></div>
                <span>--yellow-3</span>
            </li>
            <li>
                <div class="fractal_colorswatch" style="background-color: var(--yellow-4)"></div>
                <span>--yellow-4</span>
            </li>
        </ul>

        <ul class="fractal_colorswatch_list">
            <h3>Blues</h3>
            <li>
                <div class="fractal_colorswatch" style="background-color: var(--blue-1)"></div>
                <span>--blue-1</span>
            </li>
            <li>
                <div class="fractal_colorswatch" style="background-color: var(--blue-2)"></div>
                <span>--blue-2</span>
            </li>
            <li>
                <div class="fractal_colorswatch" style="background-color: var(--blue-3)"></div>
                <span>--blue-3</span>
            </li>
            <li>
                <div class="fractal_colorswatch" style="background-color: var(--blue-4)"></div>
                <span>--blue-4</span>
            </li>
        </ul>

        <ul class="fractal_colorswatch_list">
            <h3>Purples</h3>
            <li>
                <div class="fractal_colorswatch" style="background-color: var(--purple-1)"></div>
                <span>--purple-1</span>
            </li>
            <li>
                <div class="fractal_colorswatch" style="background-color: var(--purple-2)"></div>
                <span>--purple-2</span>
            </li>
            <li>
                <div class="fractal_colorswatch" style="background-color: var(--purple-3)"></div>
                <span>--purple-3</span>
            </li>
            <li>
                <div class="fractal_colorswatch" style="background-color: var(--purple-4)"></div>
                <span>--purple-4</span>
            </li>
        </ul>

        <ul class="fractal_colorswatch_list">
            <h3>Greens</h3>
            <li>
                <div class="fractal_colorswatch" style="background-color: var(--green-1)"></div>
                <span>--green-1</span>
            </li>
            <li>
                <div class="fractal_colorswatch" style="background-color: var(--green-2)"></div>
                <span>--green-2</span>
            </li>
            <li>
                <div class="fractal_colorswatch" style="background-color: var(--green-3)"></div>
                <span>--green-3</span>
            </li>
            <li>
                <div class="fractal_colorswatch" style="background-color: var(--green-4)"></div>
                <span>--green-4</span>
            </li>
        </ul>

        <ul class="fractal_colorswatch_list">
            <h3>Oranges</h3>
            <li>
                <div class="fractal_colorswatch" style="background-color: var(--orange-1)"></div>
                <span>--orange-1</span>
            </li>
            <li>
                <div class="fractal_colorswatch" style="background-color: var(--orange-2)"></div>
                <span>--orange-2</span>
            </li>
            <li>
                <div class="fractal_colorswatch" style="background-color: var(--orange-3)"></div>
                <span>--orange-3</span>
            </li>
            <li>
                <div class="fractal_colorswatch" style="background-color: var(--orange-4)"></div>
                <span>--orange-4</span>
            </li>
        </ul>

        <ul class="fractal_colorswatch_list">
            <h3>Grays</h3>
            <li>
                <div class="fractal_colorswatch" style="background-color: var(--grey-1)"></div>
                <span>--grey-1</span>
            </li>
            <li>
                <div class="fractal_colorswatch" style="background-color: var(--grey-2)"></div>
                <span>--grey-2</span>
            </li>
            <li>
                <div class="fractal_colorswatch" style="background-color: var(--grey-3)"></div>
                <span>--grey-3</span>
            </li>
        </ul>

        <ul class="fractal_colorswatch_list">
            <h3>Black &amp; White</h3>
            <li>
                <div class="fractal_colorswatch" style="background-color: var(--black)"></div>
                <span>--black</span>
            </li>
            <li>
                <div class="fractal_colorswatch" style="background-color: var(--pitchblack)"></div>
                <span>--pitchblack</span>
            </li>
            <li>
                <div class="fractal_colorswatch" style="background-color: var(--white)"></div>
                <span>--white</span>
            </li>
            <li>
                <div class="fractal_colorswatch" style="background-color: var(--bg)"></div>
                <span>--bg</span>
            </li>
        </ul>
    </div>
</div>