li>
                            Predictability:
                            <ul class="ml-sm">
                                <li>Surface colors = Where an element sits (hierarchy). </li>
                                <li>Semantic colors = What it means (state/action). </li>
                            </ul>
                        </li>
                        <li>
                            Accessibility:
                            <ul class="ml-sm">
                                <li> Semantic colo