Color

Our color palette is built with our core principles and guidelines as its foundation. We are committed to complying with WCAG 2.1 AA standard contrast ratios.

Also known as:
Palette

AnchorNeed to know

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

Heart palette

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

White

White is used for text and icons on dark backgrounds.

White#ffffff

Gray

Gray 100 is the product’s canvas. Gray 200 is for hover states or headers of expanded content. Gray 300 for most other gray elements like tags, avatars, disabled inputs. Gray 400 is not currently used. Gray 500-600 are primarily used for borders and dividers.

600#524e56
500#8c8c97
400#cdcdd0
300#eaeaec
200#f4f4f5
100#f9f9f9

Purple

Purple 800 is our default text color, Purple 600 is used for our Default header color. Purple 500 → Purple 100 can be used for Prominent moods.

800#2f2438
700#4a234d
600#5f3361
500#844587
400#ae67b1
300#c9a5dd
200#dfc9ea
100#f4edf8

Blue

Used for semantic text (links), secondary actions and general informative moods including guidance and onboarding.

700#003157
600#004970
500#0168b3
400#008bd6
300#73c0e8
200#bde2f5
100#e6f6ff

Green

Used for reversed Primary actions on our Default Header and general positive moods (E.g. success messages, status, progress).

700#22594a
600#2c7d67
500#3caf90
400#5dcbad
300#8fdbc7
200#c4ede2
100#e8f8f4

Yellow

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

700#876400
600#c68600
500#ffb600
400#ffca4d
300#ffe36e
200#ffeeb3
100#fff9e4

Orange

Used for indivating assertive moods, (E.g. action empty states, assertive confirmation modal).

700#903c00
600#b74302
500#e96c2f
400#ff9461
300#ffb08a
200#ffd1b9
100#fff0e8

Red

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

700#6c1e20
600#a82433
500#c93b55
400#e0707d
300#f597a8
200#f9c2cb
100#fdeaee

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

To keep in mind

  • Contrast and accessibility is crucial. To consider everyone, we use color contrast ratios that adhered to WCAG 2.1 AA guidelines.
  • Use our official color palette variables for all color CSS declarations.
  • Use rgba() to add transparency to a color, e.g. rgba($kz-var-color-purple-800-rgb-params, 0.7).
  • 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).

Links

To indicate links and on-page actions, use Blue 500.

Primary action

For the most important action on a page, use Blue 500 or Green 400 as the Primary button color on our Default Header (Purple 600 background).

Data visualization

See data visualization for details.

  • For favorable scores and general positive colored graphs and visualizations, use Data Viz / Favorable $kz-var-id-data-viz-favorable
  • For unfavorable scores and general negative colored graphs and visualizations, use Data Viz / Unfavorable $kz-var-id-data-viz-unfavorable

When to use and when not to use

When to use
  • Colors can help to create visual patterns that the user can recall (for example, links are always Blue colored or negative favorability scores, errors, and destructive actions are always Red).
  • 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 Purple 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: