Trauma-informed blog post headers with calm gradient backgrounds, flexible layouts, and support for both images and Vimeo embeds. Choose the variant that best fits your content.
Each variant is designed with trauma-informed principles: calm gradients, generous spacing, and clear visual hierarchy.
Explore how thoughtfully crafted design systems can drive meaningful change and create lasting social impact in today's digital landscape.
Abayomi Ogundipe
Explore how thoughtfully crafted design systems can drive meaningful change and create lasting social impact in today's digital landscape.
Explore how thoughtfully crafted design systems can drive meaningful change and create lasting social impact in today's digital landscape.
Abayomi Ogundipe
March 7, 2025 • 5 min read
All header variants support Vimeo embeds as featured media instead of static images.
Every header variant embodies trauma-informed design principles for safe, calming user experiences.
Soft, soothing gradient backgrounds reduce visual stress and create peaceful reading environments.
Ample whitespace and breathing room prevent overwhelm and allow content to be easily digestible.
Strong visual hierarchy guides readers through content predictably, reducing cognitive load.
Soft, rounded edges throughout reduce visual sharpness and create friendlier interfaces.
Gentle animations and transitions create predictable, non-jarring interactions.
WCAG 2.2 Level AA compliance ensures content is accessible to all users.
Each header variant is available as a reusable FDS component with flexible props for customization.
<x-fds.blog-header
variant="standard"
:post="$post"
gradient="tranquil-forest"
/><x-fds.blog-header
variant="standard"
:post="$post"
mediaType="vimeo"
vimeoId="76979871"
/>Complete typography system for rich blog content. All elements styled with trauma-informed design principles and WCAG 2.2 AA accessibility.
Creating digital experiences that prioritize safety, trustworthiness, and user empowerment requires thoughtful consideration of typography, spacing, and visual hierarchy. This comprehensive guide demonstrates all typography elements available in the Festa Design System.
When designing for trauma-informed experiences, we must consider how users process information, make decisions, and navigate complex content. The typography system provides clear hierarchy while maintaining calm, approachable aesthetics.
The foundation of our typography system rests on four key principles that guide every design decision.
Users should never feel surprised or overwhelmed by sudden changes in typography, color, or layout. Consistent patterns create psychological safety.
At the most granular level, we ensure every typographic element has proper spacing, contrast, and semantic meaning for screen readers.
"Design is not just what it looks like and feels like. Design is how it works."
Lists help users scan and process information at their own pace. We support ordered, unordered, and nested list structures.
When documenting technical implementations, we use inline code like @apply text-the-end-900 for utility classes and code blocks for larger examples.
// Example: Trauma-informed button component
<x-fds.button
variant="primary"
size="md"
class="mt-4"
>
Take Action
</x-fds.button>
// Alpine.js interaction
<div x-data="{ open: false }">
<button @click="open = !open">
Toggle
</button>
</div>For keyboard shortcuts, we use special styling: Press Cmd + K to open search, or Tab for keyboard navigation.
Tables present structured data with proper semantic markup and alternating row colors for improved readability.
| Color Palette | Hex Code | Usage Context |
|---|---|---|
| Pepper Green | #72b043 |
Success states, positive actions |
| Chicken Comb | #d92228 |
Primary brand, alerts |
| Pot of Gold | #f8cc1b |
Highlights, attention elements |
For glossaries and terminology, we use definition lists with clear visual hierarchy.
Images should always include meaningful alt text and can be wrapped in figure elements with captions for additional context.
This comprehensive typography system ensures that all blog content maintains consistency, accessibility, and trauma-informed design principles. From the largest headings to the smallest code snippets, every element has been thoughtfully designed to create a safe, empowering reading experience.
For more information about implementing these patterns in your own content, visit our Typography Formatted documentation.
The footer section brings together tags, social sharing, and navigation in a trauma-informed layout with calm gradients and generous spacing.
Tags use the FDS tag component with dynamic colors from database (color_hex field). Each tag displays unique Festa calm colors.
<x-fds.tag
:href="route('blog.tag', $tag)"
:color="$tag->color_hex ?? 'pepper-green'"
size="sm"
>
{{ $tag->name }}
</x-fds.tag>Same pattern as blog index sidebar (blog/index.blade.php lines 119-127)
Discover more content on similar topics using the same FDS blog card component as the main blog listing.
Learn how to create forms that work for everyone, including users with disabilities and those who have experienced trauma.
Sarah Chen
UX Designer
Discover how transparency in user interface design helps create safer digital experiences for trauma survivors.
Alex Rodriguez
Design Lead
Explore how thoughtful color choices can reduce anxiety and create welcoming digital environments.
Jordan Lee
Researcher
@if($relatedPosts->count() > 0)
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
@foreach($relatedPosts as $relatedPost)
<x-fds.blog-card :post="$relatedPost" />
@endforeach
</div>
@endifSame pattern as blog show page (blog/show.blade.php lines 116-120)
These blog header variants are trauma-informed, accessible, and ready for integration into your blog posts.