Design System // Tactical Command Interface

Brand Kit

Visual reference for the Tactical Command Interface. Tokens defined in src/app/layout.css.

0pxRadius — everywhere

RIGHTAccent line — always right

TONALDepth — surface shifts, no shadows

Palette

Website

Primary--color-primary

Text--color-text

Text Muted--color-text-muted

Ghost--color-ghost

Status

Success--color-success

Warning--color-warning

Danger--color-danger

Factions

Bugs--color-faction-bugs

Bugs Fill--color-faction-bugs-fill

Cyborgs--color-faction-cyborgs

Cyborgs Fill--color-faction-cyborgs-fill

Illuminate--color-faction-illuminate

Illum. Fill--color-faction-illuminate-fill

Surfaces

Tonal layering — depth via surface shifts, no shadows.

0 — surface-0

1 — surface-1

2 — surface-2

3 — surface-3

4 — surface-4

Typography

Current Campaign

--text-h1: clamp(1.5rem, 1rem + 2vw, 2.5rem)

Current Defend Events

--text-h2: clamp(1.125rem, 0.9rem + 1.2vw, 1.75rem)

Global Stats

--text-h3: clamp(0.875rem, 0.75rem + 0.5vw, 1.125rem)

Bugs is active: 584/1000 (58.4%) current players: 332--text-body: clamp(0.875rem, 0.8rem + 0.35vw, 1rem)

Finished 10 hours, 43 minutes ago--text-small: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem)

DisplayInsignia / Space Grotesk

BodyInter / Arial / Helvetica

MonoSpace Mono

Spacing

--space-14px

--space-26.4px

--space-38px

--space-412px

--space-616px

--space-824px

--space-1036px

--space-1248px

Components

Data Cards

4px right-side accent. Grid layout for swappable variants.

CAMPAIGN_STATUS // LIVE

332

Helldivers Online

DEFEND_EVENT // ACTIVE

584 / 1,000

Defending on Bugs — Due in 12:34:56

SEASON_STATS // BUGS

69.1B

Missions completed

Alert

Active Defend Event

Defending on Bugs: 584/1,000 (58.40%) — Ahead by 42 points. Due in 12:34:56.

Progress

584 / 1,000 (58.40%)