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.
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 |
<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
|
|
|
Text class | Background class | Border class |
---|---|---|
.fc-success |
Text class | Background class | Border class |
---|---|---|
.fc-warning |