Colors

This color palette comprises primary and accent colors that can be used for illustration or to develop your brand colors.

Backgrounds colors

In addition to the background classes, you have the class .bg-white.

.bg-primary-dark

.bg-primary

.bg-primary-light

.bg-primary-lighter

.bg-accent-dark

.bg-accent

.bg-accent-light

.bg-accent-lighter

.bg-success-dark

.bg-success

.bg-success-light

.bg-success-lighter

.bg-warning-dark

.bg-warning

.bg-warning-light

.bg-warning-lighter

.bg-danger-dark

.bg-danger

.bg-danger-light

.bg-danger-lighter

.bg-gray-dark

.bg-gray

.bg-gray-light

.bg-gray-lighter

.bg-inverse

.bg-gray-lightest or .bg-faded

<div class="bg-{color}-dark"></div>      
<div class="bg-{color}"></div>   
<div class="bg-{color}-light"></div>   
<div class="bg-{color}-lighter"></div> 
<div class="bg-faded"></div>
<div class="bg-inverse"></div>

Contextual text classes

In addition to the classes below, you have the class .text-white and .text-exchange.

.text-primary-dark .text-primary .text-primary-light .text-primary-lighter .text-accent-dark .text-accent .text-accent-light .text-accent-lighter .text-success-dark .text-success .text-success-light .text-success-lighter .text-warning-dark .text-warning .text-warning-light .text-warning-lighter .text-danger-dark .text-danger .text-danger-light .text-danger-lighter .text-gray-dark .text-gray .text-muted .text-gray-lighter

<span class="text-{color}-dark">.text-{color}-dark</span>  
<span class="text-{color}">.text-{color}</span>    
<span class="text-{color}-light">.text-{color}-light</span>    
<span class="text-{color}-lighter">.text-{color}-lighter</span>              
<span class="text-muted">.text-muted</span>

Sass colors variables

$gray-darker:           #31343b;
$gray-dark:             #4e5159;  
$gray:                  #6f7380; // text color
$gray-light:            #b1b6c7;  
$gray-lighter:          #dfe5f2;
$gray-lightest:         #f7faff;

$brand-light:           #fff;
$brand-shade:           $gray-darker;
$text-color:            $gray;
$brand-inverse:         $gray-dark;  
$text-muted:            $gray-light;

$brand-primary:           #557cf2;
$brand-primary-light:     #a2b8fa;
$brand-primary-lighter:   #d9e2ff;
$brand-primary-lightest:  #f0f4ff;
$brand-primary-dark:      #3b59b2; 

$brand-info:            $brand-primary;
$link-color:            $brand-primary !default;
$link-decoration:       none !default;
$link-hover-color:      darken($link-color, 15%) !default;
$link-hover-decoration: underline !default;

$brand-exchange:          #c2578d;

$brand-accent:            #f26b7a;
$brand-accent-light:      #fca4ae;
$brand-accent-lighter:    #fcd7db;
$brand-accent-lightest:   #ffedef;
$brand-accent-dark:       #b84451;

$brand-success:           #5cb85c;
$brand-success-light:     #9cd99c;
$brand-success-lighter:   #d0f5d0;
$brand-success-lightest:  #e8fce8;
$brand-success-dark:      #438c43;

$brand-warning:           #f2c94e;
$brand-warning-light:     #f5df9f;
$brand-warning-lighter:   #faf1d4;
$brand-warning-lightest:  #fffaeb;
$brand-warning-dark:      #bf9d36;  

$brand-danger:            #f2594e;
$brand-danger-light:      #f29c96;
$brand-danger-lighter:    #fad7d4;
$brand-danger-lightest:   #fff1f0;
$brand-danger-dark:       #c24036;