San Francisco Design System

Colors 

<h2>
    Black &amp; White</h2>
<ul class="sf-colors">

    <li class="sf-color">
        <span class="sf-swatch" style="background-color: #212123;"></span>
        <span class="sf-label">
          $black
          <br>
          <code>#212123</code>
        </span>
    </li>

    <li class="sf-color">
        <span class="sf-swatch" style="background-color: #ffffff;"></span>
        <span class="sf-label">
          $white
          <br>
          <code>#ffffff</code>
        </span>
    </li>

</ul>

<h2>Gray</h2>
<ul class="sf-colors">

    <li class="sf-color">
        <span class="sf-swatch" style="background-color: #f8f8f8;"></span>
        <span class="sf-label">
          $grey-1
          <br>
          <code>#f8f8f8</code>
        </span>
    </li>

    <li class="sf-color">
        <span class="sf-swatch" style="background-color: #f1f1f1;"></span>
        <span class="sf-label">
          $grey-2
          <br>
          <code>#f1f1f1</code>
        </span>
    </li>

    <li class="sf-color">
        <span class="sf-swatch" style="background-color: #e9e9e9;"></span>
        <span class="sf-label">
          $grey-3
          <br>
          <code>#e9e9e9</code>
        </span>
    </li>

    <li class="sf-color">
        <span class="sf-swatch" style="background-color: #d3d3d3;"></span>
        <span class="sf-label">
          $grey-4
          <br>
          <code>#d3d3d3</code>
        </span>
    </li>

</ul>

<h2>Blue</h2>
<ul class="sf-colors">

    <li class="sf-color">
        <span class="sf-swatch" style="background-color: #edf4f7;"></span>
        <span class="sf-label">
          $blue-1
          <br>
          <code>#edf4f7</code>
        </span>
    </li>

    <li class="sf-color">
        <span class="sf-swatch" style="background-color: #a9d6ea;"></span>
        <span class="sf-label">
          $blue-2
          <br>
          <code>#a9d6ea</code>
        </span>
    </li>

    <li class="sf-color">
        <span class="sf-swatch" style="background-color: #4f66ee;"></span>
        <span class="sf-label">
          $bright-blue
          <br>
          <code>#4f66ee</code>
        </span>
    </li>

    <li class="sf-color">
        <span class="sf-swatch" style="background-color: #0c1464;"></span>
        <span class="sf-label">
          $dark-blue
          <br>
          <code>#0c1464</code>
        </span>
    </li>

</ul>

<h2>Red</h2>
<ul class="sf-colors">

    <li class="sf-color">
        <span class="sf-swatch" style="background-color: #f5e9e5;"></span>
        <span class="sf-label">
          $red-1
          <br>
          <code>#f5e9e5</code>
        </span>
    </li>

    <li class="sf-color">
        <span class="sf-swatch" style="background-color: #efcabb;"></span>
        <span class="sf-label">
          $red-2
          <br>
          <code>#efcabb</code>
        </span>
    </li>

    <li class="sf-color">
        <span class="sf-swatch" style="background-color: #c9563a;"></span>
        <span class="sf-label">
          $red-3
          <br>
          <code>#c9563a</code>
        </span>
    </li>

    <li class="sf-color">
        <span class="sf-swatch" style="background-color: #bc4427;"></span>
        <span class="sf-label">
          $red-4
          <br>
          <code>#bc4427</code>
        </span>
    </li>

</ul>

<h2>Green</h2>
<ul class="sf-colors">

    <li class="sf-color">
        <span class="sf-swatch" style="background-color: #e9f7ec;"></span>
        <span class="sf-label">
          $green-1
          <br>
          <code>#e9f7ec</code>
        </span>
    </li>

    <li class="sf-color">
        <span class="sf-swatch" style="background-color: #c0e2c5;"></span>
        <span class="sf-label">
          $green-2
          <br>
          <code>#c0e2c5</code>
        </span>
    </li>

    <li class="sf-color">
        <span class="sf-swatch" style="background-color: #00896d;"></span>
        <span class="sf-label">
          $green-3
          <br>
          <code>#00896d</code>
        </span>
    </li>

    <li class="sf-color">
        <span class="sf-swatch" style="background-color: #1b674d;"></span>
        <span class="sf-label">
          $green-4
          <br>
          <code>#1b674d</code>
        </span>
    </li>

</ul>

<h2>Purple</h2>
<ul class="sf-colors">

    <li class="sf-color">
        <span class="sf-swatch" style="background-color: #edebf6;"></span>
        <span class="sf-label">
          $purple-1
          <br>
          <code>#edebf6</code>
        </span>
    </li>

    <li class="sf-color">
        <span class="sf-swatch" style="background-color: #cccced;"></span>
        <span class="sf-label">
          $purple-2
          <br>
          <code>#cccced</code>
        </span>
    </li>

    <li class="sf-color">
        <span class="sf-swatch" style="background-color: #7d61b3;"></span>
        <span class="sf-label">
          $purple-3
          <br>
          <code>#7d61b3</code>
        </span>
    </li>

    <li class="sf-color">
        <span class="sf-swatch" style="background-color: #5a3e94;"></span>
        <span class="sf-label">
          $purple-4
          <br>
          <code>#5a3e94</code>
        </span>
    </li>

</ul>

<h2>Yellow</h2>
<ul class="sf-colors">

    <li class="sf-color">
        <span class="sf-swatch" style="background-color: #f8f1df;"></span>
        <span class="sf-label">
          $yellow-1
          <br>
          <code>#f8f1df</code>
        </span>
    </li>

    <li class="sf-color">
        <span class="sf-swatch" style="background-color: #f9e3a3;"></span>
        <span class="sf-label">
          $yellow-2
          <br>
          <code>#f9e3a3</code>
        </span>
    </li>

    <li class="sf-color">
        <span class="sf-swatch" style="background-color: #f4c435;"></span>
        <span class="sf-label">
          $yellow-3
          <br>
          <code>#f4c435</code>
        </span>
    </li>

    <li class="sf-color">
        <span class="sf-swatch" style="background-color: #e7b22e;"></span>
        <span class="sf-label">
          $yellow-4
          <br>
          <code>#e7b22e</code>
        </span>
    </li>

</ul>

<h2>Uncategorized</h2>
<ul class="sf-colors">

    <li class="sf-color">
        <span class="sf-swatch" style="background-color: #1c3e57;"></span>
        <span class="sf-label">
          $slate
          <br>
          <code>#1c3e57</code>
        </span>
    </li>

    </div>
 
{% for group in groups %}
  <h2>{{ group.title }}</h2>
  <ul class="sf-colors">
    {% for color in group.colors %}
      <li class="sf-color">
        <span class="sf-swatch" style="background-color: {{ colors[color] }};"></span>
        <span class="sf-label">
          ${{ color }}
          <br>
          <code>{{ colors[color] }}</code>
        </span>
      </li>
    {% endfor %}
  </ul>
{% endfor %}

<h2>Uncategorized</h2>
<ul class="sf-colors">
  {% for name, color in colors %}
    {% set grouped = false %}
    {% for group in groups %}
      {% if group.colors.indexOf(name) > -1 %}
        {% set grouped = true %}
      {% endif %}
    {% endfor %}
    {% if not grouped %}
      <li class="sf-color">
        <span class="sf-swatch" style="background-color: {{ color }};"></span>
        <span class="sf-label">
          ${{ name }}
          <br>
          <code>{{ color }}</code>
        </span>
      </li>
    {% endif %}
  {% endfor %}
</div>

{% macro swatch(name, color) %}
{% endmacro %}
 
{
  "colors": {
    "white": "#ffffff",
    "grey-1": "#f8f8f8",
    "grey-2": "#f1f1f1",
    "grey-3": "#e9e9e9",
    "grey-4": "#d3d3d3",
    "black": "#212123",
    "slate": "#1c3e57",
    "dark-blue": "#0c1464",
    "bright-blue": "#4f66ee",
    "blue-2": "#a9d6ea",
    "blue-1": "#edf4f7",
    "green-4": "#1b674d",
    "green-3": "#00896d",
    "green-2": "#c0e2c5",
    "green-1": "#e9f7ec",
    "red-4": "#bc4427",
    "red-3": "#c9563a",
    "red-2": "#efcabb",
    "red-1": "#f5e9e5",
    "purple-4": "#5a3e94",
    "purple-3": "#7d61b3",
    "purple-2": "#cccced",
    "purple-1": "#edebf6",
    "yellow-4": "#e7b22e",
    "yellow-3": "#f4c435",
    "yellow-2": "#f9e3a3",
    "yellow-1": "#f8f1df"
  },
  "groups": [
    {
      "title": "Black & White",
      "colors": [
        "black",
        "white"
      ]
    },
    {
      "title": "Gray",
      "colors": [
        "grey-1",
        "grey-2",
        "grey-3",
        "grey-4"
      ]
    },
    {
      "title": "Blue",
      "colors": [
        "blue-1",
        "blue-2",
        "bright-blue",
        "dark-blue"
      ]
    },
    {
      "title": "Red",
      "colors": [
        "red-1",
        "red-2",
        "red-3",
        "red-4"
      ]
    },
    {
      "title": "Green",
      "colors": [
        "green-1",
        "green-2",
        "green-3",
        "green-4"
      ]
    },
    {
      "title": "Purple",
      "colors": [
        "purple-1",
        "purple-2",
        "purple-3",
        "purple-4"
      ]
    },
    {
      "title": "Yellow",
      "colors": [
        "yellow-1",
        "yellow-2",
        "yellow-3",
        "yellow-4"
      ]
    }
  ]
}

There are no notes for this item.