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

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

Primary

#e8ecf4

--text-primary

Headlines, body text

Secondary

#8899b0

--text-secondary

Descriptions, labels

Muted

#5a6f8a

--text-muted

Captions, timestamps

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.