index.html

---
footer: splash
layout: splash
header: splash

permalink: /

---

<div class="usa-grid">
  <div class="usa-width-one-whole" id="welcome-panel">
    <br>
    <br>
    <br>
    <br>
    <br>
    <h1 id="welcome-to-the-chicago-design-system">Welcome to the Chicago Design System</h1>

    <p>The Chicago Design System is the public visual identity of the City of Chicago.</p>

    <p>It is an inclusive, equitable, cost saving system for City communication and for public use to show civic pride.</p>


    <div class="card-deck">
      {% for item in site.data.systems %}
        <a href="{{ site.baseurl }}{{ item.url }}">
          <div class="card card-home{%if item.color %} card-{{item.color}}{%endif%}">
            <div class="card-body">
              <h3 class="card-title">{{ item.title }}</h3>
              <p class="card-text">{{ item.description }}</p>
            </div>
          </div>
        </a>
      {% endfor %}
    </div>
    <br>
    <br>
    <h2 id="quote">Sometimes the creating we do is creating a platform that allows other people to pitch in.</h2>
    <p id="quoted">–Theaster Gates</p>
    <br>
    <br>
    <br>
  </div>
</div>
<div class="usa-grid">
  <div class="usa-width-one-whole">
    <div id="public-mark">
      <div class="usa-logo" id="logo">
 <iframe width="560" height="315" src="https://www.youtube.com/embed/bSPKTfO5M8I" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>      </div>
    </div>
  </div>
</div>