Sections

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

Section titled 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

Section titled 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

Section titled 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

Section titled 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

Section titled 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

Section titled 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

Section titled 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

Section titled 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

Section titled 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

Section titled 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

Section titled 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

Section titled 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

Section titled Aliases

Body text

Section titled 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

Section titled Danger and error

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

Success

Section titled Success

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

Warning

Section titled Warning

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

Edit on GitHub