Needs documentation…
<div class="swatch h20 mb8">
<div class="example swatch-color b1px b-red"></div>
<div class="sans-s5 fw700">red</div>
<div class="mono-s3 fw300">.b1px.b-red</div>
</div>
<div class="swatch h20 mb8">
<div class="example swatch-color b1px b-blue"></div>
<div class="sans-s5 fw700">blue</div>
<div class="mono-s3 fw300">.b1px.b-blue</div>
</div>
<div class="swatch h20 mb8">
<div class="example swatch-color b1px b-gold"></div>
<div class="sans-s5 fw700">gold</div>
<div class="mono-s3 fw300">.b1px.b-gold</div>
</div>
<div class="swatch h20 mb8">
<div class="example swatch-color b1px b-green"></div>
<div class="sans-s5 fw700">green</div>
<div class="mono-s3 fw300">.b1px.b-green</div>
</div>
<div class="swatch h20 mb8">
<div class="example swatch-color b1px b-brightmint"></div>
<div class="sans-s5 fw700">brightmint</div>
<div class="mono-s3 fw300">.b1px.b-brightmint</div>
</div>
<div class="swatch h20 mb8">
<div class="example swatch-color b1px b-cream"></div>
<div class="sans-s5 fw700">cream</div>
<div class="mono-s3 fw300">.b1px.b-cream</div>
</div>
<div class="swatch h20 mb8">
<div class="example swatch-color b1px b-trueblack"></div>
<div class="sans-s5 fw700">trueblack</div>
<div class="mono-s3 fw300">.b1px.b-trueblack</div>
</div>
<div class="swatch h20 mb8">
<div class="example swatch-color b1px b-textblack"></div>
<div class="sans-s5 fw700">textblack</div>
<div class="mono-s3 fw300">.b1px.b-textblack</div>
</div>
<div class="swatch h20 mb8">
<div class="example swatch-color b1px b-darkgray"></div>
<div class="sans-s5 fw700">darkgray</div>
<div class="mono-s3 fw300">.b1px.b-darkgray</div>
</div>
<div class="swatch h20 mb8">
<div class="example swatch-color b1px b-mediumgray"></div>
<div class="sans-s5 fw700">mediumgray</div>
<div class="mono-s3 fw300">.b1px.b-mediumgray</div>
</div>
<div class="swatch h20 mb8">
<div class="example swatch-color b1px b-mediumgray-trans"></div>
<div class="sans-s5 fw700">mediumgray-trans</div>
<div class="mono-s3 fw300">.b1px.b-mediumgray-trans</div>
</div>
<div class="swatch h20 mb8">
<div class="example swatch-color b1px b-lightgray"></div>
<div class="sans-s5 fw700">lightgray</div>
<div class="mono-s3 fw300">.b1px.b-lightgray</div>
</div>
<div class="swatch h20 mb8">
<div class="example swatch-color b1px b-lightestgray"></div>
<div class="sans-s5 fw700">lightestgray</div>
<div class="mono-s3 fw300">.b1px.b-lightestgray</div>
</div>
<div class="swatch h20 mb8">
<div class="example swatch-color b1px b-white"></div>
<div class="sans-s5 fw700">white</div>
<div class="mono-s3 fw300">.b1px.b-white</div>
</div>
{% for color in colors %}
<div class="swatch h20 mb8">
<div class="example swatch-color b1px b-{{ color.colorName }}"></div>
<div class="sans-s5 fw700">{{ color.colorName }}</div>
<div class="mono-s3 fw300">.b1px.b-{{ color.colorName }}</div>
</div>
{% endfor %}
{
"colors": [
{
"colorName": "red"
},
{
"colorName": "blue"
},
{
"colorName": "gold"
},
{
"colorName": "green"
},
{
"colorName": "brightmint"
},
{
"colorName": "cream"
},
{
"colorName": "trueblack"
},
{
"colorName": "textblack"
},
{
"colorName": "darkgray"
},
{
"colorName": "mediumgray"
},
{
"colorName": "mediumgray-trans"
},
{
"colorName": "lightgray"
},
{
"colorName": "lightestgray"
},
{
"colorName": "white"
}
],
"borders": [
{
"border": null,
"borderName": "1px",
"borderCode": "1px"
},
{
"border": null,
"borderName": "2px",
"borderCode": "2px"
},
{
"border": null,
"borderName": "4px",
"borderCode": "05"
},
{
"border": null,
"borderName": "8px",
"borderCode": "1"
}
],
"options": [
{
"option": null,
"optionName": "border-x",
"optionCode": "bx"
},
{
"option": null,
"optionName": "border-y",
"optionCode": "by"
},
{
"option": null,
"optionName": "border-top",
"optionCode": "bt"
},
{
"option": null,
"optionName": "border-right",
"optionCode": "br"
},
{
"option": null,
"optionName": "border-bottom",
"optionCode": "bb"
},
{
"option": null,
"optionName": "border-left",
"optionCode": "bl"
}
]
}