• $white #ffffff
• $gray-light #f5f5f5
• $gray #dbdbdb
• $gray-dark #ababab
• $black #000000

									
										<ul class="sg-colors list-reset">
  <li>
    <span class="sg-swatch" style="background: #ffffff;"></span>
    <span class="sg-label">$white</span>
    <span class="sg-label">#ffffff</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #f5f5f5;"></span>
    <span class="sg-label">$gray-light</span>
    <span class="sg-label">#f5f5f5</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #dbdbdb;"></span>
    <span class="sg-label">$gray</span>
    <span class="sg-label">#dbdbdb</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #ababab;"></span>
    <span class="sg-label">$gray-dark</span>
    <span class="sg-label">#ababab</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #000000;"></span>
    <span class="sg-label">$black</span>
    <span class="sg-label">#000000</span>
  </li>
</ul>
									
								

• $unibz #007be4
• $comp #f86b07
• $dsgn #ed331a
• $edu #6cc3ab
• $eco #ac145a
• $tech #1a8c64
• $library #e1a22e

									
										<ul class="sg-colors list-reset">
  <li>
    <span class="sg-swatch" style="background: #007be4;"></span>
    <span class="sg-label">$unibz</span>
    <span class="sg-label">#007be4</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #f86b07;"></span>
    <span class="sg-label">$comp</span>
    <span class="sg-label">#f86b07</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #ed331a;"></span>
    <span class="sg-label">$dsgn</span>
    <span class="sg-label">#ed331a</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #6cc3ab;"></span>
    <span class="sg-label">$edu</span>
    <span class="sg-label">#6cc3ab</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #ac145a;"></span>
    <span class="sg-label">$eco</span>
    <span class="sg-label">#ac145a</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #1a8c64;"></span>
    <span class="sg-label">$tech</span>
    <span class="sg-label">#1a8c64</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #e1a22e;"></span>
    <span class="sg-label">$library</span>
    <span class="sg-label">#e1a22e</span>
  </li>
</ul>
									
								

• $color-heading #444444
• $color-text #202020
• $color-text-gray #ababab
• $selection-color #b4d5fe

									
										<ul class="sg-colors list-reset">
  <li>
    <span class="sg-swatch" style="background: #444444;"></span>
    <span class="sg-label">$color-heading</span>
    <span class="sg-label">#444444</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #202020;"></span>
    <span class="sg-label">$color-text</span>
    <span class="sg-label">#202020</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #ababab;"></span>
    <span class="sg-label">$color-text-gray</span>
    <span class="sg-label">#ababab</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #b4d5fe;"></span>
    <span class="sg-label">$selection-color</span>
    <span class="sg-label">#b4d5fe</span>
  </li>
</ul>
									
								

• $facebook #3b5998
• $twitter #55acee
• $instagram #3f729b
• $linkedin #0077b5

									
										<ul class="sg-colors list-reset">
  <li>
    <span class="sg-swatch" style="background: #3b5998;"></span>
    <span class="sg-label">$facebook</span>
    <span class="sg-label">#3b5998</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #55acee;"></span>
    <span class="sg-label">$twitter</span>
    <span class="sg-label">#55acee</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #3f729b;"></span>
    <span class="sg-label">$instagram</span>
    <span class="sg-label">#3f729b</span>
  </li>
  <li>
    <span class="sg-swatch" style="background: #0077b5;"></span>
    <span class="sg-label">$linkedin</span>
    <span class="sg-label">#0077b5</span>
  </li>
</ul>
									
								

Primary font: "FF DIN Pro Light", "Helvetica Neue", "Helvetica", "Arial", sans-serif;

Primary font italic: "FF DIN Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif;

Primary font bold: "FF DIN Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif;

Secondary font: "freight-display-pro", Georgia, Times, "Times New Roman", serif;

Secondary font italic: "freight-display-pro", Georgia, Times, "Times New Roman", serif;

Secondary font bold: "freight-display-pro", Georgia, Times, "Times New Roman", serif;

									
										<p>Primary font: "FF DIN Pro Light", "Helvetica Neue",  "Helvetica", "Arial", sans-serif;</p>
<p><em>Primary font italic: "FF DIN Pro", "Helvetica Neue",  "Helvetica", "Arial", sans-serif;</em></p>
<p><strong>Primary font bold: "FF DIN Pro", "Helvetica Neue",  "Helvetica", "Arial", sans-serif;</strong></p>
<p class="font-secondary">Secondary font: "freight-display-pro", Georgia, Times, "Times New Roman", serif;</p>
<p class="font-secondary"><em>Secondary font italic: "freight-display-pro", Georgia, Times, "Times New Roman", serif;</em></p>
<p class="font-secondary"><strong>Secondary font bold: "freight-display-pro", Georgia, Times, "Times New Roman", serif;</strong></p>