Дизайн-система

1. Обзор и творческий вектор

Творческий вектор: «Эфирная лаборатория»

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

Система ломает «шаблонный» вид через намеренную глубину. Мы не используем плоские сетки — мы используем слоистую полупрозрачность. Накладывая «стеклянные» поверхности друг на друга и применяя высококонтрастные типографические шкалы (сочетая геометрическую точность Manrope с функциональной чёткостью Inter), мы достигаем интерфейса, который ощущается одновременно авторитетным и иммерсивным.

2. Цвета

Палитра основана на философии «глубокого тёмного» — почти чёрный фундамент позволяет ярким биометрическим акцентам «светиться» цифровой люминесценцией.

Стратегия палитры

Фон (#0e0e0e): Холст. Почти чёрный, дающий бесконечную глубину.
Первичный и вторичный (#8ff5ff, #ac89ff): Используются исключительно для данных высокого приоритета (HRV, Sleep Score) и активных состояний.
Правило «без линий»: 1px сплошные бордеры для разделения секций строго запрещены. Границы определяются переходом от surface к surface-container-low или через «Ghost Border» (см. раздел «Глубина»).
Иерархия поверхностей:
- surface: Глобальный фон.
- surface-container-low: Вторичный фон для секций вертикального фида.
- surface-container-highest: Основа для «стеклянных» карточек, применяется с opacity 40–60%.
Правило «стекло и градиент»: Герой-карточки (например, дневной Readiness score) должны использовать градиентный переход от secondary к tertiary с тяжёлым backdrop-blur (20px–40px). Это придаёт данным «душу», недоступную плоским заливкам.

3. Типографика

Используется двухшрифтовая система, балансирующая редакционную элегантность с клинической точностью.

Дисплей и заголовки (Manrope): «Герои» интерфейса. display-lg — для первичных метрик (например, «72» в HRV 72). Высококонтрастная геометрическая природа Manrope передаёт премиальное, «передовое» ощущение.
Тайтлы и тело (Inter): Inter занимается «лабораторной работой». Используется для рекомендаций и инсайтов (body-md) для максимальной читаемости на полупрозрачных фонах.
Иерархия через масштаб: Резкие переходы между display-sm (2.25rem) и label-sm (0.6875rem) поощряются для создания редакционного ритма — взгляд движется от общей картины к детальным данным.

4. Высота и глубина

Глубина — не эффект, это основной инструмент навигации системы.

Принцип слоёв: Использовать тональное наслоение. Карточка на surface-container-highest должна лежать поверх фона surface, создавая естественный подъём.
Атмосферные тени: Когда карточка должна «парить» над фидом, используется тень с blur 40px–60px при opacity 6%, окрашенная в primary (например, cyan-тень для cyan-карточки метрики).
Запасной вариант — «Ghost Border»: Если контейнеру нужна чёткость, используется токен outline-variant при opacity 15%. Это создаёт эффект «бликового отражения» на крае стекла, имитируя свет на угловом крае физической линзы.
Глазоморфизм: Все интерактивные карточки должны использовать backdrop-filter: blur(20px) и полупрозрачную заливку surface-variant. Это позволяет ярким фоновым градиентам мягко просвечивать сквозь карточку, интегрируя её в окружение.

5. Компоненты

Карточки (основная единица)

Карточки метрик: Горизонтальный скролл. roundedness-xl (1.5rem). Фон — surface-container-highest при opacity 40% с линейным градиентным хайлайтом сверху вниз.
Фид инсайтов: Вертикальная компоновка. spacing-6 (2rem) между элементами. Разделители запрещены; секции разделяются вертикальным пространством или мягким переходом к surface-container-low.

Кнопки и взаимодействие

Основная кнопка: Высокая pill-форма (roundedness-full). Градиентная заливка от primary до primary-dim. Без бордеров.
Вторичная/стеклянная кнопка: surface-container-highest при opacity 50% с Ghost Border outline-variant при opacity 15%.
Чипы: Используются для фильтрации «Сон», «Активность», «Readiness». roundedness-md (0.75rem) и типографика label-md.

Поля ввода и обратная связь

Поля ввода: Только Ghost Border. Фон — surface-container-lowest, чтобы выглядеть «утопленным» в стекло.
Прогресс-бары: Яркий градиент от primary до secondary. Трек — surface-variant при opacity 20%.

6. Что делать и что не делать

Делать

ДЕЛАТЬ резкие типографические контрасты. Данные — главные звёзды.
ДЕЛАТЬ наложение элементов. Пусть стеклянная карточка частично перекрывает фоновый градиент — это доказывает её полупрозрачность.
ДЕЛАТЬ использовать токены spacing-8 и spacing-10 для создания «дышащей» роскоши.
ДЕЛАТЬ применять full скругление для интерактивных элементов (кнопок и чипов) в контраст с xl скруглением карточек.

Не делать

НЕ использовать 100% непрозрачные сплошные цвета для крупных контейнеров. Это уничтожает эффект «Эфирной лаборатории».
НЕ использовать чисто серые тени. Всегда окрашивать тени оттенком акцентного цвета или цвета on-surface.
НЕ использовать стандартные разделители 1px. Если чувствуешь потребность в линии — увеличь токен spacing.
НЕ использовать высококонтрастные бордеры. Если бордер — первое, что бросается в глаза, он слишком тяжёлый. Он должен быть заметен только при внимательном рассмотрении.