Dark Security Control Plane Theme — CrowdStrike-grade dashboard aesthetic

2026-03-21

dashboard

What We Built

Converted the BrainstormRouter dashboard from a washed-out light theme to a dark security control plane aesthetic. The new palette uses slate-900 (#0F172A) as the base, with green (#22C55E) as the primary accent — echoing the visual language of enterprise security products like CrowdStrike and Palo Alto Networks.

Both CSS sources (Vite-bundled tokens.css and inline index.html styles) are synchronized to the same dark palette, eliminating flash-of-wrong-theme on page load. ~25 hardcoded color values across 14 CSS files were converted to CSS variable references.

Why It Matters

BrainstormRouter competes in the HIGH SECURITY + HIGH ROUTING quadrant. A dark security control plane aesthetic reinforces our positioning as a serious enterprise security product, not a developer toy. First impressions matter — the dashboard is often the first touchpoint for security-conscious buyers evaluating AI gateways.

How It Works

The token system uses CSS custom properties in :root, defined in both tokens.css (Vite bundle) and index.html (early paint). Key tokens:

Background: --color-bg: #0F172A (slate-900)
Cards/Surface: --color-bg-element: #1E293B (slate-800)
Text: --color-text: #F8FAFC (slate-50)
Accent: --color-accent: #22C55E (green-500)
Focus shadow: green-tinted ring instead of orange

New overlay tokens (--color-overlay, --color-header-backdrop, --color-hover-overlay) replace hardcoded rgba() values throughout.

The Numbers

All text/background pairs meet WCAG AA contrast: primary 15.4:1, secondary 8.5:1, tertiary 5.5:1
color-scheme: dark set for native browser controls
Governance bar inline style hack removed (CSS class handles positioning)

Competitive Edge

No competitor in the AI gateway space (Portkey, OpenRouter, Helicone, LiteLLM) has a security-first dashboard aesthetic. BrainstormRouter's dark control plane signals enterprise-grade security from the first login screen.

Lockstep Checklist

[x] API Routes: N/A — no backend changes
[x] TS SDK: N/A — no API changes
[x] Python SDK: N/A — no API changes
[x] MCP Schemas: N/A — no agent-facing changes
[x] Master Record: N/A — visual-only change