Color System
Our palette is designed to be vibrant, engaging, and accessible.
Brand Colors
Primary colors used for main actions, navigation, and brand identity.
Brand Primary
Main actions, buttons, links
--color-brand-primary
#D53F8C
Brand Secondary
Navigation, accents, gradients
--color-brand-secondary
#764BA2
Brand Accent
--color-brand-accent
#667eea
Accent Light
--color-brand-accent-light
#FBB6CE
Functional Colors
Semantic colors for feedback states: success, error, warning, and info.
Success
--color-success
#48bb78
Success Light
--color-success-light
#f0fff4
Error
--color-error
#f56565
Error Light
--color-error-light
#fff5f5
Warning
--color-warning
#ed8936
Info
--color-info
#4299e1
Gradients
Standard gradients used for backgrounds and active states.
Brand Gradient
Primary → Secondary
Sunny Gradient
Yellow → Red
Fresh Gradient
Green → Blue
Usage Examples
Text Usage
Muted text for descriptions.
Accent text for highlights.
Button States
Dark Background
Text on dark background needs higher opacity.
High Contrast
Neutral Colors
Grays and whites for text, backgrounds, and borders.
Text Main
--color-text-main
#2d3748
Text Muted
--color-text-muted
#718096
Text Light
--color-text-light
#a0aec0
BG Body
--color-bg-body
#f7fafc
Border
--color-border
#edf2f7
Kid-Friendly Palette
Bright, high-energy colors for the children's theme.
Sunny Yellow
--color-kid-primary
#FFD93D
Grass Green
--color-kid-secondary
#6BCB77
Toy Red
--color-kid-accent
#FF6B6B
Sky Blue
--color-kid-info
#4D96FF