Colors
Orange is a black, white and orange brand. In digital, orange is used as a highlight or focus color. Core colors should always dominate.
On this page
Color palette is used throughout Boosted in multiple ways, either in components or as utilities for both background-color and color.
Core colors
#fff
$white
#000
$secondary
#f16e00
$accessible-orange
#ff7900
$brand-orange
Supporting colors
#4bb4e6
$supporting-blue
#ffd200
$supporting-yellow
#50be87
$supporting-green
#a885d8
$supporting-purple
#ffb4e6
$supporting-pink
Functional colors
#32c832
$functional-green
#527edb
$functional-blue
#fc0
$functional-yellow
#cd3c14
$functional-red
Grays
#eee
$gray-300
#ddd
$gray-400
#ccc
$gray-500
#999
$gray-600
#666
$gray-700
#333
$gray-900
OBS Gray
#595959
$gray-800
Usage
Boosted sets an additional layer to use Orange Brand's color tokens names—defined first and mapped to Bootstrap core variables. Boosted core uses Bootstrap's naming for maintenance ease, but you're encouraged to use Orange color tokens when it comes to custom code.
Orange color tokens
// Boosted mod
//// Core colors
$accessible-orange: #f16e00;
$brand-orange: #ff7900;
//// Functional colors
$functional-green: #32c832;
$functional-blue: #527edb;
$functional-yellow: #fc0;
$functional-red: #cd3c14;
//// Supporting colors
$supporting-blue: #4bb4e6;
$supporting-yellow: #ffd200;
$supporting-green: #50be87;
$supporting-purple: #a885d8;
$supporting-pink: #ffb4e6;
Bootstrap core variables
$blue: $functional-blue;
$indigo: $supporting-purple;
$purple: $supporting-purple;
$pink: $supporting-pink;
$red: $functional-red;
$orange: $brand-orange;
$yellow: $functional-yellow;
$green: $functional-green;
$teal: $supporting-green;
$cyan: $supporting-blue;