Overview
Color Psychology & Emotional Safety
Our color system is rooted in trauma-informed design principles, using nature-inspired hues that promote psychological safety and emotional regulation. Each color is carefully selected to reduce anxiety, support focus, and create a sense of calm stability.
Grounding Blues: Create stability and trust, reducing hypervigilance
Calming Greens: Promote healing and growth, connect to nature
Gentle Roses: Provide warmth without aggression, support self-compassion
Soft Neutrals: Create breathing space and reduce visual overwhelm
Warm Accents: Guide attention gently without startling or overwhelming
Supportive Greys: Provide structure without harshness
Accessibility & WCAG 2.2 AA Compliance
Text Contrast
Minimum 4.5:1 ratio
Interactive Elements
Enhanced contrast
Color Blind Support
Pattern + Color coding
Primary Colors
Azurite Blue
Primary color for headers and key UI elements. Creates a sense of stability and trust.
Sunstone Orange
Used for call-to-action elements and important highlights. Creates warmth and engagement.
Secondary Colors
Chrysocolla Green
Used for secondary headers and success states. Creates a sense of growth and safety.
Rhodochrosite Rose
Used for subtle emphasis and emergency exit buttons. Creates a sense of gentle urgency.
Neutral Colors
Selenite White
Used for backgrounds and cards. Creates a soft, calming foundation.
Grey
Used for text and borders. Creates visual hierarchy without overwhelming.
Semantic Colors
Status Colors
Error
sunstone-orange-600
Success
chrysocolla-green-600
Warning
sunstone-orange-300
Info
azurite-blue-300
Usage Guidelines
- Use semantic colors consistently to maintain clear meaning.
- Ensure sufficient contrast for accessibility (WCAG 2.1 AA).
- Use lighter shades for backgrounds, darker for text.
- Maintain color harmony by using complementary colors.
Trauma-Informed Color Principles
Core Principles
Avoid harsh reds: Use gentle rhodochrosite-rose instead of aggressive reds
Nature-inspired tones: All colors derive from calming natural elements
Sufficient contrast: Minimum 4.5:1 ratio for accessibility
Color Relationships
Safe Actions: Chrysocolla-green family
Gentle Urgency: Rhodochrosite-rose family
Trust & Stability: Azurite-blue family
Color Usage Guidelines
Button Color Guidelines
Emergency Exit
rhodochrosite-rose family
Primary Actions
chrysocolla-green family
Secondary Actions
chrysocolla-green outline
Focus Rings
azurite-blue-200
Typography Color Guidelines
Primary Headings
azurite-blue-900
Body Text
grey-800
Supporting Text
grey-600
Interactive Text
chrysocolla-green
Calming Gradients
Gradient Implementation Examples
Primary Gradients (Soft Transitions)
Main Content Areas
bg-gradient-to-r from-selenite-white-50 to-selenite-white-100
Feature Sections
bg-gradient-to-r from-chrysocolla-green-50 to-azurite-blue-50
Testimonials
bg-gradient-to-b from-rhodochrosite-rose-50 to-selenite-white-50
Left-flowing Content
bg-gradient-to-l from-selenite-white-50 to-selenite-white-100
Diagonal Cards
bg-gradient-to-tr from-selenite-white-50 to-selenite-white-100
Secondary Gradients (Medium Contrast)
Card Backgrounds
bg-gradient-to-br from-chrysocolla-green-100 to-azurite-blue-200
Highlight Sections
bg-gradient-to-r from-rhodochrosite-rose-100 to-sunstone-orange-50
Hero Sections
bg-gradient-to-tr from-azurite-blue-100 via-selenite-white-100 to-chrysocolla-green-100
Nature-Inspired Sections
bg-gradient-to-tr from-chrysocolla-green-100 via-selenite-white-50 to-rhodochrosite-rose-100
Serene Blend
bg-gradient-to-tr from-azurite-blue-100 via-rhodochrosite-rose-50 to-chrysocolla-green-100
Warm to Cool Transition
bg-gradient-to-tr from-sunstone-orange-50 via-selenite-white-100 to-azurite-blue-100
Accent Gradients (Higher Contrast)
Important Sections
bg-gradient-to-r from-chrysocolla-green-200 to-chrysocolla-green-100
Call-to-Action Overlays
bg-gradient-to-r from-sunstone-orange-100 to-rhodochrosite-rose-200
Alert Overlay Variations
Neutral Alerts
bg-gradient-to-b from-selenite-white-50 to-selenite-white-100
Gentle Urgency
bg-gradient-to-tr from-rhodochrosite-rose-100 via-azurite-blue-50 to-selenite-white-100
Warm Notifications
bg-gradient-to-tr from-sunstone-orange-50 via-selenite-white-100 to-azurite-blue-100
Centered and Flowing Gradients
Centered Highlights
bg-gradient-to-r from-selenite-white-50 via-selenite-white-100 to-selenite-white-50
Soft Rose-Blue Flow
bg-gradient-to-tr from-rhodochrosite-rose-100 via-azurite-blue-50 to-selenite-white-100
Trauma-Informed Implementation Notes
- • All gradients use lighter color values (50-200) to maintain text readability
- • Gentle transitions create calming visual effects without overwhelming users
- • Use sparingly to avoid visual fatigue and maintain accessibility
- • Triple-tone gradients should be used for larger sections to allow proper color transitions
Accessibility & Contrast
WCAG 2.2 AA Compliance
Color Blind Considerations
Our color system is designed to be distinguishable across different types of color vision:
- ✓ High contrast ratios ensure readability
- ✓ Shape and position reinforce color coding
- ✓ Icons and text labels supplement color information
Trauma-Informed Color Applications
Practical examples showing how our color system supports emotional safety and accessibility in learning environments.
Safe Learning Environment
Learning Module Interface
Understanding Trauma
Module 1 • Self-paced learning
Take your time with this content. You're in control of your learning pace.
⚠️ This section discusses difficult topics. Feel free to take breaks.
Color Psychology in Action
Header gradients (azurite blue): Create a sense of stability and trust, reducing anxiety about the learning process
Progress indicators (chrysocolla green): Celebrate achievements without pressure, promoting a growth mindset
Gentle warnings (sunstone orange): Alert users to sensitive content without triggering fight-or-flight responses
Emergency exits (rhodochrosite rose): Provide immediate safety without harsh red that could be triggering
Soft backgrounds (selenite neutrals): Create breathing space and prevent visual overwhelm
Emotional State Support Through Color
Calm & Focused
Subtle blue gradients promote concentration and reduce hypervigilance
• Headers and navigation
• Focus states and highlights
• Primary content areas
Safe & Supported
Gentle greens create feelings of growth, healing, and safety
• Success messages
• Progress indicators
• Primary action buttons
Gentle Alert
Warm tones guide attention without triggering stress responses
• Content warnings
• Important notices
• Call-to-action elements
Accessibility Implementation
Text Contrast Examples
Primary headings on light backgrounds
Body text with excellent readability
Interactive links and buttons
White text on dark backgrounds
High contrast for critical information
Color Blind Accessibility
Pattern + Color Coding
Success + Check
Warning + Icon
Error + X
Shape Differentiation
Active
Pending
Alert
Implementation Examples
Button Color Implementation
Visual Examples
CSS Classes
bg-rhodochrosite-rose text-selenite-white-50
bg-chrysocolla-green text-selenite-white-50
border-2 border-chrysocolla-green
text-chrysocolla-green
Typography Color Implementation
Visual Examples
Primary Heading
Body text content using grey-800
Supporting text using grey-600
Interactive link textCSS Classes
text-azurite-blue-900
text-grey-800
text-grey-600
text-chrysocolla-green
hover:text-chrysocolla-green-600
Status Color Implementation
Visual Examples
CSS Classes
bg-success/10 border-success/20 text-success
bg-warning/10 border-warning/20 text-warning
bg-error/10 border-error/20 text-error
bg-info/10 border-info/20 text-info
Implementation Guidelines & Best Practices
Trauma-Informed Color Selection
✅ Trauma-Informed Color Choices
Use grounding blues for primary navigation and headers to create stability
Choose calming greens for positive actions and progress indicators
Provide soft backgrounds with generous whitespace for breathing room
Use warm accents sparingly for important but non-urgent information
Offer gentle exits with soft rose tones instead of harsh reds
❌ Colors to Avoid for Trauma Survivors
Aggressive reds can trigger fight-or-flight responses and increase anxiety
Bright yellows may feel overwhelming and create visual strain
Intense purples can feel destabilizing for some trauma survivors
High contrast black backgrounds can feel harsh and uninviting
Rapid color changes or flashing colors that can trigger seizures or anxiety
Interactive Component Patterns
Button State Progression
Form Field States
Alert Color Patterns
✓ Success: Progress saved
ℹ️ Info: Additional resources available
⚠️ Gentle: This content discusses difficult topics
✕ Exit: Return to safe space
Pre-Launch Color Accessibility Checklist
Technical Requirements
Trauma-Informed Considerations
Trauma-Informed Action States
Our trauma-informed UI system includes custom focus, hover, active, error, and success states for form elements and buttons. These states use gentle colors and shadows to provide clear, supportive feedback without overwhelming users.
Focus State Example
focus:ring-trauma-focus focus:shadow-gentle-focusError State Example
focus:ring-trauma-error focus:shadow-gentle-errorSuccess State Example
focus:ring-trauma-success focus:shadow-gentle-successGentle Hover & Active
hover:bg-trauma-hover active:bg-trauma-active