Mood & theme · 1990s–present
Tactical HUD
Black and amber precision: the spare, information-dense heads-up display of military and tactical equipment, where every pixel serves situational awareness.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 16 tokens
- --bg
oklch(5% 0 0) - --fg
oklch(82% 0.1 75) - --muted
oklch(52% 0.07 72) - --surface
oklch(9% 0.01 68) - --surface-2
oklch(14% 0.015 68) - --border
oklch(28% 0.05 70) - --accent
oklch(76% 0.14 72) - --accent-fg
oklch(5% 0 0) - --focus
oklch(76% 0.14 72)
| Token | Value |
|---|---|
| --font-body | 'Courier New', 'Courier', ui-monospace, monospace |
| --font-display | 'Courier New', 'Courier', ui-monospace, monospace |
| --font-mono | 'Courier New', ui-monospace, monospace |
| --radius | 0px |
| --radius-sm | 0px |
| --shadow | 0 0 12px oklch(76% 0.14 72 / 0.1) |
| --shadow-lg | 0 8px 32px oklch(76% 0.14 72 / 0.15) |
:root {
--bg: oklch(5% 0 0);
--fg: oklch(82% 0.1 75);
--muted: oklch(52% 0.07 72);
--surface: oklch(9% 0.01 68);
--surface-2: oklch(14% 0.015 68);
--border: oklch(28% 0.05 70);
--accent: oklch(76% 0.14 72);
--accent-fg: oklch(5% 0 0);
--focus: oklch(76% 0.14 72);
--font-body: 'Courier New', 'Courier', ui-monospace, monospace;
--font-display: 'Courier New', 'Courier', ui-monospace, monospace;
--font-mono: 'Courier New', ui-monospace, monospace;
--radius: 0px;
--radius-sm: 0px;
--shadow: 0 0 12px oklch(76% 0.14 72 / 0.1);
--shadow-lg: 0 8px 32px oklch(76% 0.14 72 / 0.15);
}Where it came from
Origin: Military heads-up display design; first-person shooter UI; special operations aesthetics
Aircraft and military vehicle HUDs evolved their visual language around the constraints of bright ambient light, rapid eye movement, and life-critical information hierarchy. First-person shooter games absorbed and dramatised this language in the 1990s, and from there it spread to gaming peripherals, security product interfaces, and anything wanting to signal serious operational focus. The palette is almost always black background with amber, green, or red glows.
How to spot it
- Pure black or near-black background
- Amber, military green, or red text and UI elements
- Bracket and targeting reticle decorative motifs
- Monospace typeface with tabular number alignment
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Extremely high contrast in dark environments | Very narrow emotional register — alienating outside tactical contexts |
| Communicates operational seriousness and precision | Amber-on-black can tire eyes in long sessions |
| Works well for data-dense security or monitoring interfaces | Decorative HUD elements add complexity without function |
In the wild
- Military and law-enforcement training simulation UI
- FPS and tactical game heads-up displays
- Security operations centre and infrastructure monitoring dashboards
Use it when
The product is a monitoring, security, or operations tool used in focused, high-stakes contexts.