mirror of
https://github.com/azaion/ui.git
synced 2026-06-21 12:51:11 +00:00
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.
86 lines
3.9 KiB
Markdown
86 lines
3.9 KiB
Markdown
# 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.
|