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.

When dark mode is enabled, the values of numbered color variables will be inverted from what they are with dark mode disabled—900 being the lightest, and 025 or 050 being the darkest. This is because the values don't represent lightness, but rather contrast with the background. The same also applies to lighter variants of non-numbered color variables.

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)

Theme Primary

var(--theme-primary-025)

var(--theme-primary-050)

var(--theme-primary-075)

var(--theme-primary-100)

var(--theme-primary-150)

var(--theme-primary-200)

var(--theme-primary-300)

var(--theme-primary-350)

var(--theme-primary-400)

var(--theme-primary-500)

var(--theme-primary-600)

var(--theme-primary-700)

var(--theme-primary-800)

var(--theme-primary-900)

Theme Secondary

var(--theme-secondary-025)

var(--theme-secondary-050)

var(--theme-secondary-075)

var(--theme-secondary-100)

var(--theme-secondary-150)

var(--theme-secondary-200)

var(--theme-secondary-300)

var(--theme-secondary-350)

var(--theme-secondary-400)

var(--theme-secondary-500)

var(--theme-secondary-600)

var(--theme-secondary-700)

var(--theme-secondary-800)

var(--theme-secondary-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
.fc-inherit	.bg-inherit	.bc-inherit

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
.fc-inherit	.bg-inherit	.bc-inherit

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
.fc-inherit	.bg-inherit	.bc-inherit

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
.fc-inherit	.bg-inherit	.bc-inherit

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
.fc-inherit	.bg-inherit	.bc-inherit

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
.fc-inherit	.bg-inherit	.bc-inherit

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
.fc-inherit	.bg-inherit	.bc-inherit

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

Theming

Section titled Theming

Stacks’s approach to theming is powered by CSS variables that are split into their HSL and RGB components. Our default primary color is based on Stack Overflow’s branded orange-400 represented as hsl(27, 90%, 55%). We can store these as separate values, apply various color operations, and then recombine them into on-demand color palettes to use for theming.

Primary

Section titled Primary

These variables transform the original primary theming color into various tints and shades.

Variable	Text class	Background class	Border class
var(--theme-primary-900)	.fc-theme-primary-900	.bg-theme-primary-900	.bc-theme-primary-900
var(--theme-primary-800)	.fc-theme-primary-800	.bg-theme-primary-800	.bc-theme-primary-800
var(--theme-primary-700)	.fc-theme-primary-700	.bg-theme-primary-700	.bc-theme-primary-700
var(--theme-primary-600)	.fc-theme-primary-600	.bg-theme-primary-600	.bc-theme-primary-600
var(--theme-primary-500)	.fc-theme-primary-500	.bg-theme-primary-500	.bc-theme-primary-500
var(--theme-primary-400)	.fc-theme-primary-400	.bg-theme-primary-400	.bc-theme-primary-400
var(--theme-primary-350)	.fc-theme-primary-350	.bg-theme-primary-350	.bc-theme-primary-350
var(--theme-primary-300)	.fc-theme-primary-300	.bg-theme-primary-300	.bc-theme-primary-300
var(--theme-primary-200)	.fc-theme-primary-200	.bg-theme-primary-200	.bc-theme-primary-200
var(--theme-primary-150)	.fc-theme-primary-150	.bg-theme-primary-150	.bc-theme-primary-150
var(--theme-primary-100)	.fc-theme-primary-100	.bg-theme-primary-100	.bc-theme-primary-100
var(--theme-primary-075)	.fc-theme-primary-075	.bg-theme-primary-075	.bc-theme-primary-075
var(--theme-primary-050)	.fc-theme-primary-050	.bg-theme-primary-050	.bc-theme-primary-050
var(--theme-primary-025)	.fc-theme-primary-025	.bg-theme-primary-025	.bc-theme-primary-025

Secondary

Section titled Secondary

These variables transform the original secondary theming color into various tints and shades.

Variable	Text class	Background class	Border class
var(--theme-secondary-900)	.fc-theme-secondary-900	.bg-theme-secondary-900	.bc-theme-secondary-900
var(--theme-secondary-800)	.fc-theme-secondary-800	.bg-theme-secondary-800	.bc-theme-secondary-800
var(--theme-secondary-700)	.fc-theme-secondary-700	.bg-theme-secondary-700	.bc-theme-secondary-700
var(--theme-secondary-600)	.fc-theme-secondary-600	.bg-theme-secondary-600	.bc-theme-secondary-600
var(--theme-secondary-500)	.fc-theme-secondary-500	.bg-theme-secondary-500	.bc-theme-secondary-500
var(--theme-secondary-400)	.fc-theme-secondary-400	.bg-theme-secondary-400	.bc-theme-secondary-400
var(--theme-secondary-350)	.fc-theme-secondary-350	.bg-theme-secondary-350	.bc-theme-secondary-350
var(--theme-secondary-300)	.fc-theme-secondary-300	.bg-theme-secondary-300	.bc-theme-secondary-300
var(--theme-secondary-200)	.fc-theme-secondary-200	.bg-theme-secondary-200	.bc-theme-secondary-200
var(--theme-secondary-150)	.fc-theme-secondary-150	.bg-theme-secondary-150	.bc-theme-secondary-150
var(--theme-secondary-100)	.fc-theme-secondary-100	.bg-theme-secondary-100	.bc-theme-secondary-100
var(--theme-secondary-075)	.fc-theme-secondary-075	.bg-theme-secondary-075	.bc-theme-secondary-075
var(--theme-secondary-050)	.fc-theme-secondary-050	.bg-theme-secondary-050	.bc-theme-secondary-050
var(--theme-secondary-025)	.fc-theme-secondary-025	.bg-theme-secondary-025	.bc-theme-secondary-025

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