Design System — Site Público Abracaf

O site público da Abracaf segue uma identidade visual própria definida em apps/web/styles/theme.abracaf.css. Este documento descreve os tokens disponíveis, as regras de nomenclatura e o resultado da auditoria de design system (TEC-244), que padronizou todas as páginas do site.

Onde fica a identidade visual

Toda a paleta e tipografia da Abracaf vivem em apps/web/styles/theme.abracaf.css. O arquivo define:

1. Os tokens base (--abc-*) em [data-theme='abracaf'] — a fonte da verdade dos valores hex.
2. Os mapeamentos para o Tailwind (--color-abc-*) que geram as classes utilitárias bg-abc-*, text-abc-*, border-abc-*, font-abc-*.
3. Variáveis de fonte (--font-abc-display, --font-abc-body).
4. O offset de scroll (scroll-margin-top) escopado em [data-theme='abracaf'].

Sempre use tokens abc-*

Nunca use cores padrão do Tailwind (bg-white, text-black, text-red-500, bg-green-400) no site da Abracaf. Use sempre os tokens abc-*. A auditoria TEC-244 substituiu todas as ocorrências de cores Tailwind por tokens — manter esse padrão é obrigatório.

Tokens de cor

As escalas não são contínuas — cada família tem apenas os passos abaixo. Usar um passo inexistente (ex.: text-abc-slate-600) resolve para nada e quebra silenciosamente o estilo.

Branding

Token	Hex	Uso
abc-primary-branding	#061327	Fundo escuro dos heroes
abc-secondary-branding	#00c0ea	Eyebrow/destaque ciano sobre fundo escuro

Navy (azul institucional)

Passos válidos: 50, 500, 600, 700, 800, 900. Não existem navy-100/200/300/400.

Token	Hex
abc-navy-50	#eef8ff
abc-navy-500	#2587c4
abc-navy-600	#006bb5
abc-navy-700	#005491
abc-navy-800	#005192
abc-navy-900	#061327

Cyan (destaque)

Passos válidos: 100, 400, 500, 600. Não existe cyan-700.

Token	Hex
abc-cyan-100	#edfbff
abc-cyan-400	#40d4f0
abc-cyan-500	#00c0ea
abc-cyan-600	#00a4ca

Slate (texto e bordas neutras)

Passos válidos: 50, 100, 200, 300, 400, 500, 700. Não existe slate-600.

Token	Hex
abc-slate-50	#f7f8fc
abc-slate-100	#f1f2f8
abc-slate-200	#e2e5f0
abc-slate-300	#c2c7db
abc-slate-400	#8a91ac
abc-slate-500	#5a607a
abc-slate-700	#2a2e45

Status (feedback)

Cada família de status tem os passos 50, 100, 200, 300. Use estas em vez de red-*/green-* do Tailwind.

Família	Token base (alias)	Uso
abc-danger-*	abc-danger (= abc-danger-200)	Erros, validação de formulário
abc-success-*	abc-success	Sucesso (ex.: envio de formulário)
abc-warning-*	—	Avisos
abc-info-*	—	Informativos

Neutros e branco/preto

• abc-white = #ffffff — use no lugar de white.
• abc-gray-1000 = #000000 — use no lugar de black (ex.: bg-abc-gray-1000/40 para overlays).
• Escala abc-gray-* completa: 000, 50, 100, …, 900, 1000.

Tokens de tipografia

Atenção à ordem das palavras na variável

A variável correta é --font-abc-display e --font-abc-body — não --abc-font-display. A auditoria corrigiu 26 componentes que usavam a ordem invertida, o que fazia o título cair na fonte de fallback do sistema em vez da Inter.

--font-abc-display: var(--font-abc-inter, 'Inter', system-ui, sans-serif);
--font-abc-body:    var(--font-abc-inter, 'Inter', system-ui, sans-serif);

• --font-abc-inter é injetado pelo next/font no layout da Abracaf (abracaf/layout.tsx).
• Em JSX, use a classe font-abc-display / font-abc-body, ou em style inline use fontFamily: 'var(--font-abc-display)'.

Regras de nomenclatura

Regras obrigatórias para qualquer texto visível, commit, comentário ou PR:

Regra	Correto	Errado
Nome da associação	Abracaf	ABRACAF (caixa alta)
Nome da revista	revista una	revista una+
Títulos	Sem ponto final	"Título."
Texto corrido	Sem travessão —	"algo — outra coisa"
Suporte/portal interno	Intranet	extranet

Exceção: ABRACAF_CONTACT_EMAIL

A variável de ambiente ABRACAF_CONTACT_EMAIL nunca deve ser renomeada — é uma constraint de segurança/integração. A regra de caixa-baixa vale para texto visível, não para esse identificador.

Favicon global

O favicon da Abracaf é aplicado a todas as telas do site público via export const metadata no layout do módulo:

// apps/web/app/[locale]/(extranet_public)/abracaf/layout.tsx
import { Metadata } from 'next';

export const metadata: Metadata = {
  icons: {
    icon: '/images/abracaf/abracaf-isotipo.png',
    apple: '/images/abracaf/abracaf-isotipo.png',
  },
};

Todas as páginas filhas herdam esses ícones automaticamente — não é preciso declarar icons em cada page.tsx. O favicon foi colocado no layout da Abracaf (e não no root-metadata.ts global) de propósito: cada produto do superapp (Vona, Ganhaz, etc.) tem seu próprio layout, e o isótipo da Abracaf não deve marcar as telas dos outros produtos.

Botões de scroll

Dois componentes globais ficam em abracaf/_components/:

Componente	Onde fica	O que faz
ScrollDownButton	Dentro de cada hero	Rola suave até a primeira seção abaixo do hero
ScrollToTopButton	No layout (uma vez)	Botão flutuante de voltar ao topo

ScrollDownButton é um Client Component que usa e.preventDefault() + scrollIntoView({ behavior: 'smooth' }) — ele não escreve o hash na URL nem polui o histórico do navegador.

<ScrollDownButton href="#concessionarias-busca" />

O destino é o id da seção logo abaixo do hero. Cada página define o seu:

Página	Destino
Home	#pilares
Concessionárias	#concessionarias-busca
Contato	#contato-conteudo
Conteúdo	#conteudo-lista
Mercado	#mercado-publicacoes
Revista	#revista-edicoes
Notícias	#blog-artigos
Quem Somos	#quem-somos-historia

O offset de ancoragem (scroll-margin-top) está escopado em [data-theme='abracaf'] no theme.abracaf.css (56px mobile, 72px desktop), para compensar o header fixo sem afetar os outros produtos.

Auditoria de design (TEC-244)

A auditoria varreu todas as ~99 telas do site comparando-as ao theme.abracaf.css e corrigiu três classes de problema:

1. Bugs de token — variável de fonte invertida (--abc-font-* → --font-abc-*, 26+7 ocorrências) e passos de escala inexistentes (slate-600 → slate-500, cyan-700 → cyan-600, navy-200/400 → slate-200/navy-700).
2. Nomenclatura — ABRACAF → Abracaf (26 ocorrências, preservando ABRACAF_CONTACT_EMAIL).
3. Cores padrão do Tailwind — *-white → *-abc-white (77), 'white' → 'var(--abc-white)' (25), bg-black/ → bg-abc-gray-1000/ (6), e status red-*/green-* → abc-danger/abc-success.

Ficaram intencionalmente fora da auditoria, por não terem token exato equivalente:

• Cores de séries de gráfico (#6B47C9, #15A36E em mercado-charts.tsx).
• Azuis de gradiente do mapa coroplético (#0b2650, #005b8e, etc. em concessionárias).
• Chrome escuro do flipbook.
• ~30 tamanhos de fonte arbitrários (text-[Npx], clamp(...)) — pendentes de revisão visual dedicada.

Cuidados com edição em massa

Não use replace global de aspas via PowerShell

Durante a TEC-244, uma substituição em massa via PowerShell corrompeu mercado-charts.tsx e mercado-kpis.tsx: todas as aspas simples (') viraram #, quebrando o parse dos arquivos. A correção exigiu restaurar a versão limpa do git e reaplicar só as mudanças intencionais.

Boas práticas ao tocar nos arquivos do site Abracaf:

• Prefira a ferramenta de edição cirúrgica (Edit) a um replace global de caractere. Replace de ' é especialmente perigoso porque colide com strings de cor hex ('#6B47C9').
• Os arquivos da Abracaf usam CRLF e às vezes BOM — ao escrever via script, preserve o encoding (System.Text.Encoding.UTF8) e releia o arquivo para conferir.
• Após qualquer mudança no app, rode pnpm --filter web typecheck — erros de "Invalid character" indicam corrupção de encoding/aspas.
• Para detectar corrupção de aspas, procure a assinatura #use client# ou from # no codebase.