Color fundamentals

Figma

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

We’ve revamped our colors. The original colors have been deprecated and will be removed from the library in January 2024.

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

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

Stacks has 3 award colors with 4 stops per color. Colors are used to represent gold, silver, and bronze within gamification aspects of our products.

gold-100
gold-200
gold-300
gold-400
silver-100
silver-200
silver-300
silver-400
bronze-100
bronze-200
bronze-300
bronze-400
gold-100
gold-200
gold-300
gold-400
silver-100
silver-200
silver-300
silver-400
bronze-100
bronze-200
bronze-300
bronze-400

Color roles describe the intention behind the color.

Role Description
Neutral Use for text and secondary UI elements, such as buttons
Primary Use for primary actions
Accent Use for UI that either relates to the brand or doesn’t have a specific meaning tied to it.
Information Use for UI to communicate information that you’d like the user to be aware of
Success Use for UI to communicate a successful action has taken place
Warning Use for UI that communicates a user should proceed with caution
Danger Use for UI that communicates the user has encountered danger or an error
Discovery Use for UI that depicts something new, such as onboarding or a new feature
Default background color
black-050
50
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

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.

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.

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.

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 (Teams)
black-100 (SO)
white
Content
black-050
black-050
Component
black-100
black-100
Component alt
black-150
black-150

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.

Robotics
Robotics
Robotics
Robotics
Robotics
Robotics
Bold
Robotics
Robotics
Robotics
Robotics
Robotics
Robotics
Default
Robotics
Robotics
Robotics
Robotics
Robotics
Robotics
Subtle
Text
Bold
Text
Default
Text
Subtle

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

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

  1. 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.
  2. Alternatively, you can set a dark mode that is not system dependent by attaching .theme-dark to the body element.
  3. 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.

Stacks aims to equip you with an accessible color palette. The standard light and dark modes have been tested against APCA color standards, while high contrast modes have been tested against WCAG AAA. Most of our color combinations meet the APCA levels defined below. We also offer high contrast mode which offers a greater level of contrast.

Contrast is the difference in luminance or color between any two elements. All visual readers require ample luminance contrast for fluent readability. Based on APCA bronze standards, all text must have a Lightness contrast (Lc) value of 60, body copy must have a Lc value of 75, icons must have a Lc value of 45, and placeholder and disabled text must have a Lc of 30. These numbers will be negative when calculating for dark mode.

Robotics
Do
Use luminance contrast that meets our standards as defined above.
Robotics
Don't
Use low luminance contrast that fail our standards.

Visual readers with color vision deficiency (CVD) have problems differentiating some hues and therefore these users need help discerning differences between items. This means that color (hue) should never be the sole means of communicating information and should always be paired with a non-color dependent indicator to accommodate all visual users.

Do
Use an icon alongside color to convey meaning.
Don't
Use color as the only visual cue.
Deploys by Netlify