# 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, уведомления, хаптик - Уважать системную тёмную/светлую тему по умолчанию, разрешить ручное переключение - Адаптивные лейауты: телефон → планшет → десктоп, не просто масштабированные