126 lines
5.8 KiB
Markdown
126 lines
5.8 KiB
Markdown
# Hermes Hub — UI Design System & Design Tokens
|
||
|
||
Этот документ регламентирует структуру дизайн-токенов, поведение UI-компонентов и правила верстки нативного Windows-приложения Hermes Hub.
|
||
|
||
---
|
||
|
||
## 1. Токены цветовой палитры (Color Tokens)
|
||
|
||
```python
|
||
# Базовые цвета
|
||
COLOR_PRIMARY = "#0F1510" # Глубокий темный фон окна
|
||
COLOR_DARK = "#1A2A1F" # Фон боковой панели и модальных окон
|
||
COLOR_SECONDARY = "#2F4A36" # Карточки и рабочие поверхности
|
||
COLOR_LIGHT = "#F7F1E3" # Основной цвет текста (Warm Ivory)
|
||
COLOR_ACCENT = "#CDAA64" # Фирменное античное золото
|
||
|
||
# Семантические токены поверхностей
|
||
TOKEN_BG = "#0F1510"
|
||
TOKEN_BG_SIDEBAR = "#142018"
|
||
TOKEN_SURFACE = "#1D3123"
|
||
TOKEN_SURFACE_HOVER = "#274230"
|
||
TOKEN_SURFACE_ACTIVE= "#31543D"
|
||
TOKEN_BORDER = "#2F4A36"
|
||
TOKEN_BORDER_SUBTLE = "#1F3526"
|
||
TOKEN_BORDER_ACCENT = "#CDAA64"
|
||
|
||
# Семантические токены текста
|
||
TOKEN_TEXT_PRIMARY = "#F7F1E3"
|
||
TOKEN_TEXT_SECONDARY = "#C5BEAF"
|
||
TOKEN_TEXT_MUTED = "#7D8F81"
|
||
TOKEN_TEXT_ON_ACCENT = "#0F1510"
|
||
|
||
# Акцентные токены
|
||
TOKEN_ACCENT = "#CDAA64"
|
||
TOKEN_ACCENT_HOVER = "#DCBE7D"
|
||
TOKEN_ACCENT_PRESSED = "#BA954E"
|
||
TOKEN_ACCENT_DIM = "#3D3522"
|
||
|
||
# Статусные токены
|
||
TOKEN_SUCCESS = "#2E7D32" # Healthy
|
||
TOKEN_WARNING = "#D97706" # Quota Warning / Cooldown
|
||
TOKEN_ERROR = "#DC2626" # Dead / Error / Quota Exhausted
|
||
TOKEN_INFO = "#2563EB" # Info / Neutral
|
||
TOKEN_AUTH_REQUIRED = "#D97706" # Auth needed
|
||
TOKEN_DISABLED = "#5A6B5D" # Disabled
|
||
TOKEN_MAIN_BADGE = "#CDAA64" # Main profile
|
||
TOKEN_ORCH_BADGE = "#E5C158" # Orchestrator badge
|
||
```
|
||
|
||
---
|
||
|
||
## 2. Шкалы отступов, радиусов и размеров (Spacing & Layout Scales)
|
||
|
||
### 2.1. Отступы (Spacing Scale)
|
||
- `space_xs` = 4 px
|
||
- `space_sm` = 8 px
|
||
- `space_md` = 12 px
|
||
- `space_lg` = 16 px
|
||
- `space_xl` = 24 px
|
||
- `space_2xl` = 32 px
|
||
|
||
### 2.2. Радиусы скругления (Corner Radius Scale)
|
||
- `radius_sm` = 6 px (кнопки, бейджи, поля ввода)
|
||
- `radius_md` = 10 px (карточки, модальные фреймы)
|
||
- `radius_lg` = 14 px (главные панели, карточки метрик)
|
||
- `radius_full` = 999 px (круглые индикаторы, аватары)
|
||
|
||
### 2.3. Высоты элементов управления (Control Heights)
|
||
- `height_btn_sm` = 28 px
|
||
- `height_btn_md` = 36 px
|
||
- `height_btn_lg` = 44 px
|
||
- `height_nav_item` = 42 px
|
||
- `height_header` = 56 px
|
||
- `height_statusbar` = 28 px
|
||
- `width_sidebar` = 220 px
|
||
|
||
---
|
||
|
||
## 3. Библиотека компонентов (Component Specifications)
|
||
|
||
### 3.1. `HubButton`
|
||
Варианты:
|
||
1. **Primary**: Фон `TOKEN_ACCENT`, текст `TOKEN_TEXT_ON_ACCENT` (Bold), Hover: `TOKEN_ACCENT_HOVER`. Используется для главных действий («+ Добавить аккаунт», «Сохранить»).
|
||
2. **Secondary**: Фон `TOKEN_SURFACE`, рамка `TOKEN_BORDER`, текст `TOKEN_TEXT_PRIMARY`, Hover: `TOKEN_SURFACE_HOVER`. Используется для второстепенных действий («Тест», «Сделать основным»).
|
||
3. **Ghost**: Фон `transparent`, текст `TOKEN_TEXT_PRIMARY`, Hover: `TOKEN_SURFACE`. Используется для навигации и тулбаров.
|
||
4. **Danger**: Фон `#4A1E1E`, рамка `#7A2E2E`, текст `#FFB0B0`, Hover: `#6A2828`. Для необратимых действий («Удалить аккаунт», «Сброс»).
|
||
|
||
### 3.2. `HubCard`
|
||
- Фон: `TOKEN_SURFACE` (`#1D3123`)
|
||
- Рамка: 1 px `TOKEN_BORDER` (`#2F4A36`)
|
||
- Скругление: `radius_md` (10 px)
|
||
- Padding: 12–16 px
|
||
- Состояние hover: подсветка рамки или легкое осветление фона `TOKEN_SURFACE_HOVER`.
|
||
|
||
### 3.3. `HubStatusBadge`
|
||
- Компактный бейдж с цветной точкой-индикатором и подписью:
|
||
- 🟢 Здоровый (`#2E7D32`)
|
||
- 🟡 Quota Warning / Cooldown (`#D97706`)
|
||
- 🔴 Ошибка / Quota Exhausted (`#DC2626`)
|
||
- 🔑 Требуется вход (`#D97706`)
|
||
- ⭐ MAIN (`#CDAA64`)
|
||
|
||
### 3.4. `HubMetricCard`
|
||
- Верх: маленькая иконка + заголовок метрики (`TOKEN_TEXT_MUTED`)
|
||
- Центр: крупное значение (24–28pt Bold, `TOKEN_TEXT_PRIMARY` или `TOKEN_ACCENT`)
|
||
- Низ: пояснительный статус или прогресс
|
||
|
||
### 3.5. `HubSidebar`
|
||
- Фиксированная ширина 220 px
|
||
- Верх: брендинг Hermes Hub (знак + название)
|
||
- Навигация: 9 разделов с line icons и золотым индикатором активного элемента:
|
||
1. Главная (`dashboard`)
|
||
2. Команда Hermes (`team`)
|
||
3. Аккаунты (`accounts`)
|
||
4. Провайдеры (`providers`)
|
||
5. Маршрутизация (`routing`)
|
||
6. Состояние системы (`health`)
|
||
7. Журнал (`logs`)
|
||
8. Настройки (`settings`)
|
||
9. О программе (`about`)
|
||
- Низ: кнопка «🔄 Обновить данные»
|
||
|
||
### 3.6. `HubModal` & Диалоги
|
||
- Затемняющий фон
|
||
- Центральная карточка с акцентной рамкой `TOKEN_ACCENT` (1 px)
|
||
- Понятный человеческий язык для действий: «Добавить аккаунт», «Автоматическое распределение ролей», «Подтверждение действия».
|