---
layout: layout_flow.liquid
title: Style Guide
---

<h2 class="Title--sizeH3">Colors</h2>

<div class="StyleGuide-colors">
  <!-- headings -->
  <div class="StyleGuide-color--heading">for backgrounds</div>
  <div class="StyleGuide-color--heading">for text</div>

  <!-- reds -->
  <div class="StyleGuide-color--red400">$red-400</div>
  <div class="StyleGuide-color--red600">$red-600</div>

  <!-- oranges -->
  <div class="StyleGuide-color--orange400">$orange-400</div>
  <div class="StyleGuide-color--orange600">$orange-600</div>

  <!-- yellows -->
  <div class="StyleGuide-color--yellow400">$yellow-400</div>
  <div class="StyleGuide-color--yellow600">$yellow-600</div>

  <!-- greens -->
  <div class="StyleGuide-color--green400">$green-400</div>
  <div class="StyleGuide-color--green600">$green-600</div>

  <!-- blues -->
  <div class="StyleGuide-color--blue400">$blue-400</div>
  <div class="StyleGuide-color--blue600">$blue-600</div>

  <!-- purples -->
  <div class="StyleGuide-color--purple400">$purple-400</div>
  <div class="StyleGuide-color--purple600">$purple-600</div>

  <!-- pinks -->
  <div class="StyleGuide-color--pink400">$pink-400</div>
  <div class="StyleGuide-color--pink600">$pink-600</div>

  <!-- neutrals -->
  <div class="StyleGuide-color--neutral50">$neutral-400</div>
  <div class="StyleGuide-color--neutral900">$neutral-600</div>

  <div class="StyleGuide-color--gradient">$gradient</div>
</div>

<h2 class="Title--sizeH3">Text</h2>

<p class="u-rainbowifyChildren"><b>&lt;p&gt;</b>This is a paragraph, containing
long amounts of text that likely wraps onto multiple lines. I can say anything
here, but if it's too long readers are likely to skip
it!<b>&lt;&sol;p&gt;</b></p>

<div class="StyleGuide-rainbowText">
  <div class="StyleGuide-italics">
    <i>&lt;i&gt;italic text&lt;&sol;i&gt;</i><br>
    <i>&lt;i&gt;italic text&lt;&sol;i&gt;</i><br>
    <i>&lt;i&gt;italic text&lt;&sol;i&gt;</i><br>
    <i>&lt;i&gt;italic text&lt;&sol;i&gt;</i><br>
    <i>&lt;i&gt;italic text&lt;&sol;i&gt;</i><br>
    <i>&lt;i&gt;italic text&lt;&sol;i&gt;</i><br>
    <i>&lt;i&gt;italic text&lt;&sol;i&gt;</i><br>
  </div>

  <div class="StyleGuide-bold">
    <b>&lt;b&gt;bold text&lt;&sol;b&gt;</b><br>
    <b>&lt;b&gt;bold text&lt;&sol;b&gt;</b><br>
    <b>&lt;b&gt;bold text&lt;&sol;b&gt;</b><br>
    <b>&lt;b&gt;bold text&lt;&sol;b&gt;</b><br>
    <b>&lt;b&gt;bold text&lt;&sol;b&gt;</b><br>
    <b>&lt;b&gt;bold text&lt;&sol;b&gt;</b><br>
    <b>&lt;b&gt;bold text&lt;&sol;b&gt;</b><br>
  </div>

  <div class="StyleGuide-links">
    <a class="Link">&lt;a class="Link"&gt;link&lt;&sol;a&gt;</a><br>
    <a class="Link">&lt;a class="Link"&gt;link&lt;&sol;a&gt;</a><br>
    <a class="Link">&lt;a class="Link"&gt;link&lt;&sol;a&gt;</a><br>
    <a class="Link">&lt;a class="Link"&gt;link&lt;&sol;a&gt;</a><br>
    <a class="Link">&lt;a class="Link"&gt;link&lt;&sol;a&gt;</a><br>
    <a class="Link">&lt;a class="Link"&gt;link&lt;&sol;a&gt;</a><br>
    <a class="Link">&lt;a class="Link"&gt;link&lt;&sol;a&gt;</a><br>
  </div>
</div>

<div>
  <div class="Title--sizeH2">.Title--sizeH2</div>
  <div class="Title--sizeH3">.Title--sizeH3</div>
  <div class="Title--sizeH4">.Title--sizeH4</div>
  <div class="Title--sizeH5">.Title--sizeH5</div>
</div>

<ul class="List">
  <li class="List-item">&lt;li class="List-item"&gt;unordered
  list&lt;&sol;li&gt;</li>
  <li class="List-item">&lt;li class="List-item"&gt;unordered
  list&lt;&sol;li&gt;</li>
  <li class="List-item">&lt;li class="List-item"&gt;unordered
  list&lt;&sol;li&gt;</li>
  <li class="List-item">&lt;li class="List-item"&gt;unordered
  list&lt;&sol;li&gt;</li>
  <li class="List-item">&lt;li class="List-item"&gt;unordered
  list&lt;&sol;li&gt;</li>
  <li class="List-item">&lt;li class="List-item"&gt;unordered
  list&lt;&sol;li&gt;</li>
  <li class="List-item">&lt;li class="List-item"&gt;unordered
  list&lt;&sol;li&gt;</li>
</ul>

<h2 class="Title--sizeH3">Mixins/Components</h2>

<div class="StyleGuide-rainbowBorder">@include mixins.gradient-border;</div>

<div class="u-textCenter">&lt;hr&gt;</div>
<hr>