Brand System · v1.0
A linguagem visual da 3x3 Comunicação.
Sistema oficial de marca: princípios, cores, tipografia e regras que tornam toda superfície da plataforma consistente, premium e reconhecível.
Identidade
Sistema de logotipo
Completo
Apenas ícone
3x3 ComunicaçãoApenas wordmark
Sobre fundo claro
Sempre preserve a área de respiro equivalente à altura do símbolo. Nunca recolore, distorça ou aplique sombra fora do sistema oficial.
Sistema
Paleta cromática
Onyx
--backgroundFundo principal
Surface
--surfaceCards e painéis
Elevated
--surface-elevatedHover / elevação
Gold
--goldMarca · CTAs · destaques
Gold Soft
--gold-softGradientes · estados ativos
Foreground
--foregroundTexto principal
Muted
--muted-foregroundTexto auxiliar
Destructive
--destructiveErros e ações críticas
Tipografia
Sora + Manrope
Display · Sora
Aa Bb Cc
Headlines · 700
Subtítulos · 500
Sans · Manrope
Aa Bb Cc
Corpo de texto otimizado para legibilidade em densidade alta. Manrope traz clareza editorial sem perder a frieza tecnológica.
Caption · 12px · muted-foreground
Display
48–96px
Body
14–18px
Caption
11–12px
Princípios
Como pensamos design
01
Precisão
Cada elemento existe por uma razão estratégica. Sem ruído, sem ornamento.
02
Autoridade
Comunicação direta, baseada em dados e resultados, nunca em adjetivos.
03
Performance
Design serve à conversão. Beleza é consequência da clareza.
04
Confiança
Tom executivo, presidencial. Falamos de igual para igual com C-levels.
Aplicação
Faça e não faça
Faça
- Usar Gold em 1 elemento por seção
- Manter respiro generoso (≥ 80px entre blocos)
- Hierarquia tipográfica clara: display → corpo → legenda
- Contraste WCAG AA mínimo em todo texto
Não faça
- Múltiplos CTAs dourados na mesma dobra
- Gradientes coloridos fora da paleta gold
- Ícones decorativos sem função
- Sombras coloridas ou neon
Componentes