DP-01
Профессионально снаружи — человечно внутри
Сначала контроль, компетентность и безопасность; затем забота, тепло и сопровождение семьи.
Практическое следствиеDisplay-заголовок, ясные доказательства, спокойная эмоциональная поверхность.
Visual governance
Принципы дизайна
Правила, которые определяют, где допустимы glass, gradients, elevation и motion, а где ясность важнее эффекта.
Normative direction
Восемь принципов визуального языка
Эти правила важнее отдельного красивого примера: именно они ограничивают применение стекла, градиентов, теней и анимации.
DP-02
Ясность раньше декоративности
Эффект допустим только после того, как понятны задача блока, следующий шаг и источник доверия.
Практическое следствиеСтекло, градиент и motion не компенсируют слабую структуру.
DP-03
Один выразительный приём на зону
В одном блоке выбирается главный приём: стекло, градиент, крупная типографика или медиа — не всё одновременно.
Практическое следствиеКомпозиция остаётся премиальной, но не превращается в витрину эффектов.
DP-04
Реальные доказательства выше глянца
Врачи, клиники, семьи, документы и процесс имеют приоритет над абстрактным декором.
Практическое следствиеЭффекты поддерживают контент и не замещают его.
DP-05
Motion подтверждает действие
Анимация объясняет изменение состояния, направляет внимание или даёт feedback.
Практическое следствиеБесконечное движение допускается только для загрузки и строго ограниченного urgent-сигнала.
DP-06
Контраст и fallback обязательны
Каждый glass/gradient слой сохраняет читаемость и имеет рабочий вариант без backdrop-filter или animation.
Практическое следствиеСистема остаётся функциональной в reduced-motion и при отключённых эффектах.
DP-07
Display и UI не смешиваются
Cormorant Garamond создаёт display-ритм; Manrope отвечает за навигацию, формы, карточки, цены и длинный контент.
Практическое следствиеКурсивы и дополнительные веса показываются полностью, но production-роли фиксируются отдельно.
DP-08
Vendor runtime изолирован
Bootstrap, Swiper, Fancybox и другие библиотеки подключаются по контракту и не меняют глобальный layout самовольно.
Практическое следствиеДеструктивные demos, включая mmenu, остаются в sandbox.
Decision matrix
Где эффект уместен, а где нет
Матрица предотвращает будущие споры «почему здесь стекло, а там нет»: решение привязывается к роли, а не вкусу конкретного экрана.
| Приём | Допустимо | С осторожностью | Не допускается |
|---|---|---|---|
| Glass | Hero overlay, header, compact card, modal layer | Только над контролируемым фоном и с fallback | Длинный текст, таблицы, формы целиком, вся страница |
| Gradient | Фон hero, section transition, accent CTA | Один доминирующий градиент на viewport | Радужная палитра, градиентный body-text, critical data |
| Motion | Hover, press, focus, modal, accordion, success/error | Entrance reveal только как optional enhancement | Параллакс, бесконечные декоративные циклы, layout shift |
| Elevation | Overlay hierarchy, active card, floating CTA | Не более 3 заметных уровней в одной композиции | Сильная тень на каждом элементе |
| Coral / Gold | Ограниченный CTA, rating, local highlight | Проверять контраст и смысл | Основной текст, системная навигация, крупные площади |
Operational rules
Правила применения
Review утверждает не только внешний вид, но и ограничения, которые должны соблюдаться при сборке Phase 1.
Сначала смысловая иерархия
- 1Один H1 и один главный CTA на композиционную зону.
- 2Glass используется как слой, а не как стиль всего интерфейса.
- 3Motion имеет функциональную причину и reduced-motion fallback.
- 4Контраст проверяется на реальном фоне, а не на белом макете.
Не складывать эффекты ради эффекта
- ×Стекло + сильная тень + mesh-gradient + pulse в одной карточке.
- ×Скрывать важный текст на прозрачной поверхности.
- ×Использовать Cormorant в кнопках, формах, ценах или таблицах.
- ×Делать animation обязательной для доступа к информации.
Acceptance
Как принимать визуальный приём
Любое решение считается пригодным к Phase 1 только при одновременном прохождении смысловой, визуальной и технической проверки.
Понятность: содержание и CTA ясны без animation и blur.
Контраст: текст остаётся читаемым на каждом surface.
Стабильность: эффект не вызывает overflow, layout shift или зависшее состояние.
Производительность: blur и shadow не дублируются на десятках элементов.
Доступность: focus и reduced-motion имеют отдельное состояние.
Baseline: новый эффект после acceptance оформляется новой версией.