Material Design 2: цвета и типографика — создаём палитру для русскоязычных интерфейсов

Статья 2 из 6 серии «Material Design 2: полный гид»

В первой статье мы разобрались с философией Material Design 2 и поняли, почему система работает. Теперь переходим к практике: создаём цветовую палитру и типографическую систему, которые будут отлично работать с кириллицей и российскими брендами.

Сегодня вы получите готовые инструменты для создания собственной цветовой системы и узнаете, какие шрифты лучше всего подходят для русскоязычных интерфейсов на основе Material Design 2.

Цветовая система Material Design 2: от хаоса к порядку

Проблема «произвольных цветов»

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

Material Design 2 предлагает ролевую цветовую систему, где каждый цвет выполняет конкретную функцию, а не просто «выглядит красиво».

Архитектура цветовой системы MD2

Базовые роли цветов:

🎯 Primary (основной)

• Главный цвет бренда

• Используется для ключевых действий: основные кнопки, активные элементы навигации, прогресс-бары

• Примеры: кнопка «Отправить», выделенная вкладка, плавающая кнопка действия

🎨 Secondary (дополнительный)

• Акцентный цвет для второстепенных действий

• Переключатели, чекбоксы, ссылки в тексте, индикаторы уведомлений

• Должен контрастировать с Primary, но не конкурировать с ним

⚫ Surface и Background (поверхности)

• Surface — фон карточек, диалогов, меню

• Background — основной фон приложения

• Обычно белый/светло-серый в светлой теме, тёмно-серый в тёмной

🚨 Error (ошибки)

• Индикация ошибок валидации, предупреждений, критических действий

• Обязательно должен пройти тест на доступность (контраст 4.5:1 минимум)

📝 On-цвета (текст поверх)

• On-Primary — цвет текста на primary кнопках (обычно белый)

• On-Surface — основной цвет текста (обычно чёрный или тёмно-серый)

• On-Background — цвет текста на фоне приложения

Система elevation: визуальная глубина через тени

ссылка на инструмент:  The color system - Material Design

Каждый основной цвет представлен в 10 градациях:

1. Primary/50

2. Primary/100

3. Primary/200

4. Primary/300

5. Primary/400

6. Primary/500

7. Primary/600

8. Primary/700

9. Primary/800

10. Primary/900

Зачем столько оттенков?

• Primary/500 — основные кнопки и ключевые действия

• Primary/700 — кнопки при нажатии (pressed state)

• Primary/100 — фон при наведении (hover state)

• Primary/50 — едва заметная подсветка активных областей

• Primary/300 — цвет второстепенного текста и иконок

• Primary/900 — высококонтрастные элементы на светлом фоне

Реальная структура цветовых ролей

Как видно из официальной схемы Material Design, система включает:

Основные роли:

• Primary — главный брендовый цвет со всеми тонами

• Secondary — акцентный цвет, дополняет Primary

• Tertiary — третичный цвет для особых акцентов

• Error — красный для ошибок и критических состояний

Поверхностные роли:

• Surface Dim — приглушённые поверхности

• Surface — стандартные карточки и панели

• Surface Bright — яркие поверхности

• Surface Container — контейнеры с содержимым

On-роли для каждой поверхности:

• On Primary — текст на primary кнопках

• On Secondary — текст на secondary элементах

• On Surface — основной текст интерфейса

• On Error — текст на error элементах

Эта система обеспечивает полную совместимость всех цветовых комбинаций и гарантирует читаемость текста на любом фоне.

Создание цветовых стилей

Для текста:

1. text/primary — основной текст

2. text/secondary — второстепенный текст

3. text/disabled — неактивный текст

4. text/inverse — текст на тёмном фоне

5. text/link — ссылки

6. text/error — текст ошибок

Для фонов:

1. surface/primary — основной фон

2. surface/secondary — фон карточек

3. surface/elevated — приподнятые элементы

4. background/default — фон приложения

5. background/overlay — затемнение

Для действий:

1. action/primary — главные кнопки

2. action/secondary — второстепенные кнопки

3. action/disabled — неактивные кнопки

4. action/destructive — опасные действия

5. border/default — обычные границы

6. border/focus — фокус элементов

Почему именно так?

1. text/primary понятнее чем colors/gray/900

2. heading/lg проще чем typography/headline/large/24px

3. action/primary лучше чем button/blue/500

Светлая и тёмная темы: не просто инверсия

Светлая тема: классический подход

Основные принципы светлой темы:

• Background: #FFFFFF или #F5F5F5 (чистый белый или едва заметный серый)

• Surface: #FFFFFF (карточки на белом фоне)

• Primary: ваш брендовый цвет в полную силу

• Тени: чёткие, контрастные для создания elevation

Пример палитры для приложения:

Primary: #1976D2 (деловой синий)

Secondary: #FFC107 (золотой для акцентов)

Surface: #FFFFFF

Background: #F5F5F5

On-Primary: #FFFFFF

On-Surface: #212121

Тёмная тема: особенности и нюансы

❌ Частая ошибка: просто инвертировать цвета светлой темы.

✅ Правильный подход в MD2:

• Background: #121212 (не чёрный, а тёмно-серый)

• Surface: #1E1E1E и выше (разные уровни серого для elevation)

• Primary: более приглушённый, чем в светлой теме

• Текст: Приглушаем, для заголовков #E1E1E1, для основного текста #C4C4C4

• Тени: заменяются светлыми наложениями

Почему #121212, а не #000000?

• Чёрный слишком контрастный, утомляет глаза

• Серый позволяет лучше различать elevation через наложения

• Лучше совместимость с OLED-экранами

Обязательно проверяем все комбинации на соответствие WCAG 2.0:

• Обычный текст: минимум 4.5:1

• Крупный текст (20pt+): минимум 3:1

• Иконки и важные элементы: минимум 3:1

Культурные особенности восприятия цвета в России

🔴 Красный в России:

• Ассоциируется с предупреждением, опасностью, критическими действиями, скидками

• Если не про быстрые продажи, то избегаем красного для основных CTA-кнопок

• Хорошо работает для Error-состояний

💙 Синий — универсальный выбор:

• Нейтральный, деловой, внушает доверие

• Отлично подходит для Primary в корпоративных продуктах

• Хорошо читается на кириллице

💚 Зелёный — «разрешение»:

• Успех, завершение, одобрение

• Идеально для подтверждающих действий

• Популярен в финтехе и healthtech

Типографическая система: иерархия для кириллицы

Проблема «случайных размеров»

До системного подхода дизайнеры выбирали размеры шрифтов интуитивно: «18px для заголовка выглядит нормально», «Сделаем кнопки 15px». Результат — интерфейсы без визуальной иерархии, где пользователь не понимает, что важнее.

Типичные проблемы:

• В одном проекте 12 разных размеров шрифта

• Заголовки разделов одинакового уровня имеют разные размеры

• Кнопки в разных частях интерфейса не согласованы

• Отсутствует логика масштабирования между размерами

Material Design 2 решает это через типографическую шкалу — математически выверенную систему размеров, где каждый уровень имеет чёткую роль и назначение.

Объяснение единиц измерения:

• SP (Scale-independent Pixels) — только для Android, масштабируется с пользовательскими настройками шрифта

• PX (Pixels) — веб, Figma, универсально

• PT (Points) — iOS (1pt = 1px на стандартных дисплеях)

• REM — веб (относительно корневого элемента)

Правильная структура типографических ролей:

📢 Display — самые крупные заголовки

• Display Large: 57px — герои на лендингах, крупные баннеры

• Display Medium: 45px — главные заголовки секций

• Display Small: 36px — заголовки страниц, основные h1

🎯 Headline — заголовки контента

• Headline Large: 32px — заголовки статей, крупные карточки

• Headline Medium: 28px — заголовки секций внутри страниц

• Headline Small: 24px — подзаголовки, h3 элементы

📰 Title — заголовки компонентов

• Title Large: 22px — заголовки модальных окон, крупных форм

• Title Medium: 16px — заголовки карточек, списков

• Title Small: 14px — заголовки мелких компонентов

📝 Body — основной текст

• Body Large: 16px — главный текст для чтения, описания

• Body Medium: 14px — дополнительный текст, подписи

• Body Small: 12px — мелкие пояснения, footnotes

🏷️ Label — интерактивные элементы

• Label Large: 14px Medium — текст кнопок, активные элементы

• Label Medium: 12px Medium — чипы, вкладки, теги

• Label Small: 11px Medium — мини-кнопки, бейджи

Проблемы адаптации западной типографики

Кириллица занимает больше места:

• Русские слова в среднем на 15-30% длиннее английских

• Заглавные буквы выше (Ш, Щ, Ж)

• Строчные буквы имеют выносные элементы (д, р, ф, ц)

Адаптация под кириллицу: детальный разбор

Проблемы Roboto с русским текстом:

1. Сжатость символов Русские буквы Ж, Ш, Щ выглядят узкими Строчные буквы д, ц, щ плохо читаются в мелких размерах. Общая плотность текста выше, чем у латиницы

2. Недостаточная высота строк. Выносные элементы (д, р, ф) требуют больше пространства. Заглавные буквы (Ё, Й) с диакритическими знаками

3. Межбуквенные расстояния Letter-spacing, оптимальный для латиницы, слишком велик для кириллицы

Рекомендации по выбору базового шрифта:

Используйте Roboto, если:

• Дизайн плотный, место критично

• Приложение в экосистеме Google

• Пользователи привыкли к Android-интерфейсам

Используйте Noto Sans, если:

• Много текстового контента для чтения

• Целевая аудитория 35+ (лучше читаемость)

• Качество типографики важнее экономии места

Альтернативы для брендинга:

• Inter — современный, хорошо работает с кириллицей

• Manrope — дружелюбный, подходит для B2C продуктов

• IBM Plex Sans — корпоративный, серьёзный

Тестирование на реальном контенте:

Всегда проверяйте типографику на русском тексте разной сложности:

• Короткие слова: «Да», «Нет», «ОК» — для кнопок

• Средние фразы: «Войти в аккаунт», «Добавить в корзину» — для действий

• Длинные предложения: «Ваш заказ будет доставлен в течение 2-3 рабочих дней» — для описаний

• Сложные термины: «Конфиденциальность», «Администрирование» — для меню

Проверяем подобранный шрифт на читаемость

Пишешь lI11О0 (маленькая L, большая i, 11, большая о и 0) если символы неразличимы, шрифт не подходит для интерфейсов и текста

Лайфхак проверки шрифта

Создание типографических стилей

Заголовки:

1. heading/xl — 32px, крупные заголовки

2. heading/lg — 24px, заголовки секций

3. heading/md — 20px, заголовки карточек

4. heading/sm — 16px, мелкие заголовки

Основной текст:

1. body/lg — 16px, главный текст

2. body/md — 14px, обычный текст

3. body/sm — 12px, мелкий текст

Интерфейс:

1. label/lg — 14px Medium, кнопки

2. label/md — 12px Medium, теги

3. caption/default — 11px, подписи

Частые ошибки и их решения

Ошибки с цветом

❌ Ошибка 1: Использование чистого чёрного в тёмной теме

Background: #000000 ←** Плохо**

✅ Решение:

Background: #121212 ←** Хорошо**

❌ Ошибка 2: Недостаточный контраст для мелкого текста

Caption (12px) на Primary/300 ← Не читается

✅ Решение:

Caption (12px) на Primary/700 ← Контрастно

❌ Ошибка 3: Одинаковые цвета для Primary и Secondary

Primary: #2196F3 Secondary: #1976D2 ← Слишком похож

✅ Решение:

Primary: #2196F3 Secondary: #FF9800 ← Контрастный

Ошибки с типографикой

❌ Ошибка 1: Слишком маленький line-height для кириллицы

Body text: 16px/20px ← Буквы склеиваются

✅ Решение:

Body text: 16px/24px ← Комфортно читать

❌ Ошибка 2: Неправильный letter-spacing для русского

Button: 0.1em letter-spacing ← Слишком разреженно

✅ Решение:

Button: 0.05em letter-spacing ← В самый раз

Инструменты и ресурсы

Генераторы палитр

• Material Theme Builder — официальный инструмент Google

• Coolors.co — быстрая генерация палитр с проверкой доступности

• Adobe Color — создание гармоничных цветовых схем

Проверка доступности

• WebAIM Contrast Checker — точная проверка контрастности

• Colour Contrast Analyser — десктопное приложение

• Stark — плагин для Figma

• A11y - Color Contrast Checker - плагин для Figma

• Color contrast - плагин для Figma

Шрифты и типографика

• Google Fonts — Roboto, Noto Sans, Inter и другие

• TypeScale — генератор типографических шкал

• Modular Scale — расчёт гармоничных пропорций

Figma Community ресурсы

🎨 Material Design 2 Kit (Официальный)

• Полная библиотека официальных компонентов MD2

• Готовые цветовые стили и переменные

• Обновляется командой Google

🌐 Material Design 2 Web Starter Kit

• Упрощённая библиотека для веб-проектов

• Поддержка тёмной темы

• Простая структура слоёв

Чек-лист создания палитры:

✅ Primary цвет прошёл тест контрастности 4.5:1
✅ Secondary не конкурирует с Primary
✅ Создана тональная палитра 50-900
✅ Настроена тёмная тема с правильными поверхностями
✅ Протестированы все текстовые комбинации
✅ Line-height увеличен для кириллицы на 10-20%
✅ Letter-spacing скорректирован под русский язык
✅ Проверена читаемость на реальном контенте
✅ Настроены Variables в Figma для переключения тем
✅ Созданы Text Styles с правильной иерархией

Чек-лист cоздания стилей типографики

✅ Все стили названы по системе Typography/Role/Size
✅ Line-height увеличен для кириллицы на 15-25%
✅ Letter-spacing скорректирован для русского текста
✅ Протестировано на реальных названиях товаров
✅ Веса шрифтов соответствуют ролям (Regular/Medium)
✅ Размеры соответствуют шкале Material Design 2
✅ Создана документация с примерами использования

Заключение и следующий шаг

Мы разобрали основу любой дизайн-системы — цвета и типографику, адаптированные под российские реалии. У вас есть чёткий алгоритм создания палитры, понимание нюансов тёмных тем и знание того, как правильно работать с кириллицей в Material Design 2.

В следующей статье: «Сетки и пространство в Material Design 2» — разберемся с правильной системой отступов, которые отлично работают на всех устройствах от смартфонов до ультра-широких мониторов.

🔗 Источники и ссылки:

• Material Design Color System (Official)

• WCAG 2.0 Contrast Requirements

• Material UI Palette Documentation

• Google Fonts: Roboto

• Google Fonts: Noto Sans

• WebAIM Contrast Checker

• Figma Community: Material Design Resources

📌 Добавьте в закладки и следите за выходом следующих статей серии!