Identidade Visual
Cores, tipografia, logos e guidelines da marca caBRAPI.
Nossa Marca
Identidade e valores
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
Uso e variações do logotipo
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
| 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
Paleta de Cores
Cores definidas no design system
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
Fontes e hierarquia de texto
Press Start 2P
Logotipos e títulos decorativos
caBRAPI
PLATAFORMA DIGITAL
AUTOMAÇÃO • CONTROLE • ESCALABILIDADE
Inter
Corpo de texto, UI e elementos gerais
A infraestrutura que transforma tecnologia em faturamento.
Texto principal da plataforma
Pesos da Fonte
| Peso | Nome | Preview | Uso |
|---|---|---|---|
| 300 | Light | caBRAPI | Textos delicados, subtítulos |
| 400 | Regular | caBRAPI | Corpo de texto padrão |
| 500 | Medium | caBRAPI | Labels, botões, navigation |
| 600 | Semibold | caBRAPI | Subtítulos, headings menores |
| 700 | Bold | caBRAPI | Headings, textos de destaque |
| 800 | Extrabold | caBRAPI | Títulos principais, hero |
| 900 | Black | caBRAPI | Display, títulos de impacto |
Escala Tipográfica
| Nível | Preview | Tailwind | LH | LS | Uso |
|---|---|---|---|---|---|
| H1 | Heading 1 | text-4xl md:text-5xl | 1.1 | -0.02em | Títulos de página, hero |
| H2 | Heading 2 | text-3xl md:text-4xl | 1.2 | -0.01em | Títulos de seção |
| H3 | Heading 3 | text-2xl md:text-3xl | 1.3 | 0 | Subtítulos de seção |
| H4 | Heading 4 | text-xl md:text-2xl | 1.4 | 0 | Cards, blocos de conteúdo |
| Body | Body text | text-base | 1.6 | 0 | Parágrafos, conteúdo principal |
| Small | Small text | text-sm | 1.5 | 0 | Descrições, textos secundários |
| Caption | Caption text | text-xs | 1.4 | 0.01em | Labels, timestamps, metadata |
Propriedades Gerais
Line Height
1.5 para corpo de texto, 1.2 para títulos. Manter consistência em toda a plataforma.
Letter Spacing
-0.02em para títulos grandes, 0 para corpo, 0.01em para textos pequenos.
Font Smoothing
Sempre usar antialiased para textos em fundos escuros.
Espaçamento
Valores de spacing utilizados
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
Tom e diretrizes de escrita
Tom
Direto e objetivo
Fazer
- Use linguagem direta e objetiva
- Seja claro sobre o que a plataforma faz
Não fazer
- Não use jargões técnicos desnecessários
- Não seja ambíguo ou vago
Vocabulário
Linguagem simples e clara
Fazer
- Use palavras que o público entenda
- Prefira termos brasileiros
Não fazer
- Não misture idiomas sem necessidade
- Não use termos ultrapassados
Personalidade
Confiante mas não arrogante
Fazer
- Demonstre competência com naturalidade
- Mostre resultados reais
Não fazer
- Não faça promessas exageradas
- Não minimize a concorrência
Regras de Escrita
- Usar voz ativa
- Ser específico nos dados
- Usar 'você' para se dirigir ao usuário
- Frases curtas e diretas
- Jargão corporativo
- Exageros e superlativos
- Voz passiva
- Misturar idiomas