Color System

Gradient Colors
Gradient Palette (bg-gradient-*)

Gradient colors are available for backgrounds only.

  • *-leaf
  • *-default
  • *-peach
  • *-purple
  • *-aqua
  • *-fresh
  • *-lime
  • *-sugar
  • *-candy
  • *-fire
  • *-evening
  • *-silver
  • *-deepsea
  • *-neon
  • *-lake
  • *-poncho
  • *-pizelex
  • *-miami
  • *-dimigo
  • *-moss
  • *-ash
  • *-blossom
  • *-cool
  • *-shifty
Bootstrap Color System
Default Palette (bg-default-*)
  • *-50
  • *-100
  • *-200
  • *-300
  • *-400
  • *-500
  • *-600
  • *-700
  • *-800
  • *-900
  • *-a100
  • *-a200
Primary Palette (bg-primary-*)
  • *-50
  • *-100
  • *-200
  • *-300
  • *-400
  • *-500
  • *-600
  • *-700
  • *-800
  • *-900
  • *-a100
  • *-a200
Secondary Palette (bg-secondary-*)
  • *-50
  • *-100
  • *-200
  • *-300
  • *-400
  • *-500
  • *-600
  • *-700
  • *-800
  • *-900
  • *-a100
  • *-a200
Danger Palette (bg-danger-*)
  • *-50
  • *-100
  • *-200
  • *-300
  • *-400
  • *-500
  • *-600
  • *-700
  • *-800
  • *-900
  • *-a100
  • *-a200
Success Palette (bg-success-*)
  • *-50
  • *-100
  • *-200
  • *-300
  • *-400
  • *-500
  • *-600
  • *-700
  • *-800
  • *-900
  • *-a100
  • *-a200
Warning Palette (bg-warning-*)
  • *-50
  • *-100
  • *-200
  • *-300
  • *-400
  • *-500
  • *-600
  • *-700
  • *-800
  • *-900
  • *-a100
  • *-a200
Info Palette (bg-info-*)
  • *-50
  • *-100
  • *-200
  • *-300
  • *-400
  • *-500
  • *-600
  • *-700
  • *-800
  • *-900
  • *-a100
  • *-a200
Leaf Color System
Elegant Palette (bg-elegant-*)
  • *-50
  • *-100
  • *-200
  • *-300
  • *-400
  • *-500
  • *-600
  • *-700
  • *-800
  • *-900
  • *-a100
  • *-a200
Unique Palette (bg-unique-*)
  • *-50
  • *-100
  • *-200
  • *-300
  • *-400
  • *-500
  • *-600
  • *-700
  • *-800
  • *-900
  • *-a100
  • *-a200
Pink Palette (bg-pink-*)
  • *-50
  • *-100
  • *-200
  • *-300
  • *-400
  • *-500
  • *-600
  • *-700
  • *-800
  • *-900
  • *-a100
  • *-a200
Purple Palette (bg-purple-*)
  • *-50
  • *-100
  • *-200
  • *-300
  • *-400
  • *-500
  • *-600
  • *-700
  • *-800
  • *-900
  • *-a100
  • *-a200
Deep Purple Palette (bg-dpurple-*)
  • *-50
  • *-100
  • *-200
  • *-300
  • *-400
  • *-500
  • *-600
  • *-700
  • *-800
  • *-900
  • *-a100
  • *-a200
Indigo Palette (bg-indigo-*)
  • *-50
  • *-100
  • *-200
  • *-300
  • *-400
  • *-500
  • *-600
  • *-700
  • *-800
  • *-900
  • *-a100
  • *-a200
Cyan Palette (bg-cyan-*)
  • *-50
  • *-100
  • *-200
  • *-300
  • *-400
  • *-500
  • *-600
  • *-700
  • *-800
  • *-900
  • *-a100
  • *-a200
Teal Palette (bg-teal-*)
  • *-50
  • *-100
  • *-200
  • *-300
  • *-400
  • *-500
  • *-600
  • *-700
  • *-800
  • *-900
  • *-a100
  • *-a200
Yellow Palette (bg-yellow-*)
  • *-50
  • *-100
  • *-200
  • *-300
  • *-400
  • *-500
  • *-600
  • *-700
  • *-800
  • *-900
  • *-a100
  • *-a200
Amber Palette (bg-amber-*)
  • *-50
  • *-100
  • *-200
  • *-300
  • *-400
  • *-500
  • *-600
  • *-700
  • *-800
  • *-900
  • *-a100
  • *-a200
Lime Palette (bg-lime-*)
  • *-50
  • *-100
  • *-200
  • *-300
  • *-400
  • *-500
  • *-600
  • *-700
  • *-800
  • *-900
  • *-a100
  • *-a200
Slate Palette (bg-slate-*)
  • *-50
  • *-100
  • *-200
  • *-300
  • *-400
  • *-500
  • *-600
  • *-700
  • *-800
  • *-900
  • *-a100
  • *-a200
Grey Palette (bg-grey-*)
  • *-50
  • *-100
  • *-200
  • *-300
  • *-400
  • *-500
  • *-600
  • *-700
  • *-800
  • *-900
  • *-a100
  • *-a200
Brown Palette (bg-brown-*)
  • *-50
  • *-100
  • *-200
  • *-300
  • *-400
  • *-500
  • *-600
  • *-700
  • *-800
  • *-900
  • *-a100
  • *-a200
Color system usage
Class Prefixes Description
Background
.bg-* *-50, *-100, *-200, *-300, *-400, *-600, *-700, *-800, *-900, *-a100, *-a200 Background color. Can be added to dropdown menus, sidebar, navbar, alerts, inputs, panel panel-colors, selects etc.
Borders
.b-* *-50, *-100, *-200, *-300, *-400, *-600, *-700, *-800, *-900, *-a100, *-a200 4 sides border color. Any element that contains border
.bt-* Top border only. Any element that contains all sides border or top border only
.bb-* Bottom border only. Any element that contains all sides border or bottom border only
.bl-* Left border only. Any element that contains all sides border or left border only
.br-* Right border only. Any element that contains all sides border or right border only
Text
.text-* *-50, *-100, *-200, *-300, *-400, *-600, *-700, *-800, *-900, *-a100, *-a200 Text color. Can be used in text, icons and links
Chats
user
Jane Elliott You just got LITT...
1:10 AM
4
user
Florence Douglas Wrong. You take the gun...
9:14 PM
23
user
Jacqueline Howell I was thinking that we...
Yesterday
user
Eugine Turner Mike, I know everything
Yesterday
user
Jane Elliott You just got LITT...
1:10 AM
4
user
Florence Douglas Wrong. You take the gun...
9:14 PM
23
user
Jacqueline Howell I was thinking that we...
Yesterday
user
Eugine Turner Mike, I know everything
Yesterday
user
Jane Elliott You just got LITT...
1:10 AM
4
user
Florence Douglas Wrong. You take the gun...
9:14 PM
23
user
Jacqueline Howell I was thinking that we...
Yesterday
user
Eugine Turner Mike, I know everything
Yesterday
user
Jane Elliott You just got LITT...
1:10 AM
4
user
Florence Douglas Wrong. You take the gun...
9:14 PM
23
user
Jacqueline Howell I was thinking that we...
Yesterday
user
Eugine Turner Mike, I know everything
Yesterday
user
Jane Elliott You just got LITT...
1:10 AM
4
user
Florence Douglas Wrong. You take the gun...
9:14 PM
23
user
Jacqueline Howell I was thinking that we...
Yesterday
user
Eugine Turner Mike, I know everything
Yesterday
chat

Sushi tonight?

10:14 am
chat

Pizza?

We had sushi last time!

For me one Vegetariana! Plus some chili oil on it!

10:15 am
chat

Done. Delivery takes 5 minutes!

10:16 am
chat

Awesome! See you later! : )

Just now