Spacing scale и вертикальный ритм

Построй spacing-систему для: {{context}}.

Тезис: ритм держит макет даже без декора. Если убрать цвет и шрифт — макет всё равно должен "звучать" из-за отступов.

1. Выбери базис

Не смешивай 5px, 7px, 13px. Шкала — серия.

2. Шкала

:root {
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 2px;   /* hairline */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;  /* база body */
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;
  --space-40:  160px;
  --space-48:  192px;
}

Правила:

• Шаг не линейный — отношение приближается к 1.25-1.5 на больших значениях
• Чем больше отступ — тем реже ступени (не нужны 100, 104, 108)
• Не более 14-16 ступеней. Больше — система становится "тазиком"

3. Семантические роли

:root {
  /* Внутри компонента */
  --gap-tight: var(--space-2);   /* иконка↔текст */
  --gap-cosy:  var(--space-3);   /* пункты списка */
  --gap-roomy: var(--space-4);   /* между блоками внутри карточки */

  /* Между компонентами */
  --stack-sm: var(--space-6);
  --stack-md: var(--space-10);
  --stack-lg: var(--space-16);
  --stack-xl: var(--space-24);

  /* Контейнерные паддинги */
  --pad-sm: var(--space-4);
  --pad-md: var(--space-6);
  --pad-lg: var(--space-8);

  /* Секции страницы */
  --section-y: var(--space-24);   /* 96px */
  --section-y-lg: var(--space-32);
}

4. Вертикальный ритм типографики

Принцип: line-height × font-size каждой пары — кратно базису.

body: 16px × 1.5 = 24px (= 6 × 4)
h3:   20px × 1.4 = 28px (= 7 × 4)
h2:   28px × 1.3 = 36px (= 9 × 4)
h1:   40px × 1.2 = 48px (= 12 × 4)

Расстояние между заголовком и параграфом тоже из шкалы. Самое частое: margin-top следующего блока = --space-6 для текстовых блоков, --space-10 для нового раздела.

5. Правило "ближе — связано"

Закон Гештальта: отступ кодирует связь.

[ Title           ]
   12px
[ Subtitle        ]   ← связаны: tight
   32px
[ Body            ]   ← новая мысль: roomy

Если subtitle ближе к body, чем к title — иерархия сломана.

6. Допустимые исключения

Не вся жизнь укладывается в 4/8. Чёткие исключения:

• Optical alignment. Иконка-arrow с двух сторон одинаковым padding'ом выглядит несимметрично — допускается -1px сдвиг
• Hairlines. Border 1px — не нарушение, это subatomic
• Picture-perfect размеры дизайн-системы донора (логотип партнёра должен быть ровно 22px) — допускается
• Mobile сжатие. На < 480px можно сжимать gap'ы на ступень вниз (md → sm)
• Адаптивная типографика. clamp() для шрифта приводит к нецелым line-height в средних viewport — это ок, ритм держится на нижней и верхней

Каждое исключение — задокументируй в комменте к коду или в системе. Анонимные "1px" расползаются.

7. Проверка на компонентах

Прогон, чтобы убедиться что ритм держит:

1. Карточка — внешний padding, gap внутри, gap до соседней карточки
2. Форма — gap между полями (--space-4), gap между секциями (--space-8), kerning label↔input
3. Кнопка — высота 36/40/48 кратна 4, paddingX больше paddingY
4. Stat-row в дашборде — gap между числом и подписью --space-1, между столбцами --space-8
5. Длинный текст — раздел, h2, параграф, h3, параграф; есть ли ритм без декора
6. Hero — массивные --section-y, ничего меньше --space-12 рядом с заголовком

Сделай страницу-зебру: подсветь все отступы outline: 1px solid magenta. Если глазу что-то "цепляется" — найди и положи в шкалу.

Формат вывода

1. Шкала + семантические токены (CSS)
2. Tailwind config (если есть): spacing extend
3. Таблица "когда какой токен"
4. Список зафиксированных исключений (если есть)
5. Скриншот/JSX 3 компонентов с подсветкой отступов

Анти-паттерны

• 17px между блоком и заголовком "потому что красиво"
• Одинаковый gap внутри и между блоками — иерархия разрушена
• margin-bottom на каждом элементе вместо gap на родителе — двойные отступы при перестановке
• Top-margin на h2 + bottom-margin предыдущего параграфа = накопление 64px
• Шкала из 30 значений — никто не помнит, что выбрать
• "Это исключение" без записи — через месяц станет правилом