Design System v1.0

Guia de estilo de marca

Tokens visuais, componentes e diretrizes que definem a identidade CPFHub.io.

Identidade visual

Logo e identidade

Variantes do logo para diferentes contextos e fundos.

CPFHub.io

Fundo Escuro

CPFHub.io

Fundo Colorido

CPFHub.io

Fundo Claro

Ícone Isolado

Correto

Mantenha espaçamento mínimo equivalente à altura do ícone
Use a variante adequada para cada tipo de fundo
O ícone pode ser usado isoladamente em espaços reduzidos
Preserve as proporções originais ao redimensionar

Evite

Não altere as cores, gradiente ou proporções do logo
Não adicione efeitos extras, sombras ou distorções
Não use o logo em fundos que comprometam o contraste
Não recorte ou oculte partes do logotipo

Tokens de cor

Paleta de cores

Sistema construído sobre transparências e gradientes azuis em contexto escuro.

Cores de Marca

Azul Primário

Cor principal da marca — botões, links e destaques

Azul Claro

Gradientes e elementos de destaque

Azul Escuro

Estados hover e gradientes

Neutros

Cinza 400

Texto secundário e descrições

Cinza 500

Texto de apoio e captions

Cinza 900

Texto principal em fundos claros

Fundos Escuros

Fundo Base

Fundo principal da aplicação (body)

Fundo Sutil

Seções alternadas e hero backgrounds

Surface

Fundo de cards sobre fundo escuro

Status

Sucesso

Indicadores de sucesso e status positivo

Erro

Erros e avisos críticos

Atenção

Avisos e indicadores de atenção

Gradientes

from → to

Gradiente Primário

from-blue-500 to-blue-600

Botões primários — referência canônica da Navbar e Hero

hover state

Gradiente Hover

hover:from-blue-600 hover:to-blue-700

Estado hover dos botões primários

destaque

Gradiente Sutil

from-blue-500/20 to-blue-600/5

Cards em destaque e seções featured

Exemplo

Texto Gradiente

.text-gradient

Instrument Serif italic + bg-clip-text, para palavra de destaque no título

Tipografia

Sistema de fontes

Três famílias tipográficas com funções distintas na hierarquia visual.

Inter

font-sans

Integre validação de CPF em minutos.

400Regular

500Medium

600Semibold

700Bold

Corpo de texto, interfaces, labels e UI geral

--font-inter

Geist Sans

font-display

API de Consulta de CPF

500Medium

600Semibold

Títulos, headings e elementos de destaque

--font-geist-sans

Instrument Serif

font-serif

infraestrutura

400iItalic

Palavra de destaque em títulos — via .text-gradient

--font-instrument-serif

Utilitário .text-gradient

globals.css

Instrument Serif italic + gradiente azul. Sempre aplicado a uma única palavra de destaque no título.

A infraestrutura de confiança

<span className="text-gradient">infraestrutura</span>

Escala Tipográfica

Display<h1>

font-display text-5xl lg:text-6xl font-medium tracking-tight

CPFHub.io

Heading 1<h1>

font-display text-4xl md:text-5xl font-medium tracking-tight

API de Consulta de CPF

Heading 2<h2>

font-display text-3xl md:text-4xl font-medium tracking-tight

Validação em Tempo Real

Heading 3<h3>

font-display text-2xl font-semibold

Documentação Completa

Body Large<p>

text-lg leading-relaxed

Integre validação de CPF em minutos com nossa API REST.

Body<p>

text-base leading-relaxed

API de consulta de CPF para sua aplicação.

Body Small<p>

text-sm

Resposta em tempo real com dados precisos.

Caption<span>

text-xs text-gray-400

Dados atualizados diariamente

UI Components

Componentes de interface

Padrões reutilizáveis que compõem todas as páginas do produto.

Botões

Gradiente canônico: from-blue-500 to-blue-600 — mesmo usado na Navbar e Hero.

Variantes

Tamanhos

Com Ícone — Referência Hero/Navbar

Botão de Navegação (Navbar)

Classe: bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white

Badges e Pills

Usados em heroes e seções de destaque para contextualizar conteúdo.

Badge Primário

LGPD Compliant

Neutro

Cards

Todos usam rounded-xl como padrão. Sem sombras.

Card Padrão

Feature cards e conteúdo geral.

Card Destaque

Planos e elementos prioritários.

Card Sutil

Informações secundárias.

Bloco de Código

Usado na documentação com syntax highlighting por linguagem.

JavaScript

1const response = await fetch(2 'https://api.cpfhub.io/v1/cpf/12345678900',3 {4 headers: {5 'x-api-key': 'sua-chave-api',6 'Content-Type': 'application/json',7 },8 }9);1011const data = await response.json();12// { name: "João Silva", birthDate: "1990-01-15" }

Layout

Espaçamento e ícones

Escala de 8px aplicada de forma consistente em toda a interface.

Tokens de Espaçamento

gap-624px

gap-832px

p-624px

p-832px

py-2080px

md:py-32128px

mb-416px

mb-1664px

Ícones (Lucide React)

w-4 h-416px

Ícones em botões e inline

w-5 h-520px

Ícones em listas e badges

w-6 h-624px

Ícones de navegação

w-7 h-728px

Ícones de feature cards

w-9 h-936px

Ícone isolado (container médio)

w-11 h-1144px

Ícone isolado (container grande)

Border Radius

rounded-xl é o valor canônico para todos os cards e containers.

rounded-lg8px

✓

rounded-xl12px

padrão

rounded-2xl16px

rounded-full∞

Animações

Motion e transições

Movimento sutil que reforça interações sem distrair o usuário.

Transições

transition-all duration-300

Cards, botões, bordas

Padrão

transition-colors duration-300

Ícones, texto colorido

Cores

transition-opacity

Copy icons, overlays

Opacidade

transition-transform

Setas e ícones de ação

Transform

Animações (keyframes)

animate-marquee

Scroll de testemunhos (forward)

90s linear

animate-marquee-reverse

Scroll de testemunhos (reverse)

100s linear

animate-accordion-down

Abertura de accordions

0.2s ease-out

animate-accordion-up

Fechamento de accordions

0.2s ease-in

Princípios de Motion

Diretrizes para manter animações consistentes e não intrusivas.

Sutil

Animações existem para dar feedback — nunca para chamar atenção sobre si mesmas.

Responsivo

Interações hover são imediatas. duration-300 para a maioria dos estados visuais.

Funcional

Scroll automático nunca para em hover. Motion adiciona valor ou é removido.