Color is used distinguish our brand, convey meaning, and invoke emotions. A color palette ensures a familiar and consistent experience across our products.
PaletteSection titled Palette
Neutral colorsSection titled 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.
Saturated colorsSection titled 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.
Award colorsSection titled Award colors
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.
UsageSection titled Usage
Color rolesSection titled Color roles
Color roles describe the intention behind the color.
|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|
BackgroundsSection titled Backgrounds
Stops 50 through 200 are used for background layers
BordersSection titled 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.
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 illustrationsSection titled Icons and illustrations
Stops 400 and 500 are for icons, while 350 should be used for more detailed illustrations.
LayeringSection titled Layering
Colors in the neutral palette are layered on top of each other to foster a sense of hierarchy and create associations.
|Background layer||Light mode||Dark mode|
Emphasis levelsSection titled 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.
Interaction statesSection titled 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.
Light, dark, and high contrast modesSection 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:
- You can apply
bodyelement. This will change colors based on the
prefers-color-schememedia 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
bodyelement 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.
Accessibility standardsSection titled Accessibility standards
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.
ContrastSection titled 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.
Visual cuesSection titled Visual cues
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.