Figma Edit

Color fundamentals

Color is used distinguish our brand, convey meaning, and invoke emotions. A color palette ensures a familiar and consistent experience across our products.

Palette

Neutral colors

The neutral palette consists of black, white, and grays. The neutral palette is dominant in our UI, using subtle shifts in value to create hierarchy and organize content.

black-050

black-100

black-150

black-200

black-225

black-250

black-300

black-350

black-400

black-500

black-600

Saturated colors

Stacks uses 5 colors with 6 stops per color. Colors are used sparingly and intentionally to convey meaning, draw attention to UI, or create associations.

orange-100

orange-200

orange-300

orange-400

orange-500

orange-600

blue-100

blue-200

blue-300

blue-400

blue-500

blue-600

green-100

green-200

green-300

green-400

green-500

green-600

red-100

red-200

red-300

red-400

red-500

red-600

yellow-100

yellow-200

yellow-300

yellow-400

yellow-500

yellow-600

purple-100

purple-200

purple-300

purple-400

purple-500

purple-600

pink-100

pink-200

pink-300

pink-400

pink-500

pink-600

orange-100

orange-200

orange-300

orange-400

orange-500

orange-600

blue-100

blue-200

blue-300

blue-400

blue-500

blue-600

green-100

green-200

green-300

green-400

green-500

green-600

red-100

red-200

red-300

red-400

red-500

red-600

yellow-100

yellow-200

yellow-300

yellow-400

yellow-500

yellow-600

purple-100

purple-200

purple-300

purple-400

purple-500

purple-600

pink-100

pink-200

pink-300

pink-400

pink-500

pink-600

Usage

Color roles

Color roles describe the intention behind the color.

Role		Description
black-400	Neutral	Use for text and secondary UI elements, such as buttons
theme-secondary	Primary	Use for primary actions
theme-primary	Accent	Use for UI that either relates to the brand or doesn't have a specific meaning tied to it.
blue-400	Information	Use for UI to communicate information that you'd like the user to be aware of
success	Success	Use for UI to communicate a successful action has taken place
warning	Warning	Use for UI that communicates a user should proceed with caution
danger	Danger	Use for UI that communicates the user has encountered danger or an error
purple-400	Discovery	Use for UI that depicts something new, such as onboarding or a new feature

Backgrounds

Default background color

black-050

black-100

100

black-150

150

black-200

200

black-225

black-250

black-300

black-350

black-400

black-500

black-600

Background layers

Stops 50 through 200 are used for background layers

Borders

black-050

black-100

black-150

black-200

200

black-225

225

black-250

black-300

300

black-350

black-400

black-500

black-600

Decorative borders

Input borders

Stops 200 and 225 are used for decorative borders and dividers throughout our UI. The 250 stop is used for input borders such as text field or secondary button.

Text

black-050

black-100

black-150

black-200

black-225

black-250

black-300

black-350

black-400

400

black-500

500

black-600

600

Text

Heading

Stops 500 and 600 can be used for text. Neutrals, blue, red, and green can also be used at 400 and will meet APCA contrast minimums within these shades. Orange and yellow should not be used at 400 because it does not meet our contrast standards.

Icons and illustrations

black-050

black-100

black-150

black-200

black-225

black-250

black-300

black-350

350

black-400

400

black-500

500

black-600

Illustrations

Icons

Stops 400 and 500 are for icons, while 350 should be used for more detailed illustrations.

Layering

Colors in the neutral palette are layered on top of each other to foster a sense of hierarchy and create associations.

Body background

Content

Component

Body background

Content

Component

Background layer	Light mode	Dark mode
Body background	black-100 black-100 (Teams) black-050 black-100 (SO)	white white
Content	black-050 black-050	black-050 black-050
Component	black-100 black-100	black-100 black-100
Component alt	black-150 black-150	black-150 black-150

Emphasis levels

Emphasis determines the amount of contrast a color has against the default surface. Emphasis has a range from subtle to bold. Bold emphasis has more contrast against the background, which adds more attention than using UI with the subtle or default emphasis level.

Robots

Bold

Robots

Default

Robots

Subtle

Text

Bold

Text

Default

Text

Subtle

Interaction states

In Stacks, a component will get darker (or lighter in dark mode) as they interact with it. These progresses happen by adding 100 to the color before the interaction happens. Example: Blue-400 on hover becomes Blue-500. For a disabled button state, subtract 100 from the default color.

Default

Hover

Selected

Disabled

Light, dark, and high contrast modes

Stacks supports light, dark, and high contrast modes. By using Stacks, you will get each of these modes for free. By using a Stacks component, an atomic color class, or CSS variable directly, your theme will switch appropriately based on the following methods:

You can apply .theme-system to the body element. This will change colors based on the prefers-color-scheme media query, which is ultimately powered by the user's system or browser settings. This can be preferable for folks who have their system turn to dark mode based on ambient light or time of day.
Alternatively, you can set a dark mode that is not system dependent by attaching .theme-dark to the body element.
Adding .theme-highcontrast to the body element will boost colors to WCAG Level AAA contrast ratios in as many places as possible. This mode stacks on top of both light and dark modes. The only exception is branded themed colors remain untouched by high contrast mode.

There are also conditional classes that can be applied to override assumed dark mode colors, force light mode, or to force dark mode. Forcing modes can be good for previews in admin-only situations.