Armen Rohalov
2a62415f0c
ui_design v2: tactical-ops redesign of all 5 pages Two parallel takes on visual polish for flights, annotations, dataset explorer, admin, and settings. - v2/plugin/ — self-contained HTML produced via the frontend-design plugin, adheres to v2/plugin/_design_system.md.. - v2/stitch/ — Google Stitch MCP exports against the same design system. IA from the original wireframes in _docs/ui_design/ is preserved verbatim — this pass is visual only.
3.9 KiB
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. 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 |
| Annotations | plugin/annotations.html |
| Dataset Explorer | plugin/dataset_explorer.html |
| Admin | plugin/admin.html |
| Settings | 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.12emletter-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 |
| Annotations | stitch/annotations.html |
| Dataset Explorer | stitch/dataset_explorer.html |
| Admin | stitch/admin.html |
| Settings | 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.mdsays "left sidebar 250px + main + right sidebar 200px," v2 keeps that.