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.

Stops

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

var(--red-050)

var(--red-100)

var(--red-200)

var(--red-300)

var(--red-400)

var(--red-500)

var(--red-600)

var(--red-700)

var(--red-800)

var(--red-900)

Orange

var(--orange-050)

var(--orange-100)

var(--orange-200)

var(--orange-300)

var(--orange-400)

var(--orange-500)

var(--orange-600)

var(--orange-700)

var(--orange-800)

var(--orange-900)

Yellow

var(--yellow-050)

var(--yellow-100)

var(--yellow-200)

var(--yellow-300)

var(--yellow-400)

var(--yellow-500)

var(--yellow-600)

var(--yellow-700)

var(--yellow-800)

var(--yellow-900)

Green

var(--green-025)

var(--green-050)

var(--green-100)

var(--green-200)

var(--green-300)

var(--green-400)

var(--green-500)

var(--green-600)

var(--green-700)

var(--green-800)

var(--green-900)

Blue

var(--blue-050)

var(--blue-100)

var(--blue-200)

var(--blue-300)

var(--blue-400)

var(--blue-500)

var(--blue-600)

var(--blue-700)

var(--blue-800)

var(--blue-900)

Powder

var(--powder-050)

var(--powder-100)

var(--powder-200)

var(--powder-300)

var(--powder-400)

var(--powder-500)

var(--powder-600)

var(--powder-700)

var(--powder-800)

var(--powder-900)

Black

var(--black-025)

var(--black-050)

var(--black-075)

var(--black-100)

var(--black-150)

var(--black-200)

var(--black-300)

var(--black-350)

var(--black-400)

var(--black-500)

var(--black-600)

var(--black-700)

var(--black-750)

var(--black-800)

var(--black-900)

Gold

var(--gold-lighter)

var(--gold)

var(--gold-darker)

Silver

var(--silver-lighter)

var(--silver)

var(--silver-darker)

Bronze

var(--bronze-lighter)

var(--bronze)

var(--bronze-darker)

Classes

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.

Red

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

Orange

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

Yellow

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

Green

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

Blue

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

Powder

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

Black

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

Gold

	Text class	Background class	Hover?	Focus?	Dark?
	.fc-gold	.bg-gold
	.fc-gold-darker	.bg-gold-darker
	.fc-gold-lighter	.bg-gold-lighter

Silver

	Text class	Background class	Hover?	Focus?	Dark?
	.fc-silver	.bg-silver
	.fc-silver-darker	.bg-silver-darker
	.fc-silver-lighter	.bg-silver-lighter

Bronze

	Text class	Background class	Hover?	Focus?	Dark?
	.fc-bronze	.bg-bronze
	.fc-bronze-darker	.bg-bronze-darker
	.fc-bronze-lighter	.bg-bronze-lighter

Aliases

Body text

<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

Danger and error

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

Success

Text class	Background class	Border class
.fc-success	.bg-success	.bc-success

Warning

Text class	Background class	Border class
.fc-warning	.bg-warning	.bc-warning