COLOR REFERENCE

# Color Reference

EDGE PROTECTION DESIGN SYSTEM · ATLAS CREW
Color Proportions
SURFACE 35%
BLUE 25%
TEXT 20%
VIOLET 10%
CORAL 5%
STATUS 5%
Surfaces dominate. Blue is the primary. Violet punctuates. Coral is reserved for logo accents and warm contrast. Status colors are functional only.
Surfaces — Dark Mode
bg
Base
#080e1a
--ac-navy-darkest
Page background
Surface
#0c1220
--surface-base
Cards, panels
Card
#101828
--surface-card
Elevated cards
Subtle
#131c2e
--surface-subtle
Hover, active rows
Overlay
#182440
--surface-overlay
Dropdowns, modals
Border
#1e2d44
--border-subtle
Dividers, card edges
Text
Aa
Primary
#e8ecf4
--text-primary
Headlines, body text
Aa
Secondary
#8899b0
--text-secondary
Descriptions, labels
Aa
Muted
#5a6f8a
--text-muted
Captions, timestamps
Aa
Dim
#2a3f5c
--border-strong
Decorative only, not for readable text
Primary — Vivid Blue
Tint
#7EC8FF
--ac-blue-tint
Dark mode hover, links
Vivid
#1E90FF
--ac-blue
Primary UI, links, CTAs
Shade
#0A6ED8
--ac-blue-shade
Hover, pressed states
Navy
#0B4F8A
--ac-navy
Headers, hero backgrounds
Accent — Arc Violet
Tint
#C4B5FD
--ac-magenta-tint
Dark mode hover
Violet
#8B5CF6
--ac-purple
Focus rings, anomaly accents, data viz
Shade
#6D28D9
--ac-magenta-shade
Hover, pressed
Brand — Logo Accents
Coral is for logos, not UI. Violet disappears into blue backgrounds at small icon sizes. Coral provides the warm/cool tension needed for marks to read at 20–80px. Don't use coral as a UI element color.
Coral
#F97316
Horizon icon arcs, logo warm accent
Coral Light
#FB923C
Logo hover states
Violet Light
#A78BFA
Synapse wordmark (colored variant)
Status — Functional Only
Status colors are reserved for data visualization, badges, KPIs, and alert states. Not for backgrounds, large areas, or decoration.
Red
#EF4444
--ac-red
Error, critical, danger
Amber
#F59E0B
--ac-orange
Warning, high risk
Green
#10B981
--ac-green
Success, healthy, low risk
Cyan
#06B6D4
--ac-sky-blue
Info, secondary data viz
Contrast Compliance (WCAG 2.1 AA)

PAIR | RATIO | AA NORMAL | AA LARGE
--- | --- | --- | ---
text #e8ecf4 on surface #0c1220 | 14.2:1 | PASS | PASS
secondary #8899b0 on surface #0c1220 | 5.6:1 | PASS | PASS
muted #5a6f8a on surface #0c1220 | 3.2:1 | FAIL | PASS
blue #1E90FF on surface #0c1220 | 4.8:1 | PASS | PASS
blue #1E90FF on bg #080e1a | 5.4:1 | PASS | PASS
violet #8B5CF6 on surface #0c1220 | 3.8:1 | FAIL | PASS
red #EF4444 on surface #0c1220 | 4.5:1 | PASS | PASS
green #10B981 on surface #0c1220 | 6.5:1 | PASS | PASS

Muted text (#5a6f8a) fails AA Normal — use only for captions, timestamps, or decorative text at 14px+ (AA Large passes). Violet also fails AA Normal on dark surfaces — use at large sizes or as accents, not small body text.