Дизайн на темной теме — токены и принципы (без Next/SSR)

Темная тема сайт — не инверсия белого, а отдельная система визуального языка. У темной темы свои роли цвета, глубины и света, и если их не учитывать, интерфейс превращается в «серую кашу», утомляет глаза и теряет читабельность. В продуктах с долгим временем сессии (панели мониторинга, IDE, редакторы) грамотный dark mode снижает усталость и удерживает внимание.

Дизайн dark mode строится на токенах: не конкретные HEX, а семантические переменные «surface/overlay/border/brand/success/warning» плюс уровни высоты. Токены отделяют смысл от представления: можно масштабно менять палитру, не переписывая компоненты. Для каждого слоя задаем не абсолютный черный, а «почти черный» (например, #0A0A0A–#121212) — это снижает блики и «ореолы» текста.

Контраст в темной теме — не только 4.5:1 для текста. На темном фоне насыщенные цвета выглядят ярче, а светлые — холоднее. Значит, брендовые акценты нужно приглушать (уменьшать насыщенность/яркость), а нейтральные серые — настроить по шагам так, чтобы были видны различимые градации: disabled, secondary, default, emphasis. Помните про цветовые слабовидения: не кодируйте критичные состояния только цветом — используйте и форму/иконку/подпись.

Глубина, слои и тени

На темном фоне тени почти не видны, поэтому глубину создают полупрозрачные оверлеи, мягкие бордеры и подсветки. Не злоупотребляйте «светящимися» тенями — они быстро превращают интерфейс в «киберпанк» и утомляют. Наведение и фокус — через изменение яркости/бордера/подложки, а не «синим свечением по умолчанию».

Типографика и ритм

На темном фоне одинаковый кег «кажется» крупнее. Слегка уменьшайте кег и увеличивайте межстрочные расстояния. Белый (#FFF) для текста — слишком резкий: используйте off-white (например, rgba(255,255,255,0.92)) и правильные оттенки серого для вторичного текста. Ссылки должны отличаться не только цветом, но и стилем (подчеркивание/иконка). Активные элементы обязаны иметь ясные состояния фокуса.

Изображения, иллюстрации, графики

На темной теме пересоберите палитру графиков: слишком близкие тона сливаются. Гистограммы и линии требуют большего контраста, сетка — более мягкая, подписи — светлее фона, но не белые. Иллюстрации в SVG лучше красить токенами и поддерживать «две палитры». Фотографии с белыми подложками окружайте бордером или мягкой тенью, чтобы не «выжигали» глаз.

Доступность и системные настройки

Поддерживайте системные предпочтения: prefers-color-scheme: dark. Уважайте prefers-reduced-motion — не все пользователи комфортно воспринимают анимацию на темном фоне. Фокус-стили должны быть явными и не зависеть от цвета.

Анти-паттерны dark mode

Абсолютный #000 с белым текстом — выгорание контраста и «ореолы».
Случайные серые без шкалы — невозможность отличить состояния.
Тени вместо слоев — «грязная» глубина и артефакты.
Акценты как «неон» — внимание уходит от контента к свечению.

Итог: когда темная тема сайт реализована через токены и проверена на контраст, дизайн dark mode остается строгим и читабельным, а контраст в темной теме удерживает фокус на контенте. Стоимость и сроки зависят от объема дизайн-системы — уточняйте по контактам на сайте.

Архитектура процесса

Мы работаем итерациями: исследование и цели → дизайн-система с токенами/гайдами → прототипы → сборка и оптимизация → контроль качества (доступность/скорость/устойчивость) → релиз и измерение эффектов. Каждое решение связано с конкретной метрикой.

Критерии качества

Читаемость и контраст на ключевых экранах.
Предсказуемость поведения компонентов и состояний.
Отсутствие когнитционного шума: один экран — одна задача.
Скорость и стабильность: нет «прыжков» верстки, быстрый отклик.
Доступность: фокус, клавиатура, альтернативы, корректные роли.

Что мы не делаем

Не используем эффекты ради эффектов, не прячем важные условия и не ставим визуал выше смысла. Стоимость и сроки рассчитываются индивидуально — уточняйте по контактам на сайте.