Layout
Composição, densidade e regiões canônicas para páginas Sinapse.
Contrato
Composição antes de decoração
Layout no Sinapse controla leitura, prioridade e confiança. A página deve expor uma região principal clara, conter conteúdo em larguras previsíveis e usar densidade como decisão editorial.
Shell primeiro
Defina navegação, conteúdo principal e ações persistentes antes de escolher cards ou grids.
Densidade intencional
Use respiro para orientar escaneamento; reduza densidade apenas onde comparação rápida importa.
Hierarquia visível
Título, contexto e CTA precisam ser identificáveis sem depender de decoração ou cor isolada.
Anatomia
Regiões canônicas
A estrutura da página deve deixar claro onde está a decisão principal e onde ficam apoios secundários.
Header
Título, contexto e ação dominante.
Main
Conteúdo de decisão no eixo principal de leitura.
Aside
Apoio, filtros ou metadados; nunca dependência crítica.
Footer local
Ações secundárias, paginação ou estado de conclusão quando necessário.
Exemplo
Página operacional
Um único contêiner pode expressar hierarquia com separadores, alinhamento e densidade, sem empilhar superfícies decorativas.
Região principal
Pacientes em acompanhamento
Contexto suficiente para decidir o próximo passo sem empilhar texto acima da dobra.
Críticos
12
status visívelEm análise
38
status visívelEstáveis
124
status visívelLista operacional
Decisão
Quando usar cada estrutura
| Decisão | Use quando | Evite |
|---|---|---|
| Container focado | Leitura, configuração, formulários e decisões sequenciais. | Esticar texto full-width só porque há tela disponível. |
| Cards em grupo | Comparação de entidades equivalentes ou métricas paralelas. | Card dentro de card sem diferença semântica entre camadas. |
| Aside contextual | Filtros, metadados, ajuda ou resumo que apoia a tarefa principal. | Mover alertas críticos para uma região periférica. |