Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
SafetyCulture
EnterpriseSafetyCulture employs a trust-building aesthetic through minimal interfaces dominated by clean whites and soft grays, punctuated by a distinctive purple brand accent. The typography pairing of Poppins headlines with Noto Sans body text creates professional approachability, while abundant whitespace conveys transparency and reduces cognitive load during compliance interactions.
Design Identity
Signature Color
SafetyCulture Purple
#4740d4
professional compliance trust - authoritative yet approachable for workplace safety
Visual Identity
Abundant negative space with minimal purple accent touches and understated typography hierarchy - creates a sense of transparency and reduces friction in compliance-heavy workflows
Component Style
Subtle rounded corners (likely 4-6px) with minimal shadows, toggle switches with clean purple states, and buttons that feel substantial but not overwhelming - everything prioritizes clarity over visual flair
Spacing Philosophy
Generous vertical rhythm with large gaps between sections creates breathing room that makes privacy/compliance content feel less overwhelming, while maintaining clean left-aligned text blocks
Design Principles
- Purple accents only for interactive elements and branding
- Poppins bold for headers, Noto Sans for all body content
- Minimal shadows - only subtle drops when necessary
- Abundance of whitespace to reduce compliance anxiety
- Toggle switches as primary interaction method for consent
Target Audience
Workplace safety managers and compliance officers who need to process regulations and policies efficiently without feeling overwhelmed by dense interfaces
Mood
Design descriptions are AI-generated based on visual analysis and may not fully reflect the brand's official design guidelines.
Design System
Typography Scale
| Element | Font | Size | Weight | Line Height |
|---|---|---|---|---|
| body | 16px | 400 | 25.6px | |
| h1 | 48px | 700 | 57.6px | |
| h2 | 40px | 700 | 48px | |
| h3 | 24px | 700 | 33.6px | |
| p | 16px | 700 | 25.6px | |
| a | 16px | 400 | 25.6px | |
| button | 14px | 500 | 20px | |
| nav | 16px | 400 | 25.6px | |
| header | 16px | 400 | 25.6px | |
| footer | 16px | 400 | 25.6px |
Color Palette
#fffae0#a8242a#f0f0ff#d0d6e1#4740d4#ffffff#545f70#f3f6fb#15161e#7470f5#d9dbff#f0ca00
