Colors

the default colors

Text color class name
white .white
Transparent color .transparent
color inherit .ci
Background colors class name
bg-white .bg-white
bg transparent .bgct
background none .bgn
Hover / Border and placeholder colors
Hover text color Hover Background Border color
.hover-primary .hover-bg-primary .bc-primary
placeholder color
Primary Colors
Text color class name
Primary text color .primary
Secondary text color .secondary
Tertiary text color .tertiary
Background colors class name
Primary .bg-primary
Secondary .bg-secondary
Tertiary .bg-tertiary

Default colors
Black Text color class name
black text color .black
black-light-100 .black-light-100
black-light-200 .black-light-200
black-light-300 .black-light-300
black-light-400 .black-light-400
black-light-500 .black-light-500
black-light-600 .black-light-600
Background color class name
bg-black .bg-black
bg-black-light-100 .bg-black-light-100
bg-black-light-200 .bg-black-light-200
bg-black-light-300 .bg-black-light-300
bg-black-light-400 .bg-black-light-400
bg-black-light-500 .bg-black-light-500
bg-black-light-600 .bg-black-light-600

red Text color class name
red text color .red
red-light-100 .red-light-100
red-light-200 .red-light-200
red-light-300 .red-light-300
red-light-400 .red-light-400
red-light-500 .red-light-500
red-light-600 .red-light-600
red-dark-100 .red-dark-100
red-dark-200 .red-dark-200
red-dark-300 .red-dark-300
red-dark-400 .red-dark-400
red-dark-500 .red-dark-500
red-dark-600 .red-dark-600
Background color class name
bg-red .bg-red
bg-red-light-100 .bg-red-light-100
bg-red-light-200 .bg-red-light-200
bg-red-light-300 .bg-red-light-300
bg-red-light-400 .bg-red-light-400
bg-red-light-500 .bg-red-light-500
bg-red-light-600 .bg-red-light-600
bg-red-dark-100 .bg-red-dark-100
bg-red-dark-200 .bg-red-dark-200
bg-red-dark-300 .bg-red-dark-300
bg-red-dark-400 .bg-red-dark-400
bg-red-dark-500 .bg-red-dark-500
bg-red-dark-600 .bg-red-dark-600

blue Text color class name
blue text color .blue
blue-light-100 .blue-light-100
blue-light-200 .blue-light-200
blue-light-300 .blue-light-300
blue-light-400 .blue-light-400
blue-light-500 .blue-light-500
blue-light-600 .blue-light-600
blue-dark-100 .blue-dark-100
blue-dark-200 .blue-dark-200
blue-dark-300 .blue-dark-300
blue-dark-400 .blue-dark-400
blue-dark-500 .blue-dark-500
blue-dark-600 .blue-dark-600
blue Background class name
bg-blue .bg-blue
bg-blue-light-100 .bg-blue-light-100
bg-blue-light-200 .bg-blue-light-200
bg-blue-light-300 .bg-blue-light-300
bg-blue-light-400 .bg-blue-light-400
bg-blue-light-500 .bg-blue-light-500
bg-blue-light-600 .bg-blue-light-600
bg-blue-dark-100 .bg-blue-dark-100
bg-blue-dark-200 .bg-blue-dark-200
bg-blue-dark-300 .bg-blue-dark-300
bg-blue-dark-400 .bg-blue-dark-400
bg-blue-dark-500 .bg-blue-dark-500
bg-blue-dark-600 .bg-blue-dark-600

brown Text color class name
brown text color .brown
brown-light-100 .brown-light-100
brown-light-200 .brown-light-200
brown-light-300 .brown-light-300
brown-light-400 .brown-light-400
brown-light-500 .brown-light-500
brown-light-600 .brown-light-600
brown-dark-100 .brown-dark-100
brown-dark-200 .brown-dark-200
brown-dark-300 .brown-dark-300
brown-dark-400 .brown-dark-400
brown-dark-500 .brown-dark-500
brown-dark-600 .brown-dark-600
brown Background class name
bg-brown .bg-brown
bg-brown-light-100 .bg-brown-light-100
bg-brown-light-200 .bg-brown-light-200
bg-brown-light-300 .bg-brown-light-300
bg-brown-light-400 .bg-brown-light-400
bg-brown-light-500 .bg-brown-light-500
bg-brown-light-600 .bg-brown-light-600
bg-brown-dark-100 .bg-brown-dark-100
bg-brown-dark-200 .bg-brown-dark-200
bg-brown-dark-300 .bg-brown-dark-300
bg-brown-dark-400 .bg-brown-dark-400
bg-brown-dark-500 .bg-brown-dark-500
bg-brown-dark-600 .bg-brown-dark-600

gray Text color class name
gray text color .gray
gray-light-100 .gray-light-100
gray-light-200 .gray-light-200
gray-light-300 .gray-light-300
gray-light-400 .gray-light-400
gray-light-500 .gray-light-500
gray-light-600 .gray-light-600
gray-dark-100 .gray-dark-100
gray-dark-200 .gray-dark-200
gray-dark-300 .gray-dark-300
gray-dark-400 .gray-dark-400
gray-dark-500 .gray-dark-500
gray-dark-600 .gray-dark-600
gray Background class name
bg-gray .bg-gray
bg-gray-light-100 .bg-gray-light-100
bg-gray-light-200 .bg-gray-light-200
bg-gray-light-300 .bg-gray-light-300
bg-gray-light-400 .bg-gray-light-400
bg-gray-light-500 .bg-gray-light-500
bg-gray-light-600 .bg-gray-light-600
bg-gray-dark-100 .bg-gray-dark-100
bg-gray-dark-200 .bg-gray-dark-200
bg-gray-dark-300 .bg-gray-dark-300
bg-gray-dark-400 .bg-gray-dark-400
bg-gray-dark-500 .bg-gray-dark-500
bg-gray-dark-600 .bg-gray-dark-600

green Text color class name
green text color .green
green-light-100 .green-light-100
green-light-200 .green-light-200
green-light-300 .green-light-300
green-light-400 .green-light-400
green-light-500 .green-light-500
green-light-600 .green-light-600
green-dark-100 .green-dark-100
green-dark-200 .green-dark-200
green-dark-300 .green-dark-300
green-dark-400 .green-dark-400
green-dark-500 .green-dark-500
green-dark-600 .green-dark-600
green Background class name
bg-green .bg-green
bg-green-light-100 .bg-green-light-100
bg-green-light-200 .bg-green-light-200
bg-green-light-300 .bg-green-light-300
bg-green-light-400 .bg-green-light-400
bg-green-light-500 .bg-green-light-500
bg-green-light-600 .bg-green-light-600
bg-green-dark-100 .bg-green-dark-100
bg-green-dark-200 .bg-green-dark-200
bg-green-dark-300 .bg-green-dark-300
bg-green-dark-400 .bg-green-dark-400
bg-green-dark-500 .bg-green-dark-500
bg-green-dark-600 .bg-green-dark-600

orange Text color class name
orange text color .orange
orange-light-100 .orange-light-100
orange-light-200 .orange-light-200
orange-light-300 .orange-light-300
orange-light-400 .orange-light-400
orange-light-500 .orange-light-500
orange-light-600 .orange-light-600
orange-dark-100 .orange-dark-100
orange-dark-200 .orange-dark-200
orange-dark-300 .orange-dark-300
orange-dark-400 .orange-dark-400
orange-dark-500 .orange-dark-500
orange-dark-600 .orange-dark-600
orange Background class name
bg-orange .bg-orange
bg-orange-light-100 .bg-orange-light-100
bg-orange-light-200 .bg-orange-light-200
bg-orange-light-300 .bg-orange-light-300
bg-orange-light-400 .bg-orange-light-400
bg-orange-light-500 .bg-orange-light-500
bg-orange-light-600 .bg-orange-light-600
bg-orange-dark-100 .bg-orange-dark-100
bg-orange-dark-200 .bg-orange-dark-200
bg-orange-dark-300 .bg-orange-dark-300
bg-orange-dark-400 .bg-orange-dark-400
bg-orange-dark-500 .bg-orange-dark-500
bg-orange-dark-600 .bg-orange-dark-600

pink Text color class name
pink text color .pink
pink-light-100 .pink-light-100
pink-light-200 .pink-light-200
pink-light-300 .pink-light-300
pink-light-400 .pink-light-400
pink-light-500 .pink-light-500
pink-light-600 .pink-light-600
pink-dark-100 .pink-dark-100
pink-dark-200 .pink-dark-200
pink-dark-300 .pink-dark-300
pink-dark-400 .pink-dark-400
pink-dark-500 .pink-dark-500
pink-dark-600 .pink-dark-600
pink Background class name
bg-pink .bg-pink
bg-pink-light-100 .bg-pink-light-100
bg-pink-light-200 .bg-pink-light-200
bg-pink-light-300 .bg-pink-light-300
bg-pink-light-400 .bg-pink-light-400
bg-pink-light-500 .bg-pink-light-500
bg-pink-light-600 .bg-pink-light-600
bg-pink-dark-100 .bg-pink-dark-100
bg-pink-dark-200 .bg-pink-dark-200
bg-pink-dark-300 .bg-pink-dark-300
bg-pink-dark-400 .bg-pink-dark-400
bg-pink-dark-500 .bg-pink-dark-500
bg-pink-dark-600 .bg-pink-dark-600

purple Text color class name
purple text color .purple
purple-light-100 .purple-light-100
purple-light-200 .purple-light-200
purple-light-300 .purple-light-300
purple-light-400 .purple-light-400
purple-light-500 .purple-light-500
purple-light-600 .purple-light-600
purple-dark-100 .purple-dark-100
purple-dark-200 .purple-dark-200
purple-dark-300 .purple-dark-300
purple-dark-400 .purple-dark-400
purple-dark-500 .purple-dark-500
purple-dark-600 .purple-dark-600
purple Background class name
bg-purple .bg-purple
bg-purple-light-100 .bg-purple-light-100
bg-purple-light-200 .bg-purple-light-200
bg-purple-light-300 .bg-purple-light-300
bg-purple-light-400 .bg-purple-light-400
bg-purple-light-500 .bg-purple-light-500
bg-purple-light-600 .bg-purple-light-600
bg-purple-dark-100 .bg-purple-dark-100
bg-purple-dark-200 .bg-purple-dark-200
bg-purple-dark-300 .bg-purple-dark-300
bg-purple-dark-400 .bg-purple-dark-400
bg-purple-dark-500 .bg-purple-dark-500
bg-purple-dark-600 .bg-purple-dark-600

yellow Text color class name
yellow text color .yellow
yellow-light-100 .yellow-light-100
yellow-light-200 .yellow-light-200
yellow-light-300 .yellow-light-300
yellow-light-400 .yellow-light-400
yellow-light-500 .yellow-light-500
yellow-light-600 .yellow-light-600
yellow-dark-100 .yellow-dark-100
yellow-dark-200 .yellow-dark-200
yellow-dark-300 .yellow-dark-300
yellow-dark-400 .yellow-dark-400
yellow-dark-500 .yellow-dark-500
yellow-dark-600 .yellow-dark-600
yellow Background class name
bg-yellow .bg-yellow
bg-yellow-light-100 .bg-yellow-light-100
bg-yellow-light-200 .bg-yellow-light-200
bg-yellow-light-300 .bg-yellow-light-300
bg-yellow-light-400 .bg-yellow-light-400
bg-yellow-light-500 .bg-yellow-light-500
bg-yellow-light-600 .bg-yellow-light-600
bg-yellow-dark-100 .bg-yellow-dark-100
bg-yellow-dark-200 .bg-yellow-dark-200
bg-yellow-dark-300 .bg-yellow-dark-300
bg-yellow-dark-400 .bg-yellow-dark-400
bg-yellow-dark-500 .bg-yellow-dark-500
bg-yellow-dark-600 .bg-yellow-dark-600