_Color
These are the backbone of our visual identity — strong, clear, and full of intent. Each color is chosen to support the way Phase2_ shows up in the world.
_Primary
Use these consistently when creating key brand materials: presentations, marketing collateral, external documents, and web elements that carry high brand visibility.
Abyss_DeepNavy
#00233AOur foundation. The trusted calm before action.
Blueprint_Indigo
#1A3B6FDesign-led and deliberate.
Pulse_BoldCyan
#16A3D6Momentum in motion.
Clarity_IceBlue
#9AE4FFSimple. Clean. Sharp.
_Secondary
Accent colors for emphasis, status indicators, and moments that need a different energy.
Drive_CoralRush
#F5543AUnapologetically bold.
Homage_Pine
#1F4E52A subtle nod to our roots.
_TintsAndShades
Extended hue scales for each brand color — five darker shades and five lighter tints radiating from the base.
Click any swatch to copy its hex value. The highlighted center swatch is the base brand color.
Abyss_DeepNavy
Our foundation. The trusted calm before action.
Blueprint_Indigo
Design-led and deliberate.
Pulse_BoldCyan
Momentum in motion.
Clarity_IceBlue
Simple. Clean. Sharp.
Drive_CoralRush
Unapologetically bold.
Homage_Pine
A subtle nod to our roots.
_Gradient
Signal_BlueGradient is the official brand gradient — the underscore in motion. Use it for hero moments, loading states, and anywhere the brand needs kinetic energy.
Flows from Clarity through Pulse to Blueprint — light to deep, open to focused.
Signal_BlueGradient
The underscore in motion.
#9AE4FF → #14A3D6 → #1A386FGradient Builder_
Mix brand colors into custom gradients. Pick colors, choose a direction, copy the CSS.
Colors (pick 2–4)
Direction
background: linear-gradient(90deg, #00233A, #14A3D6, #9AE4FF);_Utility
These aren't here to grab attention — they're here to make everything else shine. Utility colors provide the neutral foundation needed to organize, support, and guide without distraction.
Slate for body text, borders, lines, and subtle UI elements. White and off-white backgrounds for breathing room. Grays for dividers, footers, and legible contrast.
_White
#00233A
_Slate50
#F8FAFC
_Slate100
#F1F5F9
_Slate200
#E2E8F0
_Slate300
#CBD5E1
_Slate400
#94A3B8
_Slate500
#64748B
_Slate600
#475569
_Slate700
#334155
_Slate800
#1E293B
_Slate900
#0F172A
_Slate950
#020617
_Usage
Presentations
Use primary palette. Deep Navy backgrounds with Cyan or Ice Blue accents.
Marketing collateral
Primary palette for hero sections. Secondary for call-to-action moments.
External documents
Keep it clean. Deep Navy + white with Cyan highlights.
Web & digital
Full palette available. Ensure contrast ratios meet WCAG AA standards. Use utility Slate scale for UI chrome.