Для оформления интерфейсов мы используем заранее настроенные текстовые и цветовые стили.
1) Текстовые стили именуются по следующей схеме:
Тип / Назначение / Размер (например: Heading/H1/32px). Это позволяет быстро ориентироваться в иерархии заголовков и текстовых блоков.
2) Цветовые стили оформлены с использованием иерархического именования: Цвет / Градация (например: Blue/500).
Каждому цвету соответствует набор градаций (рис.6):
- 50–100 — светлые;
- 200–400 — средние;
- 500 — основной;
- 600–900 — тёмные;
- 950 — насыщенный.