Color
Color serves as a fundamental element that conveys mood, establishes brand identity, and ensures visual consistency across all user interfaces.
Semantic
To toggle between light and dark modes, use the mode toggle in the header.
Text
Text Primary
Headings and labels
#1A1A1A
#F2F2F2
Text Secondary
Main body text
#333333
#E5E5E5
Text Tertiary
Supporting text
#666666
#CCCCCC
Text Primary Static
Headings and labels (fixed)
#1A1A1A
#1A1A1A
Text Secondary Static
Main body text (fixed)
#333333
#333333
Text Tertiary Static
Supporting text (fixed)
#666666
#666666
Text Primary Inverse
Headings and labels on dark backgrounds
#F2F2F2
#1A1A1A
Text Secondary Inverse
Main body text on dark backgrounds
#E5E5E5
#333333
Text Tertiary Inverse
Supporting body text on dark backgrounds
#CCCCCC
#666666
Text Primary Inverse Static
Headings and labels on dark backgrounds (fixed)
#F2F2F2
#F2F2F2
Text Secondary Inverse Static
Main body text on dark backgrounds (fixed)
#E5E5E5
#E5E5E5
Text Tertiary Inverse Satic
Supporting body text on dark backgrounds (fixed)
#CCCCCC
#CCCCCC
Text Selected
Selected state text
#3355FF
#5A76FF
Text Tertiary
Disabled text
#B3B3B3
#4C4C4C
Text Brand
Brand-colored text
#3355FF
#5A76FF
Text Link
Hyperlinks (default)
#3355FF
#5A76FF
Text Link Hover
Hyperlinks (hover)
#2945CE
#8196FF
Text Link Pressed
Hyperlinks (pressed)
#1F349D
#A9B7FF
Text Warning
Warning messages
#1F349D
#A9B7FF
Text Negative
Error messages
#1F349D
#A9B7FF
Text Negative Pressed
Error messages (hover)
#1F349D
#A9B7FF
Text Negative Pressed
Error messages (pressed)
#1F349D
#A9B7FF
Text Positive
Success messages
#1F349D
#A9B7FF
Background
Background Primary
Main background
#FFFFFF
#1A1A1A
Background Hover
Hover state backgrounds
#F2F2F2
#333333
Background Pressed
Active/pressed states
#E5E5E5
#4C4C4C
Background Neutral
Neutral containers
#E5E5E5
#333333
Background Neutral Hover
Neutral hover states
#D9D9D9
#404040
Background Neutral Pressed
Neutral pressed states
#CCCCCC
#4C4C4C
Background Selected
Selected item backgrounds
#D0D8FF
#16246C
Background Subtle
Subtle emphasis
#F2F2F2
#1A1A1A
Background Inverse
Inverse backgrounds
#1A1A1A
#F2F2F2
Background Brand
Primary brand actions
#3355FF
#5A76FF
Background Brand Hover
Brand hover states
#2945CE
#8196FF
Background Brand Pressed
Brand pressed states
#1F349D
#A9B7FF
Background Brand Subtle
Subtle brand backgrounds
#D0D8FF
#16246C
Background Info
Info messages
#3355FF
#5A76FF
Background Info Subtle
Subtle info backgrounds
#D0D8FF
#16246C
Background Warning
Warning backgrounds
#F27F0D
#F4983B
Background Warning Subtle
Subtle warning backgrounds
#FCE1C7
#673606
Background Negative
Error/destructive backgrounds
#E61A1A
#EB4646
Background Negative Hover
Error hover states
#BA1515
#F07272
Background Negative Pressed
Error pressed states
#8E1010
#F49E9E
Background Negative Subtle
Subtle error backgrounds
#F9CACA
#620B0B
Background Positive
Success backgrounds
#009933
#31AD5A
Background Positive Subtle
Subtle success backgrounds
#C4E7D0
#004116
Background Mono
Monochrome backgrounds
#1A1A1A
#F2F2F2
Background Mono Hover
Monochrome hover states
#333333
#E5E5E5
Background Mono Pressed
Monochrome pressed states
#4C4C4C
#CCCCCC
Background Inverse Static
Inverse backgrounds (fixed)
#1A1A1A
#1A1A1A
Background System Static
System (OS) backgrounds (fixed)
#000000
#000000
Background System Inverse Static
System (OS) inverse backgrounds (fixed)
#FFFFFF
#FFFFFF
Icon
Icon Primary
Primary (Default) icons
#1A1A1A
#F2F2F2
Icon Subtle
Secondary icons
#666666
#666666
Icon Inverse
Icons on dark backgrounds
#F2F2F2
#1A1A1A
Icon Selected
Selected state icons
#3355FF
#5A76FF
Icon Disabled
Disabled icons
#B3B3B3
#4C4C4C
Icon Brand
Brand-colored icons
#3355FF
#5A76FF
Icon Info
Information icons
#3355FF
#5A76FF
Icon Warning
Warning icons
#F27F0D
#F4983B
Icon Negative
Error icons
#E61A1A
#EB4646
Icon Positve
Success icons
#009933
#31AD5A
Icon Primary Static
Primary (Default) icons (fixed)
#1A1A1A
#1A1A1A
Icon Inverse Static
Icons on dark backgrounds (fixed)
#F2F2F2
#F2F2F2
Border
Border Primary
Primary borders
#B3B3B3
#4C4C4C
Border Subtle
Subtle borders
#E5E5E5
#404040
Border Focus
Focus state borders
#3355FF
#5A76FF
Border Inverse
Borders on dark backgrounds
#FFFFFF
#333333
Border Selected
Selected element borders
#3355FF
#5A76FF
Border Disabled
Disabled borders
#CCCCCC
#333333
Border Brand
Brand-colored borders
#3355FF
#5A76FF
Border Info
Info borders
#3355FF
#5A76FF
Border Warning
Warning borders
#F27F0D
#F4983B
Border Negative
Error borders
#E61A1A
#EB4646
Border Positive
Success borders
#009933
#31AD5A
Border Mono
Monochrome borders
#1A1A1A
#F2F2F2
Surface
Surface L0
Base page background, lowest elevation
#FFFFFF
#000000
Surface L1
Cards on page, subtle containers
#FFFFFF
#0D0D0D
Surface L2
Dropdowns, popovers, panels
#FFFFFF
#1A1A1A
Surface L3
Modals, dialogs, overlays
#FFFFFF
#262626
Surface L4
Highest elevation, system alerts
#FFFFFF
#333333
Overlay
Overlay 30
30% opacity overlay (theme-aware)
#FFFFFF 30
#000000 30
Overlay 30 Static
30% opacity overlay (fixed)
#FFFFFF 30
#FFFFFF 30
Overlay Inverse 30
30% opacity inverse overlay
#000000 30
#FFFFFF 30
Overlay Inverse 30 Static
30% opacity inverse overlay (fixed)
#000000 30
#000000 30
Overlay 70
70% opacity overlay (fixed)
#FFFFFF 70
#000000 70
Overlay 70 Static
70% opacity overlay (theme-aware)
#FFFFFF 70
#FFFFFF 70
Overlay Inverse 70
70% opacity inverse overlay
#000000 70
#FFFFFF 70
Overlay Inverse 70 Static
70% opacity inverse overlay (fixed)
#000000 70
#000000 70