12 · Linguagem gráficabFlow · Brand book 3.0

Tudo nasce da pista: faixas, curvas e um traço lima

1 · Recorte do símbolo

O símbolo ampliado e sangrando pela borda, a 15–25% de opacidade. Sempre uma só curva visível; nunca o símbolo inteiro como textura.

2 · Faixas de aceleração

Três faixas paralelas que sobem a 45°. Só a de dentro é lima. Servem de fundo para capas, stories e cabeçalhos de apresentação.

+32%margem
2 diasfechamento
3 · Traço de resultado

Um traço lima curto, horizontal, antes de todo número que representa resultado. É o "sinal" da marca em texto: não se usa em números neutros.

4 · Cantos e superfícies

Raio generoso (22,5% do lado em ícones; 16–18 px em cards). Sem sombras pesadas: profundidade vem de camadas de cor, não de blur.

Fotografia e ilustração
  • Gente real de PME em ambiente real: balcão, oficina, clínica, escritório pequeno. Nada de banco de imagem com terno e aperto de mão.
  • Luz natural, cor fiel, enquadramento com espaço para texto à esquerda.
  • Telas do produto sempre reais (nunca mockup inventado), em moldura simples de dispositivo ou flutuando com sombra suave.
  • Ilustração só em estados vazios e onboarding: linha contínua, 2 px, meia-noite + um detalhe lima.
Ícones e gráficos
  • Ícones de linha da família Phosphor (peso regular, já usada no produto), 1,5 px em 24 px, cantos arredondados. Reservas: Sparkle = IA, Tag = etiquetas, Wrench = OS, Tray = caixa de entrada.
  • Um detalhe lima por ícone no máximo, e só quando ele indica ação de IA ou ganho.
  • Gráficos: azul bFlow para a série principal, lima para a meta ou o ganho, cinza #C9CFEA para comparação. Sem 3D, sem gradiente em barras.
Composição e ritmo
  • Grade de 8 px; margens de 1/18 da largura da peça (72 px em 1440; 24 px em 1080 mobile).
  • Um ponto focal por peça: ou o número, ou a tela, ou a frase. Nunca os três.
  • Proporção 60/30/10: fundo (névoa ou meia-noite), azul em blocos e botões, lima só no acento.
  • Movimento: as faixas entram da esquerda para a direita e sobem; animações de 180–240 ms, easing "out". Nada pulsa, nada gira.
Faça
✓ Uma curva da pista sangrando pela borda✓ Número grande com traço lima antes✓ Fundo meia-noite ou névoa, azul em blocos✓ Tela real do produto, sem retoque
Não faça
✗ Símbolo repetido como padrão de fundo✗ Texto corrido em lima ou lima sobre branco✗ Gradiente azul→roxo, brilho, 3D, sombra pesada✗ Ícones coloridos de pacotes genéricos ou emojis como ícone
bFlow · Brand book 3.012