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 SiteGuard — Brand Identity Guidelines
Copied!
Brand Identity v1.0

SITEGUARD

Safety management platform for contractors — managing visits, tracking violations, protecting people.

Protecting every visit. Preventing every violation.

Explore Brand
Scroll
01

Brand Mark

The Shield Icon

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

Shield Shape

Represents protection, defense, and the barrier between workers and workplace hazards. The pointed base directs focus downward to the field of operation.

Checkmark

Symbolizes verification, compliance, and approval. Confirms that safety standards have been met and visits have been cleared.

Blue Gradient

Conveys trust, authority, and reliability — essential qualities for a safety management platform. The gradient adds dimension and modernity.

Icon at Scale

16px
24px
36px
48px
72px
96px
03

App Icons

Two Application Identities

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

SiteGuard Field

For employees & field engineers — check-in to sites, report hazards, view compliance status.

Hard hat + person silhouette = Field Worker identity

Site check-in & visit logging
Hazard & violation reporting
Personal compliance dashboard

App 02

SiteGuard Manager

For safety managers — oversee visits, review violations, approve compliance, generate reports.

Clipboard + checklist = Oversight & management identity

Real-time site overview
Violation review & escalation
Analytics & compliance reports

App Icons — Background Adaptation

Field / Dark
Field / Light
Manager / Dark
Manager / Light
04

Color System

Brand Palette

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

05

Typography

Type System

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

Light — 300Decorative only
Regular — 400Body text
Medium — 500Labels, buttons
Semibold — 600Subheadings
Bold — 700Headings
ExtraBold — 800Logo, display

Logo Wordmark Spec

SITEGUARD

Font: Inter ExtraBold (800)

Tracking: -0.04em (tighter)

"SITE": White / #0A0A0A on light

"GUARD": Brand Blue #2563EB (always)

Spacing: 4px between icon and wordmark

06

Guidelines

Usage Rules

Clear space, minimum sizes, and misuse examples to protect the integrity of the SiteGuard brand across all applications.

Clear Space

SITEGUARD
X
X
X
X

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)

SITEGUARD
Too small
SITEGUARD
24px min ✓

Icon Only

Too small
16px min ✓

Do's & Don'ts

Do

Use the logo on brand-approved backgrounds with proper clear space

Do

Use the icon independently on documents, app icons, and favicons

Do

Use the appropriate app icon variant for each user role

Do

Scale proportionally — maintain the icon-to-text ratio

Don't

Don't stretch, skew, or distort the logo or icon

Don't

Don't change the brand colors or apply unauthorized gradients

Don't

Don't place the logo on busy backgrounds without a container

Don't

Don't swap the app icon symbols between Field and Manager apps

07

Brand in Action

Application Mockups

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

2 Violations
5 Compliant

App Screen — Field Engineer

9:41
SiteGuard
Field

Active Visit

Tower B — Level 12

Checked in 2h ago

Report Hazard

Fall Risk
Electrical

Compliance: 94%

App Screen — Safety Manager

9:41
SiteGuard
Manager

Site Overview

3 active sites · 12 field engineers

+9 online

Pending Reviews

● Fall Risk — Tower B 2m ago
● Electrical — Site C 15m ago

Weekly Compliance

Business Card

SITEGUARD

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

Field Gear

Safety Vest

Hi-Vis Apparel

ID Lanyard

Identification

Decal

Helmet / Equipment