Also known as:
Palette

Color

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.

AnchorNeed to know

  • Use official color palette colors, variables and helpers (add-alpha) for all color CSS declarations. Never hard-code a color without a variable.
  • Use add-alpha (to add transparency) when the color needs to blend with different backgrounds.

Zen palette

These color design tokens can be used in Sass or JavaScript. See the design tokens package.

Neutrals

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

White#FFFFFF
Stone#F6F6F6
Ash#ECECEF

Wisteria

Used for dark text (Wisteria 800), content header background and status tags.

800#35374A
700#4B4D68
600#6B6E94
500#898BA9
400#A7A9C1
300#C4C5D4
200#E1E2EA
100#F0F1F4

Cluny

Used for links (Cluny 500), control actions, guidance and onboarding.

500#0168B3
400#4D95CA
300#99C3E1
200#CCE1F0
100#E6F0F7

Seedling

Used for Calls To Action (CTAs) and positive moods (e.g. success messages, status, progress).

600#177261
500#21A38B
400#64BFAE
300#90D1C5
200#BCE3DC
100#E9F6F3

Yuzu

Used for highlighting Collective Intelligence assets and cautionary moods (e.g. warning messages, progress).

500#FFCE1E
400#FFE278
300#FFEBA5
200#FFF5D2
100#FFFAE8

Peach

Used for indicating intensity (e.g. Impact bar) and status tags.

500#FA7558
400#FC9E8A
300#FDBAAB
200#FDD6CD
100#FFF1EE

Coral

Used for destructive actions and negative moods (e.g. error messages, status, progress).

600#A83541
500#F04C5D
400#F3707D
300#F6949E
200#FBC9CE
100#FDEDEF

To learn more, Culture Amp employees can visit the Color page in Figma.

Legacy palette

We no longer use these colors, but they'll stay here for reference for a short time.

100%

100%

100%

100%

100%

100%

100%

100%

Stone

100%

Ash

100%

To keep in mind

  • 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 and helpers (add-alpha) for all color CSS declarations.
  • Be mindful of color psychology associations and cultural values (such as Red symbolizing danger versus good luck).

Links

To indicate links and on-page actions, use Cluny.

Primary action

For the most important action on a page, use Wisteria.

Data visualization

To indicate Sentiment, use:

  • Seedling 400 for Positive sentiment.
  • Ash for Neutral sentiment.
  • Coral 300 for Negative sentiment.

When to use

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

When not to use

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

External links

Here are some examples of existing design system colors: