Internal Brand Reference
On It — Brand System
Visual identity guidelines for products, marketing, and communications
Logo & Wordmark
Primary (Dark)
Use on dark backgrounds
Reversed (Light)
Use on light backgrounds
// Do not stretch, recolor, or add drop shadows to the wordmark.
Color Palette
Command Black
#0a0a0a
rgb(10, 10, 10)
Primary background
Safety Orange
#FF6B00
rgb(255, 107, 0)
Primary accent / CTAs
Charcoal Panel
#111111
rgb(17, 17, 17)
Cards and surfaces
High-Vis Yellow
#FFD600
rgb(255, 214, 0)
FREE tags, badges, alerts
Ghost White
#ffffff
rgb(255, 255, 255)
Primary text
Muted Gray
#999999
rgb(153, 153, 153)
Secondary text / muted
Sentinel Cyan
#00E5FF
rgb(0, 229, 255)
Secondary highlight
Exception Red
#ef4444
rgb(239, 68, 68)
Errors and failures
Typography
Display Typeface
Space Grotesk
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
AI-Powered Logistics Operations
Monospace Typeface
IBM Plex Mono
SENTINEL > STATUS: ACTIVE
TRACKING_ID: 1Z999AA10123456784
CARRIER: FEDEX · STATUS: IN_TRANSIT
ALERT: DELAY_DETECTED · ETA: +2 DAYS
Use Cases
- ›Carrier codes and tracking IDs
- ›Terminal output and logs
- ›Status labels and badges
- ›Data tables and metrics
Type Scale
| Role | Size | Line Height | Weight |
|---|---|---|---|
| Display XL | 60px | 1.05 | Bold 700 |
| H1 | 48px | 1.1 | Bold 700 |
| H2 | 36px | 1.2 | SemiBold 600 |
| H3 | 24px | 1.3 | SemiBold 600 |
| Body | 16px | 1.6 | Regular 400 |
| Caption | 12px | 1.5 | Regular 400 |
Agent Identity
Sentinel
Chief Monitoring Officer
Scout
Anomaly Detection Specialist
Dispatch
Notification & Communications
Analyst
Performance Intelligence Agent
Resolver
Issue Management Agent
Commander
Orchestration Layer
System Icons
All icons sourced from Lucide React. Use at 20–28px for UI; 16px for inline labels.
UI Components
Buttons
Badges
Input Field
Alert / Notification Strip
Package delayed — estimated delivery updated to Jun 30
Status Indicators
Voice & Tone
On It speaks like a senior logistics ops manager — precise, confident, always ahead of the problem.
Direct and confident. 'Scout flagged a delay on FedEx order #2891.'
Action-oriented. 'Resolver opened a claim automatically.'
Data-forward. Lead with the number, then the context.
Passive or vague. 'There may be an issue with your shipment.'
Apologetic or uncertain. 'We're sorry, but we're not sure what happened.'
Filler words. No 'just', 'simply', 'basically', 'please note'.
Motion & Animation Principles
Pulse
Used for live monitoring indicators and active agent status
animation: pulse-dot 2.2s ease-in-out infinite
Fade + Slide
Page transitions and modal entrances (200ms ease-out)
200ms ease-out · translateY(12px) → 0
Scan Line
Terminal-style reveals for data tables loading
stroke-dashoffset: 100 → 0 · opacity 0.3 → 1
On It Brand System · Internal Reference · 2026
SENTINEL > BRAND_STATUS: ACTIVE