Colors

To avoid specifying color values by hand, we’ve included a robust set of color variables. For maintainability, please use these instead of hardcoding color values.

Our colors are each available in a number of stops from dark to light—900 being the darkest, and 025 or 050 being the lightest. All stops are available as various text, background, and border color classes.

If your layout can’t be built using atomic color classes, all stops are available as CSS variables. Referencing the CSS variables directly will make sure dark mode is properly accounted for. If working in a legacy context, referencing our colors as Less variables is preferred to Hex, though both are deprecated. A common refactor is replacing background-color: @white; with background-color: var(--white); to make sure a legacy component is aware of dark mode when a deeper refactor isn’t possible.

Red
red-050
var(--red-050) @red-050 #fdf3f4
red-100
var(--red-100) @red-100 #f9d3d7
red-200
var(--red-200) @red-200 #f4b4bb
red-300
var(--red-300) @red-300 #e87c87
red-400
var(--red-400) @red-400 #de535e
red-500
var(--red-500) @red-500 #d1383d
red-600
var(--red-600) @red-600 #c02d2e
red-700
var(--red-700) @red-700 #ac2726
red-800
var(--red-800) @red-800 #942121
red-900
var(--red-900) @red-900 #7a1819
Orange
orange-050
var(--orange-050) @orange-050 #fff7f2
orange-100
var(--orange-100) @orange-100 #fee3cf
orange-200
var(--orange-200) @orange-200 #fcd0ad
orange-300
var(--orange-300) @orange-300 #f7aa6d
orange-400
var(--orange-400) @orange-400 #f48024
orange-500
var(--orange-500) @orange-500 #f2720c
orange-600
var(--orange-600) @orange-600 #da670b
orange-700
var(--orange-700) @orange-700 #bd5c00
orange-800
var(--orange-800) @orange-800 #a35200
orange-900
var(--orange-900) @orange-900 #874600
Yellow
yellow-050
var(--yellow-050) @yellow-050 #fdf7e3
yellow-100
var(--yellow-100) @yellow-100 #fbf2d4
yellow-200
var(--yellow-200) @yellow-200 #f1e5bc
yellow-300
var(--yellow-300) @yellow-300 #e6d178
yellow-400
var(--yellow-400) @yellow-400 #e9c63f
yellow-500
var(--yellow-500) @yellow-500 #ddb624
yellow-600
var(--yellow-600) @yellow-600 #cea51b
yellow-700
var(--yellow-700) @yellow-700 #b89516
yellow-800
var(--yellow-800) @yellow-800 #9f8010
yellow-900
var(--yellow-900) @yellow-900 #826a0b
Green
green-025
var(--green-025) @green-025 #eef8f1
green-050
var(--green-050) @green-050 #dcf0e2
green-100
var(--green-100) @green-100 #cae8d4
green-200
var(--green-200) @green-200 #a6d9b7
green-300
var(--green-300) @green-300 #82ca9a
green-400
var(--green-400) @green-400 #5eba7d
green-500
var(--green-500) @green-500 #48a868
green-600
var(--green-600) @green-600 #3d8f58
green-700
var(--green-700) @green-700 #2f6f44
green-800
var(--green-800) @green-800 #29603b
green-900
var(--green-900) @green-900 #1e472c
Blue
blue-050
var(--blue-050) @blue-050 #f2f9ff
blue-100
var(--blue-100) @blue-100 #cfeafe
blue-200
var(--blue-200) @blue-200 #addafc
blue-300
var(--blue-300) @blue-300 #6cbbf7
blue-400
var(--blue-400) @blue-400 #379fef
blue-500
var(--blue-500) @blue-500 #0095ff
blue-600
var(--blue-600) @blue-600 #0077cc
blue-700
var(--blue-700) @blue-700 #0064bd
blue-800
var(--blue-800) @blue-800 #0054a3
blue-900
var(--blue-900) @blue-900 #004487
Powder
powder-050
var(--powder-050) @powder-050 #f4f8fb
powder-100
var(--powder-100) @powder-100 #e1ecf4
powder-200
var(--powder-200) @powder-200 #d1e5f1
powder-300
var(--powder-300) @powder-300 #b3d3ea
powder-400
var(--powder-400) @powder-400 #a0c7e4
powder-500
var(--powder-500) @powder-500 #7aa7c7
powder-600
var(--powder-600) @powder-600 #5b8db1
powder-700
var(--powder-700) @powder-700 #39739d
powder-800
var(--powder-800) @powder-800 #2c5777
powder-900
var(--powder-900) @powder-900 #1e3c52
Black
black-025
var(--black-025) @black-025 #fafafb
black-050
var(--black-050) @black-050 #eff0f1
black-075
var(--black-075) @black-075 #e4e6e8
black-100
var(--black-100) @black-100 #d6d9dc
black-150
var(--black-150) @black-150 #c8ccd0
black-200
var(--black-200) @black-200 #bbc0c4
black-300
var(--black-300) @black-300 #9fa6ad
black-350
var(--black-350) @black-350 #9199a1
black-400
var(--black-400) @black-400 #848d95
black-500
var(--black-500) @black-500 #6a737c
black-600
var(--black-600) @black-600 #535a60
black-700
var(--black-700) @black-700 #3b4045
black-750
var(--black-750) @black-750 #2f3337
black-800
var(--black-800) @black-800 #242729
black-900
var(--black-900) @black-900 #0c0d0e
Gold
gold-lighter
var(--gold-lighter) @gold-lighter #fff4d1
gold
var(--gold) @gold #ffcc01
gold-darker
var(--gold-darker) @gold-darker #f1b600
Silver
silver-lighter
var(--silver-lighter) @silver-lighter #e8e8e8
silver
var(--silver) @silver #b4b8bc
silver-darker
var(--silver-darker) @silver-darker #9a9c9f
Bronze
bronze-lighter
var(--bronze-lighter) @bronze-lighter #f2e9e1
bronze
var(--bronze) @bronze #caa789
bronze-darker
var(--bronze-darker) @bronze-darker #ab825f

Each color stop is available as an atomic text, background, and border class. Using these atomic classes means your view will respond to dark mode appropriately. These colors are available conditionally.

Text class Background class Border class Hover? Focus? Dark?
.fc-red-900 .bg-red-900 .bc-red-900
.fc-red-800 .bg-red-800 .bc-red-800
.fc-red-700 .bg-red-700 .bc-red-700
.fc-red-600 .bg-red-600 .bc-red-600
.fc-red-500 .bg-red-500 .bc-red-500
.fc-red-400 .bg-red-400 .bc-red-400
.fc-red-300 .bg-red-300 .bc-red-300
.fc-red-200 .bg-red-200 .bc-red-200
.fc-red-100 .bg-red-100 .bc-red-100
.fc-red-050 .bg-red-050 .bc-red-050
.fc-white .bg-white .bc-white
N/A .bg-transparent .bc-transparent
Text class Background class Border class Hover? Focus? Dark?
.fc-orange-900 .bg-orange-900 .bc-orange-900
.fc-orange-800 .bg-orange-800 .bc-orange-800
.fc-orange-700 .bg-orange-700 .bc-orange-700
.fc-orange-600 .bg-orange-600 .bc-orange-600
.fc-orange-500 .bg-orange-500 .bc-orange-500
.fc-orange-400 .bg-orange-400 .bc-orange-400
.fc-orange-300 .bg-orange-300 .bc-orange-300
.fc-orange-200 .bg-orange-200 .bc-orange-200
.fc-orange-100 .bg-orange-100 .bc-orange-100
.fc-orange-050 .bg-orange-050 .bc-orange-050
.fc-white .bg-white .bc-white
N/A .bg-transparent .bc-transparent
Text class Background class Border class Hover? Focus? Dark?
.fc-yellow-900 .bg-yellow-900 .bc-yellow-900
.fc-yellow-800 .bg-yellow-800 .bc-yellow-800
.fc-yellow-700 .bg-yellow-700 .bc-yellow-700
.fc-yellow-600 .bg-yellow-600 .bc-yellow-600
.fc-yellow-500 .bg-yellow-500 .bc-yellow-500
.fc-yellow-400 .bg-yellow-400 .bc-yellow-400
.fc-yellow-300 .bg-yellow-300 .bc-yellow-300
.fc-yellow-200 .bg-yellow-200 .bc-yellow-200
.fc-yellow-100 .bg-yellow-100 .bc-yellow-100
.fc-yellow-050 .bg-yellow-050 .bc-yellow-050
.fc-white .bg-white .bc-white
N/A .bg-transparent .bc-transparent
Text class Background class Border class Hover? Focus? Dark?
.fc-green-900 .bg-green-900 .bc-green-900
.fc-green-800 .bg-green-800 .bc-green-800
.fc-green-700 .bg-green-700 .bc-green-700
.fc-green-600 .bg-green-600 .bc-green-600
.fc-green-500 .bg-green-500 .bc-green-500
.fc-green-400 .bg-green-400 .bc-green-400
.fc-green-300 .bg-green-300 .bc-green-300
.fc-green-200 .bg-green-200 .bc-green-200
.fc-green-100 .bg-green-100 .bc-green-100
.fc-green-050 .bg-green-050 .bc-green-050
.fc-green-025 .bg-green-025 .bc-green-025
.fc-white .bg-white .bc-white
N/A .bg-transparent .bc-transparent
Text class Background class Border class Hover? Focus? Dark?
.fc-blue-900 .bg-blue-900 .bc-blue-900
.fc-blue-800 .bg-blue-800 .bc-blue-800
.fc-blue-700 .bg-blue-700 .bc-blue-700
.fc-blue-600 .bg-blue-600 .bc-blue-600
.fc-blue-500 .bg-blue-500 .bc-blue-500
.fc-blue-400 .bg-blue-400 .bc-blue-400
.fc-blue-300 .bg-blue-300 .bc-blue-300
.fc-blue-200 .bg-blue-200 .bc-blue-200
.fc-blue-100 .bg-blue-100 .bc-blue-100
.fc-blue-050 .bg-blue-050 .bc-blue-050
.fc-white .bg-white .bc-white
N/A .bg-transparent .bc-transparent
Text class Background class Border class Hover? Focus? Dark?
.fc-powder-900 .bg-powder-900 .bc-powder-900
.fc-powder-800 .bg-powder-800 .bc-powder-800
.fc-powder-700 .bg-powder-700 .bc-powder-700
.fc-powder-600 .bg-powder-600 .bc-powder-600
.fc-powder-500 .bg-powder-500 .bc-powder-500
.fc-powder-400 .bg-powder-400 .bc-powder-400
.fc-powder-300 .bg-powder-300 .bc-powder-300
.fc-powder-200 .bg-powder-200 .bc-powder-200
.fc-powder-100 .bg-powder-100 .bc-powder-100
.fc-powder-050 .bg-powder-050 .bc-powder-050
.fc-white .bg-white .bc-white
N/A .bg-transparent .bc-transparent
Text class Background class Border class Hover? Focus? Dark?
.fc-black-900 .bg-black-900 .bc-black-900
.fc-black-800 .bg-black-800 .bc-black-800
.fc-black-750 .bg-black-750 .bc-black-750
.fc-black-700 .bg-black-700 .bc-black-700
.fc-black-600 .bg-black-600 .bc-black-600
.fc-black-500 .bg-black-500 .bc-black-500
.fc-black-400 .bg-black-400 .bc-black-400
.fc-black-350 .bg-black-350 .bc-black-350
.fc-black-300 .bg-black-300 .bc-black-300
.fc-black-200 .bg-black-200 .bc-black-200
.fc-black-150 .bg-black-150 .bc-black-150
.fc-black-100 .bg-black-100 .bc-black-100
.fc-black-075 .bg-black-075 .bc-black-075
.fc-black-050 .bg-black-050 .bc-black-050
.fc-black-025 .bg-black-025 .bc-black-025
.fc-white .bg-white .bc-white
N/A .bg-transparent .bc-transparent
Text class Background class Hover? Focus? Dark?
.fc-gold .bg-gold
.fc-gold-darker .bg-gold-darker
.fc-gold-lighter .bg-gold-lighter
Text class Background class Hover? Focus? Dark?
.fc-silver .bg-silver
.fc-silver-darker .bg-silver-darker
.fc-silver-lighter .bg-silver-lighter
Text class Background class Hover? Focus? Dark?
.fc-bronze .bg-bronze
.fc-bronze-darker .bg-bronze-darker
.fc-bronze-lighter .bg-bronze-lighter
<p class="fc-light"></p>
<p class="fc-medium"></p>
<p></p>
<p class="fc-dark"></p>

Color: Light @black-500

Color: Medium @black-700

Color: Default @black-800

Color: Dark @black-900

Text classes Background classes Border Classes
.fc-danger
.fc-error
.bg-danger
.bg-error
.bc-danger
.bc-error
Text class Background class Border class
.fc-success
.bg-success
.bc-success
Text class Background class Border class
.fc-warning
.bg-warning
.bc-warning