morpheus/docs/ru/design-system.md

# Morpheus — Дизайн-система

## Философия дизайна

### «Ощущается живым, никогда — тяжёлым.»

Morpheus должен ощущаться как самое быстрое приложение на телефоне. Вдохновлено скоростью Telegram,
визуальной отполированностью нативных приложений iOS и характером Discord — но с собственной
идентичностью. Не корпоративный. Не андеграунд. Живой.

## Визуальная идентичность

### Название и символ

- **Morpheus** — пробуждающий, тот кто предлагает выбор
- Символ: абстрактный глаз или форма пилюли — узнаваемость без объяснений
- Символ должен работать в размере 16x16 фавикон и на билборде

### Цветовая система

#### Основная палитра

```plaintext
Morpheus Violet    #7C3AED   — Основной цвет бренда, CTA, активные состояния
Electric Indigo    #4F46E5   — Вторичный, ссылки, интерактивные элементы
```

#### Нейтральная палитра

```plaintext
Void               #09090B   — Самый тёмный фон (тёмная тема)
Charcoal           #18181B   — Фон карточек (тёмная тема)
Slate              #27272A   — Границы, разделители (тёмная тема)
Mist               #A1A1AA   — Вторичный текст
Cloud              #F4F4F5   — Фон карточек (светлая тема)
Snow               #FAFAFA   — Самый светлый фон (светлая тема)
Pure               #FFFFFF   — Текст на тёмном, карточки на светлом
```

#### Акцентная палитра (семантическая)

```plaintext
Pulse Green        #10B981   — Успех, онлайн, отправлено
Flame Orange       #F59E0B   — Предупреждение, ожидание
Signal Red         #EF4444   — Ошибка, деструктивные действия
Ice Blue           #06B6D4   — Информация, ссылки в контексте
```

#### Градиент

```plaintext
Градиент Morpheus: #7C3AED → #4F46E5 → #06B6D4
Применение: экраны онбординга, премиум-бейджи, только «героические» моменты
Никогда на тексте body. Никогда на фонах с текстом поверх.
```

### Тёмная тема — по умолчанию

- Тёмная тема по умолчанию. Светлая полностью поддерживается, но вторична.
- Обоснование: целевая аудитория предпочитает тёмную. Тёмная тема экономит батарею OLED.
- Тёмные фоны используют шкалу Void/Charcoal, никогда чистый #000000 для карточек.

## Типографика

### Набор шрифтов

```plaintext
Основной:     Inter (текст интерфейса, body)
Моноширинный: JetBrains Mono (ключи, коды, техническая информация)
Дисплейный:   Manrope или Unbounded (заголовки, маркетинг, hero-текст)
```

### Шкала типографики

```plaintext
Display XL:  36px / 40px межстрочный  — Только hero-текст
Display:     30px / 36px              — Заголовки страниц
Heading 1:   24px / 32px              — Заголовки секций
Heading 2:   20px / 28px              — Заголовки карточек
Body:        16px / 24px              — Стандартный читаемый текст
Body Small:  14px / 20px              — Вторичная информация, время
Caption:     12px / 16px              — Лейблы, бейджи, метаданные
```

### Использование жирности

```text
Regular (400):    Текст body, описания
Medium (500):     Лейблы UI, навигация, кнопки
Semibold (600):   Заголовки, акценты
Bold (700):       Дисплейный текст, только hero-моменты
```

## Отступы и сетка

### Шкала отступов (база 4px)

```text
xs:    4px     — Внутренние отступы inline, зазоры иконок
sm:    8px     — Тесная группировка
md:    12px    — Стандартный внутренний отступ
lg:    16px    — Отступ карточек, зазоры секций
xl:    24px    — Между секциями
2xl:   32px    — Отступы на уровне страницы
3xl:   48px    — Крупные разрывы секций
```

### Радиусы скругления

```text
sm:    6px     — Кнопки, инпуты, мелкие карточки
md:    10px    — Карточки, диалоги
lg:    16px    — Крупные карточки, модалы
xl:    24px    — Аватары (скруглённый квадрат), карточки фич
full:  9999px  — Пиллы, теги, круглые аватары
```

### Сетка

- Mobile-first. Одна колонка по умолчанию.
- Максимальная ширина контента: 640px для лент (читаемость).
- Десктоп: центрированная колонка контента с контекстными сайдбарами.
- Никакого бесконечного горизонтального скролла. Вертикальный — нативный.

## Компоненты

### Кнопки

```text
Primary:     Morpheus Violet фон, белый текст, радиус 6px, medium вес
             Hover: слегка светлее. Active: слегка темнее.
Secondary:   Прозрачный фон, фиолетовый текст, граница 1px фиолетовая
             Hover: заливка violet/10
Ghost:       Прозрачный фон, mist текст, без границы
             Hover: заливка slate
Destructive: Signal Red фон, белый текст (требуется подтверждение)

Размер:      По умолчанию 40px высота, компактный 32px, большой 48px
             Минимальная зона касания: всегда 44x44px
```

### Карточки

```text
Тёмная тема:  Charcoal фон, граница 1px Slate, радиус md
Светлая тема: Pure фон, граница 1px Cloud, радиус md
Возвышение:   Тень только при hover (никогда в покое)
Отступ:       lg (16px)
```

### Поля ввода

```text
Высота:      44px (удобно для касания)
Граница:     1px Slate, фокус → 2px Morpheus Violet
Фон:         Void (тёмная) / Snow (светлая)
Placeholder: цвет Mist
Ошибка:      граница Signal Red + текст подсказки ниже
```

### Аватары

```text
Размеры:     24px (inline), 32px (список), 40px (по умолчанию), 64px (профиль), 96px (hero)
Форма:       Скруглённый квадрат (радиус xl) — отличает от других платформ
Фолбэк:     Генерируемый градиент из хеша публичного ключа (каждый пользователь уникален)
Точка онлайн: Pulse Green, справа внизу, 25% от размера аватара
```

### Навигация

```text
Мобильная:   Нижняя панель вкладок, максимум 5 элементов. Хаптик при касании.
             Активная вкладка: иконка Morpheus Violet + лейбл
             Неактивная: иконка Mist, без лейбла
Десктоп:     Левый сайдбар, сворачиваемый. Иконки + лейблы.
Переходы:    Горизонтальный слайд между вкладками, вертикальный внутри лент
```

## Анимация и движение

### Принципы

- **Целенаправленная**: каждая анимация что-то сообщает (смена состояния, пространственная связь)
- **Быстрая**: стандартная длительность 150-200мс. Никогда не превышать 300мс для переходов UI.
- **Прерываемая**: ввод пользователя немедленно отменяет любую текущую анимацию
- **Никакой декоративной анимации**: без плавающих частиц, пульсирующих логотипов, фоновых эффектов

### Стандартные кривые

```text
ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1)    — Элементы входят
ease-in:     cubic-bezier(0.4, 0.0, 1, 1)       — Элементы выходят
ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1)     — Элементы трансформируются
spring:      spring(1, 80, 10)                    — Игривые взаимодействия (реакции, лайки)
```

### Ключевые анимации

```text
Переход страницы: Горизонтальный слайд, 200мс ease-out
Модал:            Scale от 0.95 + fade, 150мс ease-out
Тост/снэкбар:     Слайд снизу вверх, 200мс ease-out, автоисчезновение 3с
Pull to refresh:   Нативное ощущение, кастомный индикатор с символом Morpheus
Отправка сообщения: Слайд вверх + лёгкий scale, spring easing
Реакция:          Pop + взрыв частиц, spring easing (один из немногих «весёлых» моментов)
Скелетон загрузки: Шиммер-градиент, цикл 1.5с (только при реальной загрузке)
```

## Иконографика

### Стиль

- Outlined стиль (не filled) для навигации и UI — обводка 1.5px
- Filled стиль для активных/выбранных состояний
- Базовый размер 24x24, оптически скорректирован для каждой иконки
- Единообразные метафоры: не смешивать material/feather/custom в одном виде

### Нужны кастомные иконки

- Индикатор статуса реле
- Иконка ключа/идентичности (не буквальный ключ — слишком крипто-бро)
- Индикатор шифрования (тонкий, не замок — нормализация, не тревога)
- Morpheus-специфичные действия (напр. «zap» для чаевых при использовании Lightning)

## Тон голоса (UI-тексты)

### Принципы тона

- **Разговорный, но не детский** — «Привет», не «Приветствуем вас, уважаемый пользователь»
- **Прямой** — «Отправить», не «Подтвердить отправку сообщения»
- **Уверенный** — «Ваши сообщения зашифрованы», не «Мы стараемся защитить...»
- **Двуязычный** — UI должен работать на русском и английском с первого дня
- **Без корпоративного языка** — «Что-то пошло не так», не «Произошла непредвиденная ошибка»

### Примеры

```text
Пустое состояние: «Тут пока никого. Будь первым.» (не «Контент отсутствует»)
Ошибка:           «Не удалось подключиться. Нажми, чтобы повторить.» (не «Ошибка сети 503»)
Онбординг:        «Этот ключ — это ты. Сохрани его в надёжном месте.» (не «Создайте резервную копию ключевой пары»)
Деструктивное:    «Удалить навсегда?» (не «Вы уверены, что хотите удалить?»)
```

## Доступность

- Минимальный коэффициент контрастности: 4.5:1 для текста body, 3:1 для крупного текста
- Все интерактивные элементы: минимальная зона касания 44x44px
- Метки screen reader для всех иконок и нетекстовых элементов
- Поддержка Reduce Motion: отключение всей необязательной анимации
- Масштабирование шрифта: поддержка системных настроек размера шрифта (до 200%)
- Информация не передаётся только цветом (всегда дублировать иконкой или текстом)

## Целевые платформы

### Приоритет

1. **Мобильные (iOS + Android)** — React Native или Flutter, нативное ощущение обязательно
2. **Веб (PWA)** — Полный паритет функций, устанавливаемый
3. **Десктоп** — Electron или Tauri обёртка веба, или нативный при наличии ресурсов

### Адаптация к платформам

- Следовать соглашениям платформы для паттернов навигации (iOS свайп назад, Android кнопка назад)
- Нативные share sheets, уведомления, хаптик
- Уважать системную тёмную/светлую тему по умолчанию, разрешить ручное переключение
- Адаптивные лейауты: телефон → планшет → десктоп, не просто масштабированные