Cores semânticas
Sempre use tokens. Nunca cores fixas como text-white ou bg-[#0f0] — elas quebram temas e contraste.
background
Fundo das telas
primary
Ações principais
secondary
Apoio e chips
accent
Destaques quentes
success
Livre / concluído
warning
Atenção / aguardando
urgent
Urgente / erro
info
Informação
maintenance
Manutenção
muted
Neutros e apoio
Tipografia
Fraunces para títulos (font-display), Figtree para texto. Um h1 por página.
Camping Recanto das Araucárias
Título de seção
Texto base 16px — legível sob sol forte no app de campo.
Texto de apoio 14px
Rótulo 12px
Espaçamento
Escala de 4px. Use gap-4 entre cartões e p-5 dentro deles.
14px
28px
312px
416px
624px
832px
1248px
Raios e sombras
Cartões usam rounded-2xl + shadow-card; sobreposições usam shadow-elevated.
rounded-md
rounded-lg
rounded-xl
rounded-2xl
rounded-full
shadow-card
shadow-elevated
shadow-fab
Breakpoints
Mobile-first: escreva o layout de celular e promova em sm/lg.
| Nome | Largura | Uso |
|---|---|---|
| base | < 640px | App de campo, celular |
| sm | ≥ 640px | Celular grande / tablet retrato |
| md | ≥ 768px | Tablet |
| lg | ≥ 1024px | Sidebar fixa do web administrativo |
| xl | ≥ 1280px | Painéis com 4 colunas |