🌟 Introduction: Why Section-Specific Color Schemes Matter

Different content types require different emotional responses. A safety page needs urgency balanced with calm. A growing guide needs natural, earthy tones. Research sections need professional blues and grays. This guide provides psychologically-informed color schemes for each major section of our mushroom knowledge hub.

🧠 Color Psychology Principle: Users subconsciously associate colors with content types. Consistent color schemes create mental models, improve navigation, and set appropriate emotional tones for each content category.

Core Design Philosophy

  • Consistency: Each section has a primary color that identifies it throughout the site
  • Psychology: Colors chosen based on their psychological effects (trust, growth, safety, etc.)
  • Accessibility: All combinations meet WCAG 2.1 AA standards (4.5:1 minimum contrast)
  • Nature-Inspired: Drawing from natural mushroom environments and earth tones
  • Flexibility: Works in both light and dark modes

🍄 Mushroom Species Sections

🎯 Purpose & User Mindset

Users are exploring, learning, identifying. They need clarity, natural connection, and educational support. Colors should evoke earth, nature, and organic origins.

🎨 Primary Color Palette

Soil Deep
#5C4A41
Mushroom Cap
#8B7968
Spore Tan
#B8A899
Mycelium
#D9CFC1
Substrate
#F2EDE7
🧠 Why These Colors? Earth tones create immediate association with mushrooms, soil, and natural growth. Brown hues are warm without being aggressive, grounding without being heavy. They build trust through their connection to nature and organic life.

💡 Usage Guidelines

  • Headers: Mushroom Cap (#8B7968) for section headers
  • Backgrounds: Substrate (#F2EDE7) for light areas, Soil Deep (#5C4A41) for dark mode
  • Accents: Spore Tan (#B8A899) for buttons, links, highlights
  • Cards: Mycelium (#D9CFC1) for card backgrounds
  • Text: Soil Deep (#5C4A41) for body text on light backgrounds

🔧 CSS Implementation

/* Mushroom Species Section Variables */
:root {
    --mushroom-soil-deep: #5C4A41;
    --mushroom-cap: #8B7968;
    --mushroom-spore: #B8A899;
    --mushroom-mycelium: #D9CFC1;
    --mushroom-substrate: #F2EDE7;
}

/* Section Header */
.section-mushrooms .header {
    background: linear-gradient(135deg, 
        var(--mushroom-cap) 0%, 
        var(--mushroom-soil-deep) 100%);
    color: white;
}

/* Card Component */
.mushroom-card {
    background: var(--mushroom-substrate);
    border-left: 4px solid var(--mushroom-cap);
    color: var(--mushroom-soil-deep);
}

.mushroom-card:hover {
    background: var(--mushroom-mycelium);
}

/* CTA Button */
.btn-mushroom {
    background: var(--mushroom-spore);
    color: var(--mushroom-soil-deep);
}

.btn-mushroom:hover {
    background: var(--mushroom-cap);
    color: white;
}

📸 Visual Examples

Best For:

  • Psilocybe cubensis strain guides
  • Species identification pages
  • Mushroom comparison tools
  • Photo galleries of specimens
  • Growing guides for specific species

🛡️ Safety & Harm Reduction

🎯 Purpose & User Mindset

Users may be anxious, seeking critical information, or in a crisis. Colors must balance urgency with calm, be attention-grabbing without being alarming, and promote careful reading.

🎨 Primary Color Palette

Alert Red
#C0392B
Warning Coral
#E74C3C
Caution Amber
#F39C12
Safe Green
#27AE60
Neutral Light
#ECF0F1
🧠 Why These Colors? Red signals danger universally, but we use muted/coral versions to avoid panic. Amber creates caution without alarm. Green provides positive reinforcement for safe practices. The key is balancing urgency with psychological safety.

💡 Usage Guidelines

  • Critical Warnings: Alert Red (#C0392B) - use sparingly, only for immediate danger
  • Important Notes: Warning Coral (#E74C3C) for important safety information
  • Cautions: Caution Amber (#F39C12) for general warnings
  • Safe Practices: Safe Green (#27AE60) for confirmed safe methods
  • Base: Neutral Light (#ECF0F1) for calm backgrounds

🔧 CSS Implementation

/* Safety Section Variables */
:root {
    --safety-critical: #C0392B;
    --safety-warning: #E74C3C;
    --safety-caution: #F39C12;
    --safety-safe: #27AE60;
    --safety-neutral: #ECF0F1;
}

/* Critical Alert Box */
.alert-critical {
    background: #FADBD8;
    border-left: 5px solid var(--safety-critical);
    color: #641E16;
    padding: 20px;
    margin: 20px 0;
}

/* Warning Box */
.alert-warning {
    background: #FDEDEC;
    border-left: 5px solid var(--safety-warning);
    color: #78281F;
}

/* Safe Practice Box */
.safe-practice {
    background: #D5F4E6;
    border-left: 5px solid var(--safety-safe);
    color: #0B5345;
}

/* Emergency Button */
.btn-emergency {
    background: var(--safety-critical);
    color: white;
    font-weight: bold;
    font-size: 1.1em;
    padding: 15px 30px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

⚠️ Special Considerations

  • Never use red text on red background (contrast!)
  • Test with color-blind users (red-green blindness is common)
  • Use icons alongside colors for urgency levels
  • Ensure emergency contacts are always visible

🌱 Growing & Cultivation

🎯 Purpose & User Mindset

Users are learning a technical skill, need step-by-step clarity, and want to connect with the natural process. Colors should evoke growth, life cycles, and organic processes.

🎨 Primary Color Palette

Forest Deep
#1E3A20
Moss Dark
#2D5016
Growth Green
#4A7C59
Sprout
#7BA073
Fresh Leaf
#C8D5B9
🧠 Why These Colors? Green is psychologically linked to growth, renewal, and life. Forest greens specifically evoke natural growth environments. These tones reduce anxiety, increase focus, and create sense of patient, organic progress—perfect for cultivation guides.

💡 Usage Guidelines

  • Step Indicators: Gradient from Forest Deep to Fresh Leaf showing progress
  • Success States: Growth Green (#4A7C59) for successful growth stages
  • Backgrounds: Fresh Leaf (#C8D5B9) for light mode, Forest Deep for dark
  • Timelines: Use full palette to show growth stages visually
  • Diagrams: Moss Dark (#2D5016) for labels and educational graphics

🔧 CSS Implementation

/* Growing Section Variables */
:root {
    --grow-forest: #1E3A20;
    --grow-moss: #2D5016;
    --grow-green: #4A7C59;
    --grow-sprout: #7BA073;
    --grow-leaf: #C8D5B9;
}

/* Growth Stage Indicator */
.growth-stage {
    background: linear-gradient(90deg,
        var(--grow-forest) 0%,
        var(--grow-moss) 25%,
        var(--grow-green) 50%,
        var(--grow-sprout) 75%,
        var(--grow-leaf) 100%);
    height: 10px;
    border-radius: 5px;
}

/* Step Card */
.step-card {
    background: var(--grow-leaf);
    border-left: 5px solid var(--grow-green);
    color: var(--grow-forest);
}

.step-card.completed {
    background: var(--grow-green);
    color: white;
}

/* Timeline Dot */
.timeline-dot {
    width: 20px;
    height: 20px;
    background: var(--grow-sprout);
    border: 3px solid var(--grow-green);
    border-radius: 50%;
}

💊 Microdosing

🎯 Purpose & User Mindset

Users seek precision, scientific credibility, and wellness. Colors should convey professionalism, subtlety (matching the practice), and therapeutic intent.

🎨 Primary Color Palette

Deep Purple
#6C3483
Soft Violet
#9B59B6
Lavender
#BB8FCE
Pale Purple
#D7BDE2
Lilac Mist
#F4ECF7
🧠 Why These Colors? Purple historically associated with spirituality, wisdom, and healing. Soft purples create calm without being cold (like blue) or energizing (like yellow). Perfect for content about subtle, mindful practices.

💡 Usage Guidelines

  • Protocol Cards: Different purple shades for Fadiman, Stamets, etc.
  • Dosage Indicators: Darker = higher dose (visual logic)
  • Tracking Interfaces: Lilac Mist backgrounds for calendar/journal views
  • Benefits Sections: Soft Violet for positive outcomes
  • Scientific Content: Deep Purple for research-backed information

🔧 CSS Implementation

/* Microdosing Section Variables */
:root {
    --micro-deep: #6C3483;
    --micro-soft: #9B59B6;
    --micro-lavender: #BB8FCE;
    --micro-pale: #D7BDE2;
    --micro-mist: #F4ECF7;
}

/* Protocol Card */
.protocol-card {
    background: var(--micro-mist);
    border-top: 4px solid var(--micro-soft);
}

/* Dosage Scale */
.dosage-low { background: var(--micro-mist); }
.dosage-medium { background: var(--micro-pale); }
.dosage-high { background: var(--micro-lavender); }

/* Journal Entry */
.journal-entry {
    background: white;
    border-left: 3px solid var(--micro-soft);
    box-shadow: 0 2px 8px rgba(155, 89, 182, 0.1);
}

🧠 Therapy & Integration

🎯 Purpose & User Mindset

Users may be processing intense experiences, seeking professional help, or in vulnerable states. Colors must be deeply calming, trustworthy, and supportive.

🎨 Primary Color Palette

Deep Trust
#1B4F72
Calm Blue
#2980B9
Sky Serene
#3498DB
Light Blue
#85C1E9
Cloud
#EBF5FB
🧠 Why These Colors? Blue is the most universally calming color. It lowers heart rate, reduces anxiety, and builds trust. For therapy content dealing with potentially difficult emotions, blue provides psychological safety and professional credibility.

💡 Usage Guidelines

  • Therapist Directories: Deep Trust (#1B4F72) for professional credibility
  • Integration Guides: Calm Blue backgrounds
  • Support Resources: Sky Serene for accessibility and openness
  • Crisis Buttons: Light Blue (calming but visible)
  • Testimonials: Cloud backgrounds for personal stories

🔬 Research & Science

🎯 Purpose & User Mindset

Users want credible, scientific information. Colors should convey authority, professionalism, and academic rigor.

🎨 Primary Color Palette

Academic Dark
#1C2833
Slate
#34495E
Steel
#5D6D7E
Silver
#ABB2B9
Paper White
#F2F3F4
🧠 Why These Colors? Grays and cool neutrals convey objectivity, professionalism, and scientific neutrality. They don't emotionally bias the reader, allowing data and facts to speak for themselves.

👥 Community & Stories

🎯 Purpose & User Mindset

Users seeking connection, shared experiences, and belonging. Colors should be warm, welcoming, and social.

🎨 Primary Color Palette

Teal Deep
#0E6655
Turquoise
#16A085
Spring Green
#1ABC9C
Mint
#76D7C4
Seafoam
#E8F8F5
🧠 Why These Colors? Teal/turquoise combines the calming properties of blue with the renewal of green. It's fresh, friendly, and communicative—perfect for building community and encouraging sharing.

🍵 Preparation & Consumption

🎯 Purpose & User Mindset

Users want practical, hands-on guidance. Colors should be energizing but not aggressive, warm and inviting.

🎨 Primary Color Palette

Chocolate
#784212
Clay
#BA4A00
Orange Warm
#E67E22
Golden
#F5B041
Cream Light
#FEF5E7
🧠 Why These Colors? Warm oranges and browns evoke comfort, nourishment, and hands-on activity. They're associated with food, warmth, and preparation—perfect for recipes and consumption guides.

⚙️ Implementation Guide

Global CSS Structure

/* Root variables for all sections */
:root {
    /* Mushrooms */
    --section-mushroom-primary: #8B7968;
    --section-mushroom-bg: #F2EDE7;
    
    /* Safety */
    --section-safety-primary: #E74C3C;
    --section-safety-bg: #FDEDEC;
    
    /* Growing */
    --section-growing-primary: #4A7C59;
    --section-growing-bg: #C8D5B9;
    
    /* Microdosing */
    --section-micro-primary: #9B59B6;
    --section-micro-bg: #F4ECF7;
    
    /* Therapy */
    --section-therapy-primary: #3498DB;
    --section-therapy-bg: #EBF5FB;
    
    /* Research */
    --section-research-primary: #34495E;
    --section-research-bg: #F2F3F4;
    
    /* Community */
    --section-community-primary: #1ABC9C;
    --section-community-bg: #E8F8F5;
    
    /* Preparation */
    --section-prep-primary: #E67E22;
    --section-prep-bg: #FEF5E7;
}

/* Section-specific classes */
.section-mushrooms {
    --primary: var(--section-mushroom-primary);
    --bg: var(--section-mushroom-bg);
}

.section-safety {
    --primary: var(--section-safety-primary);
    --bg: var(--section-safety-bg);
}

/* Universal section styling */
[class*="section-"] {
    background: var(--bg);
}

[class*="section-"] .header {
    background: var(--primary);
    color: white;
}

[class*="section-"] .btn-primary {
    background: var(--primary);
    color: white;
}

HTML Usage Example

<-- Mushroom Species Page -->
<body class="section-mushrooms">
    <header class="header">
        <h1>Psilocybe Cubensis Guide</h1>
    </header>
    <main>
        <div class="card">Content uses mushroom colors</div>
    </main>
</body>

<-- Safety Page -->
<body class="section-safety">
    <div class="alert-critical">Important safety warning</div>
</body>

✨ Best Practices

✅ Do

  • Maintain consistency within each section
  • Use section color for navigation breadcrumbs
  • Test all combinations for accessibility
  • Use gradients within the same color family
  • Provide visual cues for section changes
  • Document color meanings for team

❌ Don't

  • Mix section colors within same page
  • Use more than 5 colors per section
  • Ignore color-blind accessibility
  • Use colors that clash with brand
  • Sacrifice readability for style
  • Forget to test in dark mode

Color Accessibility Checklist

  • ✅ All text meets 4.5:1 contrast ratio (WCAG AA)
  • ✅ Large text meets 3:1 contrast ratio
  • ✅ Interactive elements meet 3:1 against surroundings
  • ✅ Colors tested with color-blindness simulator
  • ✅ Information not conveyed by color alone (use icons too)
  • ✅ Focus indicators clearly visible

🎯 Summary

Each section of the Mushroom Knowledge Hub has a carefully designed color scheme based on psychological principles, user needs, and content type. By maintaining these consistent color associations, we create intuitive navigation, appropriate emotional responses, and a cohesive brand experience.

Quick Reference Table

Section Primary Color Psychology Use Case
🍄 Mushrooms #8B7968 Earthy, Natural Species guides
🛡️ Safety #E74C3C Alert, Protective Harm reduction
🌱 Growing #4A7C59 Growth, Life Cultivation
💊 Microdosing #9B59B6 Subtle, Mindful Protocols
🧠 Therapy #3498DB Trust, Calm Integration
🔬 Research #34495E Professional Scientific data
👥 Community #1ABC9C Social, Fresh Stories
🍵 Preparation #E67E22 Warm, Practical Recipes
📚 Next Steps:
  1. Implement CSS variables in main stylesheet
  2. Add section classes to all HTML templates
  3. Test accessibility with contrast checkers
  4. Create component library with section variants
  5. Document usage in design system guide
  6. Train content team on section color meanings