Color System
Our comprehensive color palette includes primary brand colors and neutral shades for each theme. Each color is carefully selected to ensure accessibility and visual harmony across all interfaces.
Light Theme
Classic light theme with purple primary colors and neutral grays
Primary Colors
Main brand colors used for primary actions, links, and emphasis
primary-100
#EED7FF
primary-200
#DDAFFF
primary-300
#CC87FF
primary-400
#BB5FFF
primary-500
#AA37FF
primary-600
#8A2CCF
primary-700
#69219F
primary-800
#49166E
primary-900
#280B3E
primary-1000
#08000E
Neutral Colors
Neutral shades used for text, backgrounds, and borders
neutral-000
#FFFFFF
neutral-100
#EDEDED
neutral-200
#DBDBDB
neutral-300
#C9C9C9
neutral-400
#B7B7B7
neutral-500
#808080
neutral-600
#696969
neutral-700
#6A6A6A
neutral-800
#4C4C4C
neutral-900
#2F2F2F
neutral-1000
#000000
Dark Theme
Dark theme with inverted color scales for optimal contrast
Primary Colors
Main brand colors used for primary actions, links, and emphasis
primary-100
#08000E
primary-200
#280B3E
primary-300
#49166E
primary-400
#69219F
primary-500
#8A2CCF
primary-600
#AA37FF
primary-700
#BB5FFF
primary-800
#CC87FF
primary-900
#DDAFFF
primary-1000
#EED7FF
Neutral Colors
Neutral shades used for text, backgrounds, and borders
neutral-000
#000000
neutral-100
#2F2F2F
neutral-200
#4C4C4C
neutral-300
#6A6A6A
neutral-400
#878787
neutral-500
#A5A5A5
neutral-600
#B7B7B7
neutral-700
#C9C9C9
neutral-800
#DBDBDB
neutral-900
#EDEDED
neutral-1000
#FFFFFF
Blue Theme
Blue theme with vibrant blue primaries and blue-tinted neutrals
Primary Colors
Main brand colors used for primary actions, links, and emphasis
primary-100
#DFDFFF
primary-200
#C0BFFF
primary-300
#A09EFF
primary-400
#817EFF
primary-500
#615EFF
primary-600
#4E4BD7
primary-700
#3B38AE
primary-800
#3B38AE
primary-900
#14135D
primary-1000
#010035
Neutral Colors
Neutral shades used for text, backgrounds, and borders
neutral-000
#FFFFFF
neutral-100
#E2E9ED
neutral-200
#C6D2DB
neutral-300
#A9BCCA
neutral-400
#8DA5B8
neutral-500
#708FA6
neutral-600
#5A7285
neutral-700
#435664
neutral-800
#2D3942
neutral-900
#161D21
neutral-1000
#000000
Rose Theme
Rose theme with warm rose primaries and olive-tinted neutrals
Primary Colors
Main brand colors used for primary actions, links, and emphasis
primary-100
#ECE0E0
primary-200
#D9C2C2
primary-300
#C5A3A3
primary-400
#B28585
primary-500
#9F6666
primary-600
#7F5252
primary-700
#5F3D3D
primary-800
#402929
primary-900
#301F1F
primary-1000
#201414
Neutral Colors
Neutral shades used for text, backgrounds, and borders
neutral-000
#FFFFFF
neutral-100
#ECEDE6
neutral-200
#D9DACC
neutral-300
#C5C8B3
neutral-400
#B2B599
neutral-500
#9FA380
neutral-600
#7F8266
neutral-700
#5F624D
neutral-800
#404133
neutral-900
#20211A
neutral-1000
#000000
Usage Guidelines
Best practices for using our color system
Primary Colors
- Use 500 shade for primary buttons and main actions
- Use 600-700 for hover states and darker accents
- Use 100-300 for subtle backgrounds and highlights
- Avoid using extreme shades (100, 1000) for text
Neutral Colors
- Use 900-1000 for primary text content
- Use 500-700 for secondary text and labels
- Use 200-400 for borders and dividers
- Use 000-100 for backgrounds and surfaces
Accessibility
- Ensure text has sufficient contrast (WCAG AA: 4.5:1, AAA: 7:1)
- Test color combinations in different lighting conditions
- Don't rely solely on color to convey information
- Consider color blindness when designing interfaces