Урок 2: Шкала типографики и отступов — визуальный ритм из системы

Дизайнер передаёт вам макет с 11 разными размерами шрифта и 7 случайными значениями отступов. Без шкалы каждый экран выглядит слегка неправильно. Этот урок научит вас определять `type scale` (шкалу типографики) и `spacing scale` (шкалу отступов) как токены в `tailwind.config.ts` — фиксированные шаги

Шкала — как размеры обуви: есть фиксированный набор шагов, общий для всех, вместо измерения каждой ноги в случайных миллиметрах. Именно так все пары в итоге сочетаются.

шкала типографики: Определённый набор размеров шрифта, растущих с фиксированным коэффициентом — например `sm`, `base`, `lg`, `xl`, — так что каждый фрагмент текста выбирается из небольшого набора шагов, а не из произвольного размера.
шкала отступов: Набор токенов отступов, построенный на базовой единице (обычно 4px) — `1`, `2`, `4`, — которые питают padding, margin и gap, так что каждый промежуток в UI выравнивается по одной сетке.
модульная шкала: Шкала, где каждый шаг — это предыдущий, умноженный на фиксированный коэффициент (например, 1.25), — придающая типографике гармоничную прогрессию вместо случайных скачков.
базовая единица: Небольшое число, кратным которого является каждое значение отступа, — обычно 4px или 8px, — так что каждое значение сетки делится на него, и ни один промежуток не попадает «между» шагами.