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

Primary--color-primary

Danger--color-danger

On Primary--color-on-primary

Text--color-text

Text Muted--color-text-muted

Outline--color-outline

Outline Var--color-outline-variant

Ghost--color-ghost

Surfaces

0--color-surface-0

1--color-surface-1

2--color-surface-2

3--color-surface-3

4--color-surface-4

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

Typography

Current Campaign

clamp(1.5rem, 1rem + 2vw, 2.5rem)

Current Defend Events

clamp(1.25rem, 0.9rem + 1.5vw, 1.875rem)

Global Stats

clamp(1.125rem, 0.9rem + 1vw, 1.5rem)

Helldivers Discord

clamp(1rem, 0.9rem + 0.5vw, 1.25rem)

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

Finished 10 hours, 43 minutes agoclamp(0.75rem, 0.7rem + 0.25vw, 0.875rem)

Display

Insignia / Space Grotesk

Body

Insignia / Inter / Arial

Mono

Space 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%)