Layout & Spacing System - Trauma-Informed UI

Layout System Overview

Trauma-Informed Layout Philosophy

Our layout system is built on trauma-informed design principles that prioritize emotional safety, predictability, and user control. Every spacing decision reduces cognitive load and creates breathing room for processing information.

Predictable Structure: Consistent spacing patterns reduce anxiety

Breathing Room: Adequate whitespace prevents overwhelm

Clear Hierarchy: Visual organization supports comprehension

Mobile-First: Prioritizes accessibility across devices

8px Base Unit: Mathematical consistency for harmony

Progressive Enhancement: Graceful scaling across screen sizes

Quick Reference: Trauma-Informed Spacing

Micro Spacing

xs (4px): Icon gaps

sm (8px): Label spacing

Component Spacing

md (16px): Form elements

lg (24px): Card padding

Layout Spacing

xl (32px): Section gaps

2xl (48px): Major divisions

Responsive Behavior

Mobile: Tighter spacing

Desktop: Generous spacing

Spacing System

Built on an 8px base unit, our spacing system creates consistent rhythm and reduces visual stress.

Horizontal Spacing Scale

xs (4px)

0.5x base unit - Icon spacing, fine details

sm (8px)

1x base unit - Button internal padding, labels

md (16px)

2x base unit - Form gaps, card padding

lg (24px)

3x base unit - Section margins

xl (32px)

4x base unit - Container spacing

2xl (48px)

6x base unit - Layout divisions

Vertical Spacing Scale

xs (4px)

0.5x base unit - Text line adjustments

sm (8px)

1x base unit - Component internal spacing

md (16px)

2x base unit - Paragraph spacing, list gaps

lg (24px)

3x base unit - Section breaks

xl (32px)

4x base unit - Content blocks

2xl (48px)

6x base unit - Major content divisions

Trauma-Informed Spacing Applications

Safe Content Grouping

lg (24px): Creates breathing room between content sections

xl (32px): Prevents cognitive overwhelm with generous spacing

Clear Visual Hierarchy

md (16px): Separates related elements clearly

2xl (48px): Creates major section divisions

Accessible Interactions

sm (8px): Minimum button internal padding

md (16px): Comfortable tap target spacing

Grid System

Trauma-Informed Grid Philosophy

Our grid system prioritizes user comfort and accessibility. Generous gutters prevent content from feeling cramped, while responsive margins ensure optimal reading experiences across all devices.

Grid Structure

Columns: 12-column responsive grid for maximum flexibility

Gutters: 24px (lg spacing) - generous for breathing room

Responsive Margins:

📱 Mobile: 16px - comfortable for thumb navigation
📱 Tablet: 32px - balanced for mixed usage
💻 Desktop: 64px - generous for focus and clarity

Interactive Grid Example

12/6/4 cols

12/12/4 cols

Responsive behavior: Full width → Half width → Third width
Resize your browser to see the adaptive layout

Responsive Breakpoints

Mobile

320px - 767px

Single column layout, stacked components

Tablet

768px - 1023px

Two column layouts, adaptive navigation

Desktop

1024px and above

Multi-column layouts, full navigation

Responsive Guidelines

- Use mobile-first approach in development

- Maintain content hierarchy across breakpoints

- Adjust spacing and typography for readability

- Ensure touch targets are accessible (minimum 44x44px)

Layout Patterns

Common layout patterns that implement our trauma-informed spacing principles in real-world components.

Card Layout Pattern

Card Title

Card description with adequate space below for separation from action.

Implementation

<div class="bg-selenite-white-50 border rounded-lg">
  <div class="p-lg">
    <h3 class="mb-md">Card Title</h3>
    <p class="mb-lg">Description</p>
    <button class="px-lg py-md w-full">
      Action
    </button>
  </div>
</div>

Container padding: lg (24px)

Title spacing: md (16px) below

Action spacing: lg (24px) above

Form Layout Pattern

Spacing Guidelines

Field spacing: lg (24px) between form groups

Label spacing: sm (8px) below labels

Button spacing: md (16px) between actions

Container padding: lg (24px) for breathing room

Code Structure

<form class="p-lg">
  <div class="space-y-lg">
    <div>
      <label class="mb-sm">Label</label>
      <input class="p-md" />
    </div>
  </div>
  <div class="flex space-x-md mt-lg">
    <button>Cancel</button>
    <button>Submit</button>
  </div>
</form>

Two-Column Layout Pattern

Main Content Title

This demonstrates a responsive two-column layout that stacks on mobile and displays side-by-side on larger screens.

The main content takes priority on mobile by appearing first, while the sidebar provides supplementary information.

Sidebar Content

Supplementary information that supports the main content.

Implementation Notes

Responsive behavior: Sidebar appears first on mobile for important supplementary content

Column gap: xl (32px) for clear separation

<div class="grid grid-cols-1 lg:grid-cols-2 gap-xl">
  <div class="order-2 lg:order-1">Main</div>
  <div class="order-1 lg:order-2">Sidebar</div>
</div>

Animation & Transitions

Gentle, predictable animations that support trauma-informed design principles by reducing jarring movements and providing clear feedback.

Trauma-Informed Motion Principles

Gentle: Slow, smooth transitions (300ms)

Predictable: Consistent easing (ease-in-out)

Purposeful: Animations provide clear feedback

Respectful: Users can control or disable motion

Performance-conscious: Lightweight and battery-efficient

Implementation Guidelines

/* Tailwind config for trauma-informed motion */
transitionDuration: {
  DEFAULT: '300ms',
  mobile: '200ms'
},
transitionTimingFunction: {
  DEFAULT: 'ease-in-out',
  mobile: 'ease-out'
}

Interactive Examples

Button Hover State

Gentle color transition on hover

Card Hover Growth

Hover for subtle scale

Subtle 2% scale increase with shadow enhancement

Fade In/Out

Hover to reveal

Smooth opacity transition for progressive disclosure

Focus States

Clear visual feedback for accessibility

Common Motion Patterns

Button Interactions

<button class="transition-all duration-300 
               hover:bg-sunstone-orange-600 
               focus:ring-2 focus:ring-azurite-blue-100">
  Gentle Button
</button>

Card Hover Effects

<div class="transition-all duration-300 
            hover:shadow-md 
            hover:scale-[1.02]">
  Subtle Growth
</div>

Interactive Spacing Demonstration

See how our spacing system adapts responsively across different screen sizes and content types.

Responsive Container Spacing

Container Content

This container demonstrates responsive padding: 16px on mobile, 24px on tablet, 32px on desktop.

Item 1

Item 2

Resize your browser to see spacing adapt

Progressive Disclosure Pattern

Click to reveal additional content

This expanded content demonstrates how spacing creates clear visual hierarchy and breathing room.

Notice the consistent lg (24px) spacing between content blocks and the gentle transition effect.

Trauma-Informed Benefits

• Reduces cognitive overwhelm
• Provides user control
• Creates predictable interactions

Technical Implementation

Uses HTML <details> element with consistent spacing classes for accessibility and trauma-informed design.

Mobile-First Spacing Strategy

Responsive Text & Spacing

This content demonstrates mobile-first responsive spacing. Text and spacing scale appropriately for comfort on all devices.

/* Mobile-first responsive spacing */
<div class="p-4 sm:p-6 lg:p-8">
  <div class="space-y-4 sm:space-y-6">
    <button class="py-3 px-6 sm:py-2 sm:px-4 text-base sm:text-sm">
      Mobile-Optimized
    </button>
  </div>
</div>

Practical Trauma-Informed Spacing Examples

Real-world examples showing how our spacing system creates safe, accessible, and calming user experiences in learning environments.

Learning Content Cards

Trauma-Informed Implementation

Understanding Trauma Responses

Module 1 • 15 minutes

Learn about common trauma responses and how they affect learning. This module provides essential foundation knowledge in a supportive environment.

Progress Complete

Spacing Analysis

Header padding (24px): Creates comfortable breathing room around title and status

Content spacing (24px): Prevents cognitive overwhelm with generous gaps between sections

Action separation (16px + border): Clear visual distinction for primary actions

Button gaps (12px): Prevents accidental taps while maintaining visual connection

Safe Form Layout

Personal Information Form

Share What Feels Comfortable

We only collect information necessary for your learning experience. You can update or remove this information at any time.

🔒 All information is encrypted and stored securely

Preferred Name

This can be different from your legal name

Learning Goals (Optional)

You can skip this and add it later

You can always come back to complete this later

Trauma-Informed Form Spacing

Trust-Building Elements

• Header space (32px): Clear separation from form content
• Security notice: Visible reassurance about data protection
• Supportive messaging: Reduces anxiety about sharing information

Field Spacing Strategy

• Between fields (24px): Prevents rushing through form
• Label to input (8px): Clear association without cramping
• Help text (4px): Close connection to related field

Choice Architecture

• Action separation (24px + border): Clear decision boundary
• Button gaps (16px): Prevents accidental submission
• Reassurance text: Reduces commitment anxiety

Pre-Launch Spacing Checklist

Essential Spacing Checks

Touch targets are minimum 44x44px Form fields have 24px vertical spacing Content sections have breathing room (32px+) Actions are clearly separated from content

Trauma-Informed Considerations

Exit options are always visible and accessible Content doesn't feel cramped or overwhelming Users have clear choices and control Responsive spacing works across all devices