Identidade Visual
Cores, tipografia, logos e guidelines da marca caBRAPI.
NOSSA MARCA
Origem do Nome
caBRAPI é a junção de Cabra (o mais resistente, adaptável) + API (a porta de entrada para automação). Um nome que representa infraestrutura que não para, que escala e que confia no que faz.
A plataforma nasceu com um objetivo claro: democratizar o acesso a tecnologia de pagamento e loja virtual para pequenos empreendedores brasileiros, sem cobrar caro por isso.
Missão
Fornecer infraestrutura tecnológica acessível, segura e escalável que permita a qualquer pessoa criar e gerenciar sua loja virtual com eficiência e controle total.
Visão
Ser referência em democratização do comércio eletrônico no Brasil, conectando tecnologia de ponta à realidade de pequenos empreendedores.
Pilares da Marca
Valores que guiam cada decisão de produto e design.
Automação
Operações manuais transformadas em fluxos automáticos. O que antes levava horas agora roda em segundos. Eficiência que escala.
Controle
Visibilidade total sobre loja, dados e regras de negócio. Sem intermediários, sem surpresas. O empreendedor no comando.
Escalabilidade
Infraestrutura que acompanha o crescimento. Da primeira venda ao milhão, sem travas, sem migração, sem dor de cabeça.
Valores
Princípios que definem como a gente trabalha.
Simplicidade
Tecnologia complexa por trás, interface simples na frente.
Transparência
Preços claros, sem letras miúdas, sem taxas escondidas.
Confiabilidade
Infraestrutura monitorada 24/7. Quando fala, funciona.
Acessibilidade
Preço baixo, barreira de entrada zero. Qualquer pessoa pode começar.
LOGO
O logotipo da caBRAPI é composto pelo nome em Press Start 2P com a cor cyan. Versões para fundo claro e escuro estão disponíveis abaixo.
Logo Primário
Use em backgrounds escuros ou neutros (#111827, #0c0d12)
Use em backgrounds brancos ou claros (#ffffff, #f3f4f6)
Zona Segura
Mantenha sempre um espaço mínimo ao redor do logo equivalente à altura da letra "C" do logotipo.
Espaço mínimo respeitado
Logo encostado nas bordas
Tamanhos Mínimos
Para garantir legibilidade, o logo não deve ser exibido abaixo dos seguintes tamanhos.
| Contexto | Largura Mínima | Uso |
|---|---|---|
| Desktop | 120px | Header, footer, apresentações |
| Mobile | 80px | Aplicativos, responsivo |
| Ícone | 24px | Favicon, avatar (apenas símbolo) |
Variações de Cor
O ícone está disponível em diferentes cores para se adequar a diversos contextos e plataformas.
Blue
Black
Purple
Red
Deep Saffron
Light Transparent
Variações de Formato
Formatos arredondados ideiais para avatares, ícones de aplicativos e plataformas que exigem bordas arredondadas.
Arredondado
Cantos 100% arredondados
Semi-arredondado
Cantos parcialmente arredondados
Regras de Uso
Diretrizes para manter a integridade visual da marca.
- Manter espaçamento mínimo ao redor do logo
- Utilizar os arquivos originais (PNG/WEBP)
- Respeitar a paleta de cores definida
- Manter proporção original do logo
- Alterar as cores do logo
- Esticar, comprimir ou rotacionar
- Adicionar sombras, gradientes ou efeitos
- Utilizar em fundos com baixo contraste
CORES
Paleta reduzida de propósito. Cyan como cor primária, tons de cinza para fundo e estrutura. Cores semânticas para feedback do sistema. Todas as combinações seguem WCAG AA.
Primárias
--color-blue
Cor principal da marca
Uso: Botões primários, links, ícones de ação, badges de destaque
Contraste: WCAG AA em fundo #111827 (4.6:1)
--hover-blue
Estado hover
Uso: Hover states em botões e links interativos
Contraste: WCAG AA em fundo #111827 (4.1:1)
--primary-light
Accents e links
Uso: Textos de destaque em fundo escuro, ícones ativos
Contraste: WCAG AAA em fundo #111827 (8.2:1)
--primary-dark
Variação escura
Uso: Bordas, divisórias, elementos secundários
Contraste: WCAG AA em fundo #ffffff (3.8:1)
Background
--bg-primary
Background principal
Uso: Corpo da página, seções principais
Contraste: Fundo base para textos claros
--bg-secondary
Cards e superfícies
Uso: Cards, modais, painéis laterais, dropdowns
Contraste: Elevação sobre o Gray 900
Borders e separadores
Uso: Bordas de cards, separadores, linhas de tabela
Contraste: Sutil sobre Gray 800
Background translúcido
Uso: Superfícies com backdrop-blur, sobreposições
Contraste: Combina com qualquer fundo
Semânticas
Confirmação, conclusão
Uso: Toasts de sucesso, badges de status ativo, validação
Contraste: WCAG AA em fundo #111827 (5.1:1)
Erros, destruição
Uso: Mensagens de erro, botões de exclusão, validação
Contraste: WCAG AA em fundo #111827 (4.8:1)
Alertas
Uso: Avisos importantes, estados de atenção
Contraste: WCAG AA em fundo #111827 (6.2:1)
Informações
Uso: Dicas, links informativos, badges neutros
Contraste: WCAG AA em fundo #111827 (4.5:1)
Texto
--text-primary
Títulos e corpo
Uso: Títulos (h1-h6), parágrafos principais, labels de formulário
Contraste: Máximo contraste sobre fundo escuro
--text-secondary
Descrições, apoio
Uso: Descrições, textos de apoio, metadados
Contraste: Confortável para leitura prolongada
Placeholders, labels
Uso: Placeholders, labels desabilitados, timestamps
Contraste: Uso moderado, apenas para elementos secundários
Referência CSS
:root {
/* Primárias */
--color-blue: #00BCD4;
--hover-blue: #00A3B8;
--primary-light: #4DEDFF;
--primary-dark: #008496;
/* Background */
--bg-primary: #111827;
--bg-secondary: #1F2937;
/* Texto */
--text-primary: #F9FAFB;
--text-secondary: #9CA3AF;
--text-muted: #6B7280;
/* Semânticas */
--success: #22C55E;
--error: #EF4444;
--warning: #EAB308;
--info: #3B82F6;
}Diretrizes de Uso
Regras para manter consistência visual.
- Manter contraste mínimo WCAG AA (4.5:1)
- Usar cyan para elementos interativos
- Manter consistência com a paleta definida
- Verificar contraste em diferentes fundos
- Usar cores semânticas apenas para feedback
- Usar cores fora da paleta definida
- Misturar cores semânticas com primárias
- Ignorar contraste em fundos escuros
- Usar cores de erro para avisos
- Criar novas variações de cor não documentadas
TIPOGRAFIA
Duas fontes definem a identidade visual. Inter para interface e conteúdo, Press Start 2P para a marca. Ambas carregadas via Google Fonts.
Inter
Sans-serif · Google Fonts · Pesos 300-900
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm
Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0123456789 !@#$%&*()
Pesos e Uso
Press Start 2P
Monospace pixel · Google Fonts · Uso exclusivo da marca
text-lg · Uso: logo em header/footer
caBRAPI
text-sm · Uso: logo em seções internas
caBRAPI
text-xs · Uso: badges, assinatura
caBRAPI
Importante: Press Start 2P é usada apenas para o nome da marca. Não utilize para textos corridos, títulos de seção ou qualquer outro elemento de interface.
Escala Tipográfica
| Elemento | Preview | Classe | Line-height | Uso |
|---|---|---|---|---|
| H1 | Aa | text-5xl | 1.2 | Títulos de página, hero sections |
| H2 | Aa | text-3xl | 1.3 | Títulos de seção |
| H3 | Aa | text-xl | 1.4 | Subtítulos, títulos de card |
| H4 | Aa | text-lg | 1.4 | Títulos de componente |
| Body | Aa | text-base | 1.6 | Parágrafos, conteúdo principal |
| Small | Aa | text-sm | 1.5 | Descrições, texto de apoio |
| Caption | Aa | text-xs | 1.4 | Labels, timestamps, badges |
Propriedades Gerais
Line-height
1.4-1.6 para corpo, 1.2-1.3 para títulos
Letter-spacing
-0.02em para h1, normal para corpo
Font smoothing
Antialiased em todos os textos
ESPAÇAMENTO
Sistema de espaçamento baseado em múltiplos de 4px. Consistência visual em toda a plataforma, do padding de cards ao gap entre elementos.
Escala de Espaçamento
| Token | Valor | Pixels | Tailwind | Uso |
|---|---|---|---|---|
| xs | 0.25rem | 4px | p-1 / gap-1 | Ícones inline, padding mínimo |
| sm | 0.5rem | 8px | p-2 / gap-2 | Padding interno de badges, gaps entre itens |
| md | 0.75rem | 12px | p-3 / gap-3 | Padding de cards pequenos, spacing entre elementos |
| lg | 1rem | 16px | p-4 / gap-4 | Padding padrão de cards, spacing entre seções internas |
| xl | 1.5rem | 24px | p-6 / gap-6 | Padding de seções, spacing entre cards |
| 2xl | 2rem | 32px | p-8 / gap-8 | Padding de seções grandes, spacing entre blocos |
| 3xl | 3rem | 48px | p-12 / gap-12 | Padding vertical de seções da homepage |
| 4xl | 4rem | 64px | py-16 | Padding vertical de hero sections |
Border Radius
Arredondamento consistente em todos os elementos da interface.
none
0
sm
0.375rem
md
0.5rem
lg
0.625rem
xl
1rem
2xl
1.5rem
full
9999px
Breakpoints
Pontos de quebra para design responsivo.
| Breakpoint | Largura | Tailwind | Dispositivo |
|---|---|---|---|
| sm | 640px | sm: | Mobile landscape |
| md | 768px | md: | Tablet |
| lg | 1024px | lg: | Desktop |
| xl | 1280px | xl: | Desktop large |
VOZ DA MARCA
A forma como a caBRAPI se comunica é tão importante quanto o visual. Tom direto, sem enrolação, técnico quando precisa, acessível sempre.
Tom
Direto e objetivo. Fala o que precisa, sem rodeio. Técnico quando o assunto exige, mas nunca arrogante.
✓ "Configure sua loja em 3 passos"
✓ "Preço justo, sem surpresa na fatura"
✗ "Alavanque seu negócio com sinergia digital"
Vocabulário
Use linguagem simples e clara. Prefira palavras curtas. Evite jargão desnecessário, mas não simplifique demais o técnico.
✓ "Loja virtual" em vez de "e-commerce platform"
✓ "Cupom de desconto" em vez de "voucher incentive"
✗ "Otimizar a jornada do consumidor"
Personalidade
A caBRAPI é confiante mas não arrogante. Ajuda quem tá começando, respeita quem já manja. Humor leve quando apropriado.
✓ "Comece pequeno, cresça no seu ritmo"
✓ "Sua loja, suas regras"
✗ "A solução definitiva para o comércio moderno"
Regras de Escrita
Fazer
- Usar voz ativa: "Configure sua loja" em vez de "Sua loja pode ser configurada"
- Ser específico: "R$ 19,98/mês" em vez de "preço acessível"
- Usar "você" para se dirigir ao usuário
- Manter frases curtas e diretas
Não fazer
- Usar linguagem corporativa: "solução", "ecossistema", "disruptivo"
- Exagerar: "o melhor", "revolucionário", "incrível"
- Usar voz passiva: "é possível criar" em vez de "crie"
- Misturar idiomas desnecessariamente