---
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