Skip to content

Colors

Color System

For light mode interfaces, we use a color system of 12 tones on our grey scale (from neutral 0 to neutral 1000) and 5 tones on all our accent colors. All these tones have a logical gap between each other, to ensure good contrast and perfect accessibility.

As for dark mode interfaces, the same color keys are used. The only difference comes from color scales that are almost reversed and with many grey tokens to provide a good reading experience.

Primary colors

  1. A
    Fail
    A
    Fail
    A
    Pass
    A
    Pass
    Name
    Primary 700
    Key
    primary700
    RGB
    39, 31, 224
    Hexa
    #271fe0
  2. A
    Fail
    A
    Fail
    A
    Pass
    A
    Fail
    Name
    Primary 600
    Key
    primary600
    RGB
    73, 69, 255
    Hexa
    #4945ff
  3. A
    Pass
    A
    Fail
    A
    Fail
    A
    Fail
    Name
    Primary 500
    Key
    primary500
    RGB
    123, 121, 255
    Hexa
    #7b79ff
  4. A
    Pass
    A
    Pass
    A
    Fail
    A
    Fail
    Name
    Primary 200
    Key
    primary200
    RGB
    217, 216, 255
    Hexa
    #d9d8ff
  5. A
    Pass
    A
    Pass
    A
    Fail
    A
    Fail
    Name
    Primary 100
    Key
    primary100
    RGB
    240, 240, 255
    Hexa
    #f0f0ff

Success colors

  1. A
    Fail
    A
    Fail
    A
    Pass
    A
    Fail
    Name
    Success 700
    Key
    success700
    RGB
    47, 104, 70
    Hexa
    #2f6846
  2. A
    Fail
    A
    Fail
    A
    Pass
    A
    Fail
    Name
    Success 600
    Key
    success600
    RGB
    50, 128, 72
    Hexa
    #328048
  3. A
    Pass
    A
    Pass
    A
    Fail
    A
    Fail
    Name
    Success 500
    Key
    success500
    RGB
    92, 177, 118
    Hexa
    #5cb176
  4. A
    Pass
    A
    Pass
    A
    Fail
    A
    Fail
    Name
    Success 200
    Key
    success200
    RGB
    198, 240, 194
    Hexa
    #c6f0c2
  5. A
    Pass
    A
    Pass
    A
    Fail
    A
    Fail
    Name
    Success 100
    Key
    success100
    RGB
    234, 251, 231
    Hexa
    #eafbe7

Danger colors

  1. A
    Fail
    A
    Fail
    A
    Pass
    A
    Fail
    Name
    Danger 700
    Key
    danger700
    RGB
    183, 43, 26
    Hexa
    #b72b1a
  2. A
    Fail
    A
    Fail
    A
    Pass
    A
    Fail
    Name
    Danger 600
    Key
    danger600
    RGB
    208, 43, 32
    Hexa
    #d02b20
  3. A
    Pass
    A
    Fail
    A
    Fail
    A
    Fail
    Name
    Danger 500
    Key
    danger500
    RGB
    238, 94, 82
    Hexa
    #ee5e52
  4. A
    Pass
    A
    Pass
    A
    Fail
    A
    Fail
    Name
    Danger 200
    Key
    danger200
    RGB
    245, 192, 184
    Hexa
    #f5c0b8
  5. A
    Pass
    A
    Pass
    A
    Fail
    A
    Fail
    Name
    Danger 100
    Key
    danger100
    RGB
    252, 236, 234
    Hexa
    #fcecea

Warning colors

  1. A
    Pass
    A
    Fail
    A
    Fail
    A
    Fail
    Name
    Warning 700
    Key
    warning700
    RGB
    190, 93, 1
    Hexa
    #be5d01
  2. A
    Pass
    A
    Pass
    A
    Fail
    A
    Fail
    Name
    Warning 600
    Key
    warning600
    RGB
    217, 130, 47
    Hexa
    #d9822f
  3. A
    Pass
    A
    Pass
    A
    Fail
    A
    Fail
    Name
    Warning 500
    Key
    warning500
    RGB
    242, 157, 65
    Hexa
    #f29d41
  4. A
    Pass
    A
    Pass
    A
    Fail
    A
    Fail
    Name
    Warning 200
    Key
    warning200
    RGB
    250, 231, 185
    Hexa
    #fae7b9
  5. A
    Pass
    A
    Pass
    A
    Fail
    A
    Fail
    Name
    Warning 100
    Key
    warning100
    RGB
    253, 244, 220
    Hexa
    #fdf4dc

Secondary colors

  1. A
    Fail
    A
    Fail
    A
    Pass
    A
    Fail
    Name
    Secondary 700
    Key
    secondary700
    RGB
    0, 96, 150
    Hexa
    #006096
  2. A
    Fail
    A
    Fail
    A
    Pass
    A
    Fail
    Name
    Secondary 600
    Key
    secondary600
    RGB
    12, 117, 175
    Hexa
    #0c75af
  3. A
    Pass
    A
    Pass
    A
    Fail
    A
    Fail
    Name
    Secondary 500
    Key
    secondary500
    RGB
    102, 183, 241
    Hexa
    #66b7f1
  4. A
    Pass
    A
    Pass
    A
    Fail
    A
    Fail
    Name
    Secondary 200
    Key
    secondary200
    RGB
    184, 225, 255
    Hexa
    #b8e1ff
  5. A
    Pass
    A
    Pass
    A
    Fail
    A
    Fail
    Name
    Secondary 100
    Key
    secondary100
    RGB
    234, 245, 255
    Hexa
    #eaf5ff

Alternative colors

  1. A
    Fail
    A
    Fail
    A
    Pass
    A
    Pass
    Name
    Alternative 700
    Key
    alternative700
    RGB
    131, 18, 209
    Hexa
    #8312d1
  2. A
    Fail
    A
    Fail
    A
    Pass
    A
    Fail
    Name
    Alternative 600
    Key
    alternative600
    RGB
    151, 54, 232
    Hexa
    #9736e8
  3. A
    Pass
    A
    Fail
    A
    Fail
    A
    Fail
    Name
    Alternative 500
    Key
    alternative500
    RGB
    172, 115, 230
    Hexa
    #ac73e6
  4. A
    Pass
    A
    Pass
    A
    Fail
    A
    Fail
    Name
    Alternative 200
    Key
    alternative200
    RGB
    224, 193, 244
    Hexa
    #e0c1f4
  5. A
    Pass
    A
    Pass
    A
    Fail
    A
    Fail
    Name
    Alternative 100
    Key
    alternative100
    RGB
    246, 236, 252
    Hexa
    #f6ecfc