azaion/ui
1
0
Fork 0
mirror of https://github.com/azaion/ui.git synced 2026-06-21 08:21:11 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
dev
ui/_docs/ui_design/v2/plugin/_design_system.md
T
Armen Rohalov 2a62415f0c 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.
2026-05-16 20:09:16 +03:00

5.9 KiB
Raw Permalink Blame History

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>:

<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:
.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:
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.

    <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 View Git Blame Copy Permalink