mirror of
https://github.com/azaion/ui.git
synced 2026-06-21 09:21:10 +00:00
ui_design v2: redesign of all 5 pages
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
@@ -0,0 +1,133 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user