Design system
Colors
Color distinguishes our brand and helps us create consistent experiences across products.
Primary Colors
Hex:
#651FFF
Name:
Primary 1
Usage:
Hex:
#ffffff
Name:
Primary 2
Usage:
Hex:
#DBDBDB
Name:
Primary 3
Usage:
Secondary Colors
Hex:
#B39DDB
Name:
Secondary 1
Usage:
Onboarding
Hex:
#D1C4E9
Name:
Secondary 2
Usage:
Onboarding
Hex:
#F3EBFF
Name:
Secondary 3
Usage:
In buttons, text, BG
Hex:
#80F3EBFF
Name:
Secondary 3 50%
Usage:
Disabled buttons
Background Colors
Hex:
#f4f4f4
Name:
Background 1
Usage:
Background
Hex:
#ffffff
Name:
Background 2
Usage:
Modules, Background
Accent
Hex:
#651FFF
Name:
Accent 1
Usage:
CTA
Hex:
#E6651FFF
Name:
Accent 90%
Usage:
Hovers, ..
Hex:
#80651FFF
Name:
Accent 50%
Usage:
In components
Hex:
#1A651FFF
Name:
Accent 10%
Usage:
In component backgrounds
Text Color
Hex:
#07021D
Name:
Text Color 1
Usage:
In main titles
Hex:
#9E9E9E
Name:
Text Color 2
Usage:
In secondary text.
Hex:
#ffffff
Name:
Text color 3
Usage:
Buttons text
Indicators
Hex:
#359270
Name:
Success
Usage:
Success
Hex:
#FF9747
Name:
Warning
Usage:
Snack bar
Hex:
#D21919
Name:
Error
Usage:
Input
Hex:
#1a359270
Name:
Success 10%
Usage:
Success Chip
Hex:
#1ad21919
Name:
Error 10%
Usage:
Failed Chip