Espaçamento
Tokens dimensionais: container, form-height, margens, spacing e telas de referência. Escala 4pt sobre Tailwind v4.
Como usar
Escala 4pt sobre Tailwind v4. Use as classes utilitárias direto nos componentes. Para responsividade, aplique prefixos md: ou lg: quando o valor mobile diferir do desktop.
Base
1 unidade = 4px. p-6 = 24px.
Breakpoints
sm=640, md=768, lg=1024, xl=1280, 2xl=1536.
Responsivo
Mobile-first. Adicione md: para sobrescrever em telas maiores.
container
Largura máxima de seções.
form-height
Alturas canônicas de inputs e botões.
margin / block
Espaçamento vertical entre seções.
margin / inline
Margens horizontais de página.
spacing
Escala genérica para padding, margin e gap. 1 unidade = 4px.
screen
Telas de referência para layouts desktop e mobile. Não são breakpoints; os breakpoints reais seguem o padrão Tailwind.