55 lines
2.6 KiB
Markdown
55 lines
2.6 KiB
Markdown
---
|
|
title: Material Design 3 Guide
|
|
created: 2026-06-02
|
|
updated: 2026-06-02
|
|
type: concept
|
|
tags: [web-design, design-system]
|
|
sources:
|
|
- https://m3.material.io/foundations
|
|
- https://m3.material.io/foundations/design-tokens/overview
|
|
confidence: high
|
|
---
|
|
|
|
# Material Design 3 — Руководство (Google, 2026)
|
|
|
|
## Ключевые принципы (MD3 Foundations)
|
|
1. **Adaptive** — адаптивность под любой экран, форм-фактор, платформу
|
|
2. **Bold** — цвет и типографика задают тон, контрастные акценты
|
|
3. **Intentional** — каждый элемент осмыслен, случайности нет
|
|
4. **Dynamic** — система меняется под контекст и действия пользователя
|
|
5. **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
|