Foundations
Grid & Layout
A estrutura de layout garante que a informação tenha o mesmo ritmo em qualquer tamanho de tela, do mobile ao monitor ultra-wide.
Breakpoints
Quatro faixas cobrem todos os cenários.
| Faixa | Largura | Colunas |
|---|---|---|
| Mobile | < 768px | |
| Tablet | 768px – 1023px | |
| Desktop | 1024px – 1439px | |
| Wide | ≥ 1440px |
Colunas
Visualização do grid de 12 colunas com gutters de 24px.
Redimensione a janela para ver 4 / 8 / 12 colunas.
App Shell
Estrutura padrão de uma tela da plataforma.
Header · 64px
Conteúdo · max-width 1200px
Regras responsivas
Comportamentos obrigatórios em cada breakpoint.
| Elemento | Mobile | Desktop |
|---|---|---|
| Sidebar | Drawer sobreposto | |
| Tabela | Cards empilhados ou scroll horizontal | |
| Modal | Bottom sheet full-width | |
| Ações do formulário | Full-width empilhadas | |
| Área de toque | Mínimo 44x44px |