Design Movement: Contemporary Brutalism + Warmth Probability: 0.08
- Raw Authenticity: Unpolished edges, visible structure, no pretense—mirrors the lived experience narratives
- Emotional Warmth: Warm neutrals and earth tones counterbalance the stark aesthetic
- Readable First: Typography-driven, generous whitespace, text as the primary design element
- Accessible Directness: No decorative flourishes; every design choice serves clarity
- Primary: Deep charcoal (#1a1a1a) for grounded, serious tone
- Accent: Warm terracotta (#d4a574) for hope and human connection
- Background: Off-white cream (#f9f7f4) for warmth, not clinical white
- Text: Dark slate (#2c2c2c) for readability without harshness
- Rationale: Reflects the journey from darkness (trauma) to warmth (healing), grounded in earth
- Single-column reading layout with asymmetric margins (wider left, narrower right)
- Generous line-height (1.8+) for breathing room and accessibility
- Sidebar navigation that stays visible, showing current article position
- No decorative elements—structure itself becomes the design
- Vertical accent line on left side of article content (terracotta, 4px)
- Article progress indicator showing position within the 12-article series
- Blockquote styling with left border and subtle background, emphasizing key insights
- Subtle transitions: 200ms fade-ins on page load, smooth scroll behavior
- Hover states: Accent color appears on links, slight background shift on navigation items
- No distractions: Focus remains on content; interactions are invisible unless seeking them
- Page transitions: Fade in from 0.9 opacity over 300ms
- Link hover: Color shift from terracotta to lighter warm tone, underline appears
- Scroll progress: Subtle animation of progress bar as user scrolls through article
- Display: "Playfair Display" (serif, bold) for article titles—elegant but grounded
- Body: "Georgia" or system serif for article text—timeless, readable
- UI: System sans-serif (Segoe UI, Roboto) for navigation and metadata
- Hierarchy: 2.2rem (h1), 1.6rem (h2), 1.3rem (h3), 1rem (body)
Design Movement: Contemporary Modernism + Narrative Design Probability: 0.07
- Story-Centered: Design guides readers through the narrative arc of trauma → understanding → healing
- Warm Minimalism: Clean lines with human warmth, not cold or corporate
- Progressive Disclosure: Information reveals itself as user scrolls, building understanding
- Emotional Pacing: Visual rhythm matches the emotional intensity of content
- Primary: Warm sand (#e8d5c4) as primary background—safe, grounded
- Accent: Deep forest green (#3d5a3d) for depth and growth symbolism
- Highlight: Burnt orange (#c85a3a) for moments of intensity or key insights
- Text: Charcoal (#2a2a2a) on warm backgrounds
- Rationale: Warm sand represents safety; forest green represents growth; burnt orange represents the fire of healing
- Centered content with max-width 800px for intimate reading
- Subtle background texture (subtle noise/grain) suggesting human touch
- Article cards on home page with visual preview of content
- Vertical timeline showing progression through the 12 articles
- Gradient dividers between sections (sand to forest green, subtle)
- Illustrated pull-quotes with small icons representing each article's theme
- Reading time indicator and "key insight" callouts
- Guided navigation: Next/Previous buttons at bottom of each article
- Visual feedback: Smooth transitions between articles, progress indicator
- Contextual help: Tooltips explaining key terms (nervous system, co-regulation, etc.)
- Entrance animations: Articles fade in with slight slide-up (200ms)
- Scroll-triggered reveals: Key quotes and insights appear as user scrolls
- Smooth page transitions: 300ms fade between articles with slight scale effect
- Display: "Merriweather" (serif, elegant) for titles—warm and literary
- Body: "Open Sans" (sans-serif, readable) for article text—modern but warm
- Accent: "Crimson Text" (serif, italic) for pull-quotes
- Hierarchy: 2.4rem (h1), 1.8rem (h2), 1.4rem (h3), 1.1rem (body)
Design Movement: Therapeutic Design + Accessible Modernism Probability: 0.06
- Trauma-Informed Design: Predictable, safe, non-overwhelming visual experience
- Accessibility First: High contrast, clear hierarchy, multiple navigation paths
- Warmth & Safety: Colors and spacing designed to feel supportive, not clinical
- Clear Progression: Visual markers showing where user is in the journey
- Primary: Soft sage (#a8b8a8) for calm, grounded feeling
- Accent: Warm gold (#d4a574) for hope and light
- Background: Soft cream (#faf8f5) for comfort
- Highlight: Soft coral (#e8a89a) for gentle emphasis
- Text: Deep charcoal (#1a1a1a) for clarity
- Rationale: Sage and gold create therapeutic environment; high contrast ensures accessibility
- Two-column layout: Article content on left, contextual sidebar on right
- Sidebar contains: Article summary, key themes, related resources, reading time
- Generous spacing: Breathing room between sections, clear visual separation
- Mobile-first responsive: Sidebar moves below content on small screens
- Healing journey visualization: Visual progress through the 12 articles
- Theme badges: Each article has a visual tag (icon + color) representing its theme
- "Key Takeaway" boxes: Highlighted sections with main insights
- Predictable navigation: Consistent header, footer, and sidebar across all pages
- Multiple entry points: Browse by theme, by article number, or sequentially
- Supportive feedback: Clear indication of current location, easy backtracking
- Accessible controls: Large touch targets, high contrast buttons
- Subtle and purposeful: No jarring movements; 250ms transitions
- Progress indicators: Smooth animation of progress bar as user scrolls
- Hover states: Gentle color shift, no dramatic changes
- Loading states: Skeleton screens with smooth fade-in
- Display: "Lora" (serif, warm) for titles—professional but approachable
- Body: "Inter" (sans-serif, highly readable) for article text—modern and accessible
- Metadata: "IBM Plex Mono" (monospace) for dates and technical info
- Hierarchy: 2.2rem (h1), 1.7rem (h2), 1.3rem (h3), 1rem (body)
This approach best serves the content and audience:
- Authenticity: The raw, unpolished aesthetic honors the lived experience narratives without romanticizing
- Accessibility: Typography-first design ensures readability for all users
- Emotional Resonance: Warm terracotta accent against dark/light contrast mirrors the healing journey
- Professional: Brutalism is contemporary and respected in high-end publishing and literary sites
- Narrative Clarity: Single-column layout with sidebar navigation keeps readers focused on the story
We're building a reading experience that feels like holding a well-crafted book—not a website trying to be fancy. The design gets out of the way and lets the powerful content shine. Warmth and humanity are embedded in the color choices and spacing, not in decorative flourishes.