Corp/docs/guides/frontend/03-GEOMETRY.md

Frontend Guide: Geometry

Целевая шкала радиусов

Это нормативная target-scale для frontend UI:

• rounded-lg для controls
• rounded-xl для secondary cards и grouped blocks
• rounded-2xl для primary panels, page sections и modal shells
• rounded-full для pills, avatar, search capsules и похожих капсул

Эта шкала обязательна для новых экранов и перерабатываемых блоков.

Целевая шкала вертикального ритма

Радиусы сами по себе не делают систему согласованной. Если блоки одного веса выглядят похоже, у них должен быть одинаковый spacing.

Нормативная шкала:

• gap-2 для compact control clusters и плотных inline actions
• space-y-2 для плотного стека внутри одного secondary/detail block
• space-y-3 для стека однотипных rows или peer secondary cards внутри одной primary panel
• space-y-4 для стека крупных grouped blocks или major subsections внутри одной primary panel
• space-y-6 для page-level section stack

Правило:

• spacing выбирается по весу блока и уровню иерархии, а не по конкретному экрану
• одинаковые app-surface-muted rounded-xl блоки не должны жить на space-y-2 в одной зоне и на space-y-4 в другой без явной UX-причины

Controls

К controls относятся:

• input
• textarea
• select
• shared select trigger
• небольшие action buttons
• small menu buttons

Норма:

• rounded-lg

Secondary cards

К secondary cards относятся:

• вложенные блоки внутри primary panel
• grouped filter blocks
• компактные detail sections
• utility cards среднего веса

Норма:

• rounded-xl

Primary panels

К primary panels относятся:

• основные секции страниц
• большие feature containers
• modal shells
• крупные empty / detail / state containers

Норма:

• rounded-2xl

Специальные случаи

Допустимо:

• rounded-full для capsules, chips, avatars
• редкое отдельное решение для hero/media container, если оно согласовано как special case

Недопустимо по умолчанию:

• новый “авторский” радиус без системной причины

Legacy-геометрия

Считаются legacy:

• rounded-md у новых карточек и полей
• rounded-[...] без отдельного обоснования

Практический смысл:

• такое решение нельзя копировать в новые места
• при изменении существующего блока нужно оценить возможность перевода на базовую шкалу

Таксономия карточек

Primary container card

Признаки:

• основной контейнер feature-секции
• главный визуальный уровень страницы

Норма:

• app-surface
• rounded-2xl

Secondary grouped block

Признаки:

• вложенный блок внутри primary panel
• объединяет несколько связанных элементов

Норма:

• app-surface-muted
• rounded-xl

Inline utility / feedback block

Признаки:

• helper
• warning
• state summary
• selected or feedback fragment внутри карточки или формы

Норма:

• app-selected, app-feedback-* или app-surface-muted
• rounded-lg или rounded-xl в зависимости от веса блока

Правило:

• не превращать маленький helper в ещё одну primary-card конструкцию