Guia da marca

benflow

O benflow é um vira-lata de papel dobrado: a cabeça é o próprio escudo, uma orelha em pé de atenção e a outra dobrada, mostrando o verso verde do papel.

A tecnologia mora nos detalhes: olhos de pixel que viram cursor, e uma medalha verde "ao vivo" na coleira, a mesma bolinha de status do painel.

Os vincos pretos do desenho, desdobrados até a borda, viram as linhas finas que forram o site.

Símbolo

Faces planas de papel branco, vincos em tinta, uma dobra de vale no meio da testa (a meia face do lado da orelha caída fica em canvas). A assimetria das orelhas é a assinatura: nunca espelhar.

Símbolo benflow
Símbolo benflow para fundo escuro
  1. Orelha em pé: atenção. Face interna em canvas, vinco da ponta até a base.
  2. Orelha dobrada: o verso do papel é verde. Um vinco diagonal marca a dobra.
  3. Cabeça-escudo: topo largo, laterais retas, ponta no queixo. É o escudeiro.
  4. Dobra de vale: vinco central da testa até o focinho, meia face em canvas.
  5. Olhos de pixel: quadrados. No site, o direito vira cursor e pisca.
  6. Focinho em bloco: nariz largo em trapézio e sorriso em "w". Amigável, nunca bravo.
  7. Medalha ao vivo: a bolinha verde do painel, na coleira. Pode pulsar no site.

Versões e quando usar

O traço engrossa conforme o tamanho diminui. Grande: completo. Médio (20 a 47 px): versão média. 16 px: favicon em pixel.

benflow-simbolo.svg

Símbolo completo, fundo claro. Vincos, focinho e sorriso.

A partir de 48 px

benflow-simbolo-escuro.svg

Fundo escuro: sem contorno externo, o papel encosta no fundo.

A partir de 48 px

benflow-simbolo-medio.svg

Versão média: traço grosso, sem o bloco do focinho. Também em -escuro e -mono.

De 20 a 47 px

benflow-simbolo-mono.svg

Uma cor (currentColor): carimbo, bordado, ícone em linha com texto.

A partir de 24 px (médio: 16 px)

benflow-ladrilho.svg · -verde

Logo quadrada: app, avatar do bot, perfil. O verde é para peças de marketing.

A partir de 32 px

benflow-favicon.svg

Favicon desenhado em pixel (grade 16). Aro de 1 px para aba escura. 32 px: favicon-32.png (vetorial médio).

Só 16 e 32 px

benflow-simbolo-animado.svg

O olho direito vira cursor "_" e pisca: carregando, IA digitando, boas-vindas. Parado com prefers-reduced-motion.

Hero, loading, estado vazio

benflow-powered-by.svg

Selo do rodapé white label, com a versão média do símbolo.

A partir de 18 px de altura

Assinatura

ascendente · orelhaaltura de x · cabeçalinha de base · queixo

Palavra "benflow" em Inter 900, minúsculas, espaçamento de -0,03 em, convertida em contorno. O queixo senta na linha de base, o topo da cabeça bate na altura de x e a ponta da orelha na linha das ascendentes (b, f, l). A medalha desce como uma descendente.

RRRR

Respiro (R): 1/4 da altura do símbolo, a mesma distância entre o símbolo e a palavra. Nada entra nessa área.

Cores

Tinta#0e0f0cContorno, vincos, olhos, palavra, fundo escuro
Verde#9fe870Verso da orelha dobrada, medalha ao vivo, destaques
Verde floresta#163300Texto sobre verde, fundos profundos
Branco#ffffffO papel do cachorro
Canvas#e8ebe6Face em sombra (dobra de vale) e fundo do site

Tamanhos mínimos

PeçaArquivoUso
Símbolo completobenflow-simbolo(-escuro).svg48 px ou mais
Símbolo médiobenflow-simbolo-medio(-escuro).svg20 a 47 px
Faviconbenflow-favicon.svg, favicon-16.png, favicon-32.png16 e 32 px (aba, favoritos)
Horizontalbenflow-horizontal(-escuro).svg32 px de altura ou mais
Horizontal médiobenflow-horizontal-medio(-escuro).svg18 a 31 px de altura (barra de navegação)
Powered bybenflow-powered-by(-escuro).svg18 a 28 px de altura (rodapé do painel do cliente)
Ladrilhobenflow-ladrilho(-verde).svg, apple-touch-icon.png32 px ou mais (app, avatar, PWA)

Usos certos e errados

Símbolo claro sobre branco ou canvas.
Versão escura sobre tinta ou floresta.
Sobre verde, só com ladrilho (a orelha vira tinta).
Abaixo de 48 px, a versão média.
Não espelhar: a orelha em pé fica à esquerda.
Não trocar o verde do verso da orelha.
Não pôr o símbolo solto sobre verde: a orelha some.
Não esticar, girar, sombrear nem arredondar cantos.
Não usar o completo abaixo de 48 px: os vincos viram cinza.
benflow
Não redigitar a palavra em outra fonte: use o arquivo em contorno.

Padrão de fundo: vincos

Um diagrama de dobra feito com as arestas do próprio cachorro: cada vinco passa por um vértice do símbolo e segue a inclinação da aresta até atravessar o papel. O ladrilho de 320 px repete sem emenda. Já vem com a opacidade certa (tinta a 10% no claro, branco a 7% no escuro): use como fundo de seção, nunca atrás de texto pequeno.

Chamados que chegam
organizados.
Seu fiel escudeiro
de plantão.
/* fundo claro */  background: #e8ebe6 url(/brand/padrao-vincos.svg);
/* fundo escuro */ background: #0e0f0c url(/brand/padrao-vincos-escuro.svg);

<link rel="icon" href="/brand/benflow-favicon.svg" type="image/svg+xml">
<link rel="icon" href="/brand/favicon-32.png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="/brand/apple-touch-icon.png">