Визуальный язык
Продукт SEETO спроектирован от мобильного экрана 393 px и одной базовой единицы — 2 px. Всё остальное: отступы, радиусы, высоты карточек — производные от неё, а не случайные числа.
| Контейнер | Ширина | Где используется |
|---|---|---|
| Phone shell | 393 px (min(100vw, 393px)) | Исходный формат продукта, основа всех расчётов |
| Tablet breakpoint | 720 px | Скругление phone-shell на десктопе, первая точка адаптации |
| Desktop breakpoint | 1024 px | Расширенные десктопные раскладки продукта |
| Бренд-центр: сайдбар | 1024 px | Локальное меню становится боковым вместо выпадающего |
Токены: --seeto-breakpoint-phone: 393px, --seeto-breakpoint-tablet: 720px.
Базовая единица — 2 px. Номер токена — это множитель: --seeto-space-12 =
12 × 2 px = 24 px. Используйте только значения из шкалы, не произвольные px.
| Токен | Значение | Пример использования |
|---|---|---|
--seeto-radius-1 | 4 px | Мелкие элементы, бейджи форматов |
--seeto-radius-2 | 8 px | Пункты меню, мелкие поверхности |
--seeto-radius-3 | 10 px | Код-блоки, компактные панели |
--seeto-radius-4 | 12 px | Карточки материалов, поля ввода |
--seeto-radius-5 | 16 px | Поверхности, крупные плашки |
--seeto-radius-6 | 24 px | Кнопки действий на карточке события |
--seeto-radius-7 | 32 px | Карточка события (основной радиус продукта) |
--seeto-radius-pill | 999 px | Кнопки, чипы, главное меню |
32 px (--seeto-card-radius).24 px (--seeto-card-padding).206 px, высота подвала — 82 px.12 px (--seeto-feed-edge-padding).46 px, радиус 24 px, стекло blur(10px).Живые примеры карточки со всеми вариантами — на странице «Компоненты».
Между смысловыми блоками страницы держите не меньше --seeto-space-16 (32 px), между
секциями бренд-центра — --seeto-space-24 (48 px), как на этой странице. Не бойтесь пустого
пространства вокруг крупной дисплейной типографики — это часть уверенного, а не «пустого» вида. Плотная
вёрстка без воздуха читается как тревожная, а не как насыщенная.
| Экран | Поведение |
|---|---|
| Mobile (< 720 px) | Phone-shell на всю ширину вьюпорта, локальное меню бренд-центра — полноэкранная панель |
| Tablet (720–1023 px) | Phone-shell со скруглением 34 px по центру экрана |
| Desktop (≥ 1024 px) | В продукте — расширенные раскладки; в бренд-центре — боковое локальное меню |
Нестандартный layout для партнёрского материала — уточните у бренд-команды, прежде чем ломать сетку.