Dr. G's Lab Logo

Trauma-informed Interface Structure

Understanding the building blocks of our trauma-informed design system. Each level builds upon the previous, creating a cohesive and supportive user experience.

Interface Design Structure

Design foundations

Basic tokens and elements that defines core system.

Building blocks

Molecular components combining design foundations that work together.

Narrative sections

Complex UI components that combines building blocks together.

Page frameworks

Trauma-informed-page layouts that combines complex UI narratives.

Content realities

The final, context-rich version of the product with all copy in place