Antes do traço, o porquê.
Marca não é só logo e cor. É o que a FluxAI acredita, como se comporta e como fala. Isto vem primeiro. O resto obedece.
Usar IA virou o básico. Construir com direção humana, com o critério e o acabamento que a máquina sozinha não tem, é o que continua raro. É isso que a FluxAI faz.
Dois caminhos para construir com IA. A Biblioteca: skills e agentes prontos para plugar no Claude, ajustar na marca e rodar hoje. Os Serviços: agentes, landings e automações sob medida, do briefing ao ar. Em todos, o que sai vira produto de verdade, carrega a marca e funciona, sem cara de IA.
Usar IA é o básico. O que separa é a direção humana: critério, intenção e acabamento em cada decisão.
Mostramos número real e demo que roda. Nada de "revolucionário". Se não dá para provar, não vai no ar.
O que sai carrega a marca, funciona e liga no que o cliente já usa. Sem cara de IA, sem projeto de seis meses.
Cinco traços, sempre nesta liga.
Tem cara própria. Não parece template, parece feito à mão.
Cada peça no lugar. Grid, peso e ritmo. Nada solto.
Se move com intenção: onda, count-up, hover. Nunca por enfeite.
Fala o que entrega. B2B adulto, sem hype, sem letra miúda.
Vai ao ponto. Frase curta, verbo forte, zero enrolação.
A FluxAI é
- +Confiante, sem ser arrogante
- +Técnica, mas fácil de entender
- +Minimalista com um detalhe vivo
- +Fria na cor, quente na intenção
A FluxAI não é
- –Genérica ou "startup de stock photo"
- –Cheia de jargão e promessa vazia
- –Colorida, festiva, com emoji gritando
- –Rosa, verde ou logo de empresa famosa
Como a FluxAI fala.
Português do Brasil, em voz de empresa. Quem fala é a FluxAI, não o fundador puxando conversa: título em frase nominal, corpo descrevendo o que acontece. Frase curta, uma ideia por frase, número quando ele é a promessa. Zero "revolucionário", "disruptivo", "game changer". Sem elogio na própria voz e sem comparação com o mercado. Nunca travessão.
"Responde em segundos. De madrugada, no feriado, sempre."
"47s do primeiro oi ao horário marcado."
"Nossa solução revolucionária de IA vai transformar o seu atendimento!"
"A ferramenta mais disruptiva e game changer do mercado."
Um hexágono contornado. Nada mais, nada menos.
A marca é o traço: um hexágono de contorno em gradiente índigo, aberto por dentro. Sem preenchimento, sem efeito, sem mascote.
-
//_A
Construção
O símbolo vive no viewBox 0 0 34 38, com cantos suavizados por curvas. O traço usa stroke-linejoin round e o gradiente hexStroke, que corre do violeta claro #9FA5E8 ao índigo #4F5BFF e termina no azul #5AA9FF.
-
//_B
Dois pesos de traço
Stroke 3.2 quando o hexágono é a marca (favicon, lockup, assinatura de peça). Stroke 0.7 quando ele é atmosfera: o hexágono gigante que flutua atrás do hero, a 34% de opacidade, com o gradiente no traço.
-
//_C
Respiro
Reserve ao redor do símbolo, no mínimo, metade da altura dele em área livre. O hexágono é um traço fino: encostado em outros elementos, ele desaparece.
-
//_D
O que nunca fazer
Nunca preencher o hexágono, nunca recolorir fora da paleta, nunca rotacionar ou distorcer, nunca aplicar sombra quente. Os exemplos proibidos estão no capítulo //_06.
Três vozes: display, corpo e máquina.
Clash Grotesk fala alto, Inter explica, o mono anota. Cada nível hierárquico tem um peso fixo, sem exceção.
Clash Grotesk
A voz da marca. Todos os títulos, números display, preços e o wordmark. Os pesos 300, 400 e 500 fazem o trabalho; 200 e 600 ficam carregados como reserva, sem uso no site.
Inter
O texto que explica: parágrafos, subtítulos de seção, listas de features e links de navegação. Corpo em 400, interface em 500, ênfase com strong em 600.
SF Mono / ui-monospace
A camada de anotação: pills //_0X, legendas FIG., fontes de dados, tags e o rodapé. Sempre uppercase, tracking largo de .14em a .18em, tamanhos de 9 a 11.5px.
Cada minuto que um lead espera, a venda esfria.
A matemática da resposta rápida.
Qualifica a intenção. Agenda a reunião.
Respondem em segundos. De madrugada, no feriado, sempre.
-
//_A
Manifesto e heroClash 300
As frases grandes que abrem a conversa: o h1 do hero e o statement do problema. Sempre leves, sempre 300.
-
//_B
Títulos de seção e CTA finalClash 400
Os h2 que estruturam a página. Um degrau acima do manifesto em presença, ainda longe do bold.
-
//_C
Números display e preçosClash 400 + grad
Mesmo peso 400 dos títulos, com gradiente índigo por cima, tracking apertado de -.028em e tabular-nums para o count-up não tremer.
-
//_D
Títulos de card, etapa e logoClash 500
Onde o texto é menor e precisa de firmeza: h3 dos cards, nome da etapa no gauge, linhas da lista técnica e o wordmark.
-
//_E
Corpo e apoioInter 400 / 600
Inter 400 em 16px com line-height 1.6. Subtítulos em 16.5px, apoio em 14.5px e 13.5px. Ênfase pontual com strong 600, nunca com itálico.
-
//_F
Labels técnicosMono 400
Mono 400, uppercase, tracking .14em a .18em. É a camada que numera, cita fonte e assina as figuras. Nunca vira título.
Índigo do começo ao fim.
Navy como palco, índigo como energia. Toda cor da FluxAI vive entre o violeta e o azul. Nada esquenta.
Peças vivas, direto do site.
Nada abaixo é ilustração: cada componente usa o mesmo CSS do site. Passe o mouse e veja. A navegação e os botões foram sincronizados em 22/09/2026, quando o site inteiro passou pela linguagem nova.
Fixa no topo, blur 18px com saturação 150%. Sobre seção clara ela troca sozinha para o tema claro, via data-nav.
Primário: pílula clara translúcida + chip escuro circular #0E1019 com três pontos que deslizam e viram seta. Ghost: contorno fino, blur, seta que desce. Zero degradê no botão.
Pill de seção: dot índigo com glow + nome + índice //_0X. Sobre fundo claro, a mesma pill troca borda e tinta automaticamente. Chips de integração usam raio 12px.
Clínicas estéticas
Avaliações agendadas enquanto a clínica dorme.
Alguém pergunta o valor do procedimento às 23h. O agente responde na hora, entende o perfil e agenda a avaliação direto na agenda da clínica.
SaaS B2B
Trials quentes direto na agenda do closer.
O trial de alta intenção levanta a mão. O agente qualifica o fit, entende o caso de uso e coloca a demo na agenda do closer.
Serviços
Orçamentos que não ficam no vácuo.
O cliente pede orçamento e costuma sumir. O agente responde em segundos, entende o escopo e transforma a proposta em reunião marcada.
Receita: borda line-d, vidro com blur 12px, brilho interno no topo. No hover: sobe 5px, cresce 2.5%, sombra índigo, sublinha em gradiente cresce da esquerda e o descritivo abre.
mais conversão para quem responde o lead em até 5 minutos.
entre a mensagem do lead e a primeira resposta do agente.
sempre no ar. Sem horário, sem fila, sem "retornamos depois".
Uma composição só de vidro: números display em gradiente com count-up de 1.7s, aurora animada no hover de cada card, cantoneiras técnicas e a onda de benchmark em canvas na base. Fica estática com reduced-motion.
Qualifica a intenção
Entende o que o lead quer, faz as perguntas certas e separa curioso de comprador.
No site, o arco anima por stroke-dashoffset, os nós são clicáveis, a etapa troca a cada 3s e uma lista técnica sincronizada acompanha abaixo. Vive sempre em seção clara.
Flag em gradiente para destaque de plano, labels //_ com dot índigo, legendas FIG. em mono tênue e as quatro cantoneiras de 10px que marcam painéis técnicos.
-
//_S1
Onda de malha do heroCanvas · hero
Wireframe 3D em canvas 2D com perspectiva: 64 colunas, 26 linhas, traços em rgba(125,135,250) que ganham alpha perto da câmera. Assina a abertura do site.
-
//_S2
Onda de benchmarkCanvas · números
Oito ondas senoidais em deriva, paleta violeta → índigo → azul com glow nas linhas da frente. Vive na base do painel de números, mascarada para derreter para cima.
-
//_S3
Gauge do métodoSVG · método
Arco semicircular de raio 160 com trilha pontilhada, progresso em gradiente e cinco nós numerados. A etapa ativa flutua no centro, dentro da moldura hexagonal.
-
//_S4
Alternância escuro / claroLayout · global
O ritmo do site: escuro, claro, escuro, claro. A nav lê data-nav de cada seção e troca de tema sozinha. Esta página respira do mesmo jeito.
Quatro jeitos de dar peso.
Cada um com um trabalho.
Decodificados do feed em 22/09/2026. Usar um só faz a página inteira falar no mesmo tom: o que nega, o que sustenta e o que conclui precisam soar diferente.
Construir com craft
continua raro.
O que virou comum, e por isso deixou de ser diferencial. A palavra esmaece e o risco passa por cima.
O termo em que a frase se apoia. Fundo indigo cheio, como marcador de texto.
A conclusão. A barra cresce por baixo depois que a frase foi lida.
Elevação. Era o único recurso do site antes de 22/09, e por isso tudo soava igual.
Do post do currículo. A palavra que não serve aparece em tamanho grande e uma barra de luz a atravessa, com brilho nas bordas. O corte é o argumento, não um enfeite: use apenas quando a página estiver de fato negando alguma coisa.
O rótulo de seção mora dentro de uma pill com borda. O //_ é desenhado pelo CSS, não digitado no texto, para nunca sair errado.
Vidro, raio e ritmo.
O volume da FluxAI não vem de sombra pesada: vem de vidro translúcido, raios generosos e muito ar entre as seções.
pílulas, botões e chips
cartão de conceito
bolhas da conversa
campo de foco e código
barra de gradiente do card
avatar, marcador e ponto
Preenchimento rgba(235,237,250,.015 a .05), borda line-d, blur 12px e um fio de brilho interno no topo. O glow índigo fica atrás, no fundo, nunca no card.
Barra de filtro do acervo e do manual.
blur(12px)Cards de vidro, spills, chips.
blur(12px)Barra fixa e campo de foco e código.
blur(14px)O fio de luz no topo de todo vidro.
inset 0 1px 0 rgba(255,255,255,.05 a .09)Profundidade do benchmark.
0 44px 96px -56px rgba(79,91,255,.3)Cards de setor e planos ao subir.
0 28px 64px -30px rgba(79,91,255,.4)O ponto índigo das pills.
0 0 10px rgba(79,91,255,.9)Toda transição do sistema usa a mesma ease.
cubic-bezier(.22,.8,.24,1)Hover .3 a .45s · reveal .85s · count-up 1.7s · aurora 18s.
--easeEntra de baixo, 26px, com atraso escalonado via --d.
translateY(26px) → 0Largura máxima do conteúdo, com 24px de margem por lado no mobile.
min(1240px, 100% - 48px)O respiro vertical padrão entre capítulos.
clamp(90px, 11vw, 150px)O problema e o como funciona ganham ainda mais ar.
clamp(110px, 13vw, 180px)Distância entre o s-head e o conteúdo.
clamp(44px, 5.5vw, 72px)Cards de setor, planos e colunas em geral.
16pxCompensa a nav fixa ao navegar por âncoras.
scroll-padding-top: 96pxO que a FluxAI faz. E o que nunca faz.
Constância é a marca. Estas regras valem para todo material: site, landing, caso, link-in-bio, post e proposta.
Sempre sim
- Clash Grotesk em todos os títulos, no peso 500. A família carregada tem 400 e 500 apenas. 🔴 Nunca Clash Display, nunca bold.
- Paleta índigo: navy de palco, índigo de energia, gradiente #9FA5E8 → #4F5BFF → #5AA9FF.
- Hexágono contornado, com gradiente no traço: 3.2 como marca, 1.5 como moldura de ícone.
- Vidro e ar: superfícies translúcidas com blur, raios generosos, seções alternando escuro e claro.
- Camada mono numerando tudo: //_0X, FIG., SET., fontes de dados citadas.
- Honestidade B2B: todo número tem fonte, toda promessa tem método. Sem prova social inventada.
- PT-BR sempre, em tom direto e profissional. Preferir "para" em vez de "pro" e "pra" em texto formal.
Nunca
- Rosa ou magenta. É a assinatura da marca pessoal Pê Social. Na FluxAI, nunca, em nenhum material.
- Verde. Nem para check, nem para sucesso, nem para dinheiro. Estados positivos usam índigo.
- Logo falso de empresa famosa como prova social. Só cliente real, com autorização real.
- Travessão no meio do texto. Separar ideias com ponto, vírgula ou dois-pontos.
- "Num" e "numa". Escrever sempre "em um" e "em uma".
- Hexágono preenchido, rotacionado ou recolorido. A marca é o contorno em gradiente, e só.
- Degradê quente, neon aleatório, sombra colorida fora do índigo. Se esquentou, saiu da marca.
A marca aplicada, de verdade.
Os mesmos tokens, fontes e componentes deste manual sustentam todos os canais da FluxAI.
A marca nas redes.
Capas, avatar e posts nascem do mesmo sistema: navy, hexágono, Clash, gradiente índigo e labels mono. Exportados no tamanho padrão de cada rede, prontos para subir.
