USAGE GUIDE

# Usage Guide

EDGE PROTECTION DESIGN SYSTEM · HOW TO APPLY IT
Typography — When to Use What

The rule is simple: if the text is for humans to read, increase CASL. If it's machine output, keep CASL at 0. If it's navigation, use MONO 0.5 for the hybrid texture.

DO
Use .t-body (CASL 0.6) for descriptions, tooltips, help text
Use .t-data (CASL 0) for table cells, IP addresses, log entries
Use .t-metric (CASL 0.6, MONO 1) for KPI numbers — warmth + alignment
Use .t-display (wght 300) for hero text — lightest weight for biggest text
Use font-variation-settings directly when utility classes don't fit
DON'T
Use Tailwind font-bold / font-light — they don't set CASL/MONO/slnt axes
Mix Rubik, Inter, or any other font — Recursive does everything
Use CASL 0 for body text — it reads as sterile and unfriendly
Use CASL 0.6 for machine data — it reads as imprecise
Bold the display role — wght 300 is intentional, confidence not volume
Color — When to Use What

Blue (#1E90FF) is the primary. Use it for links, CTAs, active states, primary buttons, and chart series 1. It's the first color anyone should see on any page.

Violet (#8B5CF6) is the accent. Focus rings, anomaly indicators, Synapse-specific elements, chart series 2. Never as a background. Use sparingly — if you squint and violet dominates, you've overused it.

Coral (#F97316) is for logos only. The Horizon icon arcs, logo warm accents. Don't use coral as a UI color — it creates confusion with amber warning states.

DO
Use surfaces for 80% of visual space — let the dark slate breathe
Use blue for interactive elements — links, buttons, active indicators
Use status colors only for their semantic purpose (red=error, green=success)
Use the slate scale (#080e1a → #1e2d44) for layered depth
Check contrast ratios — muted text (#5a6f8a) only at 14px+
DON'T
Use coral/orange as a UI accent — it's a logo color, not a UI color
Use status colors decoratively — red means error, always
Use violet for small body text — fails AA contrast on dark surfaces
Put blue text on violet backgrounds or vice versa — cool-on-cool muddies
Use pure white (#fff) for large areas — use #e8ecf4 for text instead
Quick Reference — CSS Variables
Page background
var(--surface-base) → #0c1220
Card background
var(--surface-card) → #101828
Border
var(--border-subtle) → #1e2d44
Primary text
var(--text-primary) → #e8ecf4
Secondary text
var(--text-secondary) → #8899b0
Muted text
var(--text-muted) → #5a6f8a (14px+ only)
Primary blue
var(--ac-blue) → #1E90FF
Blue hover
var(--ac-blue-shade) → #0A6ED8
Accent violet
var(--ac-purple) → #8B5CF6
Focus ring
var(--focus-ring) → #8B5CF6
Font stack
var(--font-stack) → 'Recursive', ui-monospace, sans-serif
Tailwind: blue
text-ac-blue · bg-ac-blue · border-ac-blue
Tailwind: violet
text-ac-purple · bg-ac-purple · border-ac-purple
Tailwind: surface
bg-navy-900 · bg-navy-800 · bg-navy-700
Tailwind: text
text-ink-primary · text-ink-secondary · text-ink-muted
Component Patterns
Stat Card
4,412 req/s
THROUGHPUT
<div class="stat-card"> <span class="t-metric">4,412</span> <span class="t-metric-unit">req/s</span> <span class="t-label">THROUGHPUT</span> </div>
Table Header + Row
SOURCE METHOD STATUS PATH
192.168.1.42 GET 200 /api/v2/sensors
<th class="t-label">SOURCE</th> <td class="t-data">192.168.1.42</td>
Sidebar Navigation
Overview
Traffic
Sensors
Campaigns
<!-- Active --> <a class="t-nav-active">Overview</a> <!-- Inactive --> <a class="t-nav">Traffic</a>
Icon System Rules

Corner brackets frame every icon at sizes ≥28px. Stroke color #5a6f8a at 30% opacity, 1.5px stroke width. At 20px and below, brackets are dropped — the icon mark must stand alone.

Stroke-based geometry — no fills except for accent nodes. Consistent stroke weights across the family. Blue for primary structure, coral for Horizon accents, violet for Synapse accents.

Dark variant icons get a #0c1220 background rect. Light variant icons are transparent — the brackets and marks stand alone on any surface.

Border Radius

Zero everywhere. The Tailwind config overrides default border-radius to 0. Buttons, cards, inputs, badges, modals, tooltips — all square corners. This is inherited from the A10 design system and is the single most recognizable visual element. No exceptions. No "just a little rounding."