Fundamentos
Espaçamento
betaOs tokens que descrevem a página, e não os componentes dentro dela.
Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.
Por que estes tokens existem
O design system descreve componentes; estes tokens descrevem a página que os contém. Sem eles cada tela inventa a própria largura e o próprio ritmo, e a consistência morre na segunda tela.
| Token | Valor | Exemplo |
|---|---|---|
| --layout-content-max | 80rem | Largura máxima da coluna de conteúdo |
| --layout-page-padding-x | 2rem | Respiro lateral da página |
| --layout-page-padding-y | 1.5rem | Respiro vertical da página |
| --layout-section-gap | 1.5rem | Distância entre seções |
| --layout-stack-gap | 1rem | Distância entre itens empilhados |
O ritmo na prática
Distância entre seções e entre itens empilhados, nos valores reais.
--layout-section-gap
--layout-stack-gap