Manual da Marca bFlow 3.0

1. O que é a marca

O bFlow é um SaaS de gestão empresarial para PMEs: vendas, financeiro, atendimento, projetos e pessoas no mesmo fluxo, com IA que executa tarefas. É uma marca independente — hoje produto da BitGrow, amanhã possivelmente empresa à parte. Por isso a marca não se apoia em nenhuma outra: não cita Teu Sócio nem usa a BitGrow como argumento; a BitGrow aparece só como endosso jurídico (rodapé do site, termos, contrato, nota fiscal).

• Essência: movimento com clareza.
• Propósito: fazer a pequena e média empresa funcionar como uma grande, sem o peso de uma grande.
• Promessa: você vê a empresa inteira e decide em tempo real; o resto anda sozinho.
• O que quer passar: clara, rápida, inteligente, organizada, moderna, confiável.
• A veia: produtividade — mas vendida pelo resultado. O cliente não compra produtividade nem tecnologia; compra caixa, cliente atendido, equipe certa, decisão a tempo.
• Nome: escreve-se bFlow sempre (também no início de frase). Nunca "BFlow", "Bflow", "B-Flow". Pronúncia "bi-flou".
• Assinatura: Sua empresa em fluxo. Variações: "Do caos ao fluxo." (campanha) · "Tudo em um lugar. Tudo em movimento." (produto) · "Flua." / #flua (redes).

2. Manifesto

Toda empresa é um fluxo. Pedidos entram, pessoas trabalham, dinheiro circula, clientes voltam. Quando o fluxo trava, a empresa para: no WhatsApp sem resposta, na planilha desatualizada, no boleto que ninguém cobrou. O bFlow existe para tirar o atrito do caminho. Vendas, financeiro, atendimento e pessoas no mesmo lugar, com inteligência que trabalha enquanto você decide. Não é sobre software. É sobre a sua empresa andar. Sua empresa em fluxo.

3. Posicionamento

Para quem dirige uma PME e cansou de juntar planilha, WhatsApp e sistemas que não conversam, o bFlow é o SaaS de gestão empresarial que coloca vendas, financeiro, atendimento e pessoas no mesmo fluxo, com IA que executa tarefas, diferente de ERPs pesados feitos para grandes empresas e de aplicativos soltos que resolvem uma parte só.

• Público: donos e gestores de PMEs de serviços e comércio (5 a 100 pessoas); contadores e consultorias que os atendem.
• Categoria: para o cliente, "sistema de gestão"; em busca/comparação, "ERP para PME com IA".
• Provas: tudo num lugar só, em tempo real · IA que faz, não só responde · implantação em dias, não meses.

4. Personalidade e voz

• Personalidade: precisa, ágil, confiante. Fala pouco, entrega muito, mostra o número antes do adjetivo. Nunca arrogante, nunca infantil.
• Valores: clareza (ver tudo sem tradutor) · movimento (nada fica parado) · simplicidade (qualquer pessoa da empresa usa) · inteligência útil (IA que executa, não que enfeita).
• Tom: frases curtas, verbos no presente, "você" (nunca "o usuário"), número real em vez de superlativo. Promete o que entrega; não vende mágica.
• A IA chama-se "IA do bFlow". Não cita fornecedor nem modelo. Fala do que fez e do que falta: "conciliei 112 lançamentos; 2 precisam de você".
• Falamos: fluxo, em tempo real, enxergar, decidir, sua empresa, a IA do bFlow. Evitamos: solução, robusto, revolucionário, disruptivo, o usuário, nome do fornecedor de IA.
• Assim / não assim: "Você vê o que está vencido antes de o cliente ligar." ✓ · "Solução robusta de gestão financeira integrada." ✗ — "Implantação em 5 dias úteis. Com os seus dados." ✓ · "Onboarding ágil e disruptivo." ✗
• Títulos sem ponto final; frases de campanha com ponto final. Sem caixa alta em botões, sem exclamação em interface, sem emoji na interface (em redes, no máximo um por legenda).
• Números: "R$ 84,3 mil" em comunicação; valor exato em tabelas e documentos fiscais.
• Erros dizem o que aconteceu e o que fazer, nessa ordem.

5. Identidade visual

5.1 Símbolo "Pista"

Três faixas concêntricas que correm na horizontal, fazem a curva juntas e sobem a 45°. As duas de fora na tinta da marca; a de dentro — a que faz o caminho mais curto e chega mais longe — em lima.

• O que comunica: três faixas paralelas = organização (cada área na sua faixa); curva de centro comum = agilidade (a empresa inteira vira junta); subida a 45° com comprimentos em progressão = crescimento e aceleração; faixa de dentro em lima = produtividade, performance, IA (a rota inteligente). A silhueta ecoa um "b" sem ser uma letra.
• Por que linha e não massa: linha de espessura constante é a gramática da precisão (mapas, instrumentos, interfaces); diz tecnologia sem desenhar um computador e reduz a 16 px ou amplia a uma fachada sem perder leitura.
• Descartados: letra "b" (ferramenta genérica), nuvem, seta, engrenagem, gráfico de barras (todo concorrente), estrela de IA (clichê), blocos sólidos (pesado, adesivo).
• Construção (malha 120): traço 14; faixas em y = 104 / 82 / 60 (passo 22); centro comum da curva em (46, 52), raios 52 / 30 / 8; subida a 45° com comprimentos 20 / 44 / 68; terminais redondos. Versão micro (abaixo de 64 px): duas faixas, traço 17, raios 40 / 14. Tile do ícone: raio 22,5% do lado (27 em 120), símbolo a 78%.
• Área de proteção: a altura de uma faixa em todos os lados. Mínimos: símbolo 16 px (micro), assinatura 24 px de altura.
• Proibido: recolorir fora das cores do tema, inclinar, espelhar, sombra, degradê, contorno, símbolo sobre foto sem tile, repetir como padrão de fundo, redesenhar o nome em outra fonte.

5.2 Assinaturas

• Horizontal (principal): símbolo + nome em Sora Bold, tracking −5%; símbolo com a altura das letras "bF"; respiro = 0,22 da altura do símbolo. Site, app, propostas, assinaturas, apresentações.
• Vertical: símbolo sobre o nome (nome com 0,55 da largura do símbolo). Brindes, selos, colunas estreitas, abertura de vídeo.
• Símbolo isolado: avatar, favicon, ícone de app, marca d'água — só quando o nome já apareceu perto.
• Nome isolado: texto corrido, rodapés.
• Com tile azul: fundos imprevisíveis (foto, parceiro, redes).

5.3 Versões de cor (8) e P&B para o INPI

1. Principal sobre azul bFlow (símbolo branco + lima, nome branco) · 2. Sobre claro (faixas azul #315CF6 + lima tinta #8DB000, nome meia-noite) · 3. Sobre escuro (branco + lima #BAE314) · 4. Sobre lima, só campanha (meia-noite + azul) · 5. P&B positivo (preto 100%) — depósito INPI · 6. P&B negativo · 7. Escala de cinza (faixa de dentro a 50%) · 8. Traço (gravação, corte, relevo).

INPI: depositar três pedidos em preto e branco — mista (símbolo + nome), figurativa (só o símbolo) e nominativa ("bFlow") — nas classes 9 (software) e 42 (SaaS); avaliar 35 (gestão de negócios). Antes: busca de anterioridade nominativa ("bflow", "b flow", "be flow") e figurativa. Arquivos: JPG 945×945 px, 300 dpi, fundo branco, sem tile, sem slogan. Titular: a PJ que vai explorar a marca, com previsão de cessão se o bFlow virar empresa. Orientação de marca, não parecer jurídico — confirmar com agente de PI.

5.4 Cores

Regras: 60/30/10 — fundo, azul em blocos e botões, lima só no acento (≤10%); lima nunca é texto corrido nem sobre branco; o lima só aparece no produto quando há resultado ou ação da IA (fechamento, meta, recebimento, sugestão). Escalas completas de 7 tons (azul, lima, neutros) em marca-3.0/tokens/tokens.json.

5.5 Tipografia

• Sora (700–800, tracking −2% a −5%) para títulos, números-herói e logotipo — substitui a Montserrat do v1.0.
• Inter (400–600) para texto e interface — já é a fonte do produto. Números tabulares em colunas financeiras.
• Escala: display 56/40 · título-1 40/30 · título-2 28/24 · título-3 20/18 · número-herói 32 · corpo 16/15 · corpo pequeno 14/13 · rótulo 12 caixa alta +12% · botão 15. Reserva em e-mail/Office: Arial.
• Nunca mais de dois pesos por peça; nunca itálico em títulos; 55–75 caracteres por linha.

5.6 Linguagem gráfica

1. Recorte do símbolo: uma curva ampliada sangrando pela borda, 15–25% de opacidade. 2. Faixas de aceleração: três faixas paralelas subindo a 45°, só a de dentro em lima; fundo de capas, stories e cabeçalhos. 3. Traço de resultado: um traço lima curto antes de todo número que representa ganho. 4. Cantos e superfícies: raio generoso, sem sombra pesada; profundidade por camadas de cor.
2. Fotografia: gente real de PME em ambiente real, luz natural; telas do produto sempre reais. Ilustração só em estados vazios e onboarding (linha 2 px, meia-noite + um detalhe lima).
3. Ícones: Phosphor (peso regular), no máximo um detalhe lima por ícone e só para IA ou ganho. Gráficos: azul principal, lima para meta/ganho, cinza #C9CFEA para comparação; sem 3D, sem degradê.
4. Movimento: 120–240 ms, easing de saída; nada pulsa, nada gira. As faixas entram da esquerda e sobem.
5. Faça: uma curva sangrando, número grande com traço lima, fundo meia-noite ou névoa, tela real. Não faça: símbolo como padrão, texto em lima, gradiente azul→roxo, 3D, sombra pesada, ícones coloridos genéricos, emoji como ícone.

6. Aplicação no produto (resumo — detalhe no Design System 3.0 e no design-system-bflow.md)

• Temas: os 5 já existentes — light (Claro Padrão), light-vibrant, dark-vibrant, ameixa, high-contrast. O tema não recolore o logo: sobre barra clara, azul + lima tinta; sobre barra escura, branco + lima; Ameixa usa o seu lima #B2D300; Alto Contraste usa a versão P&B. Propostas 3.0 para aprovação: fundo do Claro Padrão em névoa #F4F6FB (hoje #FFFFFF) e do Escuro Vibrante em meia-noite #0A0F2C (hoje #0B0D1A).
• Onde a marca aparece: topo da barra lateral (símbolo 20–24 px), login, splash, favicon/PWA, avatar de notificação. Em mais lugar nenhum da interface.
• Ícones: iOS/Android 1024 com tile azul, Android adaptive (fundo #315CF6 + foreground símbolo com margem 18%), PWA 192/512 maskable, favicon 16/32/48 na versão micro, notificação monocromática branca. theme-color #315CF6 no claro, #0A0F2C no escuro (por tema, como já é feito).
• Mobile: cabeçalho com o símbolo micro, sem nome; barra inferior com aba ativa em azul (claro) ou lima (escuro) — única exceção em que o lima marca navegação.
• Momentos de resultado: fechamento, meta batida, recebimento e faixa "IA do bFlow" usam o traço lima / fundo lima claro. Fora disso o lima não entra.
• Cor por módulo (regra 90/10 do manual técnico) continua valendo; o lima do bFlow entra como acento, não substitui os acentos de módulo.

7. Aplicação em marketing

• Redes: assinatura pequena no canto superior esquerdo; o conteúdo é o protagonista; alternar fundo escuro e claro no feed, nunca dois posts seguidos de fundo azul; stories com faixas de aceleração no terço inferior; reels abrem com a pista "acendendo" faixa a faixa (0,6 s) e fecham com assinatura sobre meia-noite; anúncio = um número, uma frase, um botão.
• Capa LinkedIn 1128×191: azul bFlow, a pista entra pela direita, texto fora da zona do avatar.
• Cartão 85×55: frente clara com assinatura e dados; verso meia-noite com símbolo.
• E-mail: Arial, ícone com tile em PNG 88 px, sem frase de efeito nem banner.
• Proposta/apresentação: capa meia-noite com recorte do símbolo; miolo em névoa com cards brancos; preços em Sora 800; rodapé com nome isolado à esquerda e página à direita.
• Brindes: caneca meia-noite com símbolo; camiseta com símbolo no peito esquerdo (6 cm); adesivo = tile.

8. Arquitetura de marca

9. Para o Claude Code (execução, após aprovação)

Entregáveis em SPECS/UXUI/marca-3.0/: - logo/ — 13 SVGs: símbolo sobre claro/escuro, micro, tile azul/meia-noite, assinatura horizontal (claro/escuro/azul), P&B positivo/negativo (símbolo e assinatura). - tokens/tokens.json e tokens/tokens.css — cores por tema (5 temas), tipografia, espaçamento, raio, sombra, movimento. Mapa para o globals.css: bg→--background, bg-elevado→--foreground, bg-sutil→--shaded, texto→--text, texto-suave→--label, marca→--primary/--cta-bg, sobre-marca→--on-primary/--cta-ink, link→--primary-text, borda→--border, borda-forte→--input, nav-*→--sb-*, acento*→ novos tokens. - components/ — bundle.css e previews HTML de Logo, Button, Input, Navigation, Card, Badge, Table, Profile, Modal (referência visual; implementar nos componentes existentes em components/ui/*). - brandbook/ — as 15 páginas (HTML + PNG).

Ordem sugerida: (1) tokens.css + fontes Sora/Inter self-hosted; (2) logo na barra lateral, login, splash, favicon, PWA, theme-color; (3) traço de resultado e faixa "IA do bFlow" nos cards de indicador; (4) site bflow.com.br; (5) templates de redes. Tudo via staging → QA (5 temas × telas-chave) → produção, com OK do Carlos.

10. Governança

• Este documento + o Brand book 3.0 + o Design System 3.0 são a fonte única da marca; design-system-bflow.md é a fonte das regras técnicas de UX. Mudança de identidade atualiza os três na mesma rodada.
• Guardião da marca: Carlos Augusto. Novos usos (parceiro, whitelabel, campanha) passam por ele.
• Enquanto o produto não estiver atualizado, as redes podem adotar a marca nova primeiro; a mesma peça nunca mistura logo antigo e novo.