Aula 2: Escala de Tipografia e Espaçamento — Ritmo Visual a Partir de um Sistema

Um designer te entrega um mockup com 11 tamanhos de fonte diferentes e 7 valores de espaçamento aleatórios. Sem uma escala, cada tela fica um pouco diferente. Esta aula ensina a definir uma `type scale` e uma `spacing scale` como tokens em `tailwind.config.ts` — passos fixos que criam ritmo visual e

Uma escala é como numeração de sapatos: existe um conjunto fixo de passos que todo mundo compartilha, em vez de medir cada pé em milímetros aleatórios. É assim que todos os pares acabam combinando.

type scale: Um conjunto definido de tamanhos de fonte que sobem em uma proporção fixa — por exemplo `sm`, `base`, `lg`, `xl` — de modo que todo texto seja escolhido a partir de um pequeno conjunto de passos, e não de um tamanho livre.
spacing scale: Um conjunto de tokens de espaçamento construído sobre uma unidade base (geralmente 4px) — `1`, `2`, `4` — que alimenta padding, margin e gap, de modo que todo espaço na UI se alinhe à mesma grade.
modular scale: Uma escala em que cada passo é o anterior multiplicado por uma proporção fixa (por exemplo, 1.25) — dando à tipografia uma progressão harmoniosa em vez de saltos aleatórios.
base unit: O número pequeno do qual todo valor de espaçamento é múltiplo — geralmente 4px ou 8px — de modo que todo valor da grade seja divisível por ele e nenhum espaço 'caia entre' os passos.