Manual de marca

Layout e espaçamento

Grid do portal (desktop ≥ 1280px)

Navegação de 272px + 12 colunas.

Elemento	Valor
Barra lateral	272px
Margem lateral	32px
Colunas	12
Gutter	24px (gap-6)
Cabeçalho	72px

Composições típicas do painel: KPIs 4 × 3 colunas (xl:grid-cols-4), listas 6 + 6 (lg:grid-cols-2), gráfico 8 + 4.

Área autenticada

┌──────────────────────────────────────────────────────────────┐
│ fundo gray-50 (Gelo)                                         │
│ ┌──────────────┐ ┌────────────────────────────────────────┐  │
│ │ Sidebar 272  │ │ Conteúdo (p-4 → p-10, max-w-7xl)       │  │
│ │ branca       │ │  breadcrumb                            │  │
│ │ Logo oficial │ │  eyebrow mono + título Bricolage       │  │
│ │ Itens pílula │ │  Grid de cards brancos 20px            │  │
│ │ Usuário/Sair │ │                                        │  │
│ └──────────────┘ └────────────────────────────────────────┘  │
└──────────────────────────────────────────────────────────────┘

• Sidebar: w-[272px] bg-white border-r border-gray-200; logo horizontal positivo (36px de altura) no topo; rodapé com usuário (avatar coral-100) e "Sair".
• Cabeçalho mobile: botão de menu + símbolo (imobhapi-simbolo.svg, 32px).
• Login e cadastro: fundo gray-50 com dois halos desfocados e sutis (brand-100/60 no topo à direita, coral-200/30 embaixo à esquerda), logo horizontal positivo centralizado (48px) e card branco rounded-3xl com no máximo 448px.

Painel

Na interface, a tela inicial do administrador se chama Painel (não "Dashboard").

1. Eyebrow "Painel" + h1 "Visão geral" + uma linha de contexto.
2. Grid de KPIs (sm:grid-cols-2 xl:grid-cols-4), o primeiro como card de marca (Verde Lar).
3. Listas lado a lado (lg:grid-cols-2): vencimentos próximos e contratos a reajustar. Cada item mostra a data em mono caixa-alta (VENC. 05/11/2026), o status compacto e o valor em mono à direita.

Espaçamento (base 4px)

Token	Valor	Tailwind	Uso
--space-2	8px	2	Ícone e texto compactos
--space-3	12px	3	Ícone e texto
--space-4	16px	4	Padding de item de lista
--space-5	20px	5	Padding de card
--space-6	24px	6	Gutter do grid
--space-8	32px	8	Entre grupos (space-y-8)
--space-12	48px	12	Entre seções
--space-16	64px	16	Seções do site (mobile)
--space-24	96px	24	Seções do site (desktop)

Containers

Contexto	Largura	Tailwind
Portal	1280px	max-w-7xl
Site	1152px	max-w-6xl
Formulários e modais	448px	max-w-md
Texto longo	65ch	max-w-prose

Raios

8px
checkbox

12px
inputs, itens

20px
cards, toasts

28px
modais, fotos

pílula
botões, nav

No portal, rounded-2xl e rounded-3xl foram ajustados no @theme para 20px e 28px. O símbolo da marca usa raio de 25% do lado.

Bordas e sombras

Bordas são sempre sutis: cards gray-200, divisores gray-100, inputs gray-300. Bordas coloridas só em estados (foco, erro, hover de card clicável em brand-300).

Sombras são tingidas com a Tinta (rgba(20, 35, 30, …)) e difusas — nunca preto puro.

Card
shadow-sm

Card de marca
shadow-md

Toast
shadow-lg

Modal
shadow-xl

Responsividade

Componente	Mobile	Tablet (md)	Desktop
Sidebar	Gaveta (drawer)	Fixa 272px	Fixa 272px
Grid de KPIs	1 coluna	2 colunas	4 colunas
Listas do painel	1 coluna	1 coluna	2 colunas (lg)
Tabelas	Rolagem horizontal	Idem	Totalmente visível
Formulários	1 coluna	2 colunas	2 colunas
Pílulas de ação	Empilhadas, largura total	Em linha	Em linha

Pontos de quebra: sm 640px · md 768px · lg 1024px · xl 1280px. Mobile-first sempre. Áreas de toque de pelo menos 44 × 44px.

Ícones

• Biblioteca Lucide (lucide-angular no portal, lucide-react no site): linha com traço de 2px e pontas arredondadas, sem preenchimento.
• Tamanhos: 16px em linha, botões e menu · 20px em cards · 40–48px em estados vazios.
• Cores: Verde Lar ou Tinta; amarelo só sobre fundo escuro (Verde Lar ou Verde Noite).
• Ícone em círculo: bg-brand-100 text-brand-600 (padrão) ou bg-coral-100 text-coral-700 (destaque).
• Sempre shrink-0 em flex; decorativos com aria-hidden="true".

Transições: 150ms (cor e opacidade), 200ms (inputs, botões, nav), 300ms (modais e gavetas). Animações são sutis e funcionais, nunca decorativas.