Padrão Visual FB Consult
Este documento propõe o padrão visual a ser adotado em painéis, relatórios, sistemas e materiais digitais da FB Consult. A proposta não foi criada do zero: ela formaliza a linguagem já em uso no sistema de Gestão de Marketing, que hoje é a interface mais madura da empresa.
O objetivo da validação é transformar essa linguagem em referência única, de modo que toda pessoa que construir algo para a FB Consult parta do mesmo ponto — sem recriar cores, tipografia e componentes a cada projeto.
Todos os valores apresentados — códigos de cor, pesos de fonte, medidas, raios e espaçamentos — foram lidos diretamente dos estilos aplicados pelo sistema em produção. Nenhum foi estimado a partir de captura de tela. Os exemplos desta página estão renderizados com o próprio padrão: o que se vê aqui é o que o código entrega.
Substituição da paleta anterior
A FB Consult possui hoje uma segunda linguagem visual, aplicada na Torre Unipetro, no Perito de Pneus e no painel de consultorias: verde #1D3B3A, verde de ação #05AB34, um dourado #E0BE4F e a fonte Barlow. A proposta é encerrar essa paleta para projetos novos e adotar a do sistema de Gestão de Marketing. Entre as mudanças, a mais relevante é a saída do dourado: o padrão proposto não tem cor dourada.
Materiais já publicados
A recomendação é aplicar o padrão apenas em projetos novos e telas novas. Painéis já entregues permanecem como estão até serem refeitos por outro motivo. Refazer o que já está no ar tem custo de horas e risco de interrupção, sem ganho para o cliente que já usa a ferramenta.
Confirmar: nada publicado será refeito apenas por causa do padrão?Existência de manual de marca
Este documento trata de aplicação em tela. Caso exista manual de marca vigente da FB Consult com definições de cor institucional, tipografia corporativa ou área de proteção do logotipo, este padrão se subordina a ele e precisa ser ajustado nos pontos de divergência.
Existe manual de marca? Em caso positivo, encaminhar para conferência.Alcance do padrão
A proposta cobre interfaces digitais: painéis, sistemas, relatórios e páginas. Peças de comunicação — publicação em rede social, apresentação comercial, material impresso — seguem regras próprias de composição e não estão contempladas aqui, ainda que devam usar as mesmas cores e o mesmo logotipo.
Confirmar o alcance ou solicitar extensão para peças de comunicação.Ícone de aba do navegador
O ícone em uso foi produzido com o verde da paleta anterior (#1D3B3A). O verde proposto é #0D3B2A. A diferença é discreta e só se percebe com os dois lado a lado, mas o ícone deve ser regerado para haver coerência completa.
Aplica-se ao fundo da página, ao menu lateral e ao bloco de destaque. Nunca em cor chapada: sempre em degradê entre os dois tons, o que dá profundidade sem uso de sombra.
#0D3B2AFundo da página e base do degradê.#10553ATopo do degradê do menu lateral.#06301CTexto sobre preenchimento verde vivo.São dois verdes com funções distintas, e a distinção não é estética: o verde vivo não atinge contraste suficiente para texto pequeno sobre branco. O vivo preenche; o escuro escreve.
#16B364Preenchimento: ícone do item ativo, realce de campo em foco, barra de gráfico.#0E8A49Texto e botão. É o verde que o usuário lê.#0B7A41Botão sob o cursor.#A8DDC2Barra de gráfico sem destaque.#8FD3B0Primeiro degrau de funil e escalas ordenadas.#8FE3B6Único verde legível sobre a moldura verde.#FAFAF9Branco levemente quente.#FFFFFFBloco de conteúdo e campo.#F4F4F2Linha de total, trilho de barra.#ECECEBBorda de cartão e divisor de tabela.#DEDEDBBorda de campo, botão secundário.#18181ATexto principal e fundo de balão explicativo.#52525BParágrafo secundário.#8A8A93Rótulo, legenda e estado vazio.O fundo do conteúdo é quente, não branco puro nem cinza azulado. É uma escolha deliberada: ao lado do verde escuro, o branco puro endurece a composição e o cinza azulado empobrece o verde.
#0E8A49Dentro do esperado.#A1690BExige acompanhamento.#C0392BFora do esperado ou erro.#C2410CMódulo Radar. Conteúdo jornalístico.#9A3412Realce dentro do módulo Radar.O laranja identifica conteúdo editorial e não pode ser usado como cor de ação. O padrão possui uma única cor de ação, e ela é verde.
Do rótulo de 10 px ao número de 58 px, utiliza-se uma única família. A hierarquia é construída por peso e espaçamento entre letras, nunca por troca de fonte. Números de grande dimensão recebem espaçamento negativo; sem esse ajuste, o peso 800 fica visualmente frouxo.
58 px · peso 800 · −0,05 em1.28433 px · peso 800 · −0,035 emTítulo de página27 px · peso 800 · −0,04 em13.36916 px · peso 800 · −0,02 emTítulo de bloco
15 px · peso 400 · linha 1,6Parágrafo de apoio sob o título da página.14 px · peso 600Item de menu e corpo de interface13,5 px · peso 400Célula de tabela11,5 px · peso 800 · caixa altaRótulo de seção11,5 px · peso 400Legenda de indicadorSobre a moldura verde escura, aplica-se a versão inteiramente branca. Sobre fundo claro, a versão em cor cheia. O ícone quadrado destina-se exclusivamente a ícone de aba do navegador e a selo.
Versão branca. Altura de 21 px no menu lateral.
Versão em cor cheia, com assinatura. Fundo transparente.
Arquivo original do logotipo, sem deformação e sem recomposição.
Nome escrito com fonte qualquer, marca reconstruída manualmente, imagem gerada por inteligência artificial ou espaço reservado provisório. Se o arquivo não estiver disponível no momento, a produção deve ser interrompida até que ele seja fornecido.
A página inteira é verde escuro. O conteúdo é um painel claro de cantos arredondados que flutua com folga de 14 px nos quatro lados, de modo que o verde reaparece em todas as margens. O menu lateral não é um bloco colado à borda: ele ocupa a mesma moldura.
Esse detalhe é o que faz a interface ser lida como um produto, e é o primeiro elemento que se perde quando alguém reaproveita apenas as cores. Esta própria página está montada assim.
O item ativo se anuncia por ícone circular verde acompanhado de pílula branca translúcida. Não se utiliza barra colorida na lateral do item. Os grupos são separados por rótulo reduzido em caixa alta, sem linha divisória.
22 pxpainel de conteúdo18 pxbloco de destaque14 pxcartão9 pxbotão e campototalmenu, etiqueta, chipO cartão se separa do fundo por borda de 1 px. Sombra é reservada ao que efetivamente flutua sobre a tela: notificação, balão explicativo e barra de apoio no telefone.
10 pxentre indicadores12–14 pxentre cartões22–24 pxdentro do cartão34 pxantes de uma seção248 pxmenu lateralUma ação principal por bloco. O verde do botão é o verde de ação (#0E8A49); o verde vivo não alcança contraste adequado em texto de 14 px sobre branco.
O campo em foco recebe borda verde vivo com halo translúcido — nunca o contorno azul padrão do navegador. A aba de período selecionada é preta: o verde permanece reservado à escolha do usuário e à ação.
O estado sem informação recebe contorno tracejado. A ausência de dado tem forma própria e jamais deve ser lida como situação regular.
A etiqueta apresenta apenas o nome. Explicação de metodologia não ocupa espaço na interface.
A tela não exibe o raciocínio por escrito. Quem necessita da definição posiciona o cursor sobre o círculo de interrogação ?Balão em fundo escuro, largura de 250 px. No telefone, converte-se em barra fixa no rodapé e abre ao toque. e a consulta ali. O rótulo permanece curto; a metodologia vive na documentação.
| Transportadora | Operação | Cargas | Prazo meta 95% | Situação | Ú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% |
O cabeçalho é discreto e o peso visual permanece no dado. A linha de total recebe fundo recuado e traço superior. A ausência de informação é representada por travessão em cinza claro — nunca por zero, que seria lido como medição efetuada com resultado nulo.
Barra horizontal
Funil
Uma única cor de ação. O verde. O laranja é editorial; o amarelo e o vermelho indicam estado. Nenhum outro elemento disputa o clique.
O verde vivo preenche; o verde de ação escreve. #16B364 em preenchimento, ícone, foco e barra. #0E8A49 em texto e botão.
Borda, não sombra. O cartão se separa do fundo por 1 px. Sombra fica reservada a notificação, balão explicativo e barra de apoio no telefone.
Um destaque por tela. Um bloco escuro no topo, ou um indicador realçado. Dois destaques equivalem a nenhum.
Rótulo é nome, não explicação. O raciocínio permanece no círculo de interrogação ou na documentação — jamais escrito na interface.
Ausência de dado possui forma própria. Travessão em cinza claro, indicador tracejado, expressão que declare a falta. Nunca zero e nunca estimativa apresentada como medição.
Todo número declara sua comparação. O percentual informa sobre qual base incide; a variação informa contra qual período.
Uma única família tipográfica. Manrope, pesos 400 a 800. A hierarquia se constrói por peso e espaçamento entre letras.
O padrão está disponível como folha de estilo única, acompanhada dos arquivos de logotipo, do ícone de aba e da fonte. Quem for construir uma tela copia esses arquivos para o projeto e obtém a estrutura completa — menu lateral, painel, cartões, tabelas, gráficos e indicadores de estado.
Não é necessário reproduzir manualmente nenhum valor desta página. Reescrever o padrão é o que abre espaço para divergência entre projetos.
Projetos novos e telas novas de projetos existentes. Painéis já publicados permanecem no padrão anterior até que sejam refeitos por outro motivo.
Quando houver manutenção em uma tela do padrão anterior, mantém-se o padrão daquela tela. Misturar as duas linguagens em um mesmo painel produz resultado pior do que qualquer uma delas isoladamente.
O guia técnico apresenta a escala completa de medidas e todos os componentes renderizados — destina-se a quem constrói as telas. A folha de estilo é o padrão em si: copiada para o projeto, entrega a estrutura pronta.
Após a validação dos cinco pontos listados no início deste documento, o padrão passa a ser a referência obrigatória para toda construção digital da FB Consult, e esta página se torna o material de consulta da equipe. Divergências identificadas durante a validação serão incorporadas antes da publicação definitiva.
Documento submetido à validação do Marketing. Os exemplos desta página estão renderizados com o próprio padrão.