neo/wow-design-wiki
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
master
wow-design-wiki/concepts/material-design-3-guide.md
T
neo 76c4c5b4fe design-systems: add 74 brand DESIGN.md files (VoltAgent/awesome-design-md) 
- 74 brands: airbnb, stripe, apple, figma, linear, vercel, etc.
- 147 files: DESIGN.md + README.md per brand (~2.1 MB)
- Each DESIGN.md contains structured brand analysis (colors, typography, components)
- Updated 00-overview.md with new design-systems directory
2026-06-21 20:40:35 +05:00

2.6 KiB
Raw Permalink Blame History

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
web-design
design-system
https://m3.material.io/foundations
https://m3.material.io/foundations/design-tokens/overview
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
Reference in new issue View Git Blame Copy Permalink