Brand & Design System
HangarOne
Brand Identity
A compliance-first airworthiness management platform. Built on safety. Designed to delight. This document defines the visual identity, design language, and presentation standards for HangarOne.
01
Color System
The HangarOne palette is built around Midnight and Info Blue -- projecting trust, compliance, and professionalism. Signal Orange is reserved for high-visibility CTAs and alerts. Safety-critical status colors are never used for decoration.
Primary
Core brand colors used across all interfaces
Neutral
Text hierarchy and structural elements
Semantic / Status
Safety-critical status indicators -- never use for decoration
Midnight Extended Scale
Signal Orange Scale
Environmental Readability
All critical text pairs must meet WCAG AAA (7:1) for use on handheld devices in bright outdoor tarmac conditions.
Midnight / Slate 100
16.4:1 AAA
All conditions
Midnight / Signal Orange
5.2:1 AA
Accent on dark
Slate 100 / Midnight
16.4:1 AAA
Bright tarmac
Midnight / Serviceable
7.1:1 AAA
Indoor / tablet
Midnight / Alert
4.8:1 AA
High-alert only
Deep Navy / Slate 300
7.6:1 AAA
All conditions
02
Typography
HangarOne uses Inter for all interface text and JetBrains Mono for technical identifiers. JetBrains Mono is mandatory for part numbers, serial numbers, and compliance codes to prevent character ambiguity (0 vs O, 1 vs l).
Aa
Inter
UI labels, headers, descriptions, navigation, and all general prose across the application.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
Aa
JetBrains Mono
Part numbers, serial numbers, MEL references, technical codes, timestamps, and all machine-readable identifiers.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 0O 1lI !@#$%
Character Disambiguation Rule
All part numbers (e.g., PN-7320B1L), serial numbers, ATA chapter codes, and MEL references must use JetBrains Mono. The slashed zero and distinct letterforms prevent misreads that could compromise maintenance accuracy. Never substitute a proportional font for technical identifiers.
Type Scale
Display
48px / 3rem
HangarOne
Dashboard headers, main KPI titles
H1
36px / 2.25rem
HangarOne
Page titles, work order headings
H2
24px / 1.5rem
HangarOne
Section headers, panel titles
H3
18px / 1.125rem
HangarOne
Card headers, subsections
Body
14px / 0.875rem
HangarOne
Descriptions, task notes, general text
Mono Data
13px / 0.8125rem
HangarOne
Part numbers, timestamps, codes
Caption
11px / 0.6875rem
HangarOne
Labels, metadata, table headers
03
Logo & Mark
The HangarOne mark identifies the platform across dashboards, mobile interfaces, pitch decks, and printed materials. The "H1" monogram projects authority, precision, and trust -- core to the brand.
HangarOne
AIRWORTHINESS
Primary -- Dark Surface
Dashboard headers, login screens, dark-mode panels, pitch presentations
HangarOne
AIRWORTHINESS
Primary -- Light Surface
Printed materials, light-mode interfaces, documentation headers
Large
64px -- Hero, splash, signage
Medium
40px -- Navigation bars, headers
Small
28px -- Favicons, slide badges, compact UI
Clear Space
Minimum exclusion zone equals the height of the monogram on all sides. This ensures the mark reads clearly regardless of surrounding content density.
Minimum Sizes
Minimum reproduction sizes by context to ensure the monogram remains legible and recognisable.
Desktop / Tablet
Navigation bars, app chrome, dashboards
Mobile
Compact headers, mobile nav
Print / Documentation
Reports, compliance documents, work cards
Presentation Slides
Pitch decks, investor materials
Usage Rules
Use the H1 monogram on midnight or white backgrounds for maximum contrast
Pair the monogram with the wordmark for brand-forward contexts (pitch decks, marketing)
Scale proportionally -- never compress or stretch the mark
Alter the monogram colours beyond the approved dark / light variants
Overlay on photographs or complex backgrounds without a solid scrim
Use the monogram below the minimum size for any context
04
Iconography
Icons are functional indicators, not decoration. Every icon maps to a specific operational domain in the HangarOne platform. Lucide icons at 2px stroke weight provide the clarity needed for quick scanning in compliance-heavy interfaces.
Size Standards by Context
14px
Table cells, dense data
16px
Inline labels, metadata
20px
Nav items, form fields
24px
Panel headers, actions
32px
Status indicators
48px
Touch targets, kiosk
Stroke Weight
2pxConsistent 2px strokes maintain visibility at small sizes on low-res ruggedized screens.
Touch Target
44px minAll interactive icons must sit within a 44px minimum tap target for gloved and outdoor use.
Semantic Color
ContextIcons inherit text color by default. Use status colors only when conveying operational state.
05
Spacing & Grid
The 8px base unit underpins all spacing decisions. Consistent spacing reduces cognitive load for operators scanning dense maintenance data, work orders, and inspection results simultaneously.
Spacing Scale (8px base)
Grid System
12-Column Desktop
Primary workstation layout. Sidebar navigation occupies 2-3 columns, leaving 9-10 columns for content. Dashboard widgets snap to 3, 4, or 6-column spans.
4-Column Tablet / Handheld
Ruggedized tablet and handheld layout. Single-task focused. Work order detail fills full width. Action buttons sized for glove interaction.
Responsive Breakpoints
Handheld
sm0 - 639px
4 columns
Rugged scanner, phone
Tablet
md640 - 1023px
8 columns
iPad, rugged tablet
Workstation
lg1024 - 1439px
12 columns
Standard desktop
Wide Display
xl1440px+
12 columns
Multi-monitor, kiosk
06
Data Patterns
Maintenance data is dense, safety-critical, and time-sensitive. These patterns ensure operators can parse part numbers, cycle counts, and status indicators without ambiguity or delay.
Component Tracking Table
Pattern: Data Table| Part Number | Description | Status | Cycles (Current / Limit) | Next Due |
|---|---|---|---|---|
| PN-7320B1L | Turbine Blade, Stage 1 | Serviceable | 12,450 / 15,000 | 2026-04-18 |
| PN-4488C2R | Hydraulic Pump Assembly | Caution | 8,900 / 10,000 | 2026-03-02 |
| PN-1192A7K | Landing Gear Actuator | Unserviceable | 15,200 / 15,000 | Overdue |
| PN-6655D3M | APU Starter Motor | In Progress | 6,100 / 12,000 | 2026-06-15 |
KPI Tile Pattern
Key metrics use large mono numerals with contextual trend indicators. Status color is applied to the value, never the background.
Aircraft Serviceable
+2 this week
Open Work Orders
12 critical
AOG Events
1 pending parts
Inspections Due (7d)
2 overdue
Identifier Formatting Rules
Part Number
PN-7320B1L
Uppercase, hyphen-separated prefix
Work Order
WO-2026-00142
WO prefix, year, zero-padded seq
ATA Chapter
ATA 32-40-11
ATA prefix, dash-separated levels
Aircraft Reg
N-784AM
Country prefix, reg number
MEL Reference
MEL 28-22-01
MEL prefix, ATA-style reference
Timestamp
2026-02-10 14:32Z
ISO 8601, always UTC (Zulu)
07
UI Components
Core building blocks for the HangarOne interface. All components are designed for dense data environments with high-contrast states that reduce misclicks in time-critical maintenance operations.
Buttons
Primary Actions
Secondary / Utility Actions
Destructive / Critical
Sizes
Status Badges
Status badges use consistent color coding aligned with operational status colors. Dot indicators provide a secondary visual cue for colorblind accessibility.
Input Fields
Work Order Card
Engine Fan Blade Inspection
ATA 72-50-00 | Borescope inspection of Stage 1 fan blades per SB CF6-72-1044R2
Aircraft
N-784AM
Due Date
2026-03-15
Priority
High
Assigned Technicians
Selection Controls
Aircraft
N-784AM (B737-800)
Task Type
Scheduled Inspection
Maintenance Base
MIA - Hangar 4