# VNOX Client — Design System

> Based on Hi-Fi Minimalism v2.0
> Adapted for: native desktop voice/chat client (Rust + egui + wgpu)

---

## Philosophy

VNOX UI должен ощущаться как инструмент, а не социальная сеть.

```
calm · focused · fast · warm · precise
```

Не:
```
gamer RGB · Discord clone · neon cyberpunk · glassmorphism · corporate SaaS
```

> The client is infrastructure. The UI is just the control surface.

---

## Color Tokens

```css
/* Backgrounds — layered, never pure black */
--bg-base:        #0d0d0d;   /* root, titlebar */
--bg-surface:     #151515;   /* panels, sidebars  (was #111111 — lifted for panel contrast) */
--bg-elevated:    #1d1d1d;   /* inputs, cards     (was #141414 — lifted for depth) */
--bg-interactive: #2a2a2a;   /* hover targets, dropdowns */

/* Borders — lifted significantly for visual hierarchy */
--border-subtle:  #1c1c1c;   /* was #171717 */
--border-default: #262626;   /* was #1e1e1e — now actually visible */
--border-strong:  #2e2e2e;
--border-accent:  rgba(255, 107, 53, 0.20);

/* Accent — warm orange */
--accent:         #ff6b35;
--accent-hover:   #ff844f;
--accent-active:  #e85d04;
--accent-10:      rgba(255, 107, 53, 0.08);
--accent-20:      rgba(255, 107, 53, 0.15);

/* Text — warm, never pure white */
--text-primary:   #f4c89a;   /* main content (added) */
--text-secondary: #c88b5a;   /* names, labels */
--text-muted:     #8a6a52;   /* secondary info */
--text-dim:       #6a4a2a;   /* hints, timestamps */
--text-ghost:     #5a422c;   /* section labels, separators  (was #3d2e20 — lifted) */
--text-invisible: #443222;   /* near-invisible, decorative  (was #2d1e12 — lifted) */

/* Semantic */
--success:        #7cb87a;   /* online, connected, low latency */
--success-muted:  rgba(124, 184, 122, 0.10);
--warning:        #e6a230;   /* ping indicator, unread */
--warning-muted:  rgba(230, 162, 48, 0.10);
--error:          #d9604a;   /* muted mic (when needed), errors */
--error-muted:    rgba(217, 96, 74, 0.10);
--info:           #6a9ecf;   /* second user accent color */
--info-muted:     rgba(106, 158, 207, 0.10);
```

---

## Typography

Клиент использует **только monospace**. Это намеренно — усиливает ощущение инструмента.

```
Primary font: IBM Plex Mono
Fallback:     Fira Code, Geist Mono, monospace
```

### Scale (клиент-специфичный, компактный)

| Role | Size | Weight | Color |
|------|------|--------|-------|
| Section label | 10px | 400 | `--text-ghost` |
| Timestamp, ID | 9px | 400 | `--text-invisible` |
| Status, badge | 9px | 500 | semantic |
| Channel name | 12px | 400 | `--text-ghost` → `--text-secondary` |
| Message text | 11px | 400 | `--text-muted` |
| Username | 11px | 600 | varies per user |
| Node name | 13px | 600 | `--text-secondary` |
| Settings title | 13px | 600 | `--text-secondary` |
| Wordmark VNOX | 11px | 600 | letter-spacing: 0.2em |
| Panel title | 11px | 400 | `--text-secondary` |
| Dashboard heading | 14px | 600 | `--text-secondary` |

Letter spacing для section labels: `0.10–0.12em`, text-transform: uppercase.

---

## Layout

### Title bar (34px)

- Background: `--bg-strip` (`theme::BG_STRIP`); **без отдельной painter-linии** под всю ширину — переход «titlebar ↔ контент» только за счёт контраста `--bg-strip` vs `--bg-base`. Раньше 1px `hline` воспринимался как случайная полоска «под логотипом» из-за состыковки с левым rail.
- Сетка из **трёх равных колонок**:
  - **левая** — **`[ prefs ]`** + **`VNOX`** (wordmark `--text-primary`, слева направо после prefs);
  - **центр** — статус ноды: **`●`** + **`NODE: …`** (`OFFLINE` / `CONNECTING` / имя ноды), **по центру средней колонки** (= визуальный центр окна);
  - **правая** — **transport‑подсказка** справа: `transport: idle` · `transport: connecting…` · `transport: quic/v1`.
- Вход в настройки: **`[ prefs ]`** — явная консольная кнопка (без нестабильных Unicode‑иконок); при открытых настройках тот же текст, цвет **accent**. Дубль: кнопка **open prefs** в нижней левой колонке, **только пока offline**.
- Нативный заголовок ОС (**taskbar / список окон**) — короткий **`Vnox`**, чтобы не дублировать тот же wordmark **`VNOX`** внутри клиента.

### Структура окна

```
┌─────────────────────────────────────────────────────┐
│ [prefs] VNOX  │   ● NODE: OFFLINE    │ transport: idle │
│        (нет линии 1px на всю ширину под панелью)    │
├──────────────────────────────────────────────────────┤
│ rail    │ channels (208px)    │ main content        │
│ (52px)  │                     │                     │
│ SERVERS │ node / status       │ connect or chat      │
│  [AB]   │ channel sections    │                     │
│  [+]    │ ───────────────     │                     │
│         │ identity + voice UI │                     │
└─────────┴─────────────────────┴─────────────────────┘
```

### Node rail (bookmark strip, 52px)

Узкая колонка **закладок серверов** (не «Discord‑кругляши»):

- Ширина **52px**, фон `--bg-strip`, как верхний titlebar для визуальной связности.
- Заголовок колонки: **SERVERS** (8px, `--text-ghost`, центрируется по ширине rail).
- Плитки **30×30px**, скругление 5px, **строго центрируются** по горизонтали (без случайной короткой линии‑разделителя посередине — она давала эффект «криво» в узком rail).
- **Idle** (нет активной закладки): рамка 1px `--border-faint`, подпись `···` во внутреннем поле, tooltip объясняет «подключайся через Connect».
- **Активная нода**: 2 символа аббревиатуры, `--accent` левый акцент 2px внутри плитки, `--accent-10` фон.
- **«+»**: только одна вторичная плита внизу; tooltip — «bookmark позже».

### Node switcher (legacy note)

Исторически описывался как 40px rail с линией перед `+`; в текущем клиенте заменено на блок **Node rail** выше.

### Channel list (208px)

- Node info (верх): имя ноды 12px semibold + `lnex://nc.<short_id>` 9px `--text-ghost` при коннекте; офлайн — одна строка **not connected**
- Section labels: 9px uppercase, `--text-ghost`, letter-spacing 0.12em
- Channel item: 4px 12px padding, gap 6px (icon + name)
  - Default: `--text-ghost`
  - Hover: `--text-dim` (без background)
  - Active: `--text-secondary` + левая полоска 2px `--accent` + `--accent-10` bg
- Voice users под каналом: indent 26px, 10px, `--success` для говорящих, `--text-ghost` для muted

### Bottom-left identity bar

```
[ open prefs ]     (только пока offline)

— voice ~ channel    00:42
  [x] microphone     [x] hear others

[YU] you
     a1b2…9f0e   (pubkey hex, middle-truncated)
```

- **Не показывать** фиктивный RTT (например «12ms»), если нет реального измерения.
- **Не дублировать** протокольную строку вида `LNEx v1 · udp` под ником — перегружает и налезает на аватар/текст; протокол раскрывается в Connect / docs.
- Настройки **не** прячем в ряд мелких иконок у ника: основной вход — **`[ prefs ]`** в title bar; офлайн — компактная кнопка **open prefs**.
- В голосе: чекбоксы **microphone** / **hear others** (без эмодзи/символов, которые на части шрифтов дают «квадратики»).
- Avatar: 32×32px, radius 6px, disabled button (только визуал), self — `--accent-10` + border.

### Main area

- Channel header: 36px, border-bottom `--border-subtle`
- Messages: padding 12px 14px, gap между группами 8px
- Input: `#general ›` prefix + cursor blink + hint text

---

## Components

### Toggle

```
Off: width 30px, height 16px, bg --bg-elevated, border --border-default
     thumb: 10px circle, bg #2d2d2d, left 2px

On:  bg --accent-10, border --border-accent
     thumb: bg --accent, left 16px, glow rgba(255,107,53,0.4)

Transition: 150ms ease
```

### Badge

```css
/* Protocol / transport */
.badge-lnex    { color: #ff844f; border: 1px solid rgba(255,107,53,0.2); bg: rgba(255,107,53,0.08) }
.badge-udp     { color: #6a9ecf; border: 1px solid rgba(106,158,207,0.2); bg: rgba(106,158,207,0.10) }
.badge-tcp     { color: #e6a230; border: 1px solid rgba(230,162,48,0.2); bg: rgba(230,162,48,0.10) }
.badge-enc     { color: #7cb87a; border: 1px solid rgba(124,184,122,0.2); bg: rgba(124,184,122,0.10) }

/* Размер: 9px, padding 1px 6px, border-radius 3px */
```

### Select / Input

```
bg: --bg-elevated (#111)
border: 1px solid --border-default
border-radius: 5px
font: 10px IBM Plex Mono
color: --text-muted

focus:
  border-color: --border-accent
```

### Slider

```
track: 2px height, --border-default
thumb: 10px circle, --accent, subtle glow

::-webkit-slider-thumb {
  background: var(--accent);
  box-shadow: 0 0 6px rgba(255, 107, 53, 0.3);
}
```

### User avatar

```
Size variants:
  sm  — 24×24px, border-radius 5px   (identity bar)
  md  — 26×26px, border-radius 6px   (member list)
  lg  — 36×36px, border-radius 8px   (identity card in settings)

Default:  bg --bg-elevated, border --border-default, color --text-muted
Self:     bg --accent-10, border --border-accent, color --accent
Other:    custom per-user, based on their seed color (--info, --text-secondary, etc.)
```

### System message / separator

```
font-size: 9–10px
color: --text-ghost
display: flex + ::before/::after lines in --border-subtle

Examples:
  ● connected · nightcore.lnex · LNEx v1
  — today —
```

---

## Active / Indicator Language

Везде используется одна и та же визуальная метафора для "активно":

```
Левая вертикальная полоска 2px --accent
+ subtle --accent-10 background
```

Это применяется к:
- активной ноде в switcher
- активному каналу в списке
- активному разделу в настройках

Не используется background без полоски, и не используется полоска без подсветки.

---

## Voice Indicators

```
Говорит:   dot 5px #7cb87a, box-shadow 0 0 6px rgba(124,184,122,0.45)
Muted:     icon ti-microphone-off, color --text-ghost
В канале:  dot или icon перед именем, indent 26px от иконки канала
```

В voice badge (активный call):
```
dot 5px --accent, box-shadow 0 0 6px rgba(255,107,53,0.5)
```

---

## Settings Layout

```
┌─────────────────────────────────────────────────────┐
│ titlebar — [prefs]* │ VNOX │ …                      │
│ открыть настройки: клик [prefs]; обратный маршрут   │
│ тот же, пока приложение показывает settings screen │
├──────────────────────────────────────────────────────┤
│ nav (160px)     │ content                            │
│                 │                                    │
│ account         │ [page title]                       │
│   identity      │ [subtitle]                         │
│                 │                                    │
│ audio           │ [group label] ──────────────────   │
│   voice ◄       │   row: label + control             │
│   output        │   row: label + control             │
│                 │                                    │
│ network         │ [group label] ──────────────────   │
│   network       │   ...                              │
│   overlay       │                                    │
│                 │                                    │
│ app             │                                    │
│   appearance    │                                    │
│   keybinds      │                                    │
│   plugins       │                                    │
│                 │                                    │
│ debug           │                                    │
│   advanced      │                                    │
└─────────────────┴────────────────────────────────────┘
```

- Nav width: 160px, bg `--bg-base`
- Section labels в nav: 9px uppercase, `--text-ghost`
- Nav item: 11px, default `--text-ghost`, hover `--text-dim`, active `--text-secondary` + левая полоска
- Content padding: 16px 20px
- Group label: 9px uppercase, `--text-ghost`, border-bottom `--border-subtle`, margin-bottom 8px
- Row: `display:flex; justify-content:space-between; align-items:center; padding:6px 0`
- Row separator: `border-top: 1px solid #0f0f0f` (почти невидимый, только ритм)

---

## Motion

```
duration-instant: 80ms   — toggle, dot
duration-fast:    120ms  — hover color change
duration-base:    150ms  — toggle thumb, panel transitions
duration-slow:    250ms  — page switch in settings

ease: cubic-bezier(0.0, 0.0, 0.2, 1)  — ease-out для всего
```

Никаких scale transforms на hover. Только:
- `color` transition
- `background` transition
- `border-color` transition
- `box-shadow` для glow (subtle)
- `left` для toggle thumb

---

## Anti-patterns (клиент-специфично)

| ❌ Не делать | ✅ Делать |
|-------------|---------|
| Отдельная 1px линия на всю ширину только под titlebar (стек с rail = «случайная полоска») | Отделение только контрастом `--bg-strip` / `--bg-base`; линии локально там, где группируешь контент |
| Круглые аватары | Квадратные с border-radius 5–8px |
| Sidebar с серверами как у Discord (72px, круглые) | Узкий rail **52px**, квадратные плитки **30×30**, аббревиатура, заголовок **SERVERS** |
| Панель участников справа как у Discord | Нет отдельной панели, участники — в боковом списке |
| Neon glow на элементах | Subtle glow max 0.18 opacity |
| Pure black backgrounds | Минимум #0a0a0a |
| Pure white text | Максимум #f4c89a |
| RGB accent | Один тёплый accent #ff6b35 |
| Rounded pill buttons everywhere | border-radius 4–6px, pill только для badge |
| Жирные разделители | 1px --border-subtle, почти невидимые |

---

## Noise Texture

Лёгкий шум поверх всего интерфейса — добавляет аналоговое ощущение.

```css
.root::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,..."); /* SVG feTurbulence */
  opacity: 0.025;  /* максимум 0.03, иначе грязно */
  pointer-events: none;
  z-index: 999;
}
```

В egui/wgpu: реализуется как overlay texture на финальном render pass.

---

## Seed Colors для пользователей

У каждого пользователя свой цвет ника, детерминированный от pubkey.

Палитра допустимых цветов (тёплая, совместимая с системой):

```
#c88b5a  — warm amber   (default / self)
#6a9ecf  — steel blue
#7cb87a  — warm green
#c49a6c  — sand
#b07cc6  — muted purple
#d4876a  — terracotta
```

Не используются: яркие/neon цвета, холодные синие, чистый белый/красный.