# Layout

Composição, densidade e regiões canônicas para as páginas dos produtos do ITpS.

Contrato

## Composição antes de decoração

No Sinapse DS, o layout 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.

[Nova triagem](/componentes/button)

Críticos

12

status visível

Em análise

38

status visível

Estáveis

124

status visível

Lista operacional

Priorizar exames pendentes

Confirmar responsável clínico

Registrar decisão no prontuário

Decisão

## Quando usar cada estrutura

| Decisão | Use quando | Evite |
| --- | --- | --- |
| Container focado | Leitura, configuração, formulários e decisões sequenciais. | Esticar o texto em largura total só porque há espaço na tela. |
| 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. |