Our brand represents security, clarity, and trust. These guidelines ensure consistent representation across all applications and communications.
Guardian is a comprehensive school safety platform designed to protect educational communities. Our brand embodies reliability, clarity, and immediate action, reflecting our mission to eliminate the guesswork in emergency response.
Every design decision prioritizes usability under stress. We use high contrast, generous whitespace, and clear visual hierarchy to ensure critical information is immediately accessible when it matters most.
Protect Our Present, Secure Our Future
The Guardian logo represents security and vigilance. The shield mark symbolizes protection, while the wordmark communicates strength and reliability.
Full logo with wordmark. Use on light backgrounds with ample clear space.
Standalone shield mark for small spaces, app icons, and favicons.
White logo for use on dark backgrounds and imagery.
Red shield mark with dark wordmark. The preferred logo treatment.
Maintain minimum clear space equal to the height of the 'G' in the wordmark.
Mark: 24px height minimum. Full logo: 100px width minimum.
Never distort the logo proportions
Only use approved color combinations
No shadows, gradients, or outlines
Keep the logo level at all times
Our color palette is intentionally minimal. Color is reserved for status indication only, avoiding decorative colors that add visual noise during high-stress situations.
Primary brand color. Use for CTAs, alerts, and emphasis.
Primary text color. Headlines and important content.
Secondary text. Body copy and descriptions.
Slate Darker
#111827
Slate Dark
#1F2937
Gray
#6B7280
Gray Light
#9CA3AF
Border
#E5E7EB
Background
#F5F5F7
Used only for status indication. Each color has a specific meaning in the Guardian system.
Emergency
#DC2626
Danger, active alerts, urgent action required
Warning
#D97706
Caution, acknowledged issues, attention needed
Success
#059669
Safe, resolved, online, confirmed
Info
#2563EB
Informational, neutral notifications
Inter is our primary typeface. Its clean, legible design ensures readability across all screen sizes and stress conditions.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0123456789 !@#$%^&*()
Regular / 400
The quick brown fox
Medium / 500
The quick brown fox
Semibold / 600
The quick brown fox
Bold / 700
The quick brown fox
Display Heading
Page Heading
Section Heading
Subsection Heading
Card Heading
Large body text for emphasis and lead paragraphs.
Standard body text for general content and descriptions.
Small text for captions and secondary information.
CAPTION TEXT FOR LABELS
Guardian is a safety system used during emergencies. Every design decision prioritizes usability under stress.
High contrast, large touch targets, and clear hierarchy minimize cognitive load during high-stress situations.
Primary palette is Gray/White/Red. Color is reserved for status indication only, avoiding decorative colors that add visual noise.
Breathing room reduces stress. Don't pack information densely. Let critical information stand out.
Same interactions across all apps. Predictable layouts reduce learning curve. Staff can use any app intuitively.
WCAG 2.1 AA minimum. 44px minimum touch targets (80px for emergency actions). Works in bright sunlight and low light.
No shifting when content changes. Large, clear typography (min 16px body, 24px+ headings). High contrast ratios (7:1 for critical info).
Minimum
WCAG 2.1 requirement
Preferred
Comfortable for all users
Emergency
Large buttons during crisis
Core components that make up the Guardian interface. Each is designed for clarity and usability under stress.
Primary Actions
Emergency Actions (Larger Touch Targets)
Status Buttons
Used for general content blocks and information display.
Highlighted border and background for active emergency alerts.
Amber styling for acknowledged but unresolved issues.
4px
8px
12px
16px
24px
32px
48px
64px
Download official Guardian brand assets for use in presentations, marketing materials, and partner communications.
Full logo, mark, and wordmark in SVG formats.
CSS and JSON color definitions for design applications.
Font usage guidelines for Inter typeface.
Custom Guardian icons for apps and presentations.
Template guidelines for Keynote and PowerPoint.
Complete brand guidelines and specifications.
Contact our brand team for guidance on using Guardian assets in your materials, partnership opportunities, or media inquiries.
brand@guardiansystems.co