Colors

Neutrals

Our neutral palette consists of black, white, grays, and sand. It is a cold palette that transmits tranquility, protection, hope, optimism, and good luck.

Black

  • Default color for text or backgrounds in some cases

White

  • Mainly used for backgrounds and text on black

Gray

  • 200/300: for backgrounds to differentiate or indicate a separate section from white
  • 400: for dividers, borders, strokes to stand out on gray 300
  • 600: used for all disabled states
  • 700: used for secondary text
  • 800: not currently in use

Sand

  • Mainly used in B2C products for a “warmer” more homey feel
  • 300: mainly used for background, may be used for text on dark backgrounds
  • 600: used for contrast in case you want to highlight elements on sand 300 or on white
  • Currently there is no shade of sand that is suitable for text on light backgrounds

Emotional colors

The emotional colors are pink, orange, and yellow – a warm palette that transmits comfort, coziness, creativity, joy and originality.

  • Mainly used for B2C
  • Use pink 800 and 900 with care to not look like an alert
  • Use orange 600 and 700 with care to not look like an alert
  • Variations of the primary colors should only be used as secondary colors

Rational colors

The rational colors are purple, blue, and green – a cold palette that transmits tranquility, protection, hope, optimism and good luck.

  • Mainly used for B2B
  • Use green with care to not look like an alert
  • Variations of the primary colors should only be used as secondary colors

Feedback colors

Used for alerts and callouts to give users feedback on their actions.

  • Green: Success - user’s input has been received successfully
  • Orange: warning - alert, but not a blocker
  • Red: errors, wrong input - user can’t move forward