azaion/ui
1
0
Fork 0
mirror of https://github.com/azaion/ui.git synced 2026-06-21 09:41:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

ui_design v2: redesign of all 5 pages

Browse Source 
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.
This commit is contained in:
Armen Rohalov
2026-05-16 20:09:16 +03:00
parent 401f43d845
commit 2a62415f0c
13 changed files with 6145 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_docs/ui_design/v2/README.md
+85
View File
@@ -0,0 +1,85 @@
# 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.