LOGO · IDENTIDADE VISUAL
Logo & Símbolo
O símbolo N + Raio é a marca Nexials. Energia, velocidade, execução. Esta seção define todos os usos, limitações, especificações e aplicações da identidade visual.
CONCEITO · ORIGEM DO DESIGN
O símbolo Nexials é construído em três pilares:
A energia e a velocidade do salto. Da curiosidade à execução, sem rodeios. O que muda o jogo num instante.
O guia e o aluno, lado a lado. A complexidade técnica de um lado, a clareza prática do outro — conectadas pelo raio.
A ponte, a conexão, o ponto de encontro. Onde a IA deixa de ser teoria e vira ferramenta na sua mão.
ANATOMIA · COMPONENTES
Haste Esquerda
Reta diagonal 45°, espessura fixa. Âncora visual. Nunca varia em proporção.
Haste Direita
Reta diagonal 45°, espessura fixa. Par equilibrado com a esquerda.
Raio (Relâmpago)
Três linhas convergentes em ângulo. Sempre diagonal, nunca vertical ou horizontal. Cor ouro (primário).
Proporção
1:1 (quadrado). Mantém proporção em qualquer escala, de 16px a 1000px+.
ESCALA · TAMANHOS MÍNIMOS
SIZE
64×64px
Avatar, Favicon
120×120px
UI, Badge
240×240px
Card, Hero
600×600px
Print, Download
REGRA
Nunca use abaixo de 32px. Abaixo disso, a complexidade das linhas se perde. Use versão simplificada ou não use o símbolo.
ESPAÇO DE PROTEÇÃO · CLEARSPACE
Deixe pelo menos 1× a altura do símbolo em espaço em branco ao redor (clearspace). Isso garante legibilidade e impacto visual.
Nunca compacte o símbolo contra outros elementos. Espaço é parte do design.
VARIAÇÕES · SÍMBOLO + FUNDO
REGRAS · QUANDO USAR
✓Use em
- Header de página
- Favicon do site
- Avatar de usuário
- Documentos e PDFs
- Merchandise oficial
- Backgrounds de hero
✕Não use
- Distorcer ou rotacionar
- Inverter cores sem contexto
- Abaixo de 32px sem motivo
- Com outros logos (confuso)
- Em backgrounds muito ocupados
- Com drop shadow genérico
DO / DON'T · EXEMPLOS VISUAIS
Símbolo centralizado, tamanho adequado, clearspace respeitado. Limpo e legível.
Abaixo do tamanho mínimo, desfocado, sem clearspace. Ilegível.
INCOMPATIBILIDADES · FUNDOS RUINS
❌ Gradient muito vibrante
Compete com o símbolo
❌ Símbolo dourado em creme
Contraste insuficiente
❌ Preto em cinza escuro
Desaparece
❌ Background muito ocupado
Confuso, perde clareza
DISTORÇÕES · NÃO FAZER ISSO
❌ Achatado (Squashed)
Comprimido verticalmente. Destrói as proporções e elegância do símbolo.
❌ Esticado (Stretched)
Expandido horizontalmente. Perde equilíbrio e impacto visual.
❌ Cor Errada — Preto Puro
Preto puro não é da paleta. Sempre ouro, branco ou tons suavizados.
❌ Cor Errada — Amarelo Vibrante
Amarelo puro quebra a identidade. Use apenas ouro (#E8B84B) sempre.
ESPECIFICAÇÕES TÉCNICAS
PROPRIEDADE
Proporção
Grid
Stroke Width
Cantos
NOTAS
Sempre quadrado
Para alinhamento
Escalado com tamanho
Sem arredondamentos
CÓDIGO PRONTO · CSS TOKENS
/* Logo Mark */
--logo-mark: url('nexials-mark-color.svg');
--logo-size-min: 32px;
--logo-clearspace: 1em;
.logo-avatar { width: 64px; height: 64px; background: var(--logo-mark); }
.logo-header { width: 240px; aspect-ratio: 1; background: var(--logo-mark); margin: 0 var(--logo-clearspace); }
