Visual effects foundation

Эффекты и поверхности

Surface system, glass hierarchy, blur/opacity scales, gradients, elevation, geometry и z-index до сборки Phase 1.

Surface system

Поверхности прежде эффектов

Каждый блок сначала получает семантическую поверхность. Glass, gradient и elevation накладываются только после выбора базового surface.

Surface 0Page#F1F6FB

Surface 1White#FFFFFF

Surface 2Soft blue#EAF4FB

Surface 3Support teal#EDF9FA

Surface 4Warm cream#FFF7F3

Surface 5Authority navy#013277

Glass system

Четыре контролируемых glass-уровня

Стекло — слой над содержательным фоном. Оно не применяется к длинному тексту, таблицам или всей странице и всегда имеет solid fallback.

Glass 08Subtleblur 8px · alpha 0.78

Glass 16Mediumblur 16px · alpha 0.64

Glass 24Strongblur 24px · alpha 0.52

Dark glassOverlayblur 20px · navy alpha 0.62

Glass lab

Градация blur и прозрачности

Интерактивный specimen показывает не только красивый вариант, но и границы, после которых текст теряет контраст или фон становится визуально грязным.

Interactive specimenНастраиваемое стеклоПроверьте читаемость, blur, saturation и opacity на реальном сложном фоне.

Blur 16pxSurface alpha 64%Saturation 140%

backdrop-filter: blur(16px) saturate(140%);
background: rgba(255,255,255,.64);

Effect tokens

Blur и opacity имеют фиксированную шкалу

Компонент не должен придумывать случайные значения. Для Phase 1 используются только перечисленные tokens либо отдельное versioned решение.

Blur tokens

0px

4px

8px

12px

16px

24px

32px

48px

Opacity tokens

10%

20%

40%

60%

80%

92%

100%

Gradient library

Градиенты с конкретными ролями

Linear и radial gradients закреплены за hero, medical, family, CTA и media overlay. Случайные «красивые» комбинации вне списка не входят в baseline.

Heronavy → teal → cream

Medicalsoft blue → support teal

Familywhite → warm cream → coral alpha

CTAprimary → deep navy

Auroraradial teal/coral highlights

Overlaytransparent → navy 84%

Elevation

Тень — часть пространственной иерархии

Уровень выбирается по поведению компонента, а не по желанию сделать карточку «дороже».

Elevation 0FlatВстроенный content

Elevation 1RestingОбычная card

Elevation 2RaisedHover / selected

Elevation 3FloatingSticky action

Elevation 4OverlayDropdown / tooltip

Elevation 5DialogModal / drawer

Glass shadow и inner shadow существуют отдельно, но не заменяют иерархию elevation 0–5.

Geometry

Borders и radii тоже токенизированы

Стабильная геометрия важнее декоративного разнообразия. Основные production-радиусы остаются 8 / 12 / 18 / 24 / pill.

Border widths

1px · default2px · emphasis3px · focus / special

Radius scale

04812182432pill

Layering

Z-index без случайных чисел

Dropdown, sticky, backdrop, modal, toast и tooltip используют фиксированные слои. Компоненты не соревнуются значениями 99999.

Contentz 0

Stickyz 300

Dropdownz 700

Backdropz 900

Modalz 1000

Toastz 1200

Tooltipz 1300

Usage contract

Условия допуска эффекта в Phase 1

Эффект считается утверждённым только вместе с правилами его применения и fallback-поведением.

✓

Glass имеет solid fallback и достаточный contrast.

✓

Gradient поддерживает иерархию и не содержит важный текст внутри изображения.

✓

Elevation соответствует реальному уровню взаимодействия.

Backdrop blur ограничивается крупными или редкими слоями.

На одном viewport — не более одного signature gradient.

Эффект не изменяет размеры блока и не создаёт layout shift.