Gradient Guidelines

Key Accessibility Features

• WCAG 2.2 Level AA Compliance: All gradients maintain minimum 4.5:1 contrast ratio for body text
• Text Overlay Testing: Always test text color against gradient midpoint for worst-case contrast
• Reduced Motion Support: Gradient animations respect prefers-reduced-motion media query
• Color Independence: Never rely solely on gradient color to convey information; always provide text labels
• Focus Indicators: Ensure focus rings remain visible on gradient backgrounds (use white or dark outlines)

Usage Guidelines

• When to use gradients: Hero sections, feature highlights, CTAs, background surfaces, visual dividers
• When NOT to use gradients: Body text backgrounds, form inputs, complex data tables, small UI elements (<40px height)
• Best practices:
  • Limit gradients to 2-3 colors maximum for clarity
  • Use subtle gradients (50-200 shades) for backgrounds, cards, and section dividers—these create calming, trauma-informed experiences
  • Use demonstration gradients (400-600 shades) sparingly for CTAs, hero sections, or when showcasing the gradient itself (as seen in Primary Gradient Combinations section)
  • The 22 gradient stories use lighter shades (50-200) to ensure gentle, non-jarring visual transitions that support user wellbeing
  • Test gradient readability on both light and dark mode (if applicable)
  • Provide sufficient padding around text on gradient backgrounds (min 16px)

Trauma-Informed Gradient Design

Gradients in trauma-informed design should create a sense of safety and calm rather than anxiety or overwhelm. The 22 gradient stories embody these principles:

• Avoid harsh transitions: Use gradual color shifts that feel organic and natural—notice how "Tranquil Forest" and "Ocean Whisper" flow gently between hues
• Provide visual stability: Anchor gradients with clear boundaries and containers, as demonstrated in all gradient story cards
• Respect user control: Support reduced motion preferences to disable gradient animations (see code examples below)
• Maintain predictability: Use gradients consistently across similar UI patterns—hero sections use "Sunrise Horizon" or "Gentle Dawn," cards use "Serene Primary Card" or "Warm Embrace Card"
• Emotional appropriateness: Choose gradients that match content mood—"Energy" and "Uplift" for CTAs, "Calm" and "Focus" for forms, "Peaceful Dusk" for supportive messages
• Safe defaults: When uncertain, use neutral gradients like "Moonlit Night" variations or "Readable" which work across all contexts without triggering visual stress

Laravel Blade Component Usage

<div class="bg-gradient-to-r from-pepper-green-400 to-pot-of-gold-400 p-8">
    <h2 class="text-h2 font-bold text-white-smoke-50">Success Story</h2>
    <p class="text-body text-white-smoke-50">Content with optimal contrast</p>
</div>


<section class="bg-gradient-to-br from-white-smoke-50 via-apocalyptic-orange-50 to-pot-of-gold-100">
    <div class="max-w-7xl mx-auto px-4 py-20">
        <h1 class="text-h1 font-black text-the-end-900">Hero Title</h1>
        <p class="text-body text-the-end-700">Hero description with excellent contrast</p>
    </div>
</section>


<div class="bg-gradient-to-r from-leaf-500 to-apocalyptic-orange-400 transition-all duration-300 
            motion-reduce:bg-leaf-500">
    
</div>