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
Synapse Sensor
All systems operational
Alert Card
CRITICAL
Attack Detected
SQLi attempt blocked
Alert Styles
✓
Success: Operation completed
!
Warning: Please review settings
Light / Dark Mode
Light Mode (Default)
Fleet Overview
Body text on white with slate headings.
Dark Mode
Fleet Overview
Body text on navy with light headings.
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
Sensor Console
Data-heavy interface with violet accents.
Violet Accent
Light Dashboard
Clean interface for fleet management.
Blue CTA
Status Dashboard
Metrics with status indicators.
OK
WARN
CRIT
Documentation Theme
Clean docs with code highlights.
code
Marketing / Hero Theme
Bold gradient with CTA emphasis.
Get Started →
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