CPFHub.io
Guia de Estilo
Referência visual e técnica do design system. Use esta página para manter consistência em novas páginas, materiais gráficos e integrações com o produto.
01 — Marca
Logo e identidade
O logo é composto pelo símbolo duplo-C e o wordmark Funnel Display Bold. Use sempre os arquivos originais, nunca recrie à mão.
Wordmark
Horizontal — fundo claro
Horizontal — fundo azul
Ícone isolado
Para fundos claros
Para fundos escuros
Regras de uso
Zona de proteção
Mantenha ao redor do logo um espaço mínimo equivalente à largura do símbolo em todos os lados.
Tamanho mínimo
Não use o logo completo abaixo de 120px de largura. Em tamanhos menores, use apenas o símbolo isolado.
O que não fazer
Não recolorir, distorcer, rotacionar, adicionar sombras ou recriar os arquivos manualmente.
02 — Cores
Paleta de cores
Todos os valores são tokens Tailwind definidos em globals.css via @theme inline. Nunca use hex solto em className.
Paleta primária — brand
50
#eef2ff
100
#dce7ff
200
#b9d0ff
300
#84adff
400
#4d7fff
500
#0b53fd
600
#0040e6
700
#0032ba
800
#002795
900
#001e75
950
#000e40
Cores semânticas
Success
#10b981
emerald-500
Warning
#f59e0b
amber-500
Error
#ef4444
red-500
Neutro
#6b7280
gray-500
Superfícies
White
#ffffff
Fundo principal
Alt
#f3f5fb
Seções alternadas
CTA
#002795
CTA / conversão
Dark
#181d26
Código / seções dev
Footer
#0f0e17
Footer
03 — Tipografia
Fontes e escala
Dois typefaces: Funnel Display para headings (font-display) e Inter para body text (font-sans). Ambos via Google Fonts CDN.
font-display (--font-funnel)
Funnel Display
Aa Bb Cc 0123 — Verificação
font-sans (--font-inter)
Inter
Aa Bb Cc 0123 — Body text
font-display text-[46px] font-semiboldfont-display text-[32px] font-semiboldfont-display text-[20px] font-boldtext-lgtext-basetext-smtext-xstext-xs font-semibold uppercase tracking-widestSpecimens
Verificação de identidade sem fricção.
Dados com qualidade superior
API REST simples com a linguagem que você preferir. Documentação completa, exemplos prontos e SDKs para acelerar a integração.
SLA de 99,9% garantido. Estável mesmo com altíssimo volume de requisições simultâneas. Excedente cobrado no mês seguinte.
04 — Ícones
Material Symbols
Biblioteca: Material Symbols Outlined (variável). Importada via Google Fonts CDN. Use sempre o componente Icon, nunca o span diretamente.
Uso do componente Icon
import { Icon } from '@/components/ui/Icon'
// Outline (padrão)
<Icon name="shield" className="text-brand-600" style={{ fontSize: '20px' }} />
// Fill
<Icon name="star" fill style={{ fontSize: '16px', color: '#ffca60' }} />
// Tamanhos pequenos (<= 16px): sempre use style={{ fontSize }}
// Tamanhos >= 18px: text-[Npx] className funcionaÍcones comuns no projeto
Escala de tamanhos
style={{ fontSize: '14px' }}style={{ fontSize: '16px' }}className="text-[18px]"className="text-[20px]"style={{ fontSize: '32px' }}style={{ fontSize: '52px' }}05 — Componentes
UI Components
Componentes base usados em todo o site. Sempre prefira as classes CSS já definidas ao criar variações novas.
Botões
btn-primary bg-brand-500 text-white rounded-xlborder border-gray-300 text-gray-700 rounded-xl hover:border-gray-500Badges & pills
Padrão: rounded-lg para badges de estado. rounded-full para pills de destaque e tags.
Cards
method-card padrão
border: 1px solid #e5e7eb, rounded-2xl, sem shadow em repouso. Hover: border brand-300, glow azul 10%.
method-cardmethod-card featured
border-color: brand-500, shadow brand com 14% opacity. Exclusivo para plano em destaque (PRO).
method-card featuredRegra de uso: Todo card de conteúdo usa method-card. Sem exceções inline.
Shadow: proibido em cards estáticos. Apenas o featured tem shadow permanente.
Ícones: diretos no card, sem container pill (sem bg-brand-50 rounded-xl). Tamanho 28–36px, cor brand-600 ou gray-400.
Background alt: section-alt = #f3f5fb (azul-derivado, tom brand-50 suavizado). Hover de rows = #eff6ff (brand-50).
Inputs
Padrão: border border-gray-200 rounded-xl + focus ring focus:ring-2 focus:ring-brand-500
06 — Espaçamento & Grid
Spacing, grid e layout
Escala Tailwind padrão de 4px base. Max-widths e padding de seção padronizados.
Escala de spacing
Containers e padding de seção
max-w-5xl mx-automax-w-6xl mx-automax-w-7xl mx-autopy-24 px-6py-20 px-6pt-16 pb-16 px-607 — Motion
Animação e transições
Princípio: ease-out, sem bounce nem elastic. Motion deve ser funcional: confirmar ação, revelar conteúdo, indicar estado.
Ease-out sempre
Objetos que chegam desaceleram naturalmente. Nunca use bounce ou elastic no produto.
Durações curtas
150–300ms para micro-interações. 600ms para reveals de scroll. Nunca acima de 800ms sem propósito.
Motion reduzido
Todas as animações respeitam prefers-reduced-motion via @media no globals.css.
0.15s ease0.2s ease0.6s ease+ 0.08s por elemento0.15s all0.3s ease0.8s linear ∞0.5s ease0.2s ease08 — Tom de Voz
Como a CPFHub se comunica
Três atributos definem o tom. Use estes exemplos como referência ao escrever copy para páginas, emails e suporte.
Direto e técnico
Frases curtas. Preferimos mostrar código a descrever. Nada de jargão vazio.
Correto
“Integre em menos de 30 minutos com a linguagem que você já usa.”
Evitar
“Nossa plataforma revolucionária permite que você utilize soluções inovadoras de ponta.”
Confiável, não comercial
Dados reais, SLAs reais, sem hipérboles. Confiança se constrói com transparência.
Correto
“SLA de 99,9% garantido em contrato. Uptime público em status.cpfhub.io.”
Evitar
“A API mais rápida e confiável do mercado — escolhida por milhões de clientes!”
Humano, mas profissional
Falamos com devs e founders. Tom pessoal sem ser informal demais.
Correto
“Dúvidas? Nossa equipe técnica responde via WhatsApp em minutos.”
Evitar
“Ei! Fica à vontade pra mandar um zap pra gente! Tô aqui hahaha 😊”
09 — Uso Incorreto
Anti-patterns de design
Padrões explicitamente proibidos no design system da CPFHub. Qualquer pull request que introduza estes padrões deve ser rejeitado.
Gradient text
Nunca use background-clip: text com gradiente em nenhum texto. Use solid text-brand-500.
Border stripe lateral
Nunca use border-left colorido como acento em cards ou alertas. Use borda completa ou background tint.
Bounce / elastic
Sem cubic-bezier com overshoot. Apenas ease-out. Motion deve ser funcional, não decorativo.
Glassmorphism decorativo
Blur e cards de vidro são proibidos como recurso decorativo padrão. Raro e intencional, ou nada.
Cores fora da paleta
Use apenas tokens definidos (brand-*, gray-*, emerald, amber, rose). Nunca hex solto em className.
Grid de cards idênticos
Evite grids onde todos os cards têm exatamente o mesmo tamanho, ícone + título + texto. Varie o layout.
A lista completa de anti-patterns está documentada nos comentários do arquivo src/app/globals.css e nas referências do sistema Impeccable. Em caso de dúvida sobre um padrão visual, consulte a página de verificação de idade como referência primária de design.