Fundamentos
Espaçamento
O espaço organiza relações. Uma escala consistente define ritmo, hierarquia e clareza em toda a experiência Agenu.
Unidade base
4 pxA unidade de 4 px é a base da escala de espaçamento da Agenu.
Escala
Valores menores aproximam elementos relacionados; valores maiores separam contextos e transições. A escala orienta decisões — não substitui o julgamento óptico.
--space-00px0rem--space-14px0.25rem--space-28px0.5rem--space-312px0.75rem--space-416px1rem--space-520px1.25rem--space-624px1.5rem--space-832px2rem--space-1040px2.5rem--space-1248px3rem--space-1664px4rem--space-2080px5rem--space-2496px6rem--space-32128px8rem--space-40160px10remHierarquia de espaço
Ícone + label, indicadores e ajustes ópticos.
Controles, labels e conteúdo relacionado.
Grupos, colunas e blocos internos.
Cabeçalhos e blocos importantes da página.
Transições editoriais, hero e grandes seções.
Proximidade
O espaço comunica relação antes mesmo da leitura. Elementos relacionados permanecem próximos; mudanças de contexto recebem mais distância.
Descrição
Outro conteúdo
Descrição
48pxOutro conteúdo
Aplicação
(11) 99999-9999
Stacks e layout
- Mobile
- 16–20px
- Tablet
- 24px
- Desktop
- 24–32px
- Editorial amplo
- 32–48px
- Mobile pequeno
- 20px
- Mobile amplo
- 24px
- Tablet
- 32px
- Desktop
- 48–64px
Produto e editorial
Agenda
Hoje · 24 de agosto
AGENU
Sua clínica no controle. Seus pacientes sempre voltando.
24px · título → textoUma composição editorial utiliza a mesma escala com respiros maiores.
Padding, gap e margin
Em flex e grid, prefira gap para espaçar elementos irmãos. Use margin quando houver uma razão estrutural, sem acumular valores para corrigir alinhamento.
Tokens
A escala primitiva usa nomes numéricos precisos. Aliases semânticos apenas apontam para esses valores e ajudam a comunicar a intenção de uso.
Princípios de uso
Use tokens para criar relações consistentes.
Resolva primeiro estrutura, grid e alinhamento.
Adicionar margens arbitrárias para empurrar elementos.
Acumular múltiplas margens para corrigir composição.