Разработка светлой темы (Light Mode) сайта
Светлая тема — базовый режим большинства веб-продуктов. Не потому что она «лучше» тёмной, а потому что исторически вся веб-типографика и большинство UX-конвенций выстроены под светлый фон. Контрастность, читаемость, восприятие иерархии — всё это проще обеспечить на белой поверхности, если подходить системно.
Цветовая архитектура светлой темы
Хорошая светлая тема — не просто «белый фон и синие кнопки». Она строится на нескольких уровнях поверхностей:
-
Background:
#FFFFFFили off-white (#FAFAFA,#F9FAFB) — основная поверхность страницы -
Surface: слегка отличается от фона — для карточек, панелей (
#F3F4F6) -
Surface raised: для компонентов над основным контентом — dropdown, tooltip (
#FFFFFFс тенью) - Surface overlay: для modal, drawer — с полупрозрачным overlay поверх
Многие дизайнеры ставят везде #FFFFFF и получают плоский интерфейс без иерархии. Разница в 4–8 значений серого создаёт глубину без теней.
Типографическая шкала
Для светлой темы иерархия текста строится через:
-
Цвет: primary text
#111827, secondary#6B7280, disabled#9CA3AF - Размер: H1 40–56px, H2 32–40px, H3 24–28px, Body 16px, Small 14px, Caption 12px
- Weight: Regular 400 для body, Medium 500 для label, Semibold 600 для H3-H4, Bold 700 для H1-H2
Никогда не используйте чистый чёрный #000000 для основного текста на белом фоне — слишком высокий контраст вызывает усталость при длительном чтении. #111827 или #1F2937 — оптимальный вариант.
Акцентные цвета и состояния
Для кнопок, ссылок и интерактивных элементов нужна шкала состояний:
| Состояние | Background | Text |
|---|---|---|
| Default | #2563EB (blue-600) |
#FFFFFF |
| Hover | #1D4ED8 (blue-700) |
#FFFFFF |
| Active/Pressed | #1E40AF (blue-800) |
#FFFFFF |
| Disabled | #BFDBFE (blue-200) |
#93C5FD |
| Focus | default + ring 2px #93C5FD |
— |
Семантические цвета:
- Success: green-600 / green-50 (фон badge)
- Warning: amber-600 / amber-50
- Error: red-600 / red-50
- Info: blue-600 / blue-50
Тени в светлой теме
Тени — основной инструмент для elevation в светлой теме (в отличие от тёмной, где elevation передаётся цветом поверхности):
-
Shadow-sm:
0 1px 2px rgba(0,0,0,0.05)— subtle, для карточек -
Shadow-md:
0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06)— dropdown, tooltip -
Shadow-lg:
0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05)— modal, popover -
Shadow-xl:
0 20px 25px rgba(0,0,0,0.1)— floating panels
Реалистичные тени — две слоя: ближняя (меньше радиуса, выше непрозрачность) и дальняя (больше радиуса, ниже непрозрачность). Это следует физике рассеивания света.
Если это часть dual-theme проекта
Если параллельно разрабатывается и тёмная тема — светлая проектируется через токены с самого начала. Каждый цвет — это CSS Custom Property или Figma Variable, не хардкодированное значение в компоненте. Это позволяет переключить тему одним классом на <html> без изменения компонентов.
Сроки
Разработка светлой темы как часть дизайн-системы — входит в базовый объём дизайна. Как отдельная задача (стандартизация существующего продукта, создание системных токенов) — 3–6 дней: аудит существующих цветов, создание токенов, проверка контрастности, обновление компонентов.