# Azaion Tactical Ops — Design System (Plugin Version)
Shared aesthetic spec for every page in `_docs/ui_design/v2/plugin/`. **Every page must adhere to this contract.** If a page deviates from a token here, that's a bug.
## Aesthetic
Defense / mission-control console. Dense, technical, deliberate. Think air-traffic-control + military HUD + Bloomberg Terminal — never gamer-RGB, never consumer-glossy.
## Palette (dark only, no light mode)
```
--surface-0: #0A0D10 /* page bg */
--surface-1: #13171C /* panels, sidebars */
--surface-2: #1A1F26 /* raised rows, hover */
--surface-input: #0A0D10 /* input fill, sits darker than the panel containing it */
--border-hair: #252B34 /* 1px borders, used everywhere */
--border-raised: #3B4451 /* used for active/focus 2px */
--text-primary: #E8ECF1
--text-secondary: #9AA4B2
--text-muted: #5B6573
--accent-amber: #FF9D3D /* primary / brand / warnings */
--accent-cyan: #36D6C5 /* live data, friendly */
--accent-red: #FF4756 /* hostile, destructive, GPS-denied */
--accent-green: #3DDC84 /* validated, connected, ready */
--accent-blue: #4E9EFF /* info, edited */
```
Class colors (used in detection-class swatches) stay as-is from README.md (`#FF0000`, `#00FF00`, `#0000FF`, `#FFFF00`, `#FF00FF`, `#00FFFF` etc.) — those are domain data, not theme.
## Typography
- Headline / display / micro-labels / numerics → **JetBrains Mono** (Google Fonts)
- Body / general UI text → **IBM Plex Sans** (Google Fonts)
- ALL-CAPS micro-labels: `font: 10px/1.4 'JetBrains Mono'; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary)`
- Numerics: always `font-variant-numeric: tabular-nums`
- Body default: `13px/1.5 'IBM Plex Sans'`, primary color
- Page section heading: `11px` mono, uppercase, amber color
Include the Google Fonts links in each ``:
```html
```
## Form language
- 1px hairline borders everywhere; corners square or `border-radius: 2px` / `4px` max — never `rounded-full` outside of status dots and avatar.
- Active panel borders use 2px in amber (`--accent-amber`) or cyan.
- **Corner brackets** — the signature element. Frame *every* major panel/card with four 8px L-shaped brackets, drawn as two 1px lines per corner in amber (or in the panel-active color). Use this CSS helper:
```css
.bracket { position: relative; }
.bracket::before, .bracket::after,
.bracket > .br::before, .bracket > .br::after {
content: ''; position: absolute; width: 8px; height: 8px;
border-color: var(--accent-amber); border-style: solid; border-width: 0;
}
.bracket::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.bracket::after { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; }
.bracket > .br::before { bottom: -1px; left: -1px; border-bottom-width: 1px; border-left-width: 1px; }
.bracket > .br::after { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
```
then `…
`.
- Subtle background grid (60px × 60px, 3% white) on map/canvas surfaces:
```css
background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 60px 60px;
```
- Status pills: leading 6px dot + UPPERCASE 10px mono label, 1px border in status color, transparent fill, 2px radius.
```html
VALIDATED
```
- Live indicator: 6px dot in cyan or red, with `animation: pulse 1.6s ease-in-out infinite`.
## Spacing
- Base 4px.
- Panel padding: 16px.
- Form gap: 12px between fields.
- Tight list row height: 28px (sidebars), 32px (tables).
- Header bar height: 48px.
## Components
**Buttons**
- Primary: `bg: amber; color: #0A0D10; border: 1px solid amber; padding: 6px 14px; font: 11px mono; letter-spacing: 0.08em; text-transform: uppercase`
- Secondary: `bg: transparent; color: amber; border: 1px solid amber` (with hover → fill at 12% opacity)
- Ghost: same as secondary but `border: 1px solid var(--border-hair); color: var(--text-secondary)`
- Danger: red variant of primary
- Icon button: 28×28, ghost styling
**Inputs**
- `bg: var(--surface-input); border: 1px solid var(--border-hair); border-radius: 2px; padding: 6px 10px; height: 32px; font: 12px 'IBM Plex Sans'; color: var(--text-primary)`
- Focus: `border-color: var(--accent-amber); box-shadow: 0 0 0 1px var(--accent-amber)`
- Placeholder: `var(--text-muted)`
**Tables**
- No zebra stripes. Row separator = 1px hairline. Header row: 10px mono uppercase, secondary text. Hover row → `var(--surface-2)`.
## Global header
```
[AZAION mark] [FLIGHT SELECTOR ▾] | FLIGHTS / ANNOTATIONS / DATASET / ADMIN [user@x.com] [⚙] [⏻]
```
- Logo: amber, JetBrains Mono Bold, `tracking: 0.2em`, `font-size: 14px`.
- Flight selector: 28px-tall pill with mono flight id + ▾ icon, 1px amber border, surface-1 fill.
- Tab nav: each tab is a flat label with 2px bottom border in amber when active, no top-rounding, 12px sans.
- Header bottom: 1px hairline.
## Mobile bottom nav (optional, only if implementing responsive)
Hide tab nav at `< 768px` and show a 56px fixed bottom bar with 5 icon+label items.
## Don't
- No purple gradients. No glassmorphism. No drop shadows over 4px blur.
- No emoji used as functional UI. (Decorative readouts may use the bracket characters `⌐ ¬ ⌜ ⌝ ⌞ ⌟`.)
- No rounded-full anywhere except status dots and avatar circle.
- Don't change the IA / panel arrangement defined in `../../README.md` — this pass is visual polish only.