Розробка світлої теми (Light Mode) сайту
Світла тема — базовий режим більшості веб-продуктів. Не тому що вона «краще» темної, а тому що історично вся веб-типографіка й більшість UX-конвенцій вистроєні під світлий фон. Контрастність, читабельність, сприйняття ієрархії — все це легше забезпечити на білій поверхні, якщо підходити системно.
Кольорова архітектура світлої теми
Хорошa світла тема — не просто «білий фон і сині кнопки». Вона будується на кількох рівнях поверхонь:
-
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, не hardcoded значення у компоненті. Це дозволяє перемкнути тему одним класом на <html> без змін компонентів.
Терміни
Розробка світлої теми як частина дизайн-системи — входить до базового обсягу дизайну. Як окрема задача (стандартизація існуючого продукту, створення системних токенів) — 3–6 днів: аудит існуючих кольорів, створення токенів, перевірка контрастності, оновлення компонентів.