Design Foundation - Trauma-Informed Interface

Design Tokens

Reusable values that style components: Typography, Color, and Layout.

Font families, sizes, weights, and line heights for accessible, trauma-informed text hierarchy.

Semantic color palette and tokens for backgrounds, text, and UI states. Ensures clarity, contrast, and emotional safety.

Spacing, grid, and responsive layout tokens for consistent, trauma-informed structure and rhythm.

Smallest UI elements built using design tokens. These are the foundational building blocks of the system.

All trauma-informed button components: Emergency Exit, Primary, Secondary, Tertiary, with accessible states and size variations.

Accessible text inputs, checkboxes, radio buttons, and selects with gentle feedback and clear states.

Progress bars, badges, and loading states for clear, gentle feedback.

Emergency exit button that immediately simplifies interfaces during overwhelming moments, providing instant emotional safety without cognitive load.

Trauma-informed icon system with gentle, supportive visuals organized by accessibility, emotional support, safety, and content categories.