Our color palette is built with our core principles and guidelines as its foundation. We are committed to complying with WCAG AA standard contrast ratios.
- Use official color palette colors and variables for all color CSS declarations. Never hard-code a color without a variable.
- Use rgba() to add transparency when the color needs to blend with different backgrounds.
White is used for text and icons on dark backgrounds. Stone is used for the product's canvas. Ash is primarily used for Wells (Empty States).
Used for dark text (Wisteria 800), content header background and status tags.
Used for links (Cluny 500), control actions, guidance and onboarding.
Used for Calls To Action (CTAs) and positive moods (e.g. success messages, status, progress).
Used for highlighting Collective Intelligence assets and cautionary moods (e.g. warning messages, progress).
Used for indicating intensity (e.g. Impact bar) and status tags.
Used for destructive actions and negative moods (e.g. error messages, status, progress).
To learn more, Culture Amp employees can visit the Color page in Figma.
- Contrast and accessibility is crucial. To consider everyone, we use color contrast ratios that adhered to WCAG 2.0 AA guidelines.
- Use our official color palette variables for all color CSS declarations.
rgba()to add transparency to a color, e.g.
- Please avoid using the deprecated custom helper
add-alpha(), as it requires importing a deprecated module and will not break the build when it is missing.
- Be mindful of color psychology associations and cultural values (such as red symbolizing danger versus good luck).
To indicate links and on-page actions, use Cluny.
For the most important action on a page, use Cluny (or Seedling on dark backgrounds).
See data visualization for details.
- Colors can help to create visual patterns that the user can recall (for example, links are always Cluny colored or negative favorability scores, errors, and destructive actions are always Coral).
- Use colors to create visual hierarchy.
- Colors can help to determine the level of severity.
- Add tone and contrast to define areas and guide or call out certain information.
- Use color for aesthetics or visual stimulation when it adds value to the page.
- Use more than color alone to convey information. Test with with a gray scale filter and color blindness simulators.
- Avoid using color when you can use contrast (such as levels of Wisteria or Neutrals), spacing, or typography to create hierarchy or groupings.
- Avoid color when there’s a risk of overuse or a ‘candy shop’ effect.
- Avoid color when it might overload the user and create confusion.
Here are some examples of existing design system colors: