hermes-hub/docs/brand/UI_DESIGN_SYSTEM.md

Hermes Hub — UI Design System & Design Tokens

Этот документ регламентирует структуру дизайн-токенов, поведение UI-компонентов и правила верстки нативного Windows-приложения Hermes Hub.

---

1. Токены цветовой палитры (Color Tokens)

# Базовые цвета
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)
• Понятный человеческий язык для действий: «Добавить аккаунт», «Автоматическое распределение ролей», «Подтверждение действия».