React-native Colors
Use React-native colours utility classes to apply colour to the background of elements, text, and borders. Includes support for styling links with hover states, too.
Primary colors
Our primary palette is comprised of neutrals, white, and blue. These colors are present across most touch points from marketing to product.
A
Fail
A
Pass
Name
Primary
Hex
#cb0c9f
A
Fail
A
Pass
Name
Secondary
Hex
#8392ab
A
Fail
A
Pass
Name
Info
Hex
#17c1e8
A
Fail
A
Pass
Name
Success
Hex
#82d616
A
Fail
A
Pass
Name
Danger
Hex
#ea0606
A
Fail
A
Pass
Name
Warning
Hex
#f53939
A
Fail
A
Pass
Name
Light
Hex
#e9ecef
A
Fail
A
Pass
Name
Dark
Hex
#252f40
Gradient colors
A
Fail
A
Pass
Name
Primary
Hex
#FF0080#7928CA
A
Fail
A
Pass
Name
Secondary
Hex
#A8B8D8#627594
A
Fail
A
Pass
Name
Info
Hex
#21D4FD#2152FF
A
Fail
A
Pass
Name
Success
Hex
#98EC2D#17AD37
A
Fail
A
Pass
Name
Danger
Hex
#FF667C#EA0606
A
Fail
A
Pass
Name
Warning
Hex
#FBCF33#F53939
A
Fail
A
Pass
Name
Light
Hex
#EBEFF4#CED4DA
A
Fail
A
Pass
Name
Dark
Hex
#3A416F#141727
Social colors
A
Fail
A
Pass
Name
Facebook
Hex
#3B5998
A
Fail
A
Pass
Name
Twitter
Hex
#55ACEE
A
Fail
A
Pass
Name
Dribbble
Hex
#EA4C89
Text colors
| Text |
Hex
#252F40
|
| Primary |
Hex
#CB0C9F
|
| Secondary |
Hex
#627594
|
| Tertiary |
Hex
#E8AE4C
|
| Black |
Hex
#252F40
|
| White |
Hex
#FFFFFF
|
| Dark |
Hex
#252F40
|
| Light |
Hex
#E9ECEF
|
| Gray |
Hex
#A7A8AE
|
UI colors for navigation & card
| Card |
Hex
#FFFFFF
|
| Background |
Hex
#E9ECEF
|
| Shadow |
Hex
#000000
|
| Overlay |
Hex
rgba(0,0,0,0.3)
|
| Black |
Hex
#252F40
|
| White |
Hex
#FFFFFF
|
| Dark |
Hex
#252F40
|
| Light |
Hex
#E9ECEF
|
| Gray |
Hex
#A7A8AE
|
UI color for input borderColor on focus
| Focus |
Hex
#E293D3
|
| Input |
Hex
#252F40
|
UI color for switch checked/active color
| switchOn |
Hex
|
| switchOff |
Hex
|
UI color for checkbox icon checked/active color
| Checkbox |
Hex
[‘#3A416F’, ‘#141727’]
|
| CheckboxIcon |
Hex
#FFFFFF
|
Icon tint color
| Icon |
Hex
#8392AB
|
Product link color
| Link |
Hex
#CB0C9F
|