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
<!-- 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."