Default Colors

We have a series of colors that are used by default. They include:

  • Primary
  • Secondary
  • Success
  • Warning
  • Danger
  • Info

For each color, we think has its functionality in the application as alerts of errors (danger), warnings to the user (warning), communications of approval (success), or main color of the application (primary).

primary
secondary
success
warning
danger
info
Lighten Variant

Use .bg-{color}.bg-lighten-{1 | 2 | 3 | 4 | 5} classes for lighten background color.

lighten-2
lighten-2
lighten-2
lighten-2
lighten-2
lighten-2
Darken Variant

Use .bg-{color}.bg-darken-{1 | 2 | 3 | 4} classes for darken background color.

darken-2
darken-2
darken-2
darken-2
darken-2
darken-2

Gradient Colors

We have make gradient color based on our default color:

  • bg-gradient-primary
  • bg-gradient-secondary
  • bg-gradient-success
  • bg-gradient-warning
  • bg-gradient-danger
  • bg-gradient-info

For each color, we think has its functionality in the application as alerts of errors (danger), warnings to the user (warning), communications of approval (success), or main color of the application (primary).

primary gradient
secondary gradient
success gradient
warning gradient
danger gradient
info gradient