title, created, updated, type, tags, sources, confidence
| title |
created |
updated |
type |
tags |
sources |
confidence |
| Material Design 3 Guide |
2026-06-02 |
2026-06-02 |
concept |
|
|
high |
Material Design 3 — Руководство (Google, 2026)
Ключевые принципы (MD3 Foundations)
- Adaptive — адаптивность под любой экран, форм-фактор, платформу
- Bold — цвет и типографика задают тон, контрастные акценты
- Intentional — каждый элемент осмыслен, случайности нет
- Dynamic — система меняется под контекст и действия пользователя
- Unified — единый язык на всех платформах (web, Android, iOS)
Design Tokens (Дизайн-токены)
MD3 представил систему токенов для платформонезависимого дизайна:
Color Tokens (40+ токенов)
- Primary — основной цвет платформы
- On Primary — контент на primary (текст, иконки)
- Primary Container — контейнер с primary-фоном
- Secondary — вторичный цвет
- Tertiary — третичный (акцент)
- Error — для состояний ошибок
- Surface — фон поверхности
- Outline — границы, разделители
- Dynamic Color — автогенерация темы из seed-цвета
Typography Tokens
- Type scale: от display/large (57px) до label/small (11px)
- Font-weight, line-height, letter-spacing — всё через токены
Shape Tokens
- corner-radius малый (4px), средний (8px), большой (16px), полный
Elevation Tokens
- 5 уровней высоты (0–5) определяют тень и яркость в тёмной теме
Темная тема в MD3
- Фон: #1C1B1F (тёплый тёмный, не #000)
- Поверхности: elevation через повышение яркости (surface → surface1 → surface5)
- Значения тона (tone) меняются автоматически через цветовые алгоритмы
Material 3 в веб-дизайне
- CSS Custom Properties для токенов (--md-sys-color-primary, --md-ref-typeface-*)
- Доступны библиотеки: Material Web Components, Material Tailwind
- Dynamic Color применим для веба через CSS custom properties
