<div class="sg sg-colors">
<div class="sg-colors__group">Brand Colors</div>
<div class="sg-colors__palette">
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#1E4697;"></div>
<div class="sg-colors__info">
<strong>Primary Blue</strong> <small class="fw-500">( $color-primary-blue )</small><br />
rgb(30,70,151)<br />
#1E4697<br />
</div>
</div>
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#CC3414;"></div>
<div class="sg-colors__info">
<strong>Primary Red</strong> <small class="fw-500">( $color-primary-red )</small><br />
rgb(204,52,20)<br />
#CC3414<br />
</div>
</div>
</div>
<div class="sg-colors__group">Support Colors</div>
<div class="sg-colors__palette">
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#ECF2FE;"></div>
<div class="sg-colors__info">
<strong>Sky Lighter</strong> <small class="fw-500">( $color-sky-lighter )</small><br />
rgb(236,242,254)<br />
#ECF2FE<br />
</div>
</div>
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#E3EBFF;"></div>
<div class="sg-colors__info">
<strong>Sky Light</strong> <small class="fw-500">( $color-sky-light )</small><br />
rgb(227,235,255)<br />
#E3EBFF<br />
</div>
</div>
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#B7CBEF;"></div>
<div class="sg-colors__info">
<strong>Sky</strong> <small class="fw-500">( $color-sky )</small><br />
rgb(183,203,239)<br />
#B7CBEF<br />
</div>
</div>
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#F8F1EB;"></div>
<div class="sg-colors__info">
<strong>Rose Lighter</strong> <small class="fw-500">( $color-rose-lighter )</small><br />
rgb(248,241,235)<br />
#F8F1EB<br />
</div>
</div>
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#FFEDE6;"></div>
<div class="sg-colors__info">
<strong>Rose Light</strong> <small class="fw-500">( $color-rose-light )</small><br />
rgb(255,237,230)<br />
#FFEDE6<br />
</div>
</div>
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#F8C4B0;"></div>
<div class="sg-colors__info">
<strong>Rose</strong> <small class="fw-500">( $color-rose )</small><br />
rgb(248,196,176)<br />
#F8C4B0<br />
</div>
</div>
</div>
<div class="sg-colors__group">Status Colors</div>
<div class="sg-colors__palette">
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#FCD67B;"></div>
<div class="sg-colors__info">
<strong>Yellow Light</strong> <small class="fw-500">( $color-yellow-light )</small><br />
rgb(252,214,123)<br />
#FCD67B<br />
</div>
</div>
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#FFCA49;"></div>
<div class="sg-colors__info">
<strong>Yellow</strong> <small class="fw-500">( $color-yellow )</small><br />
rgb(255,202,73)<br />
#FFCA49<br />
</div>
</div>
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#DCA114;"></div>
<div class="sg-colors__info">
<strong>Yellow Dark</strong> <small class="fw-500">( $color-yellow-dark )</small><br />
rgb(220,161,20)<br />
#DCA114<br />
</div>
</div>
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#FCE2CB;"></div>
<div class="sg-colors__info">
<strong>Orange Light</strong> <small class="fw-500">( $color-orange-light )</small><br />
rgb(252,226,203)<br />
#FCE2CB<br />
</div>
</div>
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#F2994A;"></div>
<div class="sg-colors__info">
<strong>Orange</strong> <small class="fw-500">( $color-orange )</small><br />
rgb(242,153,74)<br />
#F2994A<br />
</div>
</div>
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#C76C1C;"></div>
<div class="sg-colors__info">
<strong>Orange Dark</strong> <small class="fw-500">( $color-orange-dark )</small><br />
rgb(199,108,28)<br />
#C76C1C<br />
</div>
</div>
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#FFD3CA;"></div>
<div class="sg-colors__info">
<strong>Red Light</strong> <small class="fw-500">( $color-red-light )</small><br />
rgb(255, 211, 202)<br />
#FFD3CA<br />
</div>
</div>
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#D55627;"></div>
<div class="sg-colors__info">
<strong>Red</strong> <small class="fw-500">( $color-red )</small><br />
rgb(213, 86, 39)<br />
#D55627<br />
</div>
</div>
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#A02D03;"></div>
<div class="sg-colors__info">
<strong>Red Dark</strong> <small class="fw-500">( $color-red-dark )</small><br />
rgb(160, 45, 3)<br />
#A02D03<br />
</div>
</div>
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#CEF9E0;"></div>
<div class="sg-colors__info">
<strong>Green Light</strong> <small class="fw-500">( $color-green-light )</small><br />
rgb(206, 249, 224)<br />
#CEF9E0<br />
</div>
</div>
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#3B9B63;"></div>
<div class="sg-colors__info">
<strong>Green</strong> <small class="fw-500">( $color-green )</small><br />
rgb(59, 155, 99)<br />
#3B9B63<br />
</div>
</div>
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#158645;"></div>
<div class="sg-colors__info">
<strong>Green Dark</strong> <small class="fw-500">( $color-green-dark )</small><br />
rgb(21, 134, 69)<br />
#158645<br />
</div>
</div>
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#B1D0FF;"></div>
<div class="sg-colors__info">
<strong>Blue Light</strong> <small class="fw-500">( $color-blue-light )</small><br />
rgb(177, 208, 255)<br />
#B1D0FF<br />
</div>
</div>
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#446CC9;"></div>
<div class="sg-colors__info">
<strong>Blue</strong> <small class="fw-500">( $color-blue )</small><br />
rgb(68, 108, 201)<br />
#446CC9<br />
</div>
</div>
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#122571;"></div>
<div class="sg-colors__info">
<strong>Blue Dark</strong> <small class="fw-500">( $color-blue-dark )</small><br />
rgb(18, 37, 113)<br />
#122571<br />
</div>
</div>
</div>
<div class="sg-colors__group">Extra Colors</div>
<div class="sg-colors__palette">
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#F8DBBB;"></div>
<div class="sg-colors__info">
<strong>Beige</strong> <small class="fw-500">( $color-beige )</small><br />
rgb(248, 219, 187)<br />
#F8DBBB<br />
</div>
</div>
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#7FCDD1;"></div>
<div class="sg-colors__info">
<strong>Bermuda</strong> <small class="fw-500">( $color-bermuda )</small><br />
rgb(127,205,209)<br />
#7FCDD1<br />
</div>
</div>
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#44AEC9;"></div>
<div class="sg-colors__info">
<strong>Viking</strong> <small class="fw-500">( $color-viking )</small><br />
rgb(68,174,201)<br />
#44AEC9<br />
</div>
</div>
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#6BADA1;"></div>
<div class="sg-colors__info">
<strong>Tradewind</strong> <small class="fw-500">( $color-tradewind )</small><br />
rgb(107,173,161)<br />
#6BADA1<br />
</div>
</div>
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#156E98;"></div>
<div class="sg-colors__info">
<strong>Denim</strong> <small class="fw-500">( $color-denim )</small><br />
rgb(21,110,152)<br />
#156E98<br />
</div>
</div>
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#FFD018;"></div>
<div class="sg-colors__info">
<strong>Stars</strong> <small class="fw-500">( $color-stars )</small><br />
rgb(255,208,24)<br />
#FFD018<br />
</div>
</div>
</div>
<div class="sg-colors__group">Grayscale Colors</div>
<div class="sg-colors__palette">
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#FFFFFF;"></div>
<div class="sg-colors__info">
<strong>White</strong> <small class="fw-500">( $color-white )</small><br />
rgb(255,255,255)<br />
#FFFFFF<br />
</div>
</div>
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#FDFDFB;"></div>
<div class="sg-colors__info">
<strong>White Gray</strong> <small class="fw-500">( $color-white-gray )</small><br />
rgb(255,255,255)<br />
#FDFDFB<br />
</div>
</div>
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#F4F5F3;"></div>
<div class="sg-colors__info">
<strong>Gray Lighter</strong> <small class="fw-500">( $color-gray-lighter )</small><br />
rgb(244,245,243)<br />
#F4F5F3<br />
</div>
</div>
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#F0EFEE;"></div>
<div class="sg-colors__info">
<strong>Gray Light</strong> <small class="fw-500">( $color-gray-light )</small><br />
rgb(240,239,238)<br />
#F0EFEE<br />
</div>
</div>
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#C4C5C8;"></div>
<div class="sg-colors__info">
<strong>Gray</strong> <small class="fw-500">( $color-gray )</small><br />
rgb(196,197,200)<br />
#C4C5C8<br />
</div>
</div>
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#6D7078;"></div>
<div class="sg-colors__info">
<strong>Gray Dark</strong> <small class="fw-500">( $color-gray-dark )</small><br />
rgb(118,122,131)<br />
#6D7078<br />
</div>
</div>
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#44474F;"></div>
<div class="sg-colors__info">
<strong>Gray Darker</strong> <small class="fw-500">( $color-gray-darker )</small><br />
rgb(68,71,79)<br />
#44474F<br />
</div>
</div>
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#272833;"></div>
<div class="sg-colors__info">
<strong>Primary Text</strong> <small class="fw-500">( $color-primary-text )</small><br />
rgb(39,40,51)<br />
#272833<br />
</div>
</div>
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:#000000;"></div>
<div class="sg-colors__info">
<strong>Black</strong> <small class="fw-500">( $color-black )</small><br />
rgb(0,0,0)<br />
#000000<br />
</div>
</div>
</div>
</div>
<div class="sg sg-colors">
{% for group in colors -%}
<div class="sg-colors__group">{{group.name}}</div>
<div class="sg-colors__palette">
{% for item in group.items -%}
<div class="sg-colors__color">
<div class="sg-colors__swatch" style="background-color:{{item.hex}};"></div>
<div class="sg-colors__info">
<strong>{{item.name}}</strong> <small class="fw-500">( {{item.var}} )</small><br/>
{{item.rgb}}<br/>
{{item.hex}}<br/>
</div>
</div>
{%- endfor %}
</div>
{%- endfor %}
</div>
{
"colors": [
{
"name": "Brand Colors",
"items": [
{
"name": "Primary Blue",
"hex": "#1E4697",
"rgb": "rgb(30,70,151)",
"var": "$color-primary-blue"
},
{
"name": "Primary Red",
"hex": "#CC3414",
"rgb": "rgb(204,52,20)",
"var": "$color-primary-red"
}
]
},
{
"name": "Support Colors",
"items": [
{
"name": "Sky Lighter",
"hex": "#ECF2FE",
"rgb": "rgb(236,242,254)",
"var": "$color-sky-lighter"
},
{
"name": "Sky Light",
"hex": "#E3EBFF",
"rgb": "rgb(227,235,255)",
"var": "$color-sky-light"
},
{
"name": "Sky",
"hex": "#B7CBEF",
"rgb": "rgb(183,203,239)",
"var": "$color-sky"
},
{
"name": "Rose Lighter",
"hex": "#F8F1EB",
"rgb": "rgb(248,241,235)",
"var": "$color-rose-lighter"
},
{
"name": "Rose Light",
"hex": "#FFEDE6",
"rgb": "rgb(255,237,230)",
"var": "$color-rose-light"
},
{
"name": "Rose",
"hex": "#F8C4B0",
"rgb": "rgb(248,196,176)",
"var": "$color-rose"
}
]
},
{
"name": "Status Colors",
"items": [
{
"name": "Yellow Light",
"hex": "#FCD67B",
"rgb": "rgb(252,214,123)",
"var": "$color-yellow-light"
},
{
"name": "Yellow",
"hex": "#FFCA49",
"rgb": "rgb(255,202,73)",
"var": "$color-yellow"
},
{
"name": "Yellow Dark",
"hex": "#DCA114",
"rgb": "rgb(220,161,20)",
"var": "$color-yellow-dark"
},
{
"name": "Orange Light",
"hex": "#FCE2CB",
"rgb": "rgb(252,226,203)",
"var": "$color-orange-light"
},
{
"name": "Orange",
"hex": "#F2994A",
"rgb": "rgb(242,153,74)",
"var": "$color-orange"
},
{
"name": "Orange Dark",
"hex": "#C76C1C",
"rgb": "rgb(199,108,28)",
"var": "$color-orange-dark"
},
{
"name": "Red Light",
"hex": "#FFD3CA",
"rgb": "rgb(255, 211, 202)",
"var": "$color-red-light"
},
{
"name": "Red",
"hex": "#D55627",
"rgb": "rgb(213, 86, 39)",
"var": "$color-red"
},
{
"name": "Red Dark",
"hex": "#A02D03",
"rgb": "rgb(160, 45, 3)",
"var": "$color-red-dark"
},
{
"name": "Green Light",
"hex": "#CEF9E0",
"rgb": "rgb(206, 249, 224)",
"var": "$color-green-light"
},
{
"name": "Green",
"hex": "#3B9B63",
"rgb": "rgb(59, 155, 99)",
"var": "$color-green"
},
{
"name": "Green Dark",
"hex": "#158645",
"rgb": "rgb(21, 134, 69)",
"var": "$color-green-dark"
},
{
"name": "Blue Light",
"hex": "#B1D0FF",
"rgb": "rgb(177, 208, 255)",
"var": "$color-blue-light"
},
{
"name": "Blue",
"hex": "#446CC9",
"rgb": "rgb(68, 108, 201)",
"var": "$color-blue"
},
{
"name": "Blue Dark",
"hex": "#122571",
"rgb": "rgb(18, 37, 113)",
"var": "$color-blue-dark"
}
]
},
{
"name": "Extra Colors",
"items": [
{
"name": "Beige",
"hex": "#F8DBBB",
"rgb": "rgb(248, 219, 187)",
"var": "$color-beige"
},
{
"name": "Bermuda",
"hex": "#7FCDD1",
"rgb": "rgb(127,205,209)",
"var": "$color-bermuda"
},
{
"name": "Viking",
"hex": "#44AEC9",
"rgb": "rgb(68,174,201)",
"var": "$color-viking"
},
{
"name": "Tradewind",
"hex": "#6BADA1",
"rgb": "rgb(107,173,161)",
"var": "$color-tradewind"
},
{
"name": "Denim",
"hex": "#156E98",
"rgb": "rgb(21,110,152)",
"var": "$color-denim"
},
{
"name": "Stars",
"hex": "#FFD018",
"rgb": "rgb(255,208,24)",
"var": "$color-stars"
}
]
},
{
"name": "Grayscale Colors",
"items": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": "rgb(255,255,255)",
"var": "$color-white"
},
{
"name": "White Gray",
"hex": "#FDFDFB",
"rgb": "rgb(255,255,255)",
"var": "$color-white-gray"
},
{
"name": "Gray Lighter",
"hex": "#F4F5F3",
"rgb": "rgb(244,245,243)",
"var": "$color-gray-lighter"
},
{
"name": "Gray Light",
"hex": "#F0EFEE",
"rgb": "rgb(240,239,238)",
"var": "$color-gray-light"
},
{
"name": "Gray",
"hex": "#C4C5C8",
"rgb": "rgb(196,197,200)",
"var": "$color-gray"
},
{
"name": "Gray Dark",
"hex": "#6D7078",
"rgb": "rgb(118,122,131)",
"var": "$color-gray-dark"
},
{
"name": "Gray Darker",
"hex": "#44474F",
"rgb": "rgb(68,71,79)",
"var": "$color-gray-darker"
},
{
"name": "Primary Text",
"hex": "#272833",
"rgb": "rgb(39,40,51)",
"var": "$color-primary-text"
},
{
"name": "Black",
"hex": "#000000",
"rgb": "rgb(0,0,0)",
"var": "$color-black"
}
]
}
]
}
No notes defined.