Orange is a black, white and orange brand. In digital, orange is used as a highlight or focus color. Core colors should always dominate.
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;