Design System

Codename: The Blackout Protocol

BLACKOUT uses a tactical, industrial design system. The UI is intentionally dense, data-focused, and aggressive.

Design Philosophy

BLACKOUT is a GTM Security Operations Center (SOC). The UI must feel like a tactical command center, not a generic SaaS dashboard.

Core Aesthetic

Industrial
Tactical
Aggressive
Data-dense

NOT

Generic SaaS dark mode
Rounded, friendly, "approachable"
Whitespace-heavy
Pastel colors

Design Rules (ENFORCED)

1. Border Radius

ALLOWED: 0px, 2px
FORBIDDEN: 4px+, rounded-md, rounded-lg, rounded-xl

All components use tactical.radius.sm (2px) or tactical.radius.none (0px).

2. Borders

Every component MUST have a visible border. No floating cards, no borderless inputs.

border: 1px solid #262626;  /* Default */
border: 1px solid #CCFF00;  /* Active/Selected */
border: 1px solid #FF3333;  /* Danger */

3. Typography

Data/Values: Monospace only (font-mono)
Headers: Uppercase with tracking (tracking-wider, tracking-widest)
Sizes: Small (8px - 12px range)
- Labels: text-[8px] to text-[9px]
- Body: text-[10px] to text-[11px]
- Values: text-xs to text-sm

4. Density

High density layouts
Minimize whitespace
Use CSS Grid for bento-box layouts
Tight padding: px-2 py-1.5 (not px-4 py-3)

Color Tokens

Backgrounds (Cold Blacks)

Token	Hex	Usage
`bg.void`	`#000000`	OLED black, deepest background
`bg.base`	`#0A0A0A`	Primary canvas
`bg.elevated`	`#111111`	Cards, panels
`bg.surface`	`#181818`	Interactive surfaces
`bg.hover`	`#1F1F1F`	Hover states

Accent - "Radioactive Lime"

Token	Value	Usage
`lime.DEFAULT`	`#CCFF00`	Primary accent
`lime.dim`	`rgba(204, 255, 0, 0.15)`	Active backgrounds
`lime.glow`	`rgba(204, 255, 0, 0.4)`	Box shadows
`lime.muted`	`rgba(204, 255, 0, 0.08)`	Subtle highlights

Alert - "Defcon Red"

Token	Value	Usage
`red.DEFAULT`	`#FF3333`	Critical, danger
`red.dim`	`rgba(255, 51, 51, 0.15)`	Danger backgrounds
`red.glow`	`rgba(255, 51, 51, 0.4)`	Danger shadows

Borders

Token	Hex	Usage
`border.subtle`	`#1A1A1A`	Section dividers
`border.default`	`#262626`	Component borders
`border.strong`	`#333333`	Emphasized borders
`border.active`	`#CCFF00`	Active/selected state

Text

Token	Hex	Usage
`text.primary`	`#FAFAFA`	Primary text
`text.secondary`	`#A3A3A3`	Secondary text
`text.muted`	`#737373`	Labels, hints
`text.dim`	`#525252`	Disabled, ghost

Component Library

Location

components/ui/tactical.tsx

TacticalButton

import { TacticalButton } from '@/components/ui/tactical'
 
<TacticalButton variant="primary" size="md" icon={Scan} glow>
  INITIATE SCAN
</TacticalButton>

TacticalCard

import { TacticalCard } from '@/components/ui/tactical'
 
<TacticalCard
  header={<TacticalHeader>FINDINGS</TacticalHeader>}
  footer={<span>47 total</span>}
  variant="elevated"
  glow
>
  {/* Content */}
</TacticalCard>

Variants: default | elevated | inset

TacticalBadge

import { TacticalBadge } from '@/components/ui/tactical'
 
<TacticalBadge variant="red" pulse>CRITICAL</TacticalBadge>

Variants: default | lime | red | warning | info Props: size, pulse

TacticalInput

import { TacticalInput } from '@/components/ui/tactical'
 
<TacticalInput
  label="DOMAIN"
  placeholder="example.com"
  icon={Globe}
  error="Invalid domain"
/>

TacticalMetric

import { TacticalMetric } from '@/components/ui/tactical'
 
<TacticalMetric
  label="BTSS SCORE"
  value={73}
  unit="pts"
  trend="up"
  size="lg"
/>

Trends: up (lime) | down (red) | neutral

TacticalProgress

import { TacticalProgress } from '@/components/ui/tactical'
 
<TacticalProgress value={75} variant="danger" showLabel />

TacticalStatus

import { TacticalStatus } from '@/components/ui/tactical'
 
<TacticalStatus status="online" label="CONNECTED" pulse />

Statuses: online | offline | warning | error

CSS Utilities

HUD Background Patterns

/* Lime grid (20px) */
.hud-grid { }
 
/* Dense lime grid (10px) */
.hud-grid-dense { }
 
/* Red/danger grid */
.hud-grid-danger { }
 
/* CRT scanline overlay */
.hud-scanlines { }
 
/* Diagonal warning stripes */
.hud-stripes { }
 
/* Noise texture overlay */
.hud-noise { }

Glow Effects

.glow-lime { box-shadow: 0 0 10px rgba(204, 255, 0, 0.4); }
.glow-lime-strong { box-shadow: 0 0 20px rgba(204, 255, 0, 0.6); }
.glow-red { box-shadow: 0 0 10px rgba(255, 51, 51, 0.4); }
.text-glow-lime { text-shadow: 0 0 10px rgba(204, 255, 0, 0.4); }

Using Tokens

import { tactical } from '@/components/ui/tactical'
 
// Use in inline styles
style={{
  backgroundColor: tactical.bg.elevated,
  border: `1px solid ${tactical.border.default}`,
  borderRadius: tactical.radius.sm,
  color: tactical.text.primary,
}}

Migration Example

Before (Generic):

<div className="bg-gray-900 rounded-lg p-4">
  <h3 className="text-lg font-semibold">Findings</h3>
</div>

After (Tactical):

<div
  className="p-3"
  style={{
    backgroundColor: tactical.bg.elevated,
    border: `1px solid ${tactical.border.default}`,
    borderRadius: tactical.radius.sm,
  }}
>
  <TacticalHeader size="md" accent>FINDINGS</TacticalHeader>
</div>

API Reference