Manual de marca

Design tokens

Onde os tokens vivem no código:

• Portal: imobhapi-web/Web/src/styles.css — bloco @theme (escalas gray, brand, coral, tokens de status, fontes, raios) e :root (--color-*, --space-*, --shadow-*, layout), além das classes .nav-item, .nav-item-active e .eyebrow.
• Site: imobhapi-site/src/styles.css — tokens do shadcn/ui em oklch.
• Esta documentação: docs/.vitepress/theme/custom.css.

@theme do portal

@theme {
  --font-sans: 'Figtree', Arial, Helvetica, sans-serif;
  --font-display: 'Bricolage Grotesque', Arial, Helvetica, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
  /* gray-50 #f6f8f5 … gray-900 #14231e · brand-600 #12463b · coral-500 #f6b73c */
  /* pago / pendente / atrasado (+ -text, -bg) */
}

Variáveis CSS

:root {
  /* Base */
  --color-bg: #f6f8f5;              /* Gelo */
  --color-surface: #ffffff;
  --color-border: #dce4e0;
  --color-border-strong: #c3cfca;

  /* Primária — Verde Lar */
  --color-primary: #12463b;
  --color-primary-hover: #0f3d33;
  --color-primary-active: #0b2e27;  /* Verde Noite */
  --color-primary-light: #ddf0e6;   /* Menta */

  /* Destaque — Amarelo Chave */
  --color-accent: #f6b73c;          /* preenchimento */
  --color-accent-text: #8a5a00;     /* texto */
  --color-accent-light: #fdefd2;

  /* Texto */
  --color-text-primary: #14231e;    /* Tinta */
  --color-text-secondary: #36443f;
  --color-text-muted: #5b6b65;
  --color-text-link: #12463b;

  /* Semânticas — texto / marcação */
  --color-success: #1f7a51;  --color-success-mark: #2e9e6b;
  --color-warning: #8a5a00;  --color-warning-mark: #f6b73c;
  --color-error: #b23a2f;    --color-error-mark: #d9574a;

  /* Raios e layout */
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;
  --sidebar-width: 272px;
  --header-height: 72px;
}

Tokens de status

Token	Valor	Uso
pago	#2E9E6B	Marcação (ponto, barra, ícone)
pago-text	#1F7A51	Texto
pago-bg	#E8F5EE	Fundo de badge e alerta
pendente	#F6B73C	Marcação
pendente-text	#8A5A00	Texto
pendente-bg	#FEF8EC	Fundo
atrasado	#D9574A	Marcação
atrasado-text	#B23A2F	Texto
atrasado-bg	#FBECEA	Fundo

Transições e camadas

Transições: 150ms (cor e opacidade) · 200ms (inputs, botões, nav) · 300ms (modais e gavetas).

z-index: dropdown 10 · sticky 20 · overlay 40 · modal 50 · toast 60 · tooltip 70.

Site institucional (shadcn/ui)

Token	Valor equivalente	Uso
background	#F6F8F5 (Gelo)	Fundo
foreground	#14231E (Tinta)	Texto
card	#FFFFFF	Cards
primary	#12463B (Verde Lar)	Links, ícones, títulos de destaque, foco
secondary / accent	#DDF0E6 (Menta)	Fundos de ícone, áreas de apoio
highlight	#F6B73C (Amarelo Chave)	Botão principal, números de passo, marcadores
highlight-foreground	#14231E (Tinta)	Texto sobre amarelo
highlight-text	#12463B (Verde Lar)	Eyebrow em fundo claro (amarelo não vira texto)
highlight-soft	#F6B73C	Eyebrow em seção surface-deep
muted-foreground	#4A5D56	Texto auxiliar
deep / surface-deep	#12463B sólido	Seções de destaque
night	#0B2E27 (Verde Noite)	Cards dentro de surface-deep, chevrons
deep-muted	#BFD9CE	Texto de apoio em surface-deep
status-*	Pago / Pendente / Atrasado	Só em exemplos de produto (PainelPreview)
surface-hero	Gelo sólido	Hero e CTA final
--radius	1rem	Base de raio

Regras do site:

• Logo = componente <Logo>, que carrega /brand/imobhapi-logo-horizontal-{positivo|negativo}.svg.
• Botões: default = Amarelo Chave + Tinta; outline = contorno Verde Lar.
• Elementos gráficos: componente <Chevron> (no máximo 3 por seção, só um amarelo).
• Sem gradientes entre cores da marca.
• Endosso "uma solução FastGivr" e slogan no rodapé.
• O botão de WhatsApp mantém o verde oficial (--whatsapp) — a única cor fora da paleta permitida.
• theme-color do navegador: #12463B.

Versionamento

PATCH texto · MINOR novo componente ou padrão · MAJOR paleta, tipografia ou layout. Ao mudar tokens, atualize portal e site juntos — e este resumo. Mudança de logo, cores ou tipografia começa no repositório imobhapi-manual-de-marca.