Розробка світлої теми (Light Mode) мобільного застосунку
Light mode — базова тема більшості мобільних застосунків. Але «світла тема» не означає «просто білий фон з темним текстом». Це продумана кольорова система з семантичними токенами, яка коректно працює при різному освітленні, на OLED та LCD екранах, та не розвалюється при додаванні майбутнього dark mode.
Кольорова система: токени замість значень
Типова помилка на початку проекту — використовувати конкретні HEX-значення прямо в компонентах. Працює спочатку, але при першому редизайні або додаванні темної теми перетворюється на nightmre: 200 місць з #F5F5F5, які потрібно знайти та замінити.
Правильний підхід — семантичні токени з самого початку:
-
background.primary— основний фон екранів -
background.secondary— фон карточок, sidebar -
surface.default— поверхня компонентів -
text.primary,text.secondary,text.disabled -
accent.default,accent.pressed,accent.disabled -
border.default,border.focused
На iOS реалізується через UIColor named colors в Asset Catalog (Color Set з одним Light варіантом зараз, Dark пізніше). У SwiftUI — через Color("backgroundPrimary") або кастомний extension Color. На Android — Material Design 3 ColorScheme через MaterialTheme. Flutter — ThemeData з повним ColorScheme.
Типографика та spacing
Типографічна шкала — частина light theme. Не просто «розмір шрифту», а повна специфікація: font family, size, weight, line height, letter spacing для кожного текстового стилю. Мінімальний набір:
- Display / Large Title
- Headline
- Body, Body Small
- Caption, Overline
На iOS шрифтова шкала може будуватися на UIFont.preferredFont(forTextStyle:) — це Dynamic Type, який автоматично масштабується під користувацькі налаштування доступності. Ігнорувати Dynamic Type — означає зламати застосунок для людей з порушенням зору та отримати потенційний reject від Apple.
Контраст та доступність (Accessibility)
WCAG AA: 4.5:1 для тексту до 18pt, 3:1 для крупного тексту та UI-елементів. Це мінімум. Для продуктів з широкою аудиторією прагнемо до AAA там, де це можливо без ущербу для дизайну.
Інструменти перевірки: Figma плагін A11y - Color Contrast Checker, Xcode Accessibility Inspector, Android Accessibility Scanner. Перевіряємо не тільки основний текст, але й placeholder-текст у полях (часто грішить низьким контрастом), disabled стани.
Тені та elevation
У light mode тені — основний спосіб показати ієрархію шарів. Material Design 3 використовує elevation + shadowColor. iOS UIKit — layer.shadowOffset, shadowRadius, shadowOpacity. Помилка: одинакова тень для всіх компонентів. Правило: 3–4 рівні теней, від subtle (карточка в списку) до prominent (modal, bottom sheet).
Строк — 1–3 дні залежно від обсягу застосунку та наявності готової дизайн-системи. Вартість розраховується індивідуально.