Sections

Colors (legacy)

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.

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-legacy; with background-color: var(--white-legacy); 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
red-legacy-025
red-legacy-050
red-legacy-100
red-legacy-200
red-legacy-300
red-legacy-400
red-legacy-500
red-legacy-600
red-legacy-700
red-legacy-800
red-legacy-900
Orange
orange-legacy-050
orange-legacy-100
orange-legacy-200
orange-legacy-300
orange-legacy-400
orange-legacy-500
orange-legacy-600
orange-legacy-700
orange-legacy-800
orange-legacy-900
Yellow
yellow-legacy-050
yellow-legacy-100
yellow-legacy-200
yellow-legacy-300
yellow-legacy-400
yellow-legacy-500
yellow-legacy-600
yellow-legacy-700
yellow-legacy-800
yellow-legacy-900
Green
green-legacy-025
green-legacy-050
green-legacy-100
green-legacy-200
green-legacy-300
green-legacy-400
green-legacy-500
green-legacy-600
green-legacy-700
green-legacy-800
green-legacy-900
Blue
blue-legacy-050
blue-legacy-100
blue-legacy-200
blue-legacy-300
blue-legacy-400
blue-legacy-500
blue-legacy-600
blue-legacy-700
blue-legacy-800
blue-legacy-900
Powder
powder-legacy-050
powder-legacy-100
powder-legacy-200
powder-legacy-300
powder-legacy-400
powder-legacy-500
powder-legacy-600
powder-legacy-700
powder-legacy-800
powder-legacy-900
Black
black-legacy-025
black-legacy-050
black-legacy-075
black-legacy-100
black-legacy-150
black-legacy-200
black-legacy-300
black-legacy-350
black-legacy-400
black-legacy-500
black-legacy-600
black-legacy-700
black-legacy-750
black-legacy-800
black-legacy-900
black-legacy
Theme-primary
theme-primary-legacy-025
theme-primary-legacy-050
theme-primary-legacy-075
theme-primary-legacy-100
theme-primary-legacy-150
theme-primary-legacy-200
theme-primary-legacy-300
theme-primary-legacy-350
theme-primary-legacy-400
theme-primary-legacy-500
theme-primary-legacy-600
theme-primary-legacy-700
theme-primary-legacy-800
theme-primary-legacy-900
Theme-secondary
theme-secondary-legacy-025
theme-secondary-legacy-050
theme-secondary-legacy-075
theme-secondary-legacy-100
theme-secondary-legacy-150
theme-secondary-legacy-200
theme-secondary-legacy-300
theme-secondary-legacy-350
theme-secondary-legacy-400
theme-secondary-legacy-500
theme-secondary-legacy-600
theme-secondary-legacy-700
theme-secondary-legacy-800
theme-secondary-legacy-900
Gold
gold-legacy-lighter
gold-legacy
gold-legacy-darker
Silver
silver-legacy-lighter
silver-legacy
silver-legacy-darker
Bronze
bronze-legacy-lighter
bronze-legacy
bronze-legacy-darker
White
white-legacy

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 Hover? Focus? Dark?
.fc-red-legacy-025 .bg-red-legacy-025 .bc-red-legacy-025
.fc-red-legacy-050 .bg-red-legacy-050 .bc-red-legacy-050
.fc-red-legacy-100 .bg-red-legacy-100 .bc-red-legacy-100
.fc-red-legacy-200 .bg-red-legacy-200 .bc-red-legacy-200
.fc-red-legacy-300 .bg-red-legacy-300 .bc-red-legacy-300
.fc-red-legacy-400 .bg-red-legacy-400 .bc-red-legacy-400
.fc-red-legacy-500 .bg-red-legacy-500 .bc-red-legacy-500
.fc-red-legacy-600 .bg-red-legacy-600 .bc-red-legacy-600
.fc-red-legacy-700 .bg-red-legacy-700 .bc-red-legacy-700
.fc-red-legacy-800 .bg-red-legacy-800 .bc-red-legacy-800
.fc-red-legacy-900 .bg-red-legacy-900 .bc-red-legacy-900

Orange

Section titled Orange
Text class Background class Border class Hover? Focus? Dark?
.fc-orange-legacy-050 .bg-orange-legacy-050 .bc-orange-legacy-050
.fc-orange-legacy-100 .bg-orange-legacy-100 .bc-orange-legacy-100
.fc-orange-legacy-200 .bg-orange-legacy-200 .bc-orange-legacy-200
.fc-orange-legacy-300 .bg-orange-legacy-300 .bc-orange-legacy-300
.fc-orange-legacy-400 .bg-orange-legacy-400 .bc-orange-legacy-400
.fc-orange-legacy-500 .bg-orange-legacy-500 .bc-orange-legacy-500
.fc-orange-legacy-600 .bg-orange-legacy-600 .bc-orange-legacy-600
.fc-orange-legacy-700 .bg-orange-legacy-700 .bc-orange-legacy-700
.fc-orange-legacy-800 .bg-orange-legacy-800 .bc-orange-legacy-800
.fc-orange-legacy-900 .bg-orange-legacy-900 .bc-orange-legacy-900

Yellow

Section titled Yellow
Text class Background class Border class Hover? Focus? Dark?
.fc-yellow-legacy-050 .bg-yellow-legacy-050 .bc-yellow-legacy-050
.fc-yellow-legacy-100 .bg-yellow-legacy-100 .bc-yellow-legacy-100
.fc-yellow-legacy-200 .bg-yellow-legacy-200 .bc-yellow-legacy-200
.fc-yellow-legacy-300 .bg-yellow-legacy-300 .bc-yellow-legacy-300
.fc-yellow-legacy-400 .bg-yellow-legacy-400 .bc-yellow-legacy-400
.fc-yellow-legacy-500 .bg-yellow-legacy-500 .bc-yellow-legacy-500
.fc-yellow-legacy-600 .bg-yellow-legacy-600 .bc-yellow-legacy-600
.fc-yellow-legacy-700 .bg-yellow-legacy-700 .bc-yellow-legacy-700
.fc-yellow-legacy-800 .bg-yellow-legacy-800 .bc-yellow-legacy-800
.fc-yellow-legacy-900 .bg-yellow-legacy-900 .bc-yellow-legacy-900

Green

Section titled Green
Text class Background class Border class Hover? Focus? Dark?
.fc-green-legacy-025 .bg-green-legacy-025 .bc-green-legacy-025
.fc-green-legacy-050 .bg-green-legacy-050 .bc-green-legacy-050
.fc-green-legacy-100 .bg-green-legacy-100 .bc-green-legacy-100
.fc-green-legacy-200 .bg-green-legacy-200 .bc-green-legacy-200
.fc-green-legacy-300 .bg-green-legacy-300 .bc-green-legacy-300
.fc-green-legacy-400 .bg-green-legacy-400 .bc-green-legacy-400
.fc-green-legacy-500 .bg-green-legacy-500 .bc-green-legacy-500
.fc-green-legacy-600 .bg-green-legacy-600 .bc-green-legacy-600
.fc-green-legacy-700 .bg-green-legacy-700 .bc-green-legacy-700
.fc-green-legacy-800 .bg-green-legacy-800 .bc-green-legacy-800
.fc-green-legacy-900 .bg-green-legacy-900 .bc-green-legacy-900

Blue

Section titled Blue
Text class Background class Border class Hover? Focus? Dark?
.fc-blue-legacy-050 .bg-blue-legacy-050 .bc-blue-legacy-050
.fc-blue-legacy-100 .bg-blue-legacy-100 .bc-blue-legacy-100
.fc-blue-legacy-200 .bg-blue-legacy-200 .bc-blue-legacy-200
.fc-blue-legacy-300 .bg-blue-legacy-300 .bc-blue-legacy-300
.fc-blue-legacy-400 .bg-blue-legacy-400 .bc-blue-legacy-400
.fc-blue-legacy-500 .bg-blue-legacy-500 .bc-blue-legacy-500
.fc-blue-legacy-600 .bg-blue-legacy-600 .bc-blue-legacy-600
.fc-blue-legacy-700 .bg-blue-legacy-700 .bc-blue-legacy-700
.fc-blue-legacy-800 .bg-blue-legacy-800 .bc-blue-legacy-800
.fc-blue-legacy-900 .bg-blue-legacy-900 .bc-blue-legacy-900

Powder

Section titled Powder
Text class Background class Border class Hover? Focus? Dark?
.fc-powder-legacy-050 .bg-powder-legacy-050 .bc-powder-legacy-050
.fc-powder-legacy-100 .bg-powder-legacy-100 .bc-powder-legacy-100
.fc-powder-legacy-200 .bg-powder-legacy-200 .bc-powder-legacy-200
.fc-powder-legacy-300 .bg-powder-legacy-300 .bc-powder-legacy-300
.fc-powder-legacy-400 .bg-powder-legacy-400 .bc-powder-legacy-400
.fc-powder-legacy-500 .bg-powder-legacy-500 .bc-powder-legacy-500
.fc-powder-legacy-600 .bg-powder-legacy-600 .bc-powder-legacy-600
.fc-powder-legacy-700 .bg-powder-legacy-700 .bc-powder-legacy-700
.fc-powder-legacy-800 .bg-powder-legacy-800 .bc-powder-legacy-800
.fc-powder-legacy-900 .bg-powder-legacy-900 .bc-powder-legacy-900

Black

Section titled Black
Text class Background class Border class Hover? Focus? Dark?
.fc-black-legacy-025 .bg-black-legacy-025 .bc-black-legacy-025
.fc-black-legacy-050 .bg-black-legacy-050 .bc-black-legacy-050
.fc-black-legacy-075 .bg-black-legacy-075 .bc-black-legacy-075
.fc-black-legacy-100 .bg-black-legacy-100 .bc-black-legacy-100
.fc-black-legacy-150 .bg-black-legacy-150 .bc-black-legacy-150
.fc-black-legacy-200 .bg-black-legacy-200 .bc-black-legacy-200
.fc-black-legacy-300 .bg-black-legacy-300 .bc-black-legacy-300
.fc-black-legacy-350 .bg-black-legacy-350 .bc-black-legacy-350
.fc-black-legacy-400 .bg-black-legacy-400 .bc-black-legacy-400
.fc-black-legacy-500 .bg-black-legacy-500 .bc-black-legacy-500
.fc-black-legacy-600 .bg-black-legacy-600 .bc-black-legacy-600
.fc-black-legacy-700 .bg-black-legacy-700 .bc-black-legacy-700
.fc-black-legacy-750 .bg-black-legacy-750 .bc-black-legacy-750
.fc-black-legacy-800 .bg-black-legacy-800 .bc-black-legacy-800
.fc-black-legacy-900 .bg-black-legacy-900 .bc-black-legacy-900
.fc-black-legacy .bg-black-legacy .bc-black-legacy

Theme primary

Section titled Theme primary
Text class Background class Border class Hover? Focus? Dark?
.fc-theme-primary-legacy-025 .bg-theme-primary-legacy-025 .bc-theme-primary-legacy-025
.fc-theme-primary-legacy-050 .bg-theme-primary-legacy-050 .bc-theme-primary-legacy-050
.fc-theme-primary-legacy-075 .bg-theme-primary-legacy-075 .bc-theme-primary-legacy-075
.fc-theme-primary-legacy-100 .bg-theme-primary-legacy-100 .bc-theme-primary-legacy-100
.fc-theme-primary-legacy-150 .bg-theme-primary-legacy-150 .bc-theme-primary-legacy-150
.fc-theme-primary-legacy-200 .bg-theme-primary-legacy-200 .bc-theme-primary-legacy-200
.fc-theme-primary-legacy-300 .bg-theme-primary-legacy-300 .bc-theme-primary-legacy-300
.fc-theme-primary-legacy-350 .bg-theme-primary-legacy-350 .bc-theme-primary-legacy-350
.fc-theme-primary-legacy-400 .bg-theme-primary-legacy-400 .bc-theme-primary-legacy-400
.fc-theme-primary-legacy-500 .bg-theme-primary-legacy-500 .bc-theme-primary-legacy-500
.fc-theme-primary-legacy-600 .bg-theme-primary-legacy-600 .bc-theme-primary-legacy-600
.fc-theme-primary-legacy-700 .bg-theme-primary-legacy-700 .bc-theme-primary-legacy-700
.fc-theme-primary-legacy-800 .bg-theme-primary-legacy-800 .bc-theme-primary-legacy-800
.fc-theme-primary-legacy-900 .bg-theme-primary-legacy-900 .bc-theme-primary-legacy-900

Theme secondary

Section titled Theme secondary
Text class Background class Border class Hover? Focus? Dark?
.fc-theme-secondary-legacy-025 .bg-theme-secondary-legacy-025 .bc-theme-secondary-legacy-025
.fc-theme-secondary-legacy-050 .bg-theme-secondary-legacy-050 .bc-theme-secondary-legacy-050
.fc-theme-secondary-legacy-075 .bg-theme-secondary-legacy-075 .bc-theme-secondary-legacy-075
.fc-theme-secondary-legacy-100 .bg-theme-secondary-legacy-100 .bc-theme-secondary-legacy-100
.fc-theme-secondary-legacy-150 .bg-theme-secondary-legacy-150 .bc-theme-secondary-legacy-150
.fc-theme-secondary-legacy-200 .bg-theme-secondary-legacy-200 .bc-theme-secondary-legacy-200
.fc-theme-secondary-legacy-300 .bg-theme-secondary-legacy-300 .bc-theme-secondary-legacy-300
.fc-theme-secondary-legacy-350 .bg-theme-secondary-legacy-350 .bc-theme-secondary-legacy-350
.fc-theme-secondary-legacy-400 .bg-theme-secondary-legacy-400 .bc-theme-secondary-legacy-400
.fc-theme-secondary-legacy-500 .bg-theme-secondary-legacy-500 .bc-theme-secondary-legacy-500
.fc-theme-secondary-legacy-600 .bg-theme-secondary-legacy-600 .bc-theme-secondary-legacy-600
.fc-theme-secondary-legacy-700 .bg-theme-secondary-legacy-700 .bc-theme-secondary-legacy-700
.fc-theme-secondary-legacy-800 .bg-theme-secondary-legacy-800 .bc-theme-secondary-legacy-800
.fc-theme-secondary-legacy-900 .bg-theme-secondary-legacy-900 .bc-theme-secondary-legacy-900

Gold

Section titled Gold
Text class Background class Border class Hover? Focus? Dark?
.fc-gold-legacy-lighter .bg-gold-legacy-lighter N/A
.fc-gold-legacy .bg-gold-legacy N/A
.fc-gold-legacy-darker .bg-gold-legacy-darker N/A

Silver

Section titled Silver
Text class Background class Border class Hover? Focus? Dark?
.fc-silver-legacy-lighter .bg-silver-legacy-lighter N/A
.fc-silver-legacy .bg-silver-legacy N/A
.fc-silver-legacy-darker .bg-silver-legacy-darker N/A

Bronze

Section titled Bronze
Text class Background class Border class Hover? Focus? Dark?
.fc-bronze-legacy-lighter .bg-bronze-legacy-lighter N/A
.fc-bronze-legacy .bg-bronze-legacy N/A
.fc-bronze-legacy-darker .bg-bronze-legacy-darker N/A

White

Section titled White
Text class Background class Border class Hover? Focus? Dark?
.fc-white-legacy .bg-white-legacy .bc-white-legacy

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-legacy-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-legacy-900) .fc-theme-primary-legacy-900 .bg-theme-primary-legacy-900 .bc-theme-primary-legacy-900
var(--theme-primary-legacy-800) .fc-theme-primary-legacy-800 .bg-theme-primary-legacy-800 .bc-theme-primary-legacy-800
var(--theme-primary-legacy-700) .fc-theme-primary-legacy-700 .bg-theme-primary-legacy-700 .bc-theme-primary-legacy-700
var(--theme-primary-legacy-600) .fc-theme-primary-legacy-600 .bg-theme-primary-legacy-600 .bc-theme-primary-legacy-600
var(--theme-primary-legacy-500) .fc-theme-primary-legacy-500 .bg-theme-primary-legacy-500 .bc-theme-primary-legacy-500
var(--theme-primary-legacy-400) .fc-theme-primary-legacy-400 .bg-theme-primary-legacy-400 .bc-theme-primary-legacy-400
var(--theme-primary-legacy-350) .fc-theme-primary-legacy-350 .bg-theme-primary-legacy-350 .bc-theme-primary-legacy-350
var(--theme-primary-legacy-300) .fc-theme-primary-legacy-300 .bg-theme-primary-legacy-300 .bc-theme-primary-legacy-300
var(--theme-primary-legacy-200) .fc-theme-primary-legacy-200 .bg-theme-primary-legacy-200 .bc-theme-primary-legacy-200
var(--theme-primary-legacy-150) .fc-theme-primary-legacy-150 .bg-theme-primary-legacy-150 .bc-theme-primary-legacy-150
var(--theme-primary-legacy-100) .fc-theme-primary-legacy-100 .bg-theme-primary-legacy-100 .bc-theme-primary-legacy-100
var(--theme-primary-legacy-075) .fc-theme-primary-legacy-075 .bg-theme-primary-legacy-075 .bc-theme-primary-legacy-075
var(--theme-primary-legacy-050) .fc-theme-primary-legacy-050 .bg-theme-primary-legacy-050 .bc-theme-primary-legacy-050
var(--theme-primary-legacy-025) .fc-theme-primary-legacy-025 .bg-theme-primary-legacy-025 .bc-theme-primary-legacy-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-legacy-900) .fc-theme-secondary-legacy-900 .bg-theme-secondary-legacy-900 .bc-theme-secondary-legacy-900
var(--theme-secondary-legacy-800) .fc-theme-secondary-legacy-800 .bg-theme-secondary-legacy-800 .bc-theme-secondary-legacy-800
var(--theme-secondary-legacy-700) .fc-theme-secondary-legacy-700 .bg-theme-secondary-legacy-700 .bc-theme-secondary-legacy-700
var(--theme-secondary-legacy-600) .fc-theme-secondary-legacy-600 .bg-theme-secondary-legacy-600 .bc-theme-secondary-legacy-600
var(--theme-secondary-legacy-500) .fc-theme-secondary-legacy-500 .bg-theme-secondary-legacy-500 .bc-theme-secondary-legacy-500
var(--theme-secondary-legacy-400) .fc-theme-secondary-legacy-400 .bg-theme-secondary-legacy-400 .bc-theme-secondary-legacy-400
var(--theme-secondary-legacy-350) .fc-theme-secondary-legacy-350 .bg-theme-secondary-legacy-350 .bc-theme-secondary-legacy-350
var(--theme-secondary-legacy-300) .fc-theme-secondary-legacy-300 .bg-theme-secondary-legacy-300 .bc-theme-secondary-legacy-300
var(--theme-secondary-legacy-200) .fc-theme-secondary-legacy-200 .bg-theme-secondary-legacy-200 .bc-theme-secondary-legacy-200
var(--theme-secondary-legacy-150) .fc-theme-secondary-legacy-150 .bg-theme-secondary-legacy-150 .bc-theme-secondary-legacy-150
var(--theme-secondary-legacy-100) .fc-theme-secondary-legacy-100 .bg-theme-secondary-legacy-100 .bc-theme-secondary-legacy-100
var(--theme-secondary-legacy-075) .fc-theme-secondary-legacy-075 .bg-theme-secondary-legacy-075 .bc-theme-secondary-legacy-075
var(--theme-secondary-legacy-050) .fc-theme-secondary-legacy-050 .bg-theme-secondary-legacy-050 .bc-theme-secondary-legacy-050
var(--theme-secondary-legacy-025) .fc-theme-secondary-legacy-025 .bg-theme-secondary-legacy-025 .bc-theme-secondary-legacy-025

Aliases

Section titled Aliases

Body text

Section titled Body text
<p class="fc-light-legacy">…</p>
<p class="fc-medium-legacy">…</p>
<p>…</p>
<p class="fc-dark-legacy">…</p>

Color: Light @black-legacy-500

Color: Medium @black-legacy-700

Color: Default @black-legacy-800

Color: Dark @black-legacy-900

Danger and error

Section titled Danger and error
Text classes Background classes Border Classes
.fc-danger-legacy
.fc-error-legacy
.bg-danger-legacy
.bg-error-legacy
.bc-danger-legacy
.bc-error-legacy

Success

Section titled Success
Text class Background class Border class
.fc-success-legacy
.bg-success-legacy
.bc-success-legacy

Warning

Section titled Warning
Text class Background class Border class
.fc-warning-legacy
.bg-warning-legacy
.bc-warning-legacy
Edit on GitHub File an issue on GitHub
Deploys by Netlify