Design system
Color
Our colors
Brand colors
Brand colors are used to convey the presence of our brand on a page. For example, the pricing page uses heavy themes of purple.
primary
#2a1830secondary
#9d6a89white
#fbfcfflight gray
#e5e7ebdark gray
#a0aec0black
#333Semantic colors
Semantic colors are used to help convey a common emotion while interacting with web apps, like success or failure.
In situations where semantic colors are used to convey meaning, there should always be some sort of other indication of the action's consequences, like an icon.
success
#00856fwarning
#cc4e00failure
#ea1010Variants
It is useful in a number of situations to have many slight variants of each color in the palette. For example, this lets us quickly create gradients.
primary/10
primary/20
primary/30
primary/40
primary/50
primary/60
primary/70
primary/80
primary/90
secondary/10
secondary/20
secondary/30
secondary/40
secondary/50
secondary/60
secondary/70
secondary/80
secondary/90
gray-100
#f3f4f6gray-200
#e5e7ebgray-300
#d1d5dbgray-400
#cbd5e0gray-500
#a0aec0gray-600
#718096gray-700
#4a5568gray-800
#2d3748gray-900
#1a202csuccess-100
success-200
success-300
success-400
success-500
success-600
success-700
success-800
success
warning-100
warning-200
warning-300
warning-400
warning-500
warning-600
warning-700
warning-800
warning
failure-100
failure-200
failure-300
failure-400
failure-500
failure-600
failure-700
failure-800
failure
Additional standard colors
Tailwind CSS default colors are included by default.