Web Docs

Color: Accent Colors 

<div class="colors columns-">
    <div class="color white-text" style="background:#0057b8">
        <h2>Royal Blue</h2>
        <p><code>#0057b8</code></p>
        <p><code>$royal</code></p>
    </div>
    <div class="color white-text" style="background:#5199e1">
        <h2>Medium Blue</h2>
        <p><code>#5199e1</code></p>
        <p><code>$royal50</code></p>
    </div>
    <div class="color" style="background:#afd6fe">
        <h2>Light Blue</h2>
        <p><code>#afd6fe</code></p>
        <p><code>$royal20</code></p>
    </div>
    <div class="color" style="background:#fcc015">
        <h2>Yellow</h2>
        <p><code>#fcc015</code></p>
        <p><code>$yellow</code></p>
    </div>
    <div class="color" style="background:#ffda73">
        <h2>Medium Yellow</h2>
        <p><code>#ffda73</code></p>
        <p><code>$yellow50</code></p>
    </div>
    <div class="color" style="background:#fff0c5">
        <h2>Light Yellow</h2>
        <p><code>#fff0c5</code></p>
        <p><code>$yellow20</code></p>
    </div>
    <div class="color white-text" style="background:#38870c">
        <h2>Green</h2>
        <p><code>#38870c</code></p>
        <p><code>$green</code></p>
    </div>
    <div class="color" style="background:#94c576">
        <h2>Medium Green</h2>
        <p><code>#94c576</code></p>
        <p><code>$green50</code></p>
    </div>
    <div class="color" style="background:#cee0c3">
        <h2>Light Green</h2>
        <p><code>#cee0c3</code></p>
        <p><code>$green20</code></p>
    </div>
    <div class="color white-text" style="background:#a60318">
        <h2>Red</h2>
        <p><code>#a60318</code></p>
        <p><code>$red</code></p>
    </div>
    <div class="color" style="background:#f5acb6">
        <h2>Medium Red</h2>
        <p><code>#f5acb6</code></p>
        <p><code>$red50</code></p>
    </div>
    <div class="color" style="background:#fde3e6">
        <h2>Light Red</h2>
        <p><code>#fde3e6</code></p>
        <p><code>$red20</code></p>
    </div>
</div>
 
<div class="colors columns-{{columns}}">
	{{#each colors }}
	<div class="color{{#if dark}} white-text{{/if}}" style="background:#{{hex}}">
		<h2>{{ name }}</h2>
		<p><code>#{{ hex }}</code></p>
		<p><code>${{ var }}</code></p>
	</div>
	{{/each}}
</div>
 
{
  "colors": [
    {
      "name": "Royal Blue",
      "var": "royal",
      "hex": "0057b8",
      "dark": true
    },
    {
      "name": "Medium Blue",
      "var": "royal50",
      "hex": "5199e1",
      "dark": true
    },
    {
      "name": "Light Blue",
      "var": "royal20",
      "hex": "afd6fe"
    },
    {
      "name": "Yellow",
      "var": "yellow",
      "hex": "fcc015"
    },
    {
      "name": "Medium Yellow",
      "var": "yellow50",
      "hex": "ffda73"
    },
    {
      "name": "Light Yellow",
      "var": "yellow20",
      "hex": "fff0c5"
    },
    {
      "name": "Green",
      "var": "green",
      "hex": "38870c",
      "dark": true
    },
    {
      "name": "Medium Green",
      "var": "green50",
      "hex": "94c576"
    },
    {
      "name": "Light Green",
      "var": "green20",
      "hex": "cee0c3"
    },
    {
      "name": "Red",
      "var": "red",
      "hex": "a60318",
      "dark": true
    },
    {
      "name": "Medium Red",
      "var": "red50",
      "hex": "f5acb6"
    },
    {
      "name": "Light Red",
      "var": "red20",
      "hex": "fde3e6"
    }
  ]
}