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, na segunda pessoa, como quem explica para um dono de negócio esperto, no café. Frase curta. Verbo no comando. Número quando dá. Zero "revolucionário", "disruptivo", "game changer". 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 plantão, sem fila, sem "a gente te retorna".
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.
