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
- A
- Fail
- A
- Fail
- A
- Pass
- A
- Pass
- Name
- Primary 700
- Key
- primary700
- RGB
- 39, 31, 224
- Hexa
- #271fe0
- A
- Fail
- A
- Fail
- A
- Pass
- A
- Fail
- Name
- Primary 600
- Key
- primary600
- RGB
- 73, 69, 255
- Hexa
- #4945ff
- A
- Pass
- A
- Fail
- A
- Fail
- A
- Fail
- Name
- Primary 500
- Key
- primary500
- RGB
- 123, 121, 255
- Hexa
- #7b79ff
- A
- Pass
- A
- Pass
- A
- Fail
- A
- Fail
- Name
- Primary 200
- Key
- primary200
- RGB
- 217, 216, 255
- Hexa
- #d9d8ff
- A
- Pass
- A
- Pass
- A
- Fail
- A
- Fail
- Name
- Primary 100
- Key
- primary100
- RGB
- 240, 240, 255
- Hexa
- #f0f0ff
Success colors
- A
- Fail
- A
- Fail
- A
- Pass
- A
- Fail
- Name
- Success 700
- Key
- success700
- RGB
- 47, 104, 70
- Hexa
- #2f6846
- A
- Fail
- A
- Fail
- A
- Pass
- A
- Fail
- Name
- Success 600
- Key
- success600
- RGB
- 50, 128, 72
- Hexa
- #328048
- A
- Pass
- A
- Pass
- A
- Fail
- A
- Fail
- Name
- Success 500
- Key
- success500
- RGB
- 92, 177, 118
- Hexa
- #5cb176
- A
- Pass
- A
- Pass
- A
- Fail
- A
- Fail
- Name
- Success 200
- Key
- success200
- RGB
- 198, 240, 194
- Hexa
- #c6f0c2
- A
- Pass
- A
- Pass
- A
- Fail
- A
- Fail
- Name
- Success 100
- Key
- success100
- RGB
- 234, 251, 231
- Hexa
- #eafbe7
Danger colors
- A
- Fail
- A
- Fail
- A
- Pass
- A
- Fail
- Name
- Danger 700
- Key
- danger700
- RGB
- 183, 43, 26
- Hexa
- #b72b1a
- A
- Fail
- A
- Fail
- A
- Pass
- A
- Fail
- Name
- Danger 600
- Key
- danger600
- RGB
- 208, 43, 32
- Hexa
- #d02b20
- A
- Pass
- A
- Fail
- A
- Fail
- A
- Fail
- Name
- Danger 500
- Key
- danger500
- RGB
- 238, 94, 82
- Hexa
- #ee5e52
- A
- Pass
- A
- Pass
- A
- Fail
- A
- Fail
- Name
- Danger 200
- Key
- danger200
- RGB
- 245, 192, 184
- Hexa
- #f5c0b8
- A
- Pass
- A
- Pass
- A
- Fail
- A
- Fail
- Name
- Danger 100
- Key
- danger100
- RGB
- 252, 236, 234
- Hexa
- #fcecea
Warning colors
- A
- Pass
- A
- Fail
- A
- Fail
- A
- Fail
- Name
- Warning 700
- Key
- warning700
- RGB
- 190, 93, 1
- Hexa
- #be5d01
- A
- Pass
- A
- Pass
- A
- Fail
- A
- Fail
- Name
- Warning 600
- Key
- warning600
- RGB
- 217, 130, 47
- Hexa
- #d9822f
- A
- Pass
- A
- Pass
- A
- Fail
- A
- Fail
- Name
- Warning 500
- Key
- warning500
- RGB
- 242, 157, 65
- Hexa
- #f29d41
- A
- Pass
- A
- Pass
- A
- Fail
- A
- Fail
- Name
- Warning 200
- Key
- warning200
- RGB
- 250, 231, 185
- Hexa
- #fae7b9
- A
- Pass
- A
- Pass
- A
- Fail
- A
- Fail
- Name
- Warning 100
- Key
- warning100
- RGB
- 253, 244, 220
- Hexa
- #fdf4dc
Secondary colors
- A
- Fail
- A
- Fail
- A
- Pass
- A
- Fail
- Name
- Secondary 700
- Key
- secondary700
- RGB
- 0, 96, 150
- Hexa
- #006096
- A
- Fail
- A
- Fail
- A
- Pass
- A
- Fail
- Name
- Secondary 600
- Key
- secondary600
- RGB
- 12, 117, 175
- Hexa
- #0c75af
- A
- Pass
- A
- Pass
- A
- Fail
- A
- Fail
- Name
- Secondary 500
- Key
- secondary500
- RGB
- 102, 183, 241
- Hexa
- #66b7f1
- A
- Pass
- A
- Pass
- A
- Fail
- A
- Fail
- Name
- Secondary 200
- Key
- secondary200
- RGB
- 184, 225, 255
- Hexa
- #b8e1ff
- A
- Pass
- A
- Pass
- A
- Fail
- A
- Fail
- Name
- Secondary 100
- Key
- secondary100
- RGB
- 234, 245, 255
- Hexa
- #eaf5ff
Alternative colors
- A
- Fail
- A
- Fail
- A
- Pass
- A
- Pass
- Name
- Alternative 700
- Key
- alternative700
- RGB
- 131, 18, 209
- Hexa
- #8312d1
- A
- Fail
- A
- Fail
- A
- Pass
- A
- Fail
- Name
- Alternative 600
- Key
- alternative600
- RGB
- 151, 54, 232
- Hexa
- #9736e8
- A
- Pass
- A
- Fail
- A
- Fail
- A
- Fail
- Name
- Alternative 500
- Key
- alternative500
- RGB
- 172, 115, 230
- Hexa
- #ac73e6
- A
- Pass
- A
- Pass
- A
- Fail
- A
- Fail
- Name
- Alternative 200
- Key
- alternative200
- RGB
- 224, 193, 244
- Hexa
- #e0c1f4
- A
- Pass
- A
- Pass
- A
- Fail
- A
- Fail
- Name
- Alternative 100
- Key
- alternative100
- RGB
- 246, 236, 252
- Hexa
- #f6ecfc
PreviousRadius & shadows
NextIconography