Here's a comprehensive brand identity guide for **SiteGuard** — a safety management application for contractors. The page includes the full logo system, two distinct app icons, color palette, typography, usage guidelines, and contextual mockups. ```html
Safety management platform for contractors — managing visits, tracking violations, protecting people.
Protecting every visit. Preventing every violation.
Brand Mark
The core brand mark is a shield containing a checkmark — symbolizing protection, verification, and safety compliance. It functions independently from the wordmark for flexible application.
Primary Brand Mark
Shield + Checkmark
Represents protection, defense, and the barrier between workers and workplace hazards. The pointed base directs focus downward to the field of operation.
Symbolizes verification, compliance, and approval. Confirms that safety standards have been met and visits have been cleared.
Conveys trust, authority, and reliability — essential qualities for a safety management platform. The gradient adds dimension and modernity.
Icon at Scale
Logo System
The complete logo system includes horizontal and stacked lockups, icon-only, and wordmark-only versions. The icon is always separable for independent use on documents and app icons.
Primary — Horizontal Lockup
Secondary — Stacked Lockup
Separable Elements
Icon Only — For Documents, Favicon, Watermark
Wordmark Only — For Text-Only Contexts
App Icons
SiteGuard uses two distinct app icons to differentiate user roles. Both share the shield form but contain unique interior symbols representing each user type.
App 01
For employees & field engineers — check-in to sites, report hazards, view compliance status.
Hard hat + person silhouette = Field Worker identity
App 02
For safety managers — oversee visits, review violations, approve compliance, generate reports.
Clipboard + checklist = Oversight & management identity
App Icons — Background Adaptation
Color System
The SiteGuard palette is built on trust and safety. Primary blue conveys authority and reliability, while safety orange highlights critical actions. Semantic colors map directly to compliance states.
Primary
Brand Blue
#2563EB
RGB 37 · 99 · 235
Brand Dark
#1E40AF
RGB 30 · 64 · 175
Brand Light
#60A5FA
RGB 96 · 165 · 250
Safety Orange
#F97316
RGB 249 · 115 · 22
Semantic — Status Colors
Compliant
#22C55E
Safe · Approved · Clear
Caution
#EAB308
Pending · Warning · Review
Violation
#EF4444
Critical · Rejected · Danger
Information
#3B82F6
Info · Update · Notice
Neutrals
#0A0A0A
#171717
#525252
#A3A3A3
#E5E5E5
#FFFFFF
Typography
Inter is the sole typeface — chosen for its excellent legibility at all sizes, especially on mobile devices in field conditions. Weight and size create hierarchy.
Type Scale
Display
48–72px · Weight 800 · Tracking -0.04em
Heading 1
30–36px · Weight 700 · Tracking -0.02em
Heading 2
24px · Weight 700 · Tracking -0.01em
Heading 3
20px · Weight 600
Body Large
16px · Weight 500
Body
14px · Weight 400
Caption / Label
12px · Weight 500 · Tracking 0.05em
Font Weights
Logo Wordmark Spec
Font: Inter ExtraBold (800)
Tracking: -0.04em (tighter)
"SITE": White / #0A0A0A on light
"GUARD": Brand Blue #2563EB (always)
Spacing: 4px between icon and wordmark
Guidelines
Clear space, minimum sizes, and misuse examples to protect the integrity of the SiteGuard brand across all applications.
Clear Space
The logo requires clear space equal to X — the height of the shield icon's top arc — on all sides.
No other elements, text, or imagery should encroach on this minimum clear space zone.
For the standalone icon, clear space equals ¼ the icon height on all sides.
Minimum Size
Full Logo (Horizontal)
Icon Only
Do's & Don'ts
Use the logo on brand-approved backgrounds with proper clear space
Use the icon independently on documents, app icons, and favicons
Use the appropriate app icon variant for each user role
Scale proportionally — maintain the icon-to-text ratio
Don't stretch, skew, or distort the logo or icon
Don't change the brand colors or apply unauthorized gradients
Don't place the logo on busy backgrounds without a container
Don't swap the app icon symbols between Field and Manager apps
Brand in Action
See how the SiteGuard brand translates to real-world applications — from corporate documents to mobile screens.
Document Header
SITEGUARD
Safety Management
REF: SG-2025-0042
Date: Jan 15, 2025
Site Inspection Report
Project: Tower B — Level 12 Construction
App Screen — Field Engineer
Active Visit
Tower B — Level 12
Report Hazard
Compliance: 94%
App Screen — Safety Manager
Site Overview
3 active sites · 12 field engineers
Pending Reviews
Weekly Compliance
Business Card
Sarah Chen
Senior Safety Manager
Protecting Every Visit
Email Signature
Sarah Chen
Senior Safety Manager · SiteGuard
sarah.chen@siteguard.io
+1 (555) 234-5678
Brand Merchandise
Hard Hat
Safety Vest
ID Lanyard
Decal