Grid & Layout — as regras.
Sistema de espaçamento, containers e breakpoints. As regras que garantem consistência visual entre páginas — e que podem ser calibradas globalmente.
Spacing Scale
Base 4px. Cada valor é um múltiplo. Usar sempre esses tokens — nunca valores avulsos. Ajuste o fator base no :root para recalibrar o sistema inteiro.
| Token | Valor | Escala visual | Uso típico |
|---|---|---|---|
| --space-1 | 4px | Gap entre ícone e label | |
| --space-2 | 8px | Gap entre chips / badges | |
| --space-3 | 12px | Padding interno de tag pill | |
| --space-4 | 16px | Margem de label para campo | |
| --space-6 | 24px | Padding interno de card compacto | |
| --space-8 | 32px | Padding padrão de card | |
| --space-10 | 40px | Padding de card hero / modal | |
| --space-12 | 48px | Gap entre itens de grid | |
| --space-16 | 64px | Espaço entre blocos dentro de seção | |
| --space-20 | 80px | Gap entre seções relacionadas | |
| --space-24 | 96px | Padding lateral container tablet | |
| --space-30 | 120px | Gap entre seções principais de página | |
| --space-40 | 160px | Abertura e fechamento de página |
Para ajustar o sistema inteiro, modifique os valores no :root. Todos os componentes que usam esses tokens serão atualizados automaticamente — sem precisar caçar valores avulsos no CSS.
Containers
Três larguras de container. O padding lateral é o principal fator de respiração — ajuste --container-pad para calibrar densidade.
| Token | Breakpoint | Valor | Contexto |
|---|---|---|---|
| --container-pad | ≥ 1024px (desktop) | 80px | Respiração ampla, foco no conteúdo |
| --container-pad-md | 768px – 1023px (tablet) | 40px | Mais espaço para conteúdo na tela menor |
| --container-pad-sm | ≤ 767px (mobile) | 20px | Máximo aproveitamento da tela |
Breakpoints
5 pontos de quebra. Mobile-first — adicionar complexidade conforme a tela cresce, não reduzir.
| Breakpoint | Dispositivo | Container pad | Comportamento típico |
|---|---|---|---|
| sm · 640px | Mobile landscape / pequenos tablets | --container-pad-sm · 20px | Grid de 1 coluna, nav colapsada |
| md · 768px | Tablet portrait | --container-pad-md · 40px | Grid começa 2 colunas, sidebar oculta |
| lg · 1024px | Tablet landscape / notebooks | --container-pad · 80px | Layout desktop ativo, sidebar visível |
| xl · 1280px | Desktop padrão | --container-pad · 80px | Conteúdo atinge --container-max |
| 2xl · 1440px | Wide desktop | --container-pad · 80px | Container centralizado, margens generosas |
Section Spacing
Ritmo vertical entre seções. Consistência aqui define a sensação de "respiração" da página. Ajuste --section-gap para calibrar toda a cadência vertical.
| Token | Valor | Uso |
|---|---|---|
| --section-gap | 120px | Entre seções principais de página |
| --section-gap-tight | 80px | Entre seções relacionadas / complementares |
| --section-gap-loose | 160px | Abertura de página e fechamento antes do footer |
| --block-gap | 64px | Entre blocos de conteúdo dentro de uma seção |
--space-*. Ao ajustar a escala base no :root, a cadência vertical é recalibrada automaticamente.
Layout Templates
4 estruturas de página. Combinam containers e seções em padrões reutilizáveis. Todos usam CSS Grid.
Próximo · Component Library →