Layout & Composition.
Сетка, ритм секций, плотность, асимметрия. Решения, которые перестают приниматься каждый раз заново — чтобы каждый новый экран не переизобретал контейнер.
Один контейнер, одна сетка.
Максимальная ширина 1152 px. Боковые поля — 16 px на мобильном, 24 px на десктопе. Внутри — 12-колоночная сетка с gap 24 px. Это всё.
Контейнер не растёт «до края экрана» — даже на большом мониторе он останавливается на 1152 px. Это даёт длину строки 60–75 символов в body-md и ритм, который не ломается на ультрашироких экранах.
| Token | px | Где |
|---|---|---|
| --container-max | 1152 | max-width страницы |
| px-4 sm:px-6 | 16 / 24 | боковые поля |
| gap-6 | 24 | gap в карточных гридах |
| --sidebar-width | 240 | ЛК sidebar (только app.aist.tech) |
| --topbar-height | 56 | ЛК topbar |
1152 px container на всех маркетинг-страницах.
Один и тот же gap (24 px) во всех гридах — чтобы экран читался как система.
Растягивать секции на 100% viewport ради «эффекта простора».
Ставить разные gap (16/20/28) в соседних секциях — ритм рассыпается.
Секционный ритм важнее точных отступов.
Между секциями — 80 px (py-20). Внутри секции от заголовка до контента — 48 px (mb-12).
Воздух одинаковый по всему сайту, чтобы взгляд читал страницу как стихотворение, а не как список.
Если секция «герой» — добавь lg:py-28 (112 px). Это единственное исключение.
Кастомные отступы (py-16, py-24) ломают вертикальный ритм — не использовать.
--background. mb-12 от заголовка до контента.#F5F5F7. Тот же ритм.| Token | px | Где |
|---|---|---|
| --space-section-y | 80 | между секциями (py-20) |
| lg:py-28 | 112 | только hero, ничего больше |
| mb-12 | 48 | от section-header до контента |
| --space-lg | 24 | gap между карточками |
| --space-md | 16 | gap внутри карточки |
Карточка — только если она что-то делит.
Карточка несёт смысл, когда отделяет одну сущность от другой. Если на экране одна мысль — карточка не нужна. Голая типографика — сильнее.
Самая частая ошибка — оборачивать в карточку каждый текстовый блок «для структуры». У нас обратное правило: chrome recedes. Если можно решить вопрос gap-ом и разделителем — делай так.
#E0E0E0, без тени в покое.#F5F5F7, без border. Контраст из тона, а не из линии.bg-foreground text-background как осознанная инверсия — один раз на страницу.Голая типографика по умолчанию. Карточка — когда добавляет смысл.
Один тип карточки на секцию (или hairline, или tonal — не оба).
Заворачивать каждый абзац в карточку «для аккуратности».
Top/left 3px accent border на нейтральных карточках — читается как ошибка/предупреждение.
Асимметрия даёт направление взгляду.
Центрированная вёрстка скучна и бесцельна. Используем 7/5 или 8/4 — заголовок слева, поддержка справа. Это газетный приём, и он работает на heroes, section-headers и CTA.
Встраиваем ИИ в бизнес.
Левая колонка несёт главный заголовок — она крупнее, тяжелее, удерживает взгляд. Правая — supporting copy, выровненная по нижней линии. Глаз скользит сверху-слева вправо-вниз — это естественный gaze-path в LTR-языках.
Не все секции должны быть асимметричными. Метрики, продуктовые гриды, dashboard tiles — симметричны по природе. Асимметрия работает там, где есть «солист и аккомпанемент».
Три режима плотности.
Marketing дышит. ЛК работает. MI Analyst анализирует. Каждый режим — своя плотность, свой ритм, свой target density данных. Не путать режимы между поверхностями.
Понятные сервисы. Практические решения.
rows · 1 284
confidence · 0.87
| Surface | Padding | Gap | Density target |
|---|---|---|---|
| Marketing | section py-20 · card p-8 | 24 | 1–2 «вещи» на фолд. Дышит. |
| ЛК Shell | content p-6 · card p-4 | 12–16 | 6–10 объектов на фолд. Утилитарный. |
| MI Analyst | panel p-3 · row p-2 | 8 | 20+ строк/чисел на фолд. Аналитический. |
Воздух — контент.
Пустое пространство не «остаётся» — оно ставится. Воздух разделяет, иерархизирует, замедляет чтение. Если страница «выглядит пустой» — это обычно значит, что мы поставили его правильно.
Соблазн заполнять воздух иконками, иллюстрациями, метриками — называется data slop и запрещён. Если сомневаешься, что добавить — не добавляй.
Three rules of air:
- Section-to-section — 80 px минимум. Никогда меньше.
- Heading-to-body — 48 px (
mb-12). Это «вдох» перед чтением. - Card-padding — 24 px (marketing) / 16 px (ЛК). Меньше — текст душится.
Архитектура страницы — сценарий.
Маркетинг-страница имеет каноническую последовательность секций: hero → approach → problems → features → products → metrics → CTA. Эта последовательность — не шаблон, а контракт.
Каждая секция отвечает на один вопрос покупателя в конкретный момент. Менять порядок можно, но тогда нужно понимать, какой вопрос на какой месте.
| Секция | Вопрос покупателя | Ритм |
|---|---|---|
| Hero | «Что вы делаете?» | lg:py-28 · асимметрия 7/5 |
| Approach | «Как вы это делаете?» | py-20 · 3 шага |
| Problems | «Это про меня?» | py-20 · alt background |
| Features | «Чем это технически отличается?» | py-20 · dark feature card |
| Products | «Что конкретно я куплю?» | py-20 · grid 3xN |
| Metrics | «Как мне это измерить?» | py-20 · 3 числа |
| CTA | «С чего начать?» | py-28 · inversion |
Если в продукте есть отдельная страница (/about, /cases) — собирай
её из тех же блоков. Не изобретай новую секционную грамматику — используй имеющуюся.
Чего не делаем никогда.
- Full-bleed секции на ширину viewport (кроме hero-фона, если он вообще есть).
- Mixed gap-ы (16/20/24) внутри одной секции — сетка должна быть одна.
- Sticky-блоки в маркетинге (кроме header). Sticky — инструмент ЛК.
- Gradient backgrounds. Единственное исключение — 1px-divider в dark CTA.
- Drop shadow в покое. Только на hover как affordance.
- Декоративные иконки в hero. Hero — только текст.
- Centered-выравнивание длинных параграфов. Body — всегда left-rag.
- Карточка внутри карточки. Если хочется — значит, иерархия неверна.