3. Спейсинг и Сетка
Базовый модуль — 8px. Модуль сетки страницы — 20px. Все отступы кратны 8. Золотое сечение для макетных пропорций.
Шкала отступов
Сетка страницы
Макетные пропорции (phi)
Алгоритм: 1 → контент диктует ширину зоны, 2 → колонки привязывают к сетке, 3 → φ (≈ 38/62) используется как ориентир, не жёсткое правило.
Контент: список nav → 3 col. Остаток → 9 col. Не φ, но контент-первый.
Текст → 7 col (≈ 58%). Изображение заполняет → 5 col (≈ 42%). Ближайшее к φ.
Ряд 1: крупный блок → 7, доп. → 5. Ряд 2: три равных → 4+4+4. Колонки фиксируют.
График требует широкой зоны → 8 col. Панель метрик → 4 col. Контент первый.
Золотое сечение 38/62 — ориентир для пар sidebar/content, text/visual в hero-блоках.
Сетка как визуальный стиль
Сетка — часть дизайн-кода. Направляющие линии между колонками — не декор, а материализация структуры. Реальные 1px CSS-колонки задают ритм и видимый каркас. guideVisible управляет видимостью без изменения раскладки.
Механика: от пустой сетки к контенту
Принцип: вместо CSS gap — реальные 1px CSS-колонки. cols=4 → template = "1fr 1px 1fr 1px 1fr 1px 1fr"
1. Направляющие без контента
2. С контентом, направляющие видны
3. С контентом, направляющие скрыты
guideVisible = true
Направляющие видны как часть визуального языка. Структура читается через линии.
guideVisible = false
Те же 1px-колонки, но прозрачны. Раскладка идентична — меняется только вид.
Пример: 3 колонки с направляющими
GridGuides cols=3 guideVisible=true cellPadding=12
Bento Grid — нерегулярная сетка
Секция Features / «Что умеет сервис» — мозаика карточек разного размера. Минимум 4, максимум 6 ячеек. Ни одна строка не одинакова (принцип асимметрии φ).
Анализ кейса
Агент обрабатывает документы и формирует сводку.
Классификация
Определяет тип дела и маршрутизирует.
Ответ за секунды
AI-система для ведения кейсов
Интеграции
Подключается к любому воркфлоу.
Ссылка на оплату
Агент формирует ответ со ссылкой автоматически.
grid-cols-12 → col-span-6+6 / col-span-4+8 / col-span-5+7 — ни одна строка не одинакова