Liquid Glass: два материала на весь интерфейс

Все поверхности — плавающие «острова» из полупрозрачного стекла с закруглениями, кольцом и мягкой тенью. Сквозь них просвечивает фон, поэтому панелей от края до края здесь нет.

Ровно два материала

Dark Chrome управляет: это шапка и кнопки в ней. Light Sheet показывает: это карточки ленты и лист, на котором вы сейчас читаете текст. Третьего материала в системе нет.

Как это устроено в коде

Оба материала описаны один раз в src/styles/global.css как утилиты Tailwind. Радиус и blur задаются в разметке:

<a class="glass-sheet rounded-[28px] backdrop-blur-xl">…</a>
<div class="glass-chrome rounded-full backdrop-blur-3xl">…</div>

Правила, которые легко нарушить

1. Blur не меньше backdrop-blur-xl, иначе стекло не читается.
2. Тени только из системы: стандартные shadow-lg и shadow-xl дают другие пропорции.
3. Отступ от края экрана — 12 px, между поверхностями — не меньше 4 px.