Needs documentation…
<div class="swatch h20 mb8">
<div class="example swatch-color bg-red"></div>
<div class="sans-s5 fw700">red</div>
<div class="pattern-vars sans-s2 fw700">$color-red</div>
<div class="mono-s3 fw300">#be4900</div>
</div>
<div class="swatch h20 mb8">
<div class="example swatch-color bg-blue"></div>
<div class="sans-s5 fw700">blue</div>
<div class="pattern-vars sans-s2 fw700">$color-blue</div>
<div class="mono-s3 fw300">#056dd4</div>
</div>
<div class="swatch h20 mb8">
<div class="example swatch-color bg-gold"></div>
<div class="sans-s5 fw700">gold</div>
<div class="pattern-vars sans-s2 fw700">$color-gold</div>
<div class="mono-s3 fw300">#f4b400</div>
</div>
<div class="swatch h20 mb8">
<div class="example swatch-color bg-green"></div>
<div class="sans-s5 fw700">green</div>
<div class="pattern-vars sans-s2 fw700">$color-green</div>
<div class="mono-s3 fw300">#0baf00</div>
</div>
<div class="swatch h20 mb8">
<div class="example swatch-color bg-brightmint"></div>
<div class="sans-s5 fw700">brightmint</div>
<div class="pattern-vars sans-s2 fw700">$color-brightmint</div>
<div class="mono-s3 fw300">#00df99</div>
</div>
<div class="swatch h20 mb8">
<div class="example swatch-color bg-cream"></div>
<div class="sans-s5 fw700">cream</div>
<div class="pattern-vars sans-s2 fw700">$color-cream</div>
<div class="mono-s3 fw300">#f5f5f3</div>
</div>
<div class="swatch h20 mb8">
<div class="example swatch-color bg-trueblack"></div>
<div class="sans-s5 fw700">trueblack</div>
<div class="pattern-vars sans-s2 fw700">$color-trueblack</div>
<div class="mono-s3 fw300">#000000</div>
</div>
<div class="swatch h20 mb8">
<div class="example swatch-color bg-textblack"></div>
<div class="sans-s5 fw700">textblack</div>
<div class="pattern-vars sans-s2 fw700">$color-textblack</div>
<div class="mono-s3 fw300">#333333</div>
</div>
<div class="swatch h20 mb8">
<div class="example swatch-color bg-darkgray"></div>
<div class="sans-s5 fw700">darkgray</div>
<div class="pattern-vars sans-s2 fw700">$color-darkgray</div>
<div class="mono-s3 fw300">#555555</div>
</div>
<div class="swatch h20 mb8">
<div class="example swatch-color bg-mediumgray"></div>
<div class="sans-s5 fw700">mediumgray</div>
<div class="pattern-vars sans-s2 fw700">$color-mediumgray</div>
<div class="mono-s3 fw300">#8e8e8e</div>
</div>
<div class="swatch h20 mb8">
<div class="example swatch-color bg-mediumgray-trans"></div>
<div class="sans-s5 fw700">mediumgray-trans</div>
<div class="pattern-vars sans-s2 fw700">$color-mediumgray-trans</div>
<div class="mono-s3 fw300">rgba(0, 0, 0, .4)</div>
</div>
<div class="swatch h20 mb8">
<div class="example swatch-color bg-lightgray"></div>
<div class="sans-s5 fw700">lightgray</div>
<div class="pattern-vars sans-s2 fw700">$color-lightgray</div>
<div class="mono-s3 fw300">#d3d3d3</div>
</div>
<div class="swatch h20 mb8">
<div class="example swatch-color bg-lightestgray"></div>
<div class="sans-s5 fw700">lightestgray</div>
<div class="pattern-vars sans-s2 fw700">$color-lightestgray</div>
<div class="mono-s3 fw300">#f5f5f3</div>
</div>
<div class="swatch h20 mb8">
<div class="example swatch-color bg-white"></div>
<div class="sans-s5 fw700">white</div>
<div class="pattern-vars sans-s2 fw700">$color-white</div>
<div class="mono-s3 fw300">#ffffff</div>
</div>
{% for color in colors %}
<div class="swatch h20 mb8">
<div class="example swatch-color bg-{{ color.colorName }}"></div>
<div class="sans-s5 fw700">{{ color.colorName }}</div>
<div class="pattern-vars sans-s2 fw700">$color-{{ color.colorName }}</div>
<div class="mono-s3 fw300">{{ color.colorCode }}</div>
</div>
{% endfor %}
{
"colors": [
{
"color": null,
"colorName": "red",
"colorCode": "#be4900"
},
{
"color": null,
"colorName": "blue",
"colorCode": "#056dd4"
},
{
"color": null,
"colorName": "gold",
"colorCode": "#f4b400"
},
{
"color": null,
"colorName": "green",
"colorCode": "#0baf00"
},
{
"color": null,
"colorName": "brightmint",
"colorCode": "#00df99"
},
{
"color": null,
"colorName": "cream",
"colorCode": "#f5f5f3"
},
{
"color": null,
"colorName": "trueblack",
"colorCode": "#000000"
},
{
"color": null,
"colorName": "textblack",
"colorCode": "#333333"
},
{
"color": null,
"colorName": "darkgray",
"colorCode": "#555555"
},
{
"color": null,
"colorName": "mediumgray",
"colorCode": "#8e8e8e"
},
{
"color": null,
"colorName": "mediumgray-trans",
"colorCode": "rgba(0, 0, 0, .4)"
},
{
"color": null,
"colorName": "lightgray",
"colorCode": "#d3d3d3"
},
{
"color": null,
"colorName": "lightestgray",
"colorCode": "#f5f5f3"
},
{
"color": null,
"colorName": "white",
"colorCode": "#ffffff"
}
]
}