Design System
A.I-Driven.
Identidade e interface, um sistema só. Cores, tipografia, componentes e movimento numa linguagem única — pronta para landing pages, campanhas e apresentações.
Identidade e interface, um sistema só. Cores, tipografia, componentes e movimento numa linguagem única — pronta para landing pages, campanhas e apresentações.
Bomstad Display conduz os títulos de impacto; Inter Tight sustenta a interface e o corpo de texto. Escala em em sobre base de 16px, exatamente como no site.
Seis cores núcleo do guia de marca. O azul é a assinatura; os escuros (Vulcan/Mirage) formam o palco; vidro e gradientes dão profundidade. Clique em qualquer cor para copiar o HEX.
Vulcan #070B16 — base de todas as telas escuras.
Mirage #161824 — contraste sutil entre blocos.
rgba(255,255,255,.03) + blur 6.8px + borda.
Selago #E0E2EE — para peças em fundo claro.
Stroke #3A5461 / hairline rgba(224,226,238,.10).
Purple #AE77FF — destaque pontual de texto.
linear-gradient(90deg,#749CFF,#133CFB) — CTAs e ações primárias.
Radial azul sobre preto — atmosfera da primeira dobra.
#5F7BFF → #AE77FF — palavras em destaque.
Os mesmos widgets do site (Elementor): botões, cards de imagem, icon-box, listas, barras de progresso, inputs e ícones sociais — com seus estados reais.
Botão · gradiente · estados
Image Box · cards de serviço
Campanhas cirúrgicas em Meta, Google e LinkedIn Ads. Cada real investido é rastreado, testado e otimizado para gerar leads qualificados, não vaidade.
Da primeira impressão à reunião agendada. Landing pages, e-mail marketing, nutrição e scoring integrados em um único sistema.
Identidade visual, direção de arte e produção de vídeo. Criativo aqui não é estética, é estratégia.
Dashboards, tracking avançado e análise contínua. Decisões com base em números, não em achismos.
Icon Box & Icon List
Uma régua única para marketing e vendas.
IA aplicada a dados, estratégia e processo.
Container central de 1200px, padding de seção fluido (4vw no hero) e grids flexíveis do Elementor (e-con). Três padrões reais do site.
Do anúncio ao story, da landing page à apresentação comercial — o sistema garante que a CQOIA pareça CQOIA em qualquer lugar: mesma cor, mesma tipografia, mesma energia.
Ver aplicaçõesAs animações reais do site: entrada fadeInDown / fadeIn, o blink das caixas de vidro, o fade do dashboard e os hovers. Passe o mouse para reproduzir.
fadeInDown · 1.25shover para reproduzir
fadeIn · 1.25shover para reproduzir
blink · 2s ∞opacity 1 → .3
fade · 2s ∞mix-blend: screen
transform · .3shover no card
floatY · 1.8s ∞detalhes flutuantes
O símbolo nasce dos pilares da empresa — em gestalt, o pico de uma sequoia e a letra “C” de CQOIA. Use sempre com área de respiro e contraste adequado.
Sistema funcional via Font Awesome — o mesmo do site. Traço consistente, herdando a cor do contexto.
Os mesmos tokens viram blocos de campanha e templates prontos — para landing pages, posts, anúncios e apresentações. Tudo exportável em alta resolução.
Badges & rótulos
Métricas de resultado
Prova social & chamada
Em três meses a CQOIA transformou nosso tráfego em receita previsível. A clareza dos relatórios é de outro nível.
Diagnóstico gratuito de growth em 30 minutos.
Templates prontos para export
Em superfície clara (Selago)
Export: clique em PNG em cada template para baixar em alta resolução (2×). Para o PDF do sistema inteiro: Cmd/Ctrl + P → Salvar como PDF.