Identidade Visual FB Consult
Padrão de aplicação para painéis, relatórios e sistemas da FB Consult. Os valores desta página foram extraídos do sistema de Gestão de Marketing em produção — são os mesmos que o código usa, não uma aproximação.
Barra lateral, fundo da página e bloco de destaque. Sempre em gradiente, nunca chapado: linear-gradient(170deg, --escuro-2, --escuro-1 62%).
O vivo (#16B364) preenche e ilumina: ícone ativo, anel de foco, barra. O escuro (#0E8A49) é o que vira texto e botão — passa contraste sobre branco, o vivo não passa.
O fundo claro é quente (#FAFAF9), não branco puro nem cinza azulado. É o que impede o painel de parecer um relatório genérico ao lado do verde.
O laranja é do módulo editorial (Radar). Não usar como ação — o sistema tem uma cor de ação só, e ela é verde.
Uma família só, do rótulo de 10px ao número de 58px. O que separa hierarquia é peso e espaçamento entre letras, não troca de fonte. Números grandes sempre com letter-spacing negativo — sem isso o 800 fica frouxo.
58 / 800 / -.05em1.284clamp(26,3.4vw,33) / 800 / -.035emTítulo de página27 / 800 / -.04em13.36922 / 800 / -.03emNúmero de insight16 / 800 / -.02emTítulo de card
15 / 400 / 1.6Parágrafo de apoio sob o título da página.14 / 600Item de menu e corpo de interface13.5 / 400Célula de tabela11.5 / 800 / .1em / caixa altaRótulo de seção11.5 / 400Legenda de KPI10 / 800 / .12em / caixa altaGrupo do menu22pxpainel de conteúdo18pxbloco de destaque14pxcard, toast9pxbotão, campo, tooltip999pxmenu, etiqueta, chipCard se separa do fundo por borda de 1px. Sombra existe só em três lugares: toast, tooltip e balão no celular. Nada de card levitando.
10pxentre KPIs12–14pxentre cards22/24pxdentro do card34pxantes de uma seção248pxbarra lateralO <body> é verde escuro. O conteúdo é um painel claro de raio 22px que flutua com 14px de folga em volta. A barra lateral não é um bloco colado na borda — o verde continua por trás dela e reaparece nas quatro margens. Esse detalhe é o que faz a interface parecer um produto, e é a primeira coisa que se perde quando alguém copia só as cores.
Item ativo se anuncia por ícone circular verde + pílula branca a 13% — nunca por barra colorida na lateral. Grupos separados por rótulo minúsculo em caixa alta, não por linha divisória.
Uma primária por bloco. O verde do botão é o escuro (#0E8A49) — o vivo sobre branco não passa contraste em texto de 14px.
Foco: borda verde vivo + anel de 3px a 13% de opacidade. Nunca o outline azul do navegador.
Aba de período ativa é preta, não verde: o verde fica reservado para escolha do usuário (chip) e para ação.
Cinza é tracejado: ausência de dado tem forma própria e nunca é lida como "tudo certo".
A tela não carrega o racional escrito. Quem precisa da definição passa o cursor na bolinha ?Balão escuro (#18181A), 250px, raio 10px. No celular vira barra fixa no rodapé e abre no toque. e lê ali. Rótulo é nome curto; metodologia vai para a documentação.
| Transportadora | Operação | Cargas | Prazo meta 95% | Status | Última coleta |
|---|---|---|---|---|---|
| Rodoviário NorteFortaleza · CE | Fracionado | 412 +18 | 97,2% | ●No prazo | 10/08/26 |
| Expresso LitoralRecife · PE | Lotação | 188 | 91,4% | ●Atenção | 09/08/26 |
| Transcarga ValeSalvador · BA | Dedicado | 96 | — | ●Sem dado | 04/08/26 |
| Total | 3 operações | 696 | 94,3% |
Cabeçalho em caixa alta de 11px cinza; o peso visual fica no dado, não no cabeçalho. Primeira coluna gruda ao rolar. Linha de total tem fundo --card-2 e borda superior. Ausência de dado é — em #CFCFCC, nunca zero.
Barra horizontal
Funil
Barras por dia
Uma cor de ação. Verde. Laranja é editorial (Radar), amarelo e vermelho são estado. Nada mais compete por clique.
Verde vivo preenche, verde escuro escreve. #16B364 em fundo, ícone, anel de foco e barra. #0E8A49 em texto e botão.
Borda, não sombra. Card se separa por 1px. Sombra fica para o que realmente flutua: toast, tooltip, balão no celular.
Um destaque por tela. Um bloco escuro no topo, ou um KPI .forte. Dois destaques equivalem a nenhum.
Rótulo é nome, não explicação. O racional mora na bolinha "?" ou na documentação — nunca escrito na interface.
Ausência de dado tem forma própria. Traço cinza claro, semáforo tracejado, "cedo pra dizer". Nunca zero, nunca uma estimativa disfarçada.
Número é sempre comparado a algo declarado. Percentual diz contra qual base; variação diz contra qual período.
Uma família tipográfica. Manrope 400–800. Hierarquia por peso e espaçamento entre letras, não por troca de fonte.
Copiar fb-consult.css e a pasta assets/ para o projeto e importar antes do CSS da aplicação. O arquivo já traz o @import do Manrope; em ambiente sem acesso externo, usar o manrope-latin.woff2 de assets/.
Logo: sempre o arquivo real. Branca sobre verde escuro, colorida sobre fundo claro, ícone só para favicon e selo. Wordmark digitado, placeholder ou logo gerada por IA não são aceitos.
Aplica-se a projetos novos e a telas novas de projetos existentes. Painéis já publicados no padrão anterior permanecem como estão até serem refeitos.