Атлас
Визуальное направление

Material Design

Material Design / Material You

Тональная схема из одного исходного цвета, крупные скругления, контейнеры, FAB и навигационная панель — порядок системного дизайна.

Использовать Все направления
Сайт Приложение Веб-платформа
Учебная демонстрация

Суть

Material Design — открытая дизайн-система, в которой интерфейс собирается из предсказуемых компонентов: верхняя панель приложения, навигационная панель или рельс, карточки, чипы, плавающая кнопка действия (FAB), снекбары. Третья версия системы (Material You) сделала её тёплой и выразительной: цвета больше не подбираются вручную, а выводятся из одного исходного цвета в тональные палитры с ролями primary, secondary, tertiary, surface и error.

Подробнее

Узнаваемость стиля — в сочетании мягких тональных контейнеров (пастельный primary-container, ступени surface-container), крупных скруглений 12–28 px, «таблетки»-индикатора активного пункта навигации и строгой типографической шкалы display / headline / title / body / label. Глубина передаётся не столько тенями, сколько тонированием поверхностей: чем «выше» элемент, тем плотнее оттенок его контейнера.

Стиль хорош там, где важны масштабируемость и единообразие: десятки экранов, много состояний, команды разработки. Его сила — в дисциплине ролей цвета и компонентов; если нарушить роли или смешать контейнеры случайно, интерфейс быстро превращается в набор пастельных пятен.

Признаки

  • Тональная цветовая схема из одного исходного цвета: роли primary, secondary, tertiary, error и нейтральные surface с парными цветами «on-…» для текста.
  • Тональные контейнеры: пастельные primary-container и secondary-container для акцентных блоков, ступени surface-container (low → highest) для фона карточек и панелей.
  • Крупные скругления по шкале формы: 8 px у чипов, 12–16 px у карточек, 16 px у FAB, 28 px у крупных контейнеров и диалогов, полная «таблетка» у кнопок и поиска.
  • Плавающая кнопка действия (FAB, обычная 56 px или расширенная с подписью) для главного действия экрана.
  • Навигационная панель или рельс с индикатором-«таблеткой» 64×32 px за иконкой активного пункта.
  • Чипы-фильтры, сегментированные кнопки, переключатели, ползунки и снекбары — стандартные компоненты с узнаваемой геометрией.
  • Возвышение передаётся тоном поверхности, тени — только у плавающих элементов (FAB, меню, снекбар, поднятые карточки).
  • Строгая типографическая шкала display / headline / title / body / label в одном гротеске.

Композиция

Композиция

  • Экран собирается из системных зон: верхняя панель приложения или строка поиска, основное содержимое, навигация (панель снизу, рельс сбоку или выдвижное меню) и FAB.
  • Содержимое группируется в контейнеры с крупным скруглением, расположенные на фоне surface с отступами 12–24 px; крупный акцентный блок — в primary-container.
  • Сетка на основе 4/8 px: поля 16 px на узких экранах, 24 px на широких; на широких экранах применяются раскладки «список + детали» и «основная + вспомогательная панель».
Ещё 2
  • Главное действие вынесено в FAB в правом нижнем углу или в верхней части рельса; второстепенные — в кнопки и меню панели.
  • Повторяющиеся элементы — списки с ведущим аватаром или иконкой, строки высотой 56–72 px, карточки одинаковой структуры.

Визуальная иерархия

  • Первый уровень — заголовок headline/display (24–57 px) обычным весом 400: в Material крупное не значит жирное.
  • Второй уровень — тональный контейнер: самые важные блоки выделяются primary-container или tertiary-container, а не размером тени.
  • Третий уровень — title (14–22 px, вес 500) для заголовков карточек и пунктов списка; label (11–14 px, вес 500) для кнопок и чипов.
Ещё 2
  • Вторичный текст и иконки — цвет on-surface-variant; основной текст — on-surface.
  • Главное действие выделено FAB или заполненной кнопкой primary; на экране одна заполненная кнопка в группе.

Цвета

Примеры палитр · нажмите на цвет, чтобы скопировать

Зелёный исходный цвет

Терракотовый исходный цвет

Тёмная схема, синий исходный цвет

Принципы работы с цветом
  • Выбери один исходный цвет и выведи из него тональные палитры (тоны 0–100); роли берутся из фиксированных тонов: primary — тон 40, primary-container — тон 90, on-primary-container — тон 10 (в светлой схеме).
  • Каждый цвет фона имеет парный цвет текста «on-…»: on-primary на primary, on-surface на surface, on-secondary-container на secondary-container.
  • Нейтральные поверхности слегка окрашены исходным цветом; ступени surface-container отличаются на 2–4 единицы тона.
  • Тёмная схема строится из тех же палитр: primary — тон 80, контейнеры — тон 30, фон — тон 6.
  • Error — отдельная красная палитра; не используй её для декора.

Шрифты

С поддержкой кириллицы

  • Съешь же ещё этих мягких булок

    Основной текст набран этим шрифтом. 0123456789

    Заголовки
    Roboto Flex
    Текст
    Roboto Flex

  • Съешь же ещё этих мягких булок

    Основной текст набран этим шрифтом. 0123456789

    Заголовки
    Roboto
    Текст
    Roboto

  • Съешь же ещё этих мягких булок

    Основной текст набран этим шрифтом. 0123456789

    Заголовки
    Rubik
    Текст
    Roboto
Принципы типографики
  • Один гротеск на весь интерфейс; иерархия — по ролям шкалы display, headline, title, body, label.
  • Крупные роли (display, headline) — вес 400, title и label — вес 500; жирный 700 почти не используется.
  • Основной текст body-large 16/24 px, body-medium 14/20 px; подписи label 11–12 px с разрядкой +0.04 em.
  • Межстрочный интервал задаётся в пикселях по шкале (16/24, 22/28, 32/40, 45/52), а не произвольно.

Компоненты

Кнопки

Кнопки-«таблетки» высотой 40 px: заполненная primary для главного действия, тональная secondary-container, контурная с обводкой outline и текстовая. Самое важное действие экрана — FAB 56 px со скруглением 16 px или расширенный FAB с подписью.

Поля ввода

Заполненное поле (фон surface-container-highest, нижняя линия, скругление сверху 4 px) или контурное поле с обводкой outline и «плавающей» подписью, которая переезжает на рамку при фокусе. Поиск — строка-таблетка высотой 56 px.

Карточки

Три вида карточек: поднятая (surface-container-low и мягкая тень уровня 1), заполненная (surface-container-highest) и контурная (обводка outline-variant). Скругление 12–16 px, медиа внутри — со скруглением 12 px.

Навигация

На узком экране — навигационная панель высотой 80 px с 3–5 пунктами и индикатором-таблеткой; на среднем — рельс шириной 80–88 px с FAB сверху; на широком — выдвижное меню 360 px. Верхняя панель приложения — 64 px с иконками действий.

Применение

Где подходит

  • Мобильные приложения и кроссплатформенные продукты, которым нужна знакомая пользователю логика.
  • Сервисы с большим числом экранов и состояний, где важна единая дизайн-система.
  • Повседневные приложения: дом, здоровье, финансы, путешествия, задачи.
Ещё 1
  • Рабочие панели и CRM, где нужны таблицы, фильтры и предсказуемые компоненты.

Как применять

  • Начни с исходного цвета бренда и сгенерируй полную схему ролей для светлой и тёмной темы, прежде чем рисовать экраны.
  • Используй роли цвета, а не конкретные hex в компонентах — так тема меняется одной заменой.
  • Варьируй формы: крупные контейнеры 28 px, карточки 16 px, чипы 8 px — разная кривизна отличает уровни.
Ещё 2
  • Оставляй FAB только для одного главного действия; если действий несколько — используй расширенный FAB или кнопки в панели.
  • Добавляй выразительности через третичный цвет и декоративные формы (круг, «печенье», таблетка), а не через новые оттенки.

Ограничения

Ограничения

  • Сильная ассоциация с системными приложениями: без собственного исходного цвета и форм продукт выглядит «типовым».
  • Пастельные контейнеры плохо подходят для люксовых и строгих корпоративных брендов.
  • Требует дисциплины ролей: ручные оттенки и случайные контейнеры быстро ломают систему.
Ещё 1
  • Плотные профессиональные интерфейсы (биржевые терминалы, редакторы) требуют уплотнённой версии компонентов.

Ошибки

  • Брать цвета на глаз вместо тональной схемы: контейнеры разных ролей перестают сочетаться, текст на них теряет контраст.
  • Делать жирными все заголовки — в Material крупные роли набираются весом 400.
  • Ставить тени на всё подряд вместо тонирования поверхностей.
Ещё 3
  • Несколько FAB на одном экране или FAB для второстепенного действия.
  • Одинаковое скругление у всех элементов: теряется разница между контейнером, карточкой и чипом.
  • Копировать логотипы и фирменные приложения платформы вместо собственного бренда.

Сочетания

Подходы разного уровня — их можно сочетать.

  • Плоский дизайн

    Плоские иллюстрации и иконки естественно ложатся в тональные контейнеры и не спорят с системой возвышения.

    Направление

  • Bento-компоновка

    Компоновка плиткой из контейнеров с разным тоном и скруглением 24–28 px — удачный формат обзорных экранов и промостраниц.

    Компоновка

  • Минимализм

    Сдержанная версия: одна ступень surface, минимум контейнеров, больше воздуха — для продуктов, где Material должен быть почти незаметен.

    Направление

  • Игривый дизайн

    Экспрессивные формы M3 (круги, «печенье», таблетки) и третичный цвет поддерживают игривый характер без потери системности.

    Направление

Применить стиль

Промпт для ИИ под ваш тип продукта.

Использовать
Отзыв