Colors - Arctic Admin Dashboard

Design System

Blue

<div class="blue-200"></div>
<div class="blue-300"></div>
<div class="blue-400"></div>
<div class="blue-500"></div>
<div class="blue-600"></div>
<div class="blue-700"></div>
<div class="blue-800"></div>
<div class="blue-900"></div>

Purple

<div class="purple-200"></div>
<div class="purple-300"></div>
<div class="purple-400"></div>
<div class="purple-500"></div>
<div class="purple-600"></div>
<div class="purple-700"></div>
<div class="purple-800"></div>
<div class="purple-900"></div>

Red

<div class="red-200"></div>
<div class="red-300"></div>
<div class="red-400"></div>
<div class="red-500"></div>
<div class="red-600"></div>
<div class="red-700"></div>
<div class="red-800"></div>
<div class="red-900"></div>

Green

<div class="green-200"></div>
<div class="green-300"></div>
<div class="green-400"></div>
<div class="green-500"></div>
<div class="green-600"></div>
<div class="green-700"></div>
<div class="green-800"></div>
<div class="green-900"></div>

Orange

<div class="orange-200"></div>
<div class="orange-300"></div>
<div class="orange-400"></div>
<div class="orange-500"></div>
<div class="orange-600"></div>
<div class="orange-700"></div>
<div class="orange-800"></div>
<div class="orange-900"></div>

Gray

<div class="gray-200"></div>
<div class="gray-300"></div>
<div class="gray-400"></div>
<div class="gray-500"></div>
<div class="gray-600"></div>
<div class="gray-700"></div>
<div class="gray-800"></div>
<div class="gray-900"></div>

Theme colors

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-white

.bg-transparent

<div class="bg-primary text-white">.bg-primary</div>
<div class="bg-secondary text-white">.bg-secondary</div>
<div class="bg-success text-white">.bg-success</div>
<div class="bg-danger text-white">.bg-danger</div>
<div class="bg-warning">.bg-warning</div>
<div class="bg-info text-white">.bg-info</div>
<div class="bg-light text-dark">.bg-light</div>
<div class="bg-dark text-white">.bg-dark</div>
<div class="bg-white text-dark">.bg-white</div>
<div class="bg-transparent text-dark">.bg-transparent</div>

Gray text colors

.text-gray-100.text-gray-200.text-gray-300.text-gray-400.text-gray-500.text-gray-600.text-gray-700.text-gray-800.text-gray-900

<span class="text-gray-100 bg-dark d-inline-block m-xs">.text-gray-100</span>
    <span class="text-gray-200 bg-dark d-inline-block m-xs">.text-gray-200</span>
    <span class="text-gray-300 bg-dark d-inline-block m-xs">.text-gray-300</span>
    <span class="text-gray-400 d-inline-block m-xs">.text-gray-400</span>
    <span class="text-gray-500 d-inline-block m-xs">.text-gray-500</span>
    <span class="text-gray-600 d-inline-block m-xs">.text-gray-600</span>
    <span class="text-gray-700 d-inline-block m-xs">.text-gray-700</span>
    <span class="text-gray-800 d-inline-block m-xs">.text-gray-800</span>
    <span class="text-gray-900 d-inline-block m-xs">.text-gray-900</span>

Theme text colors

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

<p class="text-primary">.text-primary</p>
    <p class="text-secondary">.text-secondary</p>
    <p class="text-success">.text-success</p>
    <p class="text-danger">.text-danger</p>
    <p class="text-warning">.text-warning</p>
    <p class="text-info">.text-info</p>
    <p class="text-light bg-dark">.text-light</p>
    <p class="text-dark">.text-dark</p>
    <p class="text-body">.text-body</p>
    <p class="text-muted">.text-muted</p>
    <p class="text-white bg-dark">.text-white</p>
    <p class="text-black-50">.text-black-50</p>
    <p class="text-white-50 bg-dark">.text-white-50</p>

Buy Arctic