# 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 `<head>`:

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
```

## 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 `<div class="bracket panel">…<span class="br"></span></div>`.

- 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
  <span class="pill pill-green"><span class="dot"></span>VALIDATED</span>
  ```

- 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.
