Design Tokens
Color
Our color palette and guidelines for using color across our digital products.
done
Overview
Our color system is an important aspect of brand expression and is designed to ensure consistency across all products while prioritizing accessibility and creating a cohesive brand experience. All colors are WCAG 2.2 AA compliant to support users with diverse needs.
Primitive Colors
Brand Primary
Click to copycolor-brand-primary-50#F8F0FF
Click to copy
color-brand-primary-50
#F8F0FF
Click to copycolor-brand-primary-100#F4E5FF
Click to copy
color-brand-primary-100
#F4E5FF
Click to copycolor-brand-primary-200#E9CCFF
Click to copy
color-brand-primary-200
#E9CCFF
Click to copycolor-brand-primary-300#D7A3FF
Click to copy
color-brand-primary-300
#D7A3FF
Click to copycolor-brand-primary-400#B474E7
Click to copy
color-brand-primary-400
#B474E7
Click to copycolor-brand-primary-500#8634C6
Click to copy
color-brand-primary-500
#8634C6
Click to copycolor-brand-primary-600#632791
Click to copy
color-brand-primary-600
#632791
Click to copycolor-brand-primary-700#471C69
Click to copy
color-brand-primary-700
#471C69
Click to copycolor-brand-primary-800#2F1349
Click to copy
color-brand-primary-800
#2F1349
Click to copycolor-brand-primary-900#1A0B28
Click to copy
color-brand-primary-900
#1A0B28
Brand Teal
Click to copycolor-brand-teal-150#00A393
Click to copy
color-brand-teal-150
#00A393
Click to copycolor-brand-teal-300#133E7A
Click to copy
color-brand-teal-300
#133E7A
Neutral
Click to copycolor-neutral-0#FFFFFF
Click to copy
color-neutral-0
#FFFFFF
Click to copycolor-neutral-50#F9F9F9
Click to copy
color-neutral-50
#F9F9F9
Click to copycolor-neutral-100#F5F5F5
Click to copy
color-neutral-100
#F5F5F5
Click to copycolor-neutral-200#EBEBEB
Click to copy
color-neutral-200
#EBEBEB
Click to copycolor-neutral-300#E0E0E0
Click to copy
color-neutral-300
#E0E0E0
Click to copycolor-neutral-400#C7C7C7
Click to copy
color-neutral-400
#C7C7C7
Click to copycolor-neutral-500#B3B3B3
Click to copy
color-neutral-500
#B3B3B3
Click to copycolor-neutral-600#949494
Click to copy
color-neutral-600
#949494
Click to copycolor-neutral-700#707070
Click to copy
color-neutral-700
#707070
Click to copycolor-neutral-800#333333
Click to copy
color-neutral-800
#333333
Click to copycolor-neutral-900#1A1A1A
Click to copy
color-neutral-900
#1A1A1A
Functional Colors
Text
Basic Text
Click to copycolor-text-default#1A1A1A
Click to copy
color-text-default
#1A1A1A
Click to copycolor-text-secondary#707070
Click to copy
color-text-secondary
#707070
Click to copycolor-text-disabled#B3B3B3
Click to copy
color-text-disabled
#B3B3B3
Text on Dark
Click to copycolor-text-ondark-default#FFFFFF
Click to copy
color-text-ondark-default
#FFFFFF
Click to copycolor-text-ondark-secondary#F5F5F5
Click to copy
color-text-ondark-secondary
#F5F5F5
Interactive Text
Click to copycolor-text-interactive-default#8634C6
Click to copy
color-text-interactive-default
#8634C6
Click to copycolor-text-interactive-hover#632791
Click to copy
color-text-interactive-hover
#632791
Click to copycolor-text-interactive-active#471C69
Click to copy
color-text-interactive-active
#471C69
Interactive Text on Dark
Click to copycolor-text-interactive-ondark-default#D7A3FF
Click to copy
color-text-interactive-ondark-default
#D7A3FF
Click to copycolor-text-interactive-ondark-hover#E9CCFF
Click to copy
color-text-interactive-ondark-hover
#E9CCFF
Click to copycolor-text-interactive-ondark-active#F8F0FF
Click to copy
color-text-interactive-ondark-active
#F8F0FF
Background
Basic Background
Click to copycolor-background-default#FFFFFF
Click to copy
color-background-default
#FFFFFF
Click to copycolor-background-overlayrgba(26, 26, 26, 0.5)
Click to copy
color-background-overlay
rgba(26, 26, 26, 0.5)
Click to copycolor-background-hover#F4E5FF
Click to copy
color-background-hover
#F4E5FF
Click to copycolor-background-active#E9CCFF
Click to copy
color-background-active
#E9CCFF
Interactive Background
Click to copycolor-background-interactive-default#8634C6
Click to copy
color-background-interactive-default
#8634C6
Click to copycolor-background-interactive-hover#632791
Click to copy
color-background-interactive-hover
#632791
Click to copycolor-background-interactive-active#471C69
Click to copy
color-background-interactive-active
#471C69
Interactive Background on Dark
Click to copycolor-background-interactive-ondark-default#D7A3FF
Click to copy
color-background-interactive-ondark-default
#D7A3FF
Click to copycolor-background-interactive-ondark-hover#E9CCFF
Click to copy
color-background-interactive-ondark-hover
#E9CCFF
Click to copycolor-background-interactive-ondark-active#F8F0FF
Click to copy
color-background-interactive-ondark-active
#F8F0FF
Border
Click to copycolor-border-default#E0E0E0
Click to copy
color-border-default
#E0E0E0
Click to copycolor-border-focus#D7A3FF
Click to copy
color-border-focus
#D7A3FF
Brand Colors
In this section, we combine our brand identity colors with additional accent colors.
Click to copymarketing-purple-100#efe6ff
Click to copy
marketing-purple-100
#efe6ff
Click to copymarketing-purple-200#8634c6
Click to copy
marketing-purple-200
#8634c6
Click to copymarketing-purple-300#370080
Click to copy
marketing-purple-300
#370080
Click to copymarketing-purple-500#030030
Click to copy
marketing-purple-500
#030030
Click to copymarketing-magenta-100#efd5ff
Click to copy
marketing-magenta-100
#efd5ff
Click to copymarketing-magenta-200#e573ff
Click to copy
marketing-magenta-200
#e573ff
Click to copymarketing-magenta-300#b03ed9
Click to copy
marketing-magenta-300
#b03ed9
Click to copymarketing-navy-100#4d26ff
Click to copy
marketing-navy-100
#4d26ff
Click to copymarketing-navy-200#391ece
Click to copy
marketing-navy-200
#391ece
Click to copymarketing-navy-300#201a57
Click to copy
marketing-navy-300
#201a57
Click to copymarketing-teal-100#00d4be
Click to copy
marketing-teal-100
#00d4be
Click to copymarketing-teal-150#00a393
Click to copy
marketing-teal-150
#00a393
Click to copymarketing-teal-200#007da7
Click to copy
marketing-teal-200
#007da7
Click to copymarketing-teal-300#133e7a
Click to copy
marketing-teal-300
#133e7a
Click to copymarketing-yellow#fed648
Click to copy
marketing-yellow
#fed648
Click to copymarketing-orange#ff9740
Click to copy
marketing-orange
#ff9740
Click to copymarketing-salmon#ff584a
Click to copy
marketing-salmon
#ff584a
Click to copymarketing-pink#de0075
Click to copy
marketing-pink
#de0075
Click to copymarketing-lemon#f2f94c
Click to copy
marketing-lemon
#f2f94c
Click to copymarketing-lime#8bc541
Click to copy
marketing-lime
#8bc541
Click to copymarketing-lime-200#6b9933
Click to copy
marketing-lime-200
#6b9933