Foundation
Design System
Unified token system for two product surfaces — Compliance Shield (P1) and Neural Command (P2) — sharing a common visual DNA on a near-black platform.
⬡
Shared AI / Claude layer — Neural Purple
Any element rendered by or belonging to Claude (glow nodes, AI-generated content badges, agent status indicators) uses
#BF5AF2 regardless of which prototype surface it appears on. This creates a consistent visual language for AI-originated content.Tokens · Color
Color System
All colors defined as CSS custom properties. Use tokens, never raw hex values in components.
Platform Surfaces
--bg
#07080F
--bg-2
#0D0E1C
--surface
#161828
--border
rgba(255,255,255,0.07)
--ai-purple
#BF5AF2
P1 · Compliance Shield
--p1-navy
#0D1B3E
--p1-amber
#DA7756 ↑ Primary
--p1-amber-2
#B35F40
--p1-amber-3
#7A3E28
--p1-amber-bg
rgba(218,119,86,0.08)
P2 · Neural Command + Status
--p2-blue
#4F9EFF ↑ Primary
--green
#34C759 · Resolved / Pass
--red
#FF453A · Critical / Fail
--orange
#FF9F0A · Warning / P2
--yellow
#FFD60A · In Progress
Tokens · Typography
Type System
Three font families. Unbounded for display authority. Instrument Sans for readable body. JetBrains Mono for technical labels, code, and data.
Aa
Exception resolved in 2h 14m
OTIF Compliance Copilot · Exception Brain
The OTIFEngine computed a delivery delay of 72 hours against a
4-hour grace window. Root cause analysis identified the carrier
as responsible based on GPS telematics deviation from planned route DXB→SHJ.
EXC-2026-04-18-00847 · LATE_DELIVERY · P1
score = 0.40×revenue + 0.30×tier + 0.20×penalty + 0.10×urgency
→ overall_priority_score: 82.4 → P1
| Token | Value | Use | Preview |
|---|---|---|---|
| --text-xs | 11px | Micro labels, timestamps | Text xs |
| --text-sm | 13px | Table data, secondary text | Text sm |
| --text-base | 15px | Body copy, descriptions | Text base |
| --text-lg | 18px | Section intros, card headers | Text lg |
| --text-xl | 22px | Sub-headings, module titles | Text xl |
| --text-2xl | 28px | Page headings | 2xl |
| --text-4xl | 48px | Hero / display | 4xl |
Components · Interactive
Buttons
All buttons use JetBrains Mono font, uppercase, letter-spaced. Glow effects on primary hover states.
Primary Actions
Secondary / Ghost
Components · Status
Badges & Status
OTIF Verdicts
PASS
FAIL
AT RISK
Chargeback State Machine
New
Under Review
Disputed
Recovered
Accepted
Exception Priority Levels
P1 · Critical
P2 · Elevated
P3 · Standard
Exception Types
Late Delivery
Stockout
Short Pick
Vehicle Breakdown
ASN Error
Failed Delivery
Components · Data Display
Cards
Exception Card — P2 Neural Command
EXC-2026-04-21-00847
Late Delivery — DXB→SHJ Route
P1 · Critical
Late Delivery
Aramex · VH-447
82.4
PRIORITY SCORE
EXC-2026-04-21-00852
Short Pick — WH-DUBAI-A · SKU-0042
P2 · Elevated
Short Pick
61.7
PRIORITY SCORE
Chargeback Card — P1 Compliance Shield
PO-WAL-00142 · Walmart US
Disputed
Late Delivery
$8,420
Shipment delivered 72h past OTIF window. Carrier: XPO Logistics. Route: DC-US-MIDWEST → DC-US-INBOUND-2
Evidence Chain
Walmart Routing Guide §4.2 (p. 18): "On-Time delivery defined as arrival within 4-hour grace window of appointment date." Actual delay: 72h. Carrier GPS log confirms departure from planned route at 14:23 UTC.
Components · Input
Form Elements
Text Inputs
Components · Data
Tables
Shipment List — P1 OTIF Dashboard
Components · Communication
Notifications
Slack / Teams Notification Cards
P1 Exception · Immediate Action
Just now
Dispute Recovered
2h ago
Domain Components · P2
Priority Queue
Live Queue — Top 5 Exceptions · Ranked by PriorityScorer
Tokens · Layout
Spacing Scale
4px base unit. All measurements are multiples. Use CSS custom properties, never magic numbers.
Tokens · Animation
Motion
Purposeful animation only. One entrance animation per page. Hover transitions at 150–200ms. No decorative perpetual motion except the AI glow pulse.