EDGE PROTECTION CHEATSHEET

# Edge Protection Design System

Quick Reference Card v1.0
Color Palette
Primary Colors
★
VIVID BLUE
#1E90FF
NAVY
#0B4F8A
DARK BASE
#080e1a
Tints and Shades
#7EC8FF
#0A6ED8
#083D6C
Accent — Arc Violet
VIOLET
#8B5CF6
TINT
#C4B5FD
SHADE
#6D28D9
Brand / Logo Only
CORAL
#F97316
CORAL LT
#FB923C
VIOLET LT
#A78BFA
Status Colors
Red
#EF4444
Amber
#F59E0B
Green
#10B981
Cyan
#06B6D4
Surface Scale (Dark Mode)
#080e1a
#0c1220
#101828
#131c2e
#1e2d44
Usage Proportion
Surface 35%
Blue 25%
Text 20%
Vio 10%
5%
5%
Gradients
Navy → Blue
Blue Scale (3-stop)
Violet → Dark
Typography
Font Family: Recursive (Google Fonts) · Variable: wght, MONO, CASL, slnt
Display
System Overview
300 · M0 · C0 · 36px
Heading
Incident Feed
500 · M0 · C.2 · 24px
Subhead
ACTIVE ENTITIES
600 · M0 · C.3 · s-3 · 14px
Body
No high-risk entities recorded yet.
400 · M0 · C.6 · 13px
Label
TEST & ATTACK
600 · M1 · C.3 · s-4 · 12px
Tag
CRITICAL
800 · M0 · C0 · s-3 · 11px
Metric
72,481
400 · M1 · C.6 · 32px
Data
192.168.1.42 → GET /api 200
500 · M1 · C0 · 13px
Code
synapse.config.max_body
400 · M1 · C0 · 13px
Nav
Traffic Overview
500 · M.5 · C.2 · s-2 · 14px
Link
VIEW ALL TRAFFIC →
700 · M0 · C0 · s-15 · 10px
Breadcrumb
FLEET / SENSORS / SYN-042
700 · M1 · C.2 · s-7 · 10px
CASL Warmth Gradient — Brand Voice Encoded in Font
BODY .6
SUB .3
HEAD .2
DATA 0
CODE 0
← Human (warm, casual) · Machine (cold, clinical) →
Button Styles
No rounded corners · Title Case · Variable width, centered
Primary
Outlined
Secondary
Accent
Click →
Card Examples
Dark Card
FEATURED
Edge Protection Platform
Autonomous defense at the edge
Status Card
ONLINE
Synapse Sensor
All systems operational
Alert Card
CRITICAL
Attack Detected
SQLi attempt blocked
Alert Styles
✓
Success: Operation completed
!
Warning: Please review settings
✕
Error: Action failed
i
Info: Update available
Light / Dark Mode
Light Mode (Default)
Fleet Overview
Body text on white with slate headings.
Primary CTA
Accent
Dark Mode
Fleet Overview
Body text on navy with light headings.
Primary CTA
Accent
Do / Don't
✓ DO
Use Recursive for everything
✕ DON'T
Mix Inter, Rubik, or system fonts
✓ DO
Sharp corners on all UI elements
✕ DON'T
Use rounded corners or pill shapes
✓ DO
CASL 0.6 for body, CASL 0 for data
✕ DON'T
Use CASL 0 for human-facing text
✓ DO
Coral for logos and icon accents only
✕ DON'T
Use coral as a UI element color
✓ DO
wght 300 for display (lightest = biggest)
✕ DON'T
Bold the display role or hero text
✓ DO
Status colors for data/alerts only
✕ DON'T
Use red/green decoratively
Component Theme Sets
Primary Dark Theme
Body text on slate with blue headings.
Blue CTA
Surface
Blue
Card
Text
Sensor Console
Data-heavy interface with violet accents.
Violet Accent
BG
Violet
Card
Text
Light Dashboard
Clean interface for fleet management.
Blue CTA
Surface
Blue
Card
Text
Status Dashboard
Metrics with status indicators.
OK WARN CRIT
Surface
Card
Good
Bad
Documentation Theme
Clean docs with code highlights.
code
Nav
Body
Link
Code
Marketing / Hero Theme
Bold gradient with CTA emphasis.
Get Started →
Navy
Blue
CTA
BG
Icon System
• Corner brackets at ≥28px
• Stroke-based, no fills
• Blue structure, product accent
• Dark: #0c1220 bg rect
• Light: transparent
• Scales to 16px favicon
Wordmark Variants
COLORED UPPERCASE (lockups)
HORIZON SYNAPSE
LIGHT MIXED CASE (alternative)
Horizon Synapse