Skip to main content

Color

UI Colors​

The color scale features four UI colors in 17 shades each. These colors are named after their function:

  • Neutral: The largest portion of the UI uses the neutral color.
  • Primary: To highlight user selections and active states, based on Adjust’s brand color.
  • Negative: To mark destructive actions (eg. delete) and errors (eg. input validation).
  • Positive: To mark successful system feedback (eg. added new user).
  • Warning: To highlight important system messages that are neither clearly negative nor positive.
  • Keyboard-focus: Reserved for the prominent focus styling while navigating the UI with a keyboard.

Always stick to the color scale, do not introduce new colors or shades, do not use transparency. Each UI color communicates a certain meaning, never use these colors for mere decoration.

Never mix color-primary, color-negative, color-positive or color-warning with any other color than color-neutral (eg. do not put yellow text on a blue background).

All color shades are carefully manually adjusted: the same shade from different colors matches closely in perceived luminosity, eg. color-neutral-80 appears as bright or dark as color-primary-80.

Color Scale

Colors on Interaction​

To create a noticeable yet undistracting effect on mouse-over (hover), the color becomes darker by two shades.