Colors

LittleGiant comes with a pre-defined set of colors and their shades - blue, green, orange, grey, font, white, black. Here is a color palette based on the specifications. Each of these colors can be used with font color, background color, placeholder color, and border color.

Live Editor
<>
  <div class="lil-mb-4 lil-p-2">
    <h2 class="lil-mb-3">Blue</h2>
    <div class="lil-bg-blue-50 lil-p-3">Blue 50</div>
    <div class="lil-bg-blue-100 lil-p-3">Blue 100</div>
    <div class="lil-bg-blue-200 lil-p-3">Blue 200</div>
    <div class="lil-bg-blue-300 lil-p-3 lil-text-white">Blue 300</div>
    <div class="lil-bg-blue-400 lil-p-3 lil-text-white">Blue 400</div>
  </div>
  <div class="lil-mb-4 lil-p-2">
    <h2 class="lil-mb-3">Green</h2>
    <div class="lil-bg-green-100 lil-p-3">Green 100</div>
    <div class="lil-bg-green-200 lil-p-3">Green 200</div>
    <div class="lil-bg-green-300 lil-p-3 lil-text-white">Green 300</div>
  </div>
  <div class="lil-mb-4 lil-p-2">
    <h2 class="lil-mb-3">Orange</h2>
    <div class="lil-bg-orange-100 lil-p-3">Orange 100</div>
    <div class="lil-bg-orange-200 lil-p-3">Orange 200</div>
    <div class="lil-bg-orange-300 lil-p-3 lil-text-white">Orange 300</div>
  </div>
  <div class="lil-mb-4 lil-p-2">
    <h2 class="lil-mb-3">Grey</h2>
    <div class="lil-bg-grey-100 lil-p-3">Grey 100</div>
    <div class="lil-bg-grey-200 lil-p-3">Grey 200</div>
    <div class="lil-bg-grey-300 lil-p-3">Grey 300</div>
    <div class="lil-bg-grey-400 lil-p-3 lil-text-white">Grey 400</div>
    <div class="lil-bg-grey-500 lil-p-3 lil-text-white">Grey 500</div>
  </div>
  <div class="lil-mb-4 lil-p-2">
    <h2 class="lil-mb-3">Font</h2>
    <div class="lil-bg-font-100 lil-p-3 lil-text-white">Font 100</div>
    <div class="lil-bg-font-200 lil-p-3 lil-text-white">Font 200</div>
    <div class="lil-bg-font-300 lil-p-3 lil-text-white">Font 300</div>
  </div>
  <div class="lil-mb-4 lil-p-2 lil-bg-orange-200">
    <h2 class="lil-mb-3">Common</h2>
    <div class="lil-bg-white lil-p-3">White</div>
    <div class="lil-bg-black lil-p-3 lil-text-white">Black</div>
    <div class="lil-bg-transparent lil-p-3">Transparent</div>
  </div>
</>
<>
  <div class="lil-mb-4 lil-p-2">
    <h2 class="lil-mb-3">Blue</h2>
    <div class="lil-bg-blue-50 lil-p-3">Blue 50</div>
    <div class="lil-bg-blue-100 lil-p-3">Blue 100</div>
    <div class="lil-bg-blue-200 lil-p-3">Blue 200</div>
    <div class="lil-bg-blue-300 lil-p-3 lil-text-white">Blue 300</div>
    <div class="lil-bg-blue-400 lil-p-3 lil-text-white">Blue 400</div>
  </div>
  <div class="lil-mb-4 lil-p-2">
    <h2 class="lil-mb-3">Green</h2>
    <div class="lil-bg-green-100 lil-p-3">Green 100</div>
    <div class="lil-bg-green-200 lil-p-3">Green 200</div>
    <div class="lil-bg-green-300 lil-p-3 lil-text-white">Green 300</div>
  </div>
  <div class="lil-mb-4 lil-p-2">
    <h2 class="lil-mb-3">Orange</h2>
    <div class="lil-bg-orange-100 lil-p-3">Orange 100</div>
    <div class="lil-bg-orange-200 lil-p-3">Orange 200</div>
    <div class="lil-bg-orange-300 lil-p-3 lil-text-white">Orange 300</div>
  </div>
  <div class="lil-mb-4 lil-p-2">
    <h2 class="lil-mb-3">Grey</h2>
    <div class="lil-bg-grey-100 lil-p-3">Grey 100</div>
    <div class="lil-bg-grey-200 lil-p-3">Grey 200</div>
    <div class="lil-bg-grey-300 lil-p-3">Grey 300</div>
    <div class="lil-bg-grey-400 lil-p-3 lil-text-white">Grey 400</div>
    <div class="lil-bg-grey-500 lil-p-3 lil-text-white">Grey 500</div>
  </div>
  <div class="lil-mb-4 lil-p-2">
    <h2 class="lil-mb-3">Font</h2>
    <div class="lil-bg-font-100 lil-p-3 lil-text-white">Font 100</div>
    <div class="lil-bg-font-200 lil-p-3 lil-text-white">Font 200</div>
    <div class="lil-bg-font-300 lil-p-3 lil-text-white">Font 300</div>
  </div>
  <div class="lil-mb-4 lil-p-2 lil-bg-orange-200">
    <h2 class="lil-mb-3">Common</h2>
    <div class="lil-bg-white lil-p-3">White</div>
    <div class="lil-bg-black lil-p-3 lil-text-white">Black</div>
    <div class="lil-bg-transparent lil-p-3">Transparent</div>
  </div>
</>
Result
Blue
Blue 50
Blue 100
Blue 200
Blue 300
Blue 400
Green
Green 100
Green 200
Green 300
Orange
Orange 100
Orange 200
Orange 300
Grey
Grey 100
Grey 200
Grey 300
Grey 400
Grey 500
Font
Font 100
Font 200
Font 300
Common
White
Black
Transparent