You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1277 lines
72 KiB
1277 lines
72 KiB
<div id="colors" class="col page-header mb-4">
|
|
<h2>Colors</h2>
|
|
<p class="text-muted">The main I2P color is teal. Use Green as a secondary option and Yellow as accent color.</p>
|
|
</div>
|
|
|
|
<div class="color-palette row col-md-12 pt-3 p-0">
|
|
<div class="green col col-md-6 col-xs-12 mb-4">
|
|
<h5 class="pb-3">Indigo Extended</h5>
|
|
<div class="distributed palette">
|
|
<div class="colors">
|
|
<div class="color-overview background-indigo-100 p-2">
|
|
<span class="variable">$indigo-100</span>
|
|
<span class="hex f-small">#ECF3FF</span>
|
|
</div>
|
|
<div class="color-details border-indigo-100 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-indigo-100 border-indigo-100 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-indigo-100 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-indigo-100 border-indigo-100 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-indigo-100 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-indigo-100 border-indigo-100 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-indigo-100 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-indigo-100 border-indigo-100 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-indigo-100 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-indigo-200 p-2">
|
|
<span class="variable">$indigo-200</span>
|
|
<span class="hex f-small">#C6D9FE</span>
|
|
</div>
|
|
<div class="color-details border-indigo-200 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-indigo-200 border-indigo-200 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-indigo-200 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-indigo-200 border-indigo-200 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-indigo-200 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-indigo-200 border-indigo-200 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-indigo-200 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-indigo-200 border-indigo-200 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-indigo-200 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-indigo-300 p-2">
|
|
<span class="variable">$indigo-300</span>
|
|
<span class="hex f-small">#A4BEFB</span>
|
|
</div>
|
|
<div class="color-details border-indigo-300 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-indigo-300 border-indigo-300 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-indigo-300 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-indigo-300 border-indigo-300 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-indigo-300 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-indigo-300 border-indigo-300 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-indigo-300 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-indigo-300 border-indigo-300 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-indigo-300 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-indigo-400 p-2">
|
|
<span class="variable">$indigo-400</span>
|
|
<span class="hex f-small">#7E9DF4</span>
|
|
</div>
|
|
<div class="color-details border-indigo-400 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold mb-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-indigo-400 border-indigo-400 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-indigo-400 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-indigo-400 border-indigo-400 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-indigo-400 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold mb-2">WCAG Large</div>
|
|
<div class="d-inline-block background-indigo-400 border-indigo-400 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-indigo-400 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-indigo-400 border-indigo-400 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-indigo-400 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-priority color-overview background-indigo-500 p-2">
|
|
<span class="variable inverted">$indigo-500</span>
|
|
<span class="hex f-small inverted">#6280E6</span>
|
|
</div>
|
|
<div class="color-details border-indigo-500 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-indigo-500 border-indigo-500 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-indigo-500 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-indigo-500 border-indigo-500 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-indigo-500 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-indigo-500 border-indigo-500 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-indigo-500 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-indigo-500 border-indigo-500 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-indigo-500 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-indigo-600 p-2">
|
|
<span class="variable inverted">$indigo-600</span>
|
|
<span class="hex f-small inverted">#546BD2</span>
|
|
</div>
|
|
<div class="color-details border-indigo-600 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-indigo-600 border-indigo-600 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-indigo-600 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-indigo-600 border-indigo-600 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-indigo-600 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-indigo-600 border-indigo-600 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-indigo-600 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-indigo-600 border-indigo-600 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-indigo-600 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-indigo-700 p-2">
|
|
<span class="variable inverted">$indigo-700</span>
|
|
<span class="hex f-small inverted">#4456B7</span>
|
|
</div>
|
|
<div class="color-details border-indigo-700 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-indigo-700 border-indigo-700 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-indigo-700 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-indigo-700 border-indigo-700 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-indigo-700 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-indigo-700 border-indigo-700 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-indigo-700 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-indigo-700 border-indigo-700 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-indigo-700 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-indigo-800 p-2">
|
|
<span class="variable inverted">$indigo-800</span>
|
|
<span class="hex f-small inverted">#3C468A</span>
|
|
</div>
|
|
<div class="color-details border-indigo-800 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-indigo-800 border-indigo-800 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-indigo-800 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-indigo-800 border-indigo-800 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-indigo-800 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-indigo-800 border-indigo-800 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-indigo-800 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-indigo-800 border-indigo-800 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-indigo-800 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-indigo-900 p-2">
|
|
<span class="variable inverted">$indigo-900</span>
|
|
<span class="hex f-small inverted">#363A68</span>
|
|
</div>
|
|
<div class="color-details border-indigo-900 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-indigo-900 border-indigo-900 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-indigo-900 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-indigo-900 border-indigo-900 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-indigo-900 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-indigo-900 border-indigo-900 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-indigo-900 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-indigo-900 border-indigo-900 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-indigo-900 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="teal col col-md-6 col-xs-12 mb-4">
|
|
<h5 class="pb-3">Teal Extended</h5>
|
|
<div class="distributed palette">
|
|
<div class="colors">
|
|
<div class="color-overview background-teal-100 p-2">
|
|
<span class="variable">$teal-100</span>
|
|
<span class="hex f-small">#E5FFFE</span>
|
|
</div>
|
|
<div class="color-details border-teal-100 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-teal-100 border-teal-100 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-teal-100 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-teal-100 border-teal-100 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-teal-100 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-teal-100 border-teal-100 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-teal-100 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-teal-100 border-teal-100 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-teal-100 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-teal-200 p-2">
|
|
<span class="variable">$teal-200</span>
|
|
<span class="hex f-small">#A6F8F8</span>
|
|
</div>
|
|
<div class="color-details border-teal-200 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-teal-200 border-teal-200 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-teal-200 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-teal-200 border-teal-200 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-teal-200 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-teal-200 border-teal-200 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-teal-200 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-teal-200 border-teal-200 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-teal-200 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-teal-300 p-2">
|
|
<span class="variable">$teal-300</span>
|
|
<span class="hex f-small">#7EE4E8</span>
|
|
</div>
|
|
<div class="color-details border-teal-300 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-teal-300 border-teal-300 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-teal-300 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-teal-300 border-teal-300 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-teal-300 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-teal-300 border-teal-300 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-teal-300 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-teal-300 border-teal-300 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-teal-300 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-teal-400 p-2">
|
|
<span class="variable contrast-teal">$teal-400</span>
|
|
<span class="hex f-small contrast-teal">#50CEDA</span>
|
|
</div>
|
|
<div class="color-details border-teal-400 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-teal-400 border-teal-400 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-teal-400 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-teal-400 border-teal-400 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-teal-400 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-teal-400 border-teal-400 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-teal-400 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-teal-400 border-teal-400 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-teal-400 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-priority color-overview background-teal-500 p-2">
|
|
<span class="variable">$teal-500</span>
|
|
<span class="hex f-small">#38ADC2</span>
|
|
</div>
|
|
<div class="color-details border-teal-500 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-teal-500 border-teal-500 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-teal-500 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-teal-500 border-teal-500 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-teal-500 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-teal-500 border-teal-500 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-teal-500 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-teal-500 border-teal-500 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-teal-500 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-teal-600 p-2">
|
|
<span class="variable inverted">$teal-600</span>
|
|
<span class="hex f-small inverted">#3190A8</span>
|
|
</div>
|
|
<div class="color-details border-teal-600 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-teal-600 border-teal-600 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-teal-600 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-teal-600 border-teal-600 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-teal-600 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-teal-600 border-teal-600 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-teal-600 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-teal-600 border-teal-600 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-teal-600 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-teal-700 p-2">
|
|
<span class="variable inverted">$teal-700</span>
|
|
<span class="hex f-small inverted">#2B758D</span>
|
|
</div>
|
|
<div class="color-details border-teal-700 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-teal-700 border-teal-700 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-teal-700 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-teal-700 border-teal-700 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-teal-700 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-teal-700 border-teal-700 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-teal-700 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-teal-700 border-teal-700 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-teal-700 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-teal-800 p-2">
|
|
<span class="variable inverted">$teal-800</span>
|
|
<span class="hex f-small inverted">#245C70</span>
|
|
</div>
|
|
<div class="color-details border-teal-800 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-teal-800 border-teal-800 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-teal-800 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-teal-800 border-teal-800 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-teal-800 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-teal-800 border-teal-800 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-teal-800 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-teal-800 border-teal-800 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-teal-800 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-teal-900 p-2">
|
|
<span class="variable inverted">$teal-900</span>
|
|
<span class="hex f-small inverted">#1E4C5E</span>
|
|
</div>
|
|
<div class="color-details border-teal-900 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-teal-900 border-teal-900 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-teal-900 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-teal-900 border-teal-900 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-teal-900 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-teal-900 border-teal-900 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-teal-900 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-teal-900 border-teal-900 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-teal-900 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="orange col col-xs-12 mb-4">
|
|
<h5 class="pb-3">Orange Extended</h5>
|
|
<div class="distributed palette">
|
|
<div class="colors">
|
|
<div class="color-overview background-orange-100 p-2">
|
|
<span class="variable">$orange-100</span>
|
|
<span class="hex f-small">#FFFAF0</span>
|
|
</div>
|
|
<div class="color-details border-orange-100 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-orange-100 border-orange-100 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-orange-100 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-orange-100 border-orange-100 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-orange-100 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-orange-100 border-orange-100 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-orange-100 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-orange-100 border-orange-100 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-orange-100 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-orange-200 p-2">
|
|
<span class="variable">$orange-200</span>
|
|
<span class="hex f-small">#FEEBC8</span>
|
|
</div>
|
|
<div class="color-details border-orange-200 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-orange-200 border-orange-200 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-orange-200 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-orange-200 border-orange-200 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-orange-200 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-orange-200 border-orange-200 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-orange-200 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-orange-200 border-orange-200 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-orange-200 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-orange-300 p-2">
|
|
<span class="variable">$orange-300</span>
|
|
<span class="hex f-small">#FBD38D</span>
|
|
</div>
|
|
<div class="color-details border-orange-300 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-orange-300 border-orange-300 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-orange-300 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-orange-300 border-orange-300 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-orange-300 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-orange-300 border-orange-300 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-orange-300 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-orange-300 border-orange-300 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-orange-300 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-orange-400 p-2">
|
|
<span class="variable">$orange-400</span>
|
|
<span class="hex f-small">#F6AD55</span>
|
|
</div>
|
|
<div class="color-details border-orange-400 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-orange-400 border-orange-400 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-orange-400 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-orange-400 border-orange-400 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-orange-400 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-orange-400 border-orange-400 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-orange-400 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-orange-400 border-orange-400 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-orange-400 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-priority color-overview background-orange-500 p-2">
|
|
<span class="variable">$orange-500</span>
|
|
<span class="hex f-small">#ED8936</span>
|
|
</div>
|
|
<div class="color-details border-orange-500 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-orange-500 border-orange-500 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-orange-500 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-orange-500 border-orange-500 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-orange-500 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-orange-500 border-orange-500 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-orange-500 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-orange-500 border-orange-500 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-orange-500 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-orange-600 p-2">
|
|
<span class="variable inverted">$orange-600</span>
|
|
<span class="hex f-small inverted">#DD6B20</span>
|
|
</div>
|
|
<div class="color-details border-orange-600 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-orange-600 border-orange-600 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-orange-600 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-orange-600 border-orange-600 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-orange-600 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-orange-600 border-orange-600 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-orange-600 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-orange-600 border-orange-600 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-orange-600 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-orange-700 p-2">
|
|
<span class="variable inverted">$orange-700</span>
|
|
<span class="hex f-small inverted">#C05621</span>
|
|
</div>
|
|
<div class="color-details border-orange-700 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-orange-700 border-orange-700 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-orange-700 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-orange-700 border-orange-700 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-orange-700 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-orange-700 border-orange-700 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-orange-700 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-orange-700 border-orange-700 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-orange-700 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-orange-800 p-2">
|
|
<span class="variable inverted">$orange-800</span>
|
|
<span class="hex f-small inverted">#9C4221</span>
|
|
</div>
|
|
<div class="color-details border-orange-800 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-orange-800 border-orange-800 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-orange-800 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-orange-800 border-orange-800 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-orange-800 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-orange-800 border-orange-800 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-orange-800 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-orange-800 border-orange-800 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-orange-800 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-orange-900 p-2">
|
|
<span class="variable inverted">$orange-900</span>
|
|
<span class="hex f-small inverted">#7B341E</span>
|
|
</div>
|
|
<div class="color-details border-orange-900 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-orange-900 border-orange-900 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-orange-900 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-orange-900 border-orange-900 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-orange-900 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-orange-900 border-orange-900 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-orange-900 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-orange-900 border-orange-900 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-orange-900 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="red col col-xs-12 mb-4">
|
|
<h5 class="pb-3">Red</h5>
|
|
<div class="distributed palette">
|
|
<div class="colors">
|
|
<div class="color-overview background-red-100 p-2">
|
|
<span class="variable">$red-100</span>
|
|
<span class="hex f-small">#fbe5e1</span>
|
|
</div>
|
|
<div class="color-details border-red-100 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-red-100 border-red-100 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-red-100 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-red-100 border-red-100 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-red-100 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-red-100 border-red-100 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-red-100 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-red-100 border-red-100 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-red-100 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-red-200 p-2">
|
|
<span class="variable">$red-200</span>
|
|
<span class="hex f-small">#f2b4a9</span>
|
|
</div>
|
|
<div class="color-details border-red-200 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-red-200 border-red-200 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-red-200 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-red-200 border-red-200 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-red-200 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-red-200 border-red-200 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-red-200 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-red-200 border-red-200 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-red-200 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-red-300 p-2">
|
|
<span class="variable">$red-300</span>
|
|
<span class="hex f-small">#ea8271</span>
|
|
</div>
|
|
<div class="color-details border-red-300 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-red-300 border-red-300 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-red-300 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-red-300 border-red-300 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-red-300 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-red-300 border-red-300 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-red-300 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-red-300 border-red-300 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-red-300 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-red-400 p-2">
|
|
<span class="variable contrast-red">$red-400</span>
|
|
<span class="hex f-small contrast-red">#e05842</span>
|
|
</div>
|
|
<div class="color-details border-red-400 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-red-400 border-red-400 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-red-400 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-red-400 border-red-400 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-red-400 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-red-400 border-red-400 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-red-400 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-red-400 border-red-400 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-red-400 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-priority color-overview background-red-500 p-2">
|
|
<span class="variable inverted">$red-500</span>
|
|
<span class="hex f-small inverted">#db3b21</span>
|
|
</div>
|
|
<div class="color-details border-red-500 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-red-500 border-red-500 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-red-500 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-red-500 border-red-500 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-red-500 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-red-500 border-red-500 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-red-500 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-red-500 border-red-500 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-red-500 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-red-600 p-2">
|
|
<span class="variable inverted">$red-600</span>
|
|
<span class="hex f-small inverted">#c0341d</span>
|
|
</div>
|
|
<div class="color-details border-red-600 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-red-600 border-red-600 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-red-600 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-red-600 border-red-600 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-red-600 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-red-600 border-red-600 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-red-600 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-red-600 border-red-600 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-red-600 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-red-700 p-2">
|
|
<span class="variable inverted">$red-700</span>
|
|
<span class="hex f-small inverted">#a62d19</span>
|
|
</div>
|
|
<div class="color-details border-red-700 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-red-700 border-red-700 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-red-700 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-red-700 border-red-700 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-red-700 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-red-700 border-red-700 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-red-700 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-red-700 border-red-700 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-red-700 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-red-800 p-2">
|
|
<span class="variable inverted">$red-800</span>
|
|
<span class="hex f-small inverted">#8b2615</span>
|
|
</div>
|
|
<div class="color-details border-red-800 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-red-800 border-red-800 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-red-800 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-red-800 border-red-800 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-red-800 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-red-800 border-red-800 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-red-800 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-red-800 border-red-800 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-red-800 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-red-900 p-2">
|
|
<span class="variable inverted">$red-900</span>
|
|
<span class="hex f-small inverted">#711e11</span>
|
|
</div>
|
|
<div class="color-details border-red-900 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-red-900 border-red-900 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-red-900 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-red-900 border-red-900 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-red-900 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-red-900 border-red-900 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-red-900 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-red-900 border-red-900 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-red-900 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-red-950 p-2">
|
|
<span class="variable inverted">$red-950</span>
|
|
<span class="hex f-small inverted">#4b140b</span>
|
|
</div>
|
|
<div class="color-details border-red-950 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal Normal</div>
|
|
<div class="d-inline-block background-red-950 border-red-950 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-red-950 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-red-950 border-red-950 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-red-950 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal Normal</div>
|
|
<div class="d-inline-block background-red-950 border-red-950 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-red-950 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-red-950 border-red-950 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-red-950 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="color-palette row col-md-12 p-0">
|
|
<div class="night col col-xs-12 mb-3">
|
|
<h5 class="pb-3">Dark</h5>
|
|
<div class="distributed palette">
|
|
<div class="colors">
|
|
<div class="color-overview background-night-100 p-2">
|
|
<span class="variable">$night-100</span>
|
|
<span class="hex f-small">#D1DAE6</span>
|
|
</div>
|
|
<div class="color-details border-night-100 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-night-100 border-night-100 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-night-100 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-night-100 border-night-100 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-night-100 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-night-100 border-night-100 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-night-100 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-night-100 border-night-100 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-night-100 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-night-200 p-2">
|
|
<span class="variable">$night-200</span>
|
|
<span class="hex f-small">#B1BFCF</span>
|
|
</div>
|
|
<div class="color-details border-night-200 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-night-200 border-night-200 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-night-200 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-night-200 border-night-200 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-night-200 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-night-200 border-night-200 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-night-200 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-night-200 border-night-200 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-night-200 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-night-300 p-2">
|
|
<span class="variable">$night-300</span>
|
|
<span class="hex f-small">#8A9CB3</span>
|
|
</div>
|
|
<div class="color-details border-night-300 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-night-300 border-night-300 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-night-300 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-night-300 border-night-300 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-night-300 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-night-300 border-night-300 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-night-300 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-night-300 border-night-300 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-night-300 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-night-400 p-2">
|
|
<span class="variable contrast-night">$night-400</span>
|
|
<span class="hex f-small contrast-night">#657D99</span>
|
|
</div>
|
|
<div class="color-details border-night-400 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-night-400 border-night-400 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-night-400 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-night-400 border-night-400 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-night-400 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-night-400 border-night-400 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-night-400 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-night-400 border-night-400 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-night-400 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-priority color-overview background-night-500 p-2">
|
|
<span class="variable inverted">$night-500</span>
|
|
<span class="hex f-small inverted">#435B77</span>
|
|
</div>
|
|
<div class="color-details border-night-500 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-night-500 border-night-500 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-night-500 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-night-500 border-night-500 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-night-500 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-night-500 border-night-500 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-night-500 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-night-500 border-night-500 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-night-500 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-night-600 p-2">
|
|
<span class="variable inverted">$night-600</span>
|
|
<span class="hex f-small inverted">#374B61</span>
|
|
</div>
|
|
<div class="color-details border-night-600 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-night-600 border-night-600 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-night-600 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-night-600 border-night-600 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-night-600 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-night-600 border-night-600 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-night-600 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-night-600 border-night-600 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-night-600 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-night-700 p-2">
|
|
<span class="variable inverted">$night-700</span>
|
|
<span class="hex f-small inverted">#2E3D4F</span>
|
|
</div>
|
|
<div class="color-details border-night-700 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-night-700 border-night-700 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-night-700 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-night-700 border-night-700 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-night-700 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-night-700 border-night-700 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-night-700 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-night-700 border-night-700 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-night-700 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-night-800 p-2">
|
|
<span class="variable inverted">$night-800</span>
|
|
<span class="hex f-small inverted">#212D3B</span>
|
|
</div>
|
|
<div class="color-details border-night-800 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-night-800 border-night-800 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-night-800 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-night-800 border-night-800 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-night-800 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-night-800 border-night-800 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-night-800 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-night-800 border-night-800 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-night-800 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-night-900 p-2">
|
|
<span class="variable inverted">$night-900</span>
|
|
<span class="hex f-small inverted">#15212D</span>
|
|
</div>
|
|
<div class="color-details border-night-900 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-night-900 border-night-900 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-night-900 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-night-900 border-night-900 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-night-900 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-night-900 border-night-900 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-night-900 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-night-900 border-night-900 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-night-900 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-muted pt-3">The dark palette is primarily used for interfaces that are adapting a night theme. Shades of it can be used as backgrounds, borders, and shadows to emphasise certain areas or set them apart.</p>
|
|
</div>
|
|
|
|
<div class="night col col-xs-12 mb-3">
|
|
<h5 class="pb-3">Gray</h5>
|
|
<div class="distributed palette">
|
|
<div class="colors">
|
|
<div class="color-overview background-gray-50 p-2">
|
|
<span class="variable">$gray-50</span>
|
|
<span class="hex f-small">#FAFAFA</span>
|
|
</div>
|
|
<div class="color-details border-gray-50 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-gray-50 border-gray-50 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-gray-50 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-gray-50 border-gray-50 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-gray-50 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-gray-50 border-gray-50 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-gray-50 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-gray-50 border-gray-50 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-gray-50 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-gray-100 p-2">
|
|
<span class="variable">$gray-100</span>
|
|
<span class="hex f-small">#F2F2F2</span>
|
|
</div>
|
|
<div class="color-details border-gray-100 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-gray-100 border-gray-100 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-gray-100 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-gray-100 border-gray-100 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-gray-100 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-gray-100 border-gray-100 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-gray-100 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-gray-100 border-gray-100 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-gray-100 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-gray-200 p-2">
|
|
<span class="variable">$gray-200</span>
|
|
<span class="hex f-small">#DFDFDF</span>
|
|
</div>
|
|
<div class="color-details border-gray-200 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-gray-200 border-gray-200 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-gray-200 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-gray-200 border-gray-200 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-gray-200 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-gray-200 border-gray-200 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-gray-200 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-gray-200 border-gray-200 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-gray-200 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-gray-300 p-2">
|
|
<span class="variable">$gray-300</span>
|
|
<span class="hex f-small">#CCCCCC</span>
|
|
</div>
|
|
<div class="color-details border-gray-300 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-gray-300 border-gray-300 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-gray-300 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-gray-300 border-gray-300 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-gray-300 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-gray-300 border-gray-300 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-gray-300 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-gray-300 border-gray-300 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-gray-300 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-gray-400 p-2">
|
|
<span class="variable">$gray-400</span>
|
|
<span class="hex f-small">#BABABA</span>
|
|
</div>
|
|
<div class="color-details border-gray-400 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-gray-400 border-gray-400 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-gray-400 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-gray-400 border-gray-400 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-gray-400 pl-1 pr-1 fail">Fail</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-gray-400 border-gray-400 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-gray-400 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-gray-400 border-gray-400 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-gray-400 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-priority color-overview background-gray-500 p-2">
|
|
<span class="variable">$gray-500</span>
|
|
<span class="hex f-small">#A7A7A7</span>
|
|
</div>
|
|
<div class="color-details border-gray-500 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-gray-500 border-gray-500 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-gray-500 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-gray-500 border-gray-500 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-gray-500 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-gray-500 border-gray-500 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-gray-500 pl-1 pr-1 pass">Pass</div>
|
|
<div class="inverted d-inline-block background-gray-500 border-gray-500 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-gray-500 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-gray-600 p-2">
|
|
<span class="variable contrast-gray">$gray-600</span>
|
|
<span class="hex f-small contrast-gray">#919191</span>
|
|
</div>
|
|
<div class="color-details border-gray-600 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-gray-600 border-gray-600 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-gray-600 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-gray-600 border-gray-600 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-gray-600 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-gray-600 border-gray-600 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-gray-600 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-gray-600 border-gray-600 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-gray-600 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-gray-700 p-2">
|
|
<span class="variable inverted">$gray-700</span>
|
|
<span class="hex f-small inverted">#707070</span>
|
|
</div>
|
|
<div class="color-details border-gray-700 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-gray-700 border-gray-700 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-gray-700 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-gray-700 border-gray-700 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-gray-700 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-gray-700 border-gray-700 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-gray-700 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-gray-700 border-gray-700 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-gray-700 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-gray-800 p-2">
|
|
<span class="variable inverted">$gray-800</span>
|
|
<span class="hex f-small inverted">#4F4F4F</span>
|
|
</div>
|
|
<div class="color-details border-gray-800 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-gray-800 border-gray-800 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-gray-800 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-gray-800 border-gray-800 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-gray-800 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-gray-800 border-gray-800 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-gray-800 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-gray-800 border-gray-800 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-gray-800 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
<div class="color-overview background-gray-900 p-2">
|
|
<span class="variable inverted">$gray-900</span>
|
|
<span class="hex f-small inverted">#2E2E2E</span>
|
|
</div>
|
|
<div class="color-details border-gray-900 p-3">
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Normal</div>
|
|
<div class="d-inline-block background-gray-900 border-gray-900 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-gray-900 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-gray-900 border-gray-900 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-gray-900 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
<div class="color-details--section">
|
|
<div class="bold m-b-2">WCAG Large</div>
|
|
<div class="d-inline-block background-gray-900 border-gray-900 pl-1 pr-1">AA</div>
|
|
<div class="d-inline-block border-gray-900 pl-1 pr-1 fail">Fail</div>
|
|
<div class="inverted d-inline-block background-gray-900 border-gray-900 pl-1 pr-1 m-l-3">AA</div>
|
|
<div class="d-inline-block border-gray-900 pl-1 pr-1 pass">Pass</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-muted pt-3">The neutral palette is primarily used within components to help differentiate hierarchy. Shades of gray can be used as backgrounds, borders, and shadows to emphasise certain areas or set them apart.</p>
|
|
</div>
|
|
</div>
|