morpheus/docs/ru/design-system.md

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Градиент

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

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

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

Типографика

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

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

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

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              — Лейблы, бейджи, метаданные

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

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

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

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

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

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

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

Сетка

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

Компоненты

Кнопки

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

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

Карточки

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

Поля ввода

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

Аватары

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

Навигация

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

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

Принципы

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

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

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)                    — Игривые взаимодействия (реакции, лайки)

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

Переход страницы: Горизонтальный слайд, 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 должен работать на русском и английском с первого дня
• Без корпоративного языка — «Что-то пошло не так», не «Произошла непредвиденная ошибка»

Примеры

Пустое состояние: «Тут пока никого. Будь первым.» (не «Контент отсутствует»)
Ошибка:           «Не удалось подключиться. Нажми, чтобы повторить.» (не «Ошибка сети 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, уведомления, хаптик
• Уважать системную тёмную/светлую тему по умолчанию, разрешить ручное переключение
• Адаптивные лейауты: телефон → планшет → десктоп, не просто масштабированные