Colors

Figma

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.

Theme primary

theme-primary
theme-primary-100
theme-primary-200
theme-primary-300
theme-primary-400
theme-primary-500
theme-primary-600

Theme secondary

theme-secondary
theme-secondary-100
theme-secondary-200
theme-secondary-300
theme-secondary-400
theme-secondary-500
theme-secondary-600

Orange

orange-100
orange-200
orange-300
orange-400
orange-500
orange-600

Blue

blue-100
blue-200
blue-300
blue-400
blue-500
blue-600

Green

green-100
green-200
green-300
green-400
green-500
green-600

Red

red-100
red-200
red-300
red-400
red-500
red-600

Yellow

yellow-100
yellow-200
yellow-300
yellow-400
yellow-500
yellow-600

Purple

purple-100
purple-200
purple-300
purple-400
purple-500
purple-600

Gold

gold-100
gold-200
gold-300
gold-400

Silver

silver-100
silver-200
silver-300
silver-400

Bronze

bronze-100
bronze-200
bronze-300
bronze-400

Black

black-050
black-100
black-150
black-200
black-225
black-250
black-300
black-350
black-400
black-500
black-600
black

White

white

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 Background Border
.fc-theme-primary
.bg-theme-primary
.bc-theme-primary
.fc-theme-primary-100
.bg-theme-primary-100
.bc-theme-primary-100
.fc-theme-primary-200
.bg-theme-primary-200
.bc-theme-primary-200
.fc-theme-primary-300
.bg-theme-primary-300
.bc-theme-primary-300
.fc-theme-primary-400
.bg-theme-primary-400
.bc-theme-primary-400
.fc-theme-primary-500
.bg-theme-primary-500
.bc-theme-primary-500
.fc-theme-primary-600
.bg-theme-primary-600
.bc-theme-primary-600
Text Background Border
.fc-theme-secondary
.bg-theme-secondary
.bc-theme-secondary
.fc-theme-secondary-100
.bg-theme-secondary-100
.bc-theme-secondary-100
.fc-theme-secondary-200
.bg-theme-secondary-200
.bc-theme-secondary-200
.fc-theme-secondary-300
.bg-theme-secondary-300
.bc-theme-secondary-300
.fc-theme-secondary-400
.bg-theme-secondary-400
.bc-theme-secondary-400
.fc-theme-secondary-500
.bg-theme-secondary-500
.bc-theme-secondary-500
.fc-theme-secondary-600
.bg-theme-secondary-600
.bc-theme-secondary-600
Text Background Border
.fc-orange-100
.bg-orange-100
.bc-orange-100
.fc-orange-200
.bg-orange-200
.bc-orange-200
.fc-orange-300
.bg-orange-300
.bc-orange-300
.fc-orange-400
.bg-orange-400
.bc-orange-400
.fc-orange-500
.bg-orange-500
.bc-orange-500
.fc-orange-600
.bg-orange-600
.bc-orange-600
Text Background Border
.fc-blue-100
.bg-blue-100
.bc-blue-100
.fc-blue-200
.bg-blue-200
.bc-blue-200
.fc-blue-300
.bg-blue-300
.bc-blue-300
.fc-blue-400
.bg-blue-400
.bc-blue-400
.fc-blue-500
.bg-blue-500
.bc-blue-500
.fc-blue-600
.bg-blue-600
.bc-blue-600
Text Background Border
.fc-green-100
.bg-green-100
.bc-green-100
.fc-green-200
.bg-green-200
.bc-green-200
.fc-green-300
.bg-green-300
.bc-green-300
.fc-green-400
.bg-green-400
.bc-green-400
.fc-green-500
.bg-green-500
.bc-green-500
.fc-green-600
.bg-green-600
.bc-green-600
Text Background Border
.fc-red-100
.bg-red-100
.bc-red-100
.fc-red-200
.bg-red-200
.bc-red-200
.fc-red-300
.bg-red-300
.bc-red-300
.fc-red-400
.bg-red-400
.bc-red-400
.fc-red-500
.bg-red-500
.bc-red-500
.fc-red-600
.bg-red-600
.bc-red-600
Text Background Border
.fc-yellow-100
.bg-yellow-100
.bc-yellow-100
.fc-yellow-200
.bg-yellow-200
.bc-yellow-200
.fc-yellow-300
.bg-yellow-300
.bc-yellow-300
.fc-yellow-400
.bg-yellow-400
.bc-yellow-400
.fc-yellow-500
.bg-yellow-500
.bc-yellow-500
.fc-yellow-600
.bg-yellow-600
.bc-yellow-600
Text Background Border
.fc-purple-100
.bg-purple-100
.bc-purple-100
.fc-purple-200
.bg-purple-200
.bc-purple-200
.fc-purple-300
.bg-purple-300
.bc-purple-300
.fc-purple-400
.bg-purple-400
.bc-purple-400
.fc-purple-500
.bg-purple-500
.bc-purple-500
.fc-purple-600
.bg-purple-600
.bc-purple-600
Text Background Border
.fc-gold-100
.bg-gold-100
.bc-gold-100
.fc-gold-200
.bg-gold-200
.bc-gold-200
.fc-gold-300
.bg-gold-300
.bc-gold-300
.fc-gold-400
.bg-gold-400
.bc-gold-400
Text Background Border
.fc-silver-100
.bg-silver-100
.bc-silver-100
.fc-silver-200
.bg-silver-200
.bc-silver-200
.fc-silver-300
.bg-silver-300
.bc-silver-300
.fc-silver-400
.bg-silver-400
.bc-silver-400
Text Background Border
.fc-bronze-100
.bg-bronze-100
.bc-bronze-100
.fc-bronze-200
.bg-bronze-200
.bc-bronze-200
.fc-bronze-300
.bg-bronze-300
.bc-bronze-300
.fc-bronze-400
.bg-bronze-400
.bc-bronze-400
Text Background Border
.fc-black-050
.bg-black-050
.bc-black-050
.fc-black-100
.bg-black-100
.bc-black-100
.fc-black-150
.bg-black-150
.bc-black-150
.fc-black-200
.bg-black-200
.bc-black-200
.fc-black-225
.bg-black-225
.bc-black-225
.fc-black-250
.bg-black-250
.bc-black-250
.fc-black-300
.bg-black-300
.bc-black-300
.fc-black-350
.bg-black-350
.bc-black-350
.fc-black-400
.bg-black-400
.bc-black-400
.fc-black-500
.bg-black-500
.bc-black-500
.fc-black-600
.bg-black-600
.bc-black-600
.fc-black-600
.bg-black-600
.bc-black-600
Text Background Border
.fc-white
.bg-white
.bc-white
<p class="fc-light"></p>
<p class="fc-medium"></p>
<p></p>
<p class="fc-dark"></p>
Text classes Example
.fc-light

This is example light text.

.fc-medium

This is example medium text.

.fc-dark

This is example dark text.

Text classes Background classes Border Classes
.fc-danger
.bg-danger
.bc-danger
Text classes Background classes Border Classes
.fc-error
.bg-error
.bc-error
Text classes Background classes Border Classes
.fc-warning
.bg-warning
.bc-warning
Text classes Background classes Border Classes
.fc-success
.bg-success
.bc-success
Deploys by Netlify