Foundations Style Guide

A disciplined, high-contrast operations-room theme: near-black canvas, graphite working surfaces, thin metallic rules, the selected theme color for action and emphasis, and signal colors used only when they carry meaning. Geometry stays mostly square with restrained corner rounding.

Friendly Name

Theme 01 — Operations Room

GUID

8a17b3e1-0101-4d24-9a71-000000000101Copy GUID

Use in

Every Public Route

--ta-canvas: #0d0e10; --ta-panel: #151618; --ta-panel-raised: #1b1c1f; --theme-accent: current theme color;

These are the approved foundation colors. The selected theme color marks action and emphasis; green means online or successful only. Normal titles and prose use the documented light-gray hierarchy, with white reserved for inverse or selected states.

Friendly Name

Color 01 — Core Palette

GUID

8a17b3e1-0102-4d24-9a71-000000000102Copy GUID

Use in

Every Public Route

--theme-accent: current theme color; --ta-signal-green: #61bf7d; --ta-canvas: #0d0e10; --ta-panel: #151618; --ta-title: #d7d9dd; --ta-copy-primary: #c6c8cd; --ta-copy-secondary: #b5b7bc; --ta-copy-muted: #92949a;

The default palette uses a nearly black canvas, purple-black panels, violet rules, soft lavender copy, and electric purple actions. It is intentionally a complete environment—not one accent pasted onto another theme.

Friendly Name

Theme 02 — Black & Purple

GUID

8a17b3e1-0110-4d24-9a71-000000000110Copy GUID

Use in

Every Public, War Room, and Administration Route

--theme-canvas: #030305; --theme-surface: #100e16; --theme-surface-raised: #171320; --theme-rule: #3a2b4a; --theme-accent: #8f4bd6; --theme-text: #f5f2fa;

A forest-black operations palette with deep green panels, mineral-green rules, clean pale copy, and tactical green actions.

Friendly Name

Theme 03 — Field Green

GUID

8a17b3e1-0112-4d24-9a71-000000000112Copy GUID

Use in

Every Public, War Room, and Administration Route

--theme-canvas: #040907; --theme-surface: #0d1713; --theme-surface-raised: #14241c; --theme-rule: #28493b; --theme-accent: #168a55; --theme-text: #f0f7f3;

A black-rose interface with restrained berry panels, muted rose rules, soft pale copy, and vivid pink actions.

Friendly Name

Theme 04 — Signal Pink

GUID

8a17b3e1-0113-4d24-9a71-000000000113Copy GUID

Use in

Every Public, War Room, and Administration Route

--theme-canvas: #090407; --theme-surface: #180e14; --theme-surface-raised: #25151f; --theme-rule: #4a2b3b; --theme-accent: #d13f82; --theme-text: #faf1f6;

A deep navy intelligence palette with blue-black panels, steel-blue rules, cool pale copy, and electric blue actions.

Friendly Name

Theme 05 — Midnight Blue

GUID

8a17b3e1-0114-4d24-9a71-000000000114Copy GUID

Use in

Every Public, War Room, and Administration Route

--theme-canvas: #03070c; --theme-surface: #0b141e; --theme-surface-raised: #122030; --theme-rule: #29445f; --theme-accent: #2d7fca; --theme-text: #f1f6fb;

The shared toolbar picker changes the complete interface immediately, stores the choice for future visits, and applies it before the page is shown so the previous theme does not flash.

Friendly Name

Control 01 — Theme Switcher

GUID

8a17b3e1-0111-4d24-9a71-000000000111Copy GUID

Use in

Public Header, Mobile Menu, Administration Toolbar

<ThemeControl /> /* data-theme is set on the html element and persisted as targetedarmy_theme. */

Spacing follows a four-pixel base with an eight-point working rhythm. Prefer the named tokens instead of new one-off values.

Friendly Name

Space 01 — Eight-Point Rhythm

GUID

8a17b3e1-0107-4d24-9a71-000000000107Copy GUID

Use in

Every Layout and Component

--ta-space-1: 4px; --ta-space-2: 8px; --ta-space-3: 12px; --ta-space-4: 16px; --ta-space-6: 24px; --ta-space-8: 32px; --ta-space-12: 48px; --ta-space-16: 64px;

Primary containers use a crisp down-right offset shadow, not a soft floating card shadow. Theme-accent echo shadows are subtle and optional. Overlays use a soft deep shadow because they must separate from the page.

Friendly Name

Shadow 01 — Hard Offset

GUID

8a17b3e1-0108-4d24-9a71-000000000108Copy GUID

Use in

Panels, Cards, Menus, Modals

--ta-shadow-offset: 8px 9px 0 rgba(0,0,0,.28); /* optional theme echo */ box-shadow: 8px 9px 0 rgba(0,0,0,.28), -3px -3px 0 rgb(from var(--theme-accent) r g b / .1); /* overlay */ box-shadow: 0 24px 75px rgba(0,0,0,.58);

Use the shared 24×24 line icon family. Standard stroke is 1.55–1.8, with round joins. Icons support labels; they do not replace clear text for unfamiliar actions.

Friendly Name

Icon 01 — Standard Line

GUID

8a17b3e1-0109-4d24-9a71-000000000109Copy GUID

Use in

Headers, Tool Cards, Navigation, Action Rows

svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }