<section class="sg-color-scheme-demo grav-u-color-scheme-buildit-black-red">
    <h4>Buildit Black Red color scheme</h4>
    <p>Can be applied to containers using the <code>grav-u-color-scheme-buildit-black-red</code> utility class.</p>

    <table class="grav-u-font-size-minus-2">

        <tr>

            <td></td>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-neutral);"></span>
                    <code>--grav-co-grp-a-neutral</code>
                </span>

            </th>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-neutral-alt);"></span>
                    <code>--grav-co-grp-a-neutral-alt</code>
                </span>

            </th>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-accent);"></span>
                    <code>--grav-co-grp-a-accent</code>
                </span>

            </th>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-accent-success);"></span>
                    <code>--grav-co-grp-a-accent-success</code>
                </span>

            </th>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-accent-attention);"></span>
                    <code>--grav-co-grp-a-accent-attention</code>
                </span>

            </th>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-accent-danger);"></span>
                    <code>--grav-co-grp-a-accent-danger</code>
                </span>

            </th>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-neutral);"></span>
                    <code>--grav-co-grp-b-neutral</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ebecef;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">17.777</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ebecef;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">17.777</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ebecef;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">17.777</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ebecef;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">17.777</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ebecef;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">17.777</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ebecef;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">17.777</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-neutral-subtle);"></span>
                    <code>--grav-co-grp-b-neutral-subtle</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #c3c7ce;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #c3c7ce; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">12.381</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #c3c7ce;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #c3c7ce; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">12.381</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #c3c7ce;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #c3c7ce; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">12.381</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #c3c7ce;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #c3c7ce; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">12.381</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #c3c7ce;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #c3c7ce; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">12.381</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #c3c7ce;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #c3c7ce; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">12.381</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-neutral-emphasis);"></span>
                    <code>--grav-co-grp-b-neutral-emphasis</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">21</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">21</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">21</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">21</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">21</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">21</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-control);"></span>
                    <code>--grav-co-grp-b-control</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ebecef;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">17.777</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ebecef;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">17.777</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ebecef;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">17.777</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ebecef;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">17.777</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ebecef;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">17.777</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ebecef;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">17.777</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-control-alt);"></span>
                    <code>--grav-co-grp-b-control-alt</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #b433e2;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #b433e2; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.512</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #b433e2;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #b433e2; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.512</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #b433e2;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #b433e2; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.512</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #b433e2;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #b433e2; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.512</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #b433e2;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #b433e2; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.512</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #b433e2;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #b433e2; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.512</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-control-emphasis);"></span>
                    <code>--grav-co-grp-b-control-emphasis</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff3f00;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.963</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff3f00;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.963</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff3f00;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.963</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff3f00;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.963</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff3f00;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.963</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff3f00;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.963</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-control-active);"></span>
                    <code>--grav-co-grp-b-control-active</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff663b;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff663b; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.216</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff663b;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff663b; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.216</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff663b;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff663b; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.216</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff663b;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff663b; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.216</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff663b;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff663b; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.216</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff663b;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff663b; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.216</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-control-disabled);"></span>
                    <code>--grav-co-grp-b-control-disabled</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #878e9d;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #878e9d; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.386</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #878e9d;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #878e9d; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.386</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #878e9d;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #878e9d; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.386</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #878e9d;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #878e9d; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.386</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #878e9d;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #878e9d; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.386</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #878e9d;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #878e9d; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.386</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-accent);"></span>
                    <code>--grav-co-grp-b-accent</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff3f00;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.963</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff3f00;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.963</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff3f00;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.963</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff3f00;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.963</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff3f00;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.963</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff3f00;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.963</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-accent-success);"></span>
                    <code>--grav-co-grp-b-accent-success</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #00c76a;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #00c76a; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">9.377</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #00c76a;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #00c76a; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">9.377</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #00c76a;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #00c76a; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">9.377</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #00c76a;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #00c76a; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">9.377</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #00c76a;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #00c76a; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">9.377</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #00c76a;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #00c76a; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">9.377</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-accent-attention);"></span>
                    <code>--grav-co-grp-b-accent-attention</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffa719;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffa719; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">10.794</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffa719;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffa719; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">10.794</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffa719;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffa719; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">10.794</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffa719;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffa719; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">10.794</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffa719;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffa719; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">10.794</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffa719;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffa719; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">10.794</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-accent-danger);"></span>
                    <code>--grav-co-grp-b-accent-danger</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff2552;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff2552; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.638</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff2552;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff2552; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.638</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff2552;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff2552; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.638</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff2552;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff2552; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.638</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff2552;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff2552; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.638</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff2552;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff2552; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.638</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

        </tr>

    </table>

</section>

<section class="sg-color-scheme-demo grav-u-color-scheme-buildit-dark-red">
    <h4>Buildit Dark Red color scheme</h4>
    <p>Can be applied to containers using the <code>grav-u-color-scheme-buildit-dark-red</code> utility class.</p>

    <table class="grav-u-font-size-minus-2">

        <tr>

            <td></td>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-neutral);"></span>
                    <code>--grav-co-grp-a-neutral</code>
                </span>

            </th>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-neutral-alt);"></span>
                    <code>--grav-co-grp-a-neutral-alt</code>
                </span>

            </th>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-accent);"></span>
                    <code>--grav-co-grp-a-accent</code>
                </span>

            </th>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-accent-success);"></span>
                    <code>--grav-co-grp-a-accent-success</code>
                </span>

            </th>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-accent-attention);"></span>
                    <code>--grav-co-grp-a-accent-attention</code>
                </span>

            </th>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-accent-danger);"></span>
                    <code>--grav-co-grp-a-accent-danger</code>
                </span>

            </th>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-neutral);"></span>
                    <code>--grav-co-grp-b-neutral</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.144</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">21</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.144</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.144</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.144</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.144</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-neutral-subtle);"></span>
                    <code>--grav-co-grp-b-neutral-subtle</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ebecef;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">15.36</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ebecef;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">17.777</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ebecef;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">15.36</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ebecef;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">15.36</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ebecef;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">15.36</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ebecef;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">15.36</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-neutral-emphasis);"></span>
                    <code>--grav-co-grp-b-neutral-emphasis</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.144</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">21</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.144</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.144</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.144</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.144</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-control);"></span>
                    <code>--grav-co-grp-b-control</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.144</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">21</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.144</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.144</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.144</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.144</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-control-alt);"></span>
                    <code>--grav-co-grp-b-control-alt</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #c766e9;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #c766e9; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.621</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #c766e9;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #c766e9; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.506</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #c766e9;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #c766e9; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.621</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #c766e9;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #c766e9; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.621</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #c766e9;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #c766e9; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.621</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #c766e9;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #c766e9; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.621</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-control-emphasis);"></span>
                    <code>--grav-co-grp-b-control-emphasis</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff3f00;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.152</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff3f00;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.963</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff3f00;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.152</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff3f00;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.152</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff3f00;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.152</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff3f00;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.152</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-control-active);"></span>
                    <code>--grav-co-grp-b-control-active</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff663b;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff663b; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.234</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff663b;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff663b; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.216</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff663b;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff663b; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.234</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff663b;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff663b; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.234</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff663b;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff663b; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.234</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff663b;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff663b; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.234</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-control-disabled);"></span>
                    <code>--grav-co-grp-b-control-disabled</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #878e9d;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #878e9d; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.518</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #878e9d;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #878e9d; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.386</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #878e9d;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #878e9d; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.518</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #878e9d;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #878e9d; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.518</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #878e9d;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #878e9d; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.518</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #878e9d;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #878e9d; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.518</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-accent);"></span>
                    <code>--grav-co-grp-b-accent</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff3f00;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.152</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff3f00;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.963</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff3f00;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.152</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff3f00;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.152</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff3f00;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.152</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff3f00;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff3f00; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.152</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-accent-success);"></span>
                    <code>--grav-co-grp-b-accent-success</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #00c76a;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #00c76a; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.102</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #00c76a;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #00c76a; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">9.377</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #00c76a;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #00c76a; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.102</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #00c76a;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #00c76a; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.102</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #00c76a;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #00c76a; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.102</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #00c76a;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #00c76a; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.102</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-accent-attention);"></span>
                    <code>--grav-co-grp-b-accent-attention</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffa719;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffa719; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">9.326</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffa719;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffa719; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">10.794</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffa719;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffa719; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">9.326</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffa719;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffa719; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">9.326</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffa719;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffa719; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">9.326</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffa719;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffa719; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">9.326</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-accent-danger);"></span>
                    <code>--grav-co-grp-b-accent-danger</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff5173;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff5173; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.769</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff5173;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff5173; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.677</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff5173;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff5173; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.769</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff5173;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff5173; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.769</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff5173;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff5173; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.769</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff5173;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff5173; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.769</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

        </tr>

    </table>

</section>

<section class="sg-color-scheme-demo grav-u-color-scheme-buildit-dark">
    <h4>Buildit Dark color scheme</h4>
    <p>Can be applied to containers using the <code>grav-u-color-scheme-buildit-dark</code> utility class.</p>

    <table class="grav-u-font-size-minus-2">

        <tr>

            <td></td>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-neutral);"></span>
                    <code>--grav-co-grp-a-neutral</code>
                </span>

            </th>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-neutral-alt);"></span>
                    <code>--grav-co-grp-a-neutral-alt</code>
                </span>

            </th>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-accent);"></span>
                    <code>--grav-co-grp-a-accent</code>
                </span>

            </th>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-accent-success);"></span>
                    <code>--grav-co-grp-a-accent-success</code>
                </span>

            </th>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-accent-attention);"></span>
                    <code>--grav-co-grp-a-accent-attention</code>
                </span>

            </th>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-accent-danger);"></span>
                    <code>--grav-co-grp-a-accent-danger</code>
                </span>

            </th>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-neutral);"></span>
                    <code>--grav-co-grp-b-neutral</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.144</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">21</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.144</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.144</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.144</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.144</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-neutral-subtle);"></span>
                    <code>--grav-co-grp-b-neutral-subtle</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ebecef;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">15.36</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ebecef;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">17.777</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ebecef;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">15.36</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ebecef;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">15.36</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ebecef;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">15.36</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ebecef;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ebecef; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">15.36</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-neutral-emphasis);"></span>
                    <code>--grav-co-grp-b-neutral-emphasis</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.144</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">21</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.144</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.144</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.144</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.144</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-control);"></span>
                    <code>--grav-co-grp-b-control</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.144</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">21</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.144</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.144</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.144</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.144</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-control-alt);"></span>
                    <code>--grav-co-grp-b-control-alt</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #c766e9;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #c766e9; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.621</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #c766e9;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #c766e9; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.506</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #c766e9;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #c766e9; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.621</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #c766e9;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #c766e9; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.621</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #c766e9;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #c766e9; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.621</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #c766e9;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #c766e9; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.621</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-control-emphasis);"></span>
                    <code>--grav-co-grp-b-control-emphasis</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #74a2fc;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #74a2fc; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.185</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #74a2fc;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #74a2fc; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.316</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #74a2fc;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #74a2fc; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.185</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #74a2fc;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #74a2fc; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.185</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #74a2fc;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #74a2fc; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.185</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #74a2fc;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #74a2fc; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.185</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-control-active);"></span>
                    <code>--grav-co-grp-b-control-active</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #98a5e5;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #98a5e5; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.645</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #98a5e5;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #98a5e5; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.849</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #98a5e5;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #98a5e5; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.645</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #98a5e5;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #98a5e5; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.645</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #98a5e5;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #98a5e5; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.645</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #98a5e5;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #98a5e5; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.645</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-control-disabled);"></span>
                    <code>--grav-co-grp-b-control-disabled</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #878e9d;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #878e9d; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.518</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #878e9d;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #878e9d; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.386</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #878e9d;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #878e9d; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.518</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #878e9d;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #878e9d; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.518</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #878e9d;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #878e9d; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.518</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #878e9d;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #878e9d; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.518</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-accent);"></span>
                    <code>--grav-co-grp-b-accent</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #4382fb;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #4382fb; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.033</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #4382fb;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #4382fb; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.825</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #4382fb;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #4382fb; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.033</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #4382fb;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #4382fb; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.033</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #4382fb;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #4382fb; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.033</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #4382fb;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #4382fb; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.033</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-accent-success);"></span>
                    <code>--grav-co-grp-b-accent-success</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #00c76a;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #00c76a; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.102</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #00c76a;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #00c76a; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">9.377</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #00c76a;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #00c76a; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.102</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #00c76a;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #00c76a; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.102</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #00c76a;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #00c76a; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.102</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #00c76a;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #00c76a; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.102</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-accent-attention);"></span>
                    <code>--grav-co-grp-b-accent-attention</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffa719;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffa719; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">9.326</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffa719;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffa719; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">10.794</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffa719;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffa719; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">9.326</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffa719;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffa719; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">9.326</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffa719;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffa719; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">9.326</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffa719;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffa719; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">9.326</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-accent-danger);"></span>
                    <code>--grav-co-grp-b-accent-danger</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff5173;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff5173; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.769</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ff5173;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff5173; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.677</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff5173;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff5173; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.769</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff5173;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff5173; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.769</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff5173;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff5173; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.769</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ff5173;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ff5173; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.769</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

        </tr>

    </table>

</section>

<section class="sg-color-scheme-demo grav-u-color-scheme-buildit-white">
    <h4>Buildit White color scheme</h4>
    <p>Can be applied to containers using the <code>grav-u-color-scheme-buildit-white</code> utility class.</p>

    <table class="grav-u-font-size-minus-2">

        <tr>

            <td></td>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-neutral);"></span>
                    <code>--grav-co-grp-a-neutral</code>
                </span>

            </th>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-neutral-alt);"></span>
                    <code>--grav-co-grp-a-neutral-alt</code>
                </span>

            </th>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-accent);"></span>
                    <code>--grav-co-grp-a-accent</code>
                </span>

            </th>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-accent-success);"></span>
                    <code>--grav-co-grp-a-accent-success</code>
                </span>

            </th>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-accent-attention);"></span>
                    <code>--grav-co-grp-a-accent-attention</code>
                </span>

            </th>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-accent-danger);"></span>
                    <code>--grav-co-grp-a-accent-danger</code>
                </span>

            </th>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-neutral);"></span>
                    <code>--grav-co-grp-b-neutral</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">21</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #f2f7ff; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #f2f7ff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">19.524</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">21</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ccf4e1; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ccf4e1;">Xyz</span>
                    <span class="sg-color-contrast__ratio">17.595</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffedd1; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffedd1;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.286</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">21</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-neutral-subtle);"></span>
                    <code>--grav-co-grp-b-neutral-subtle</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.144</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #f2f7ff; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #f2f7ff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">16.869</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.144</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ccf4e1; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ccf4e1;">Xyz</span>
                    <span class="sg-color-contrast__ratio">15.202</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffedd1; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffedd1;">Xyz</span>
                    <span class="sg-color-contrast__ratio">15.8</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #061434;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #061434; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.144</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-neutral-emphasis);"></span>
                    <code>--grav-co-grp-b-neutral-emphasis</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">21</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #f2f7ff; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #f2f7ff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">19.524</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">21</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ccf4e1; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ccf4e1;">Xyz</span>
                    <span class="sg-color-contrast__ratio">17.595</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffedd1; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffedd1;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.286</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">21</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-control);"></span>
                    <code>--grav-co-grp-b-control</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">21</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #f2f7ff; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #f2f7ff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">19.524</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">21</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ccf4e1; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ccf4e1;">Xyz</span>
                    <span class="sg-color-contrast__ratio">17.595</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffedd1; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffedd1;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.286</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">21</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-control-alt);"></span>
                    <code>--grav-co-grp-b-control-alt</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #8100af;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #8100af; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.227</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #f2f7ff; background-color: #8100af;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #8100af; background-color: #f2f7ff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.649</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #8100af;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #8100af; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.227</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ccf4e1; background-color: #8100af;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #8100af; background-color: #ccf4e1;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.893</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffedd1; background-color: #8100af;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #8100af; background-color: #ffedd1;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.164</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #8100af;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #8100af; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.227</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-control-emphasis);"></span>
                    <code>--grav-co-grp-b-control-emphasis</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #0060ff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #0060ff; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.101</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #f2f7ff; background-color: #0060ff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #0060ff; background-color: #f2f7ff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.742</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #0060ff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #0060ff; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.101</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ccf4e1; background-color: #0060ff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #0060ff; background-color: #ccf4e1;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.274</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa-lrg">AA-lrg</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffedd1; background-color: #0060ff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #0060ff; background-color: #ffedd1;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.442</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa-lrg">AA-lrg</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #0060ff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #0060ff; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.101</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-control-active);"></span>
                    <code>--grav-co-grp-b-control-active</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #0000c8;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #0000c8; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">11.45</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #f2f7ff; background-color: #0000c8;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #0000c8; background-color: #f2f7ff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">10.645</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #0000c8;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #0000c8; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">11.45</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ccf4e1; background-color: #0000c8;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #0000c8; background-color: #ccf4e1;">Xyz</span>
                    <span class="sg-color-contrast__ratio">9.594</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffedd1; background-color: #0000c8;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #0000c8; background-color: #ffedd1;">Xyz</span>
                    <span class="sg-color-contrast__ratio">9.971</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #0000c8;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #0000c8; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">11.45</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-control-disabled);"></span>
                    <code>--grav-co-grp-b-control-disabled</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #697184;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #697184; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.888</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #f2f7ff; background-color: #697184;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #697184; background-color: #f2f7ff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.545</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #697184;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #697184; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.888</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ccf4e1; background-color: #697184;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #697184; background-color: #ccf4e1;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.096</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa-lrg">AA-lrg</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffedd1; background-color: #697184;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #697184; background-color: #ffedd1;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.257</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa-lrg">AA-lrg</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #697184;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #697184; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.888</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-accent);"></span>
                    <code>--grav-co-grp-b-accent</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #0060ff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #0060ff; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.101</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #f2f7ff; background-color: #0060ff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #0060ff; background-color: #f2f7ff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.742</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #0060ff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #0060ff; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.101</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ccf4e1; background-color: #0060ff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #0060ff; background-color: #ccf4e1;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.274</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa-lrg">AA-lrg</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffedd1; background-color: #0060ff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #0060ff; background-color: #ffedd1;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.442</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa-lrg">AA-lrg</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #0060ff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #0060ff; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.101</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-accent-success);"></span>
                    <code>--grav-co-grp-b-accent-success</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">21</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #f2f7ff; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #f2f7ff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">19.524</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">21</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ccf4e1; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ccf4e1;">Xyz</span>
                    <span class="sg-color-contrast__ratio">17.595</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffedd1; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffedd1;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.286</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">21</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-accent-attention);"></span>
                    <code>--grav-co-grp-b-accent-attention</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">21</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #f2f7ff; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #f2f7ff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">19.524</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">21</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ccf4e1; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ccf4e1;">Xyz</span>
                    <span class="sg-color-contrast__ratio">17.595</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffedd1; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffedd1;">Xyz</span>
                    <span class="sg-color-contrast__ratio">18.286</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">21</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-accent-danger);"></span>
                    <code>--grav-co-grp-b-accent-danger</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #cc1e42;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #cc1e42; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.48</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #f2f7ff; background-color: #cc1e42;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #cc1e42; background-color: #f2f7ff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.095</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #cc1e42;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #cc1e42; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.48</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ccf4e1; background-color: #cc1e42;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #cc1e42; background-color: #ccf4e1;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.592</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffedd1; background-color: #cc1e42;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #cc1e42; background-color: #ffedd1;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.772</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #cc1e42;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #cc1e42; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.48</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

        </tr>

    </table>

</section>

<section class="sg-color-scheme-demo grav-u-color-scheme-teal-black">
    <h4>Teal Black color scheme</h4>
    <p>Can be applied to containers using the <code>grav-u-color-scheme-teal-black</code> utility class.</p>

    <table class="grav-u-font-size-minus-2">

        <tr>

            <td></td>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-neutral);"></span>
                    <code>--grav-co-grp-a-neutral</code>
                </span>

            </th>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-neutral-alt);"></span>
                    <code>--grav-co-grp-a-neutral-alt</code>
                </span>

            </th>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-accent);"></span>
                    <code>--grav-co-grp-a-accent</code>
                </span>

            </th>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-accent-success);"></span>
                    <code>--grav-co-grp-a-accent-success</code>
                </span>

            </th>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-accent-attention);"></span>
                    <code>--grav-co-grp-a-accent-attention</code>
                </span>

            </th>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-accent-danger);"></span>
                    <code>--grav-co-grp-a-accent-danger</code>
                </span>

            </th>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-neutral);"></span>
                    <code>--grav-co-grp-b-neutral</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #cccccc;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #cccccc; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">13.077</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #262626; background-color: #cccccc;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #cccccc; background-color: #262626;">Xyz</span>
                    <span class="sg-color-contrast__ratio">9.424</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #cccccc;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #cccccc; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">13.077</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #cccccc;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #cccccc; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">13.077</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #cccccc;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #cccccc; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">13.077</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #cccccc;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #cccccc; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">13.077</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-neutral-subtle);"></span>
                    <code>--grav-co-grp-b-neutral-subtle</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #999999;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #999999; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.371</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #262626; background-color: #999999;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #999999; background-color: #262626;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.312</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #999999;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #999999; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.371</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #999999;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #999999; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.371</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #999999;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #999999; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.371</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #999999;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #999999; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.371</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-neutral-emphasis);"></span>
                    <code>--grav-co-grp-b-neutral-emphasis</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #e6e6e6;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #e6e6e6; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">16.826</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #262626; background-color: #e6e6e6;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #e6e6e6; background-color: #262626;">Xyz</span>
                    <span class="sg-color-contrast__ratio">12.126</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #e6e6e6;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #e6e6e6; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">16.826</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #e6e6e6;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #e6e6e6; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">16.826</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #e6e6e6;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #e6e6e6; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">16.826</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #e6e6e6;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #e6e6e6; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">16.826</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-control);"></span>
                    <code>--grav-co-grp-b-control</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #cccccc;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #cccccc; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">13.077</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #262626; background-color: #cccccc;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #cccccc; background-color: #262626;">Xyz</span>
                    <span class="sg-color-contrast__ratio">9.424</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #cccccc;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #cccccc; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">13.077</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #cccccc;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #cccccc; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">13.077</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #cccccc;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #cccccc; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">13.077</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #cccccc;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #cccccc; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">13.077</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-control-alt);"></span>
                    <code>--grav-co-grp-b-control-alt</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #b69cca;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #b69cca; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.597</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #262626; background-color: #b69cca;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #b69cca; background-color: #262626;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.196</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #b69cca;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #b69cca; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.597</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #b69cca;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #b69cca; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.597</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #b69cca;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #b69cca; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.597</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #b69cca;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #b69cca; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.597</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-control-emphasis);"></span>
                    <code>--grav-co-grp-b-control-emphasis</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #00b49d;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #00b49d; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.015</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #262626; background-color: #00b49d;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #00b49d; background-color: #262626;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.776</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #00b49d;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #00b49d; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.015</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #00b49d;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #00b49d; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.015</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #00b49d;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #00b49d; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.015</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #00b49d;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #00b49d; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.015</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-control-active);"></span>
                    <code>--grav-co-grp-b-control-active</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #50c0ad;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #50c0ad; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">9.484</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #262626; background-color: #50c0ad;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #50c0ad; background-color: #262626;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.835</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #50c0ad;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #50c0ad; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">9.484</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #50c0ad;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #50c0ad; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">9.484</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #50c0ad;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #50c0ad; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">9.484</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #50c0ad;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #50c0ad; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">9.484</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-control-disabled);"></span>
                    <code>--grav-co-grp-b-control-disabled</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #999999;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #999999; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.371</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #262626; background-color: #999999;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #999999; background-color: #262626;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.312</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #999999;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #999999; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.371</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #999999;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #999999; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.371</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #999999;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #999999; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.371</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #999999;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #999999; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.371</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-accent);"></span>
                    <code>--grav-co-grp-b-accent</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #00b49d;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #00b49d; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.015</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #262626; background-color: #00b49d;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #00b49d; background-color: #262626;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.776</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #00b49d;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #00b49d; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.015</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #00b49d;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #00b49d; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.015</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #00b49d;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #00b49d; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.015</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #00b49d;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #00b49d; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.015</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-accent-success);"></span>
                    <code>--grav-co-grp-b-accent-success</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #b6d772;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #b6d772; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">12.952</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #262626; background-color: #b6d772;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #b6d772; background-color: #262626;">Xyz</span>
                    <span class="sg-color-contrast__ratio">9.334</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #b6d772;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #b6d772; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">12.952</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #b6d772;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #b6d772; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">12.952</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #b6d772;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #b6d772; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">12.952</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #b6d772;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #b6d772; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">12.952</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-accent-attention);"></span>
                    <code>--grav-co-grp-b-accent-attention</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffd27c;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffd27c; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">14.762</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #262626; background-color: #ffd27c;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffd27c; background-color: #262626;">Xyz</span>
                    <span class="sg-color-contrast__ratio">10.638</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffd27c;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffd27c; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">14.762</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffd27c;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffd27c; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">14.762</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffd27c;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffd27c; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">14.762</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #ffd27c;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffd27c; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">14.762</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-accent-danger);"></span>
                    <code>--grav-co-grp-b-accent-danger</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #f15b46;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #f15b46; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.325</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #262626; background-color: #f15b46;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #f15b46; background-color: #262626;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.558</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #f15b46;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #f15b46; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.325</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #f15b46;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #f15b46; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.325</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #f15b46;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #f15b46; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.325</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #000000; background-color: #f15b46;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #f15b46; background-color: #000000;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.325</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

        </tr>

    </table>

</section>

<section class="sg-color-scheme-demo grav-u-color-scheme-teal-dark-gray">
    <h4>Teal Dark Gray color scheme</h4>
    <p>Can be applied to containers using the <code>grav-u-color-scheme-teal-dark-gray</code> utility class.</p>

    <table class="grav-u-font-size-minus-2">

        <tr>

            <td></td>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-neutral);"></span>
                    <code>--grav-co-grp-a-neutral</code>
                </span>

            </th>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-neutral-alt);"></span>
                    <code>--grav-co-grp-a-neutral-alt</code>
                </span>

            </th>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-accent);"></span>
                    <code>--grav-co-grp-a-accent</code>
                </span>

            </th>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-accent-success);"></span>
                    <code>--grav-co-grp-a-accent-success</code>
                </span>

            </th>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-accent-attention);"></span>
                    <code>--grav-co-grp-a-accent-attention</code>
                </span>

            </th>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-accent-danger);"></span>
                    <code>--grav-co-grp-a-accent-danger</code>
                </span>

            </th>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-neutral);"></span>
                    <code>--grav-co-grp-b-neutral</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #404040; background-color: #e6e6e6;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #e6e6e6; background-color: #404040;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.308</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #404040; background-color: #e6e6e6;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #e6e6e6; background-color: #404040;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.308</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #e6e6e6;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #e6e6e6; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.203</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #e6e6e6;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #e6e6e6; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.203</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #e6e6e6;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #e6e6e6; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.203</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #e6e6e6;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #e6e6e6; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.203</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-neutral-subtle);"></span>
                    <code>--grav-co-grp-b-neutral-subtle</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #404040; background-color: #cccccc;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #cccccc; background-color: #404040;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.456</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #404040; background-color: #cccccc;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #cccccc; background-color: #404040;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.456</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #cccccc;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #cccccc; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.598</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #cccccc;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #cccccc; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.598</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #cccccc;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #cccccc; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.598</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #cccccc;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #cccccc; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.598</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-neutral-emphasis);"></span>
                    <code>--grav-co-grp-b-neutral-emphasis</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #404040; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #404040;">Xyz</span>
                    <span class="sg-color-contrast__ratio">10.368</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #404040; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #404040;">Xyz</span>
                    <span class="sg-color-contrast__ratio">10.368</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.989</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.989</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.989</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.989</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-control);"></span>
                    <code>--grav-co-grp-b-control</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #404040; background-color: #e6e6e6;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #e6e6e6; background-color: #404040;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.308</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #404040; background-color: #e6e6e6;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #e6e6e6; background-color: #404040;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.308</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #e6e6e6;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #e6e6e6; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.203</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #e6e6e6;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #e6e6e6; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.203</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #e6e6e6;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #e6e6e6; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.203</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #e6e6e6;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #e6e6e6; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.203</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-control-alt);"></span>
                    <code>--grav-co-grp-b-control-alt</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #404040; background-color: #d6c9e3;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #d6c9e3; background-color: #404040;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.578</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #404040; background-color: #d6c9e3;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #d6c9e3; background-color: #404040;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.578</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #d6c9e3;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #d6c9e3; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.703</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #d6c9e3;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #d6c9e3; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.703</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #d6c9e3;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #d6c9e3; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.703</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #d6c9e3;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #d6c9e3; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.703</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-control-emphasis);"></span>
                    <code>--grav-co-grp-b-control-emphasis</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #404040; background-color: #82cdbf;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #82cdbf; background-color: #404040;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.645</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #404040; background-color: #82cdbf;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #82cdbf; background-color: #404040;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.645</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #82cdbf;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #82cdbf; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.895</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #82cdbf;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #82cdbf; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.895</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #82cdbf;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #82cdbf; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.895</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #82cdbf;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #82cdbf; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.895</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-control-active);"></span>
                    <code>--grav-co-grp-b-control-active</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #404040; background-color: #acdcd2;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #acdcd2; background-color: #404040;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.874</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #404040; background-color: #acdcd2;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #acdcd2; background-color: #404040;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.874</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #acdcd2;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #acdcd2; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.96</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #acdcd2;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #acdcd2; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.96</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #acdcd2;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #acdcd2; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.96</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #acdcd2;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #acdcd2; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.96</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-control-disabled);"></span>
                    <code>--grav-co-grp-b-control-disabled</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #404040; background-color: #b3b3b3;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #b3b3b3; background-color: #404040;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.945</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #404040; background-color: #b3b3b3;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #b3b3b3; background-color: #404040;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.945</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #b3b3b3;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #b3b3b3; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.287</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa-lrg">AA-lrg</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #b3b3b3;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #b3b3b3; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.287</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa-lrg">AA-lrg</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #b3b3b3;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #b3b3b3; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.287</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa-lrg">AA-lrg</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #b3b3b3;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #b3b3b3; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.287</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa-lrg">AA-lrg</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-accent);"></span>
                    <code>--grav-co-grp-b-accent</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #404040; background-color: #82cdbf;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #82cdbf; background-color: #404040;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.645</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #404040; background-color: #82cdbf;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #82cdbf; background-color: #404040;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.645</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #82cdbf;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #82cdbf; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.895</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #82cdbf;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #82cdbf; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.895</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #82cdbf;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #82cdbf; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.895</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #82cdbf;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #82cdbf; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.895</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-accent-success);"></span>
                    <code>--grav-co-grp-b-accent-success</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #404040; background-color: #c7df94;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #c7df94; background-color: #404040;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.115</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #404040; background-color: #c7df94;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #c7df94; background-color: #404040;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.115</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #c7df94;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #c7df94; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.169</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #c7df94;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #c7df94; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.169</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #c7df94;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #c7df94; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.169</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #c7df94;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #c7df94; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.169</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-accent-attention);"></span>
                    <code>--grav-co-grp-b-accent-attention</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #404040; background-color: #ffdfa4;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffdfa4; background-color: #404040;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.069</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #404040; background-color: #ffdfa4;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffdfa4; background-color: #404040;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.069</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffdfa4;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffdfa4; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.996</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffdfa4;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffdfa4; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.996</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffdfa4;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffdfa4; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.996</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffdfa4;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #ffdfa4; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.996</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-accent-danger);"></span>
                    <code>--grav-co-grp-b-accent-danger</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #404040; background-color: #f9ac90;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #f9ac90; background-color: #404040;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.595</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #404040; background-color: #f9ac90;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #f9ac90; background-color: #404040;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.595</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #f9ac90;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #f9ac90; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.851</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #f9ac90;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #f9ac90; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.851</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #f9ac90;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #f9ac90; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.851</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #f9ac90;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #f9ac90; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.851</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

        </tr>

    </table>

</section>

<section class="sg-color-scheme-demo grav-u-color-scheme-teal-white">
    <h4>Teal White color scheme</h4>
    <p>Can be applied to containers using the <code>grav-u-color-scheme-teal-white</code> utility class.</p>

    <table class="grav-u-font-size-minus-2">

        <tr>

            <td></td>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-neutral);"></span>
                    <code>--grav-co-grp-a-neutral</code>
                </span>

            </th>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-neutral-alt);"></span>
                    <code>--grav-co-grp-a-neutral-alt</code>
                </span>

            </th>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-accent);"></span>
                    <code>--grav-co-grp-a-accent</code>
                </span>

            </th>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-accent-success);"></span>
                    <code>--grav-co-grp-a-accent-success</code>
                </span>

            </th>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-accent-attention);"></span>
                    <code>--grav-co-grp-a-accent-attention</code>
                </span>

            </th>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-a-accent-danger);"></span>
                    <code>--grav-co-grp-a-accent-danger</code>
                </span>

            </th>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-neutral);"></span>
                    <code>--grav-co-grp-b-neutral</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #404040;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #404040; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">10.368</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #f1f1f1; background-color: #404040;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #404040; background-color: #f1f1f1;">Xyz</span>
                    <span class="sg-color-contrast__ratio">9.18</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #404040;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #404040; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">10.368</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #eaf3d8; background-color: #404040;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #404040; background-color: #eaf3d8;">Xyz</span>
                    <span class="sg-color-contrast__ratio">9.04</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffdfa4; background-color: #404040;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #404040; background-color: #ffdfa4;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.069</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #fdd4c2; background-color: #404040;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #404040; background-color: #fdd4c2;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.59</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-neutral-subtle);"></span>
                    <code>--grav-co-grp-b-neutral-subtle</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.989</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #f1f1f1; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #f1f1f1;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.959</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.989</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #eaf3d8; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #eaf3d8;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.838</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffdfa4; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffdfa4;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.996</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #fdd4c2; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #fdd4c2;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.581</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-neutral-emphasis);"></span>
                    <code>--grav-co-grp-b-neutral-emphasis</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #404040;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #404040; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">10.368</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #f1f1f1; background-color: #404040;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #404040; background-color: #f1f1f1;">Xyz</span>
                    <span class="sg-color-contrast__ratio">9.18</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #404040;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #404040; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">10.368</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #eaf3d8; background-color: #404040;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #404040; background-color: #eaf3d8;">Xyz</span>
                    <span class="sg-color-contrast__ratio">9.04</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffdfa4; background-color: #404040;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #404040; background-color: #ffdfa4;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.069</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #fdd4c2; background-color: #404040;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #404040; background-color: #fdd4c2;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.59</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-control);"></span>
                    <code>--grav-co-grp-b-control</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.989</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #f1f1f1; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #f1f1f1;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.959</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.989</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #eaf3d8; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #eaf3d8;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.838</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffdfa4; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffdfa4;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.996</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #fdd4c2; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #fdd4c2;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.581</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-control-alt);"></span>
                    <code>--grav-co-grp-b-control-alt</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #6f2c91;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #6f2c91; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.589</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #f1f1f1; background-color: #6f2c91;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #6f2c91; background-color: #f1f1f1;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.604</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #6f2c91;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #6f2c91; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.589</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #eaf3d8; background-color: #6f2c91;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #6f2c91; background-color: #eaf3d8;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.489</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffdfa4; background-color: #6f2c91;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #6f2c91; background-color: #ffdfa4;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.684</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #fdd4c2; background-color: #6f2c91;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #6f2c91; background-color: #fdd4c2;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.287</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-control-emphasis);"></span>
                    <code>--grav-co-grp-b-control-emphasis</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #007c6c;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #007c6c; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.122</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #f1f1f1; background-color: #007c6c;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #007c6c; background-color: #f1f1f1;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.535</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #007c6c;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #007c6c; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.122</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #eaf3d8; background-color: #007c6c;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #007c6c; background-color: #eaf3d8;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.466</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa-lrg">AA-lrg</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffdfa4; background-color: #007c6c;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #007c6c; background-color: #ffdfa4;">Xyz</span>
                    <span class="sg-color-contrast__ratio">3.987</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa-lrg">AA-lrg</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #fdd4c2; background-color: #007c6c;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #007c6c; background-color: #fdd4c2;">Xyz</span>
                    <span class="sg-color-contrast__ratio">3.75</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa-lrg">AA-lrg</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-control-active);"></span>
                    <code>--grav-co-grp-b-control-active</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #005c50;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #005c50; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.934</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #f1f1f1; background-color: #005c50;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #005c50; background-color: #f1f1f1;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.025</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #005c50;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #005c50; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.934</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #eaf3d8; background-color: #005c50;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #005c50; background-color: #eaf3d8;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.918</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffdfa4; background-color: #005c50;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #005c50; background-color: #ffdfa4;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.175</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #fdd4c2; background-color: #005c50;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #005c50; background-color: #fdd4c2;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.808</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-control-disabled);"></span>
                    <code>--grav-co-grp-b-control-disabled</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #666666;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #666666; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.742</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #f1f1f1; background-color: #666666;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #666666; background-color: #f1f1f1;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.084</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #666666;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #666666; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.742</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #eaf3d8; background-color: #666666;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #666666; background-color: #eaf3d8;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.006</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffdfa4; background-color: #666666;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #666666; background-color: #ffdfa4;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.469</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa-lrg">AA-lrg</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #fdd4c2; background-color: #666666;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #666666; background-color: #fdd4c2;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.203</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa-lrg">AA-lrg</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-accent);"></span>
                    <code>--grav-co-grp-b-accent</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #007c6c;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #007c6c; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.122</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #f1f1f1; background-color: #007c6c;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #007c6c; background-color: #f1f1f1;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.535</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #007c6c;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #007c6c; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">5.122</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #eaf3d8; background-color: #007c6c;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #007c6c; background-color: #eaf3d8;">Xyz</span>
                    <span class="sg-color-contrast__ratio">4.466</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa-lrg">AA-lrg</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffdfa4; background-color: #007c6c;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #007c6c; background-color: #ffdfa4;">Xyz</span>
                    <span class="sg-color-contrast__ratio">3.987</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa-lrg">AA-lrg</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #fdd4c2; background-color: #007c6c;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #007c6c; background-color: #fdd4c2;">Xyz</span>
                    <span class="sg-color-contrast__ratio">3.75</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa-lrg">AA-lrg</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-accent-success);"></span>
                    <code>--grav-co-grp-b-accent-success</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.989</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #f1f1f1; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #f1f1f1;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.959</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.989</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #eaf3d8; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #eaf3d8;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.838</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffdfa4; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffdfa4;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.996</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #fdd4c2; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #fdd4c2;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.581</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-accent-attention);"></span>
                    <code>--grav-co-grp-b-accent-attention</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.989</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #f1f1f1; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #f1f1f1;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.959</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.989</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #eaf3d8; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #eaf3d8;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.838</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffdfa4; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffdfa4;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.996</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #fdd4c2; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #fdd4c2;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.581</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

        </tr>

        <tr>

            <th>

                <span class="sg-color-prop">
                    <span style="background-color: var(--grav-co-grp-b-accent-danger);"></span>
                    <code>--grav-co-grp-b-accent-danger</code>
                </span>

            </th>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.989</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #f1f1f1; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #f1f1f1;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.959</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffffff; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffffff;">Xyz</span>
                    <span class="sg-color-contrast__ratio">8.989</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #eaf3d8; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #eaf3d8;">Xyz</span>
                    <span class="sg-color-contrast__ratio">7.838</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aaa">AAA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #ffdfa4; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #ffdfa4;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.996</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

            <td>

                <span class="sg-color-contrast">
                    <span class="sg-color-contrast__sample" style="color: #fdd4c2; background-color: #4d4848;">Xyz</span>
                    <span class="sg-color-contrast__sample" style="color: #4d4848; background-color: #fdd4c2;">Xyz</span>
                    <span class="sg-color-contrast__ratio">6.581</span>
                    <span class="sg-color-contrast__score sg-color-contrast__score--aa">AA</span>
                </span>

            </td>

        </tr>

    </table>

</section>
{%- macro colorProp(varName) %}
<span class="sg-color-prop">
  <span style="background-color: var({{ varName }});"></span>
  <code>{{ varName }}</code>
</span>
{% endmacro -%}

{%- macro colorContrast(contrastRatio, wcagRating, colorA, colorB) %}
<span class="sg-color-contrast">
  <span class="sg-color-contrast__sample" style="color: {{ colorA }}; background-color: {{ colorB }};">Xyz</span>
  <span class="sg-color-contrast__sample" style="color: {{ colorB }}; background-color: {{ colorA }};">Xyz</span>
  <span class="sg-color-contrast__ratio">{{ contrastRatio | round(3) }}</span>
  <span class="sg-color-contrast__score sg-color-contrast__score--{{ wcagRating | lower }}">{{ wcagRating }}</span>
</span>
{% endmacro -%}

{%- macro colorSchemeTable(tableData) %}
<table class="grav-u-font-size-minus-2">
  {% for row in tableData %}
    <tr>
      {% if loop.first %}
        {# header row #}
        {% for cell in row %}
          {% if loop.first %}
            {# top-left cell is blank #}
            <td></td>
          {% else %}
            <th>
              {{ colorProp(cell) | safe }}
            </th>
          {% endif %}
        {% endfor %}
      {% else %}
        {# normal row #}
        {% for cell in row %}
          {% if loop.first %}