Дизайн-система и темы¶
Synth выглядит одинаково цельно на любом экране: чат, панели, настройки, админка и экран входа собраны из одних и тех же элементов. За этим стоит дизайн-система — единый набор правил о цвете, поверхностях, типографике и состояниях. Тема меняет оттенки, но не ломает структуру и не ухудшает читаемость.
Что даёт дизайн-система
- Предсказуемость — похожие вещи выглядят и ведут себя одинаково.
- Читаемость — текст и элементы управления контрастны в любой теме.
- Гибкость — десятки готовых оформлений без потери целостности.
Из чего состоит дизайн-система¶
Пять ролей поверхностей¶
Интерфейс собран как несколько слоёв, которые «поднимаются» друг над другом. Каждая роль — это отдельный оттенок, и он согласован во всех темах.
| Роль | Что это | Где встречается |
|---|---|---|
| Фон | Самый дальний слой, основа всего | Рабочая область, пустые зоны |
| Панель | Отделяет крупные зоны друг от друга | Боковые панели, шапка, навигация |
| Карточка | Приподнятый блок внутри панели | Сообщения, поля, блоки настроек |
| Врезка (inset) | Утопленная область «внутри» карточки | Поля ввода, блоки кода, дорожки прогресса |
| Всплывающий слой | Лежит поверх всего остального | Меню, подсказки, поповеры, выпадающие списки |
Такая лестница «фон → панель → карточка → врезка → меню» даёт глазу понятный порядок: сразу видно, что находится глубже, а что — поверх. Под каждым слоем есть и затемняющая подложка для диалогов, чтобы модальные окна читались отчётливо.
Семантическая типографика¶
Размеры шрифта привязаны не к конкретным местам, а к смыслу текста. Поэтому заголовки, основной текст, код, подписи и служебные метки выглядят одинаково во всех разделах и темах:
| Роль | Назначение |
|---|---|
| Основной текст | Сообщения и описания (Markdown) |
| Код | Фрагменты кода и вывод команд |
| Заголовок панели | Названия секций и блоков |
| Подпись элемента | Названия полей и кнопок |
| Служебная метка | Счётчики, метаданные, пояснения |
| Микротекст | Самая мелкая подпись |
Смена темы не меняет размеры и ритм — только цвета.
Статусные цвета¶
Четыре смысловых цвета проходят через весь интерфейс и остаются узнаваемыми:
| Статус | Смысл | Пример |
|---|---|---|
| Успех | Всё хорошо | Завершённая операция, сохранение |
| Предупреждение | Требует внимания | Незавершённое действие, ограничение |
| Ошибка | Что-то пошло не так | Недоступный сервис, отклонённый запрос |
| Информация | Подсказка | Нейтральное уведомление, справка |
У каждого статуса есть свой цвет текста, фон и граница — плашки и уведомления остаются читаемыми.
Границы, фокус и выделение¶
- Границы мягко разделяют элементы и слегка усиливаются при наведении.
- Фокус-ринг — заметная рамка вокруг активного элемента при навигации с клавиатуры. Он есть у всех интерактивных элементов, чтобы интерфейсом было удобно пользоваться без мыши.
- Выделение текста и областей согласовано с акцентом темы.
Контраст и доступность¶
Дизайн-система рассчитана на длительную работу с текстом, поэтому контраст — не «на глаз», а проверяемое свойство:
- Текст соответствует WCAG AA — контраст обычного текста не ниже
общепринятого уровня доступности
4.5 : 1. - Поверхности различимы — соседние слои отличаются достаточно, чтобы их не приходилось угадывать; для этого используется цветовая разница (ΔE).
- Каждая тема проходит автоматическую проверку контраста. В набор попадают только темы, где текст, поверхности, статусные цвета и палитра прошли проверку. Если тема не проходит — в интерфейс она не попадает.
Почему это важно
Тема должна оставаться рабочей при ярком свете, в тёмной комнате и на слабом экране. Единая проверка гарантирует это для всех оформлений, а не только для темы по умолчанию.
Универсальная палитра из 16 цветов¶
Для сущностей, которым нужен цвет, есть единая палитра из 16 различимых оттенков. Она используется для иконок и цветов проектов и сессий, тегов и графиков. Цвета подобраны так, чтобы различаться между собой и оставаться видимыми на любом фоне.
| Цвет | Цвет | ||
|---|---|---|---|
| a1 | Красный | a9 | Бирюзовый |
| a2 | Лососевый | a10 | Голубой |
| a3 | Янтарный | a11 | Синий |
| a4 | Салатовый | a12 | Васильковый |
| a5 | Лаймовый | a13 | Фиолетовый |
| a6 | Светло-зелёный | a14 | Орхидея |
| a7 | Зелёный | a15 | Пурпурный |
| a8 | Мятный | a16 | Розовый |
Один и тот же набор оттенков приходит из каждой темы, поэтому цвет проекта остаётся узнаваемым при переключении оформления.
62 набора оформления¶
Synth поставляется с 62 наборами оформления: это 31 цветовая схема, у каждой — тёмный и светлый вариант. Такой запас покрывает разные вкусы и условия работы: от строгих нейтральных схем до ярких контрастных.
Все темы одним взглядом: 31 схема × светлый и тёмный вариант.
Собственные темы Synth¶
Четыре схемы разработаны специально для Synth:
-
Synthesis
Базовая тема платформы — тёплые нейтральные оттенки с оранжевым акцентом. Тема по умолчанию для тёмного и светлого режимов.
-
Arctic
Холодная сдержанная схема с чистыми светлыми и глубокими тёмными тонами.
-
Tundra
Приглушённая природная палитра — спокойная и не отвлекающая.
-
Blood Moon
Тёмная драматичная схема с тёплым багровым акцентом.
Экран входа в теме Arctic (тёмный вариант).
Темы на основе открытых схем¶
Остальные схемы вдохновлены известными открытыми оформлениями редакторов и терминалов. Узнаваемые сочетания адаптированы под дизайн-систему Synth и доступны в двух вариантах:
| Схема | Откуда знакомо |
|---|---|
| Dracula | Классическая тёмная схема с фиолетовым и розовым |
| Nord | Холодная северная палитра |
| Tokyo Night | Ночной городской неон |
| Gruvbox | Тёплая ретро-палитра |
| Catppuccin | Мягкие пастельные тона |
| Solarized | Проверенная временем схема с точной цветовой логикой |
| One Dark | Строгая тёмная схема популярного редактора |
| GitHub | Знакомые тона платформы |
| Kanagawa | Японская гравюра: глубокие приглушённые тона |
| Everforest | Природные зелёные оттенки |
| Rose Pine | Мягкая романтичная палитра |
| Night Owl | Ночная схема для тех, кто работает допоздна |
Полный список схем — на матрице выше и в разделе Настройки → Внешний вид.
Как переключить тему¶
- Откройте Настройки → Внешний вид.
- Выберите режим темы: «Системная», «Светлая» или «Тёмная».
- Выберите тему из списка схем — у каждой доступны светлый и тёмный вариант.
Переключение происходит мгновенно, настройка сохраняется за пользователем. По умолчанию используется тёмная Synthesis.
Светлый вариант интерфейса.
Дизайн-ассеты¶
Токены, палитры и исходники оформлений Synth опубликованы в открытом репозитории: