# Azaion UI – v2 Visual-Polish Redesign

Two parallel takes on the same brief: refresh the original wireframes in [_docs/ui_design/](../) without touching their information architecture. The originals stay as the source of truth for **what** each page contains; v2 explores **how** it could look.

## Aesthetic direction

**"Tactical Operations Console"** — defense-grade mission control, leaning on the visual language of air-traffic control consoles and Bloomberg-style trader terminals. Dense, technical, deliberate. The drone-annotation domain rewards this register more than the generic dark-SaaS look the originals defaulted to.

Shared design tokens (palette, typography, form language) are spelled out in [plugin/_design_system.md](plugin/_design_system.md). The Stitch project uses the same tokens in its design-system asset.

| Token | Value |
|-------|-------|
| Page bg | `#0A0D10` |
| Panels | `#13171C` |
| Raised | `#1A1F26` |
| Hairlines | `#252B34` |
| Amber accent | `#FF9D3D` |
| Cyan accent | `#36D6C5` |
| Red accent | `#FF4756` |
| Green accent | `#3DDC84` |
| Blue accent | `#4E9EFF` |
| Display / mono | JetBrains Mono |
| Body | IBM Plex Sans |

## Versions

### plugin/ — frontend-design plugin

Self-contained HTML, double-click to view. Tailwind via CDN + an inline `<style>` block per page for design tokens, fonts, and the corner-bracket utility. These are the version closest to the brief — every spec point in the design system is honored.

| Page | File |
|------|------|
| Flights | [plugin/flights.html](plugin/flights.html) |
| Annotations | [plugin/annotations.html](plugin/annotations.html) |
| Dataset Explorer | [plugin/dataset_explorer.html](plugin/dataset_explorer.html) |
| Admin | [plugin/admin.html](plugin/admin.html) |
| Settings | [plugin/settings.html](plugin/settings.html) |

Signature moves:
- Amber 8px **corner brackets** on every major panel — the through-line that ties the whole system together.
- ALL-CAPS mono micro-labels with `0.12em` letter-spacing.
- Tabular numerics everywhere; lat/lon/sat/port/frame-counts/percentages all align.
- Real inline-SVG NATO affiliation icons on the Annotations canvas (rectangle / diamond / quatrefoil) — not text glyphs.
- Annotation list rows carry per-row class-color gradient stripes.
- GPS-Denied mode flips the panel framing from amber to red 2px brackets + a pulsing "GPS-DENIED ACTIVE" badge.

### stitch/ — Google Stitch MCP

Generated through Google's Stitch design tool against the same design-system asset (project ID `15028193902086176686`, design system `assets/6747203704700882150`). These ship as wider full-page renders (2560 × 2048) and use Stitch's component vocabulary — useful as an alternate take to A/B against the plugin version.

| Page | File |
|------|------|
| Flights | [stitch/flights.html](stitch/flights.html) |
| Annotations | [stitch/annotations.html](stitch/annotations.html) |
| Dataset Explorer | [stitch/dataset_explorer.html](stitch/dataset_explorer.html) |
| Admin | [stitch/admin.html](stitch/admin.html) |
| Settings | [stitch/settings.html](stitch/settings.html) |

**Stitch project URL**: open `projects/15028193902086176686` inside the Stitch web UI to view, edit, or re-export.

## How to compare

```
# Originals
_docs/ui_design/flights.html
_docs/ui_design/annotations.html
...

# Plugin redesign
_docs/ui_design/v2/plugin/flights.html
_docs/ui_design/v2/plugin/annotations.html
...

# Stitch redesign
_docs/ui_design/v2/stitch/flights.html
...
```

Open the three side-by-side in a browser. The plugin version is the recommended baseline for adopting into the React app; the Stitch version is useful for client-facing concept presentations.

## What's NOT in scope

- No changes to React components in `src/`. These are static design references.
- No backend / API changes.
- No IA / interaction rework — only visual polish. If a page's layout in `README.md` says "left sidebar 250px + main + right sidebar 200px," v2 keeps that.