Цвета

<div class="bg-blue text-white">.bg-blue</div>
<div class="bg-medium-blue text-white">.bg-medium-blue</div>
<div class="bg-light-blue text-white">.bg-light-blue</div>
<div class="bg-info text-white">.bg-info</div>
<div class="bg-blue-gray text-white">.bg-blue-gray</div>
<div class="bg-orange text-white">.bg-orange</div>
<div class="bg-yellow text-white">.bg-yellow</div>
<div class="bg-green text-white">.bg-green</div>
<div class="bg-accent-green text-white">.bg-accent-green</div>
<div class="bg-teal text-white">.bg-teal</div>
<div class="bg-red text-white">.bg-red</div>
<div class="bg-red-light text-white">.bg-red-light</div>
<div class="bg-purple text-white">.bg-purple</div>
<div class="bg-pink text-white">.bg-pink</div>
<div class="bg-white text-dark">.bg-white</div>
<div class="bg-light-gray-100 text-dark">.bg-light-gray-100</div>
<div class="bg-light-gray-200 text-dark">.bg-light-gray-200</div>
<div class="bg-light-gray-300 text-dark">.bg-light-gray-300</div>
<div class="bg-light-gray-400 text-dark">.bg-light-gray-400</div>
<div class="bg-light-gray-500 text-dark">.bg-light-gray-500</div>
<div class="bg-light-gray-600 text-dark">.bg-light-gray-600</div>
<div class="bg-light-gray-700 text-dark">.bg-light-gray-700</div>
<div class="bg-light-gray-800 text-dark">.bg-light-gray-800</div>
<div class="bg-light-gray-900 text-dark">.bg-light-gray-900</div>
<div class="bg-dark-gray-100 text-white">.bg-dark-gray-100</div>
<div class="bg-dark-gray-200 text-white">.bg-dark-gray-200 .bg-silver</div>
<div class="bg-dark-gray-300 text-white">.bg-dark-gray-300 .bg-gray </div>
<div class="bg-dark-gray-400 text-white">.bg-dark-gray-400</div>
<div class="bg-dark-gray-500 text-white">.bg-dark-gray-500</div>
<div class="bg-dark-gray-600 text-white">.bg-dark-gray-600</div>
<div class="bg-dark-gray-700 text-white">.bg-dark-gray-700</div>
<div class="bg-dark-gray-800 text-white">.bg-dark-gray-800</div>
<div class="bg-dark-gray-900 text-white">.bg-dark-gray-900</div>

<div class="border-blue">.border-blue</div>
<div class="border-medium-blue">.border-medium-blue</div>
<div class="border-light-blue">.border-light-blue</div>
<div class="border-blue-gray">.border-blue-gray</div>
<div class="border-orange">.border-orange</div>
<div class="border-yellow">.border-yellow</div>
<div class="border-green">.border-green</div>
<div class="border-teal">.border-teal</div>
<div class="border-red">.border-red</div>
<div class="border-red-light">.border-red-light</div>
<div class="border-purple">.border-purple</div>
<div class="border-pink">.border-pink</div>
<div class="border-white">.border-white</div>
<div class="border-light-gray-500">.border-light-gray-500</div>
<div class="border-dark-gray-100">.border-dark-gray-100</div>
<div class="border-dark-gray-900">.border-dark-gray-900</div>

<p>text default</p>
<p class="text-primary">.text-primary, .text-blue</p>
<p class="text-medium-blue">.text-medium-blue</p>
<p class="text-light-blue">.text-light-blue</p>
<p class="text-info">.text-info</p>
<p class="text-blue-gray">.text-blue-gray</p>
<p class="text-orange">.text-orange, .text-warning</p>
<p class="text-yellow">.text-yellow</p>
<p class="text-green">.text-green, .text-success</p>
<p class="text-teal">.text-teal, .text-dark-green</p>
<p class="text-red">.text-red, .text-danger</p>
<p class="text-purple">.text-purple</p>
<p class="text-pink">.text-pink</p>
<p class="text-dark">.text-dark</p>
<p class="text-silver">.text-silver</p>