Fundamentos
Grid
Estruturas responsivas para manter alinhamento e hierarquia em qualquer contexto.
Sistema responsivo
4 / 8 / 12O grid determina onde os elementos vivem. O spacing determina a distância entre eles.
- Canvas estrutural
- 1440px
- Prose
- 680–760px
- Visual
- Canvas ampla
Estrutura responsiva
O container centraliza em 1440px e cresce por cinco mudanças estruturais. Margens e gutters reutilizam a escala oficial de spacing.
20px margin · 16px gutter
24px margin · 16px gutter
32px margin · 24px gutter
48px margin · 24px gutter
64px margin · 32px gutter
12-column grid
Em desktop, doze colunas oferecem uma infraestrutura ampla sem obrigar todo conteúdo a ocupá-la.
Spans de composição
Estes são padrões de composição, não layouts obrigatórios. A escolha deve seguir conteúdo e contexto.
Prose + canvas
Texto com largura controlada.
Espaço vazio pode ser intencional. O grid é largo para acomodar sistemas visuais, enquanto a leitura permanece concentrada.
Aplicação
Uma estrutura ampla pode preservar uma mensagem direta.
Headline e texto compartilham o mesmo eixo inicial; o apoio ocupa uma coluna derivada do mesmo grid.
Colapso responsivo
A ordem de leitura permanece correta no DOM. Em telas menores, composições em colunas se tornam uma sequência vertical.
Especificação
| Breakpoint | Viewport | Colunas | Margem | Gutter |
|---|---|---|---|---|
| Mobile Small | 0–479px | 4 | 20px | 16px |
| Mobile | 480–767px | 4 | 24px | 16px |
| Tablet | 768–1023px | 8 | 32px | 24px |
| Desktop | 1024–1439px | 12 | 48px | 24px |
| Desktop Wide | 1440px+ | 12 | 64px | 32px |
Full-bleed é uma exceção intencional. Uma imagem pode alcançar o viewport, mas seu conteúdo interno deve continuar alinhado ao grid.
Princípios de uso
Alinhe elementos relacionados pelos mesmos eixos.
Controle a largura de leitura e adapte spans ao viewport.
Usar colunas como decoração ou centralizar tudo como substituto de grid.
Compensar problemas estruturais com margens arbitrárias.