Manual da marca

02 · Essência e voz

Direto ao ponto, como quem trabalha junto.

O Nexus fala com quem cria. Frases curtas, tom honesto e nada de letra miúda.

Princípios tirados dos textos reais do site, do app e dos e-mails. Ainda não existe um documento oficial de voz.

Voltar ao topo

03 · Logo

Um símbolo, um nome, três cores.

O logo completo (lockup) junta o símbolo e o nome “Nexus” desenhado em curvas (wordmark). Ele existe em três combinações oficiais e nada além disso.

Derivado Pranchetas como no mestre: 1920 × 1080 e 1080 × 1080, com o lockup em tamanho real (1 unidade = 1 px) e centralizado. Ele ocupa 36,1% da largura na 16:9 e 64,1% na 1:1.

Proposta — a definir Os usos de cada cor escritos nas legendas acima ainda não estão em nenhum documento.

Hoje, no produto: o portal mostra símbolo 34 px + wordmark 18 px e, em telas estreitas, só o símbolo; o app mostra o avatar + o wordmark. O “quando usar” acima é sugestão.

Dois triângulos arredondados, um para cima e outro para baixo, sobrepostos na mesma caixa. É traço convertido em forma, com espessura uniforme. Medidas calculadas de assets/nexus-symbol.svg.

H Altura do símbolo

157,691 no mestre (prancheta 1920)

N Altura do N

109,5 H : N = 1,44 : 1

G Espaço

65,555 ≈ 0,416 × H

L Largura total

692,412 proporção ≈ 4,39 : 1

• O topo do N fica 20,919 abaixo do topo do símbolo.
• A base do nome fica 27,272 acima da base do símbolo.
• Largura do símbolo ÷ largura do nome ≈ 0,385.
• Nunca recomponha o lockup à mão: use o arquivo pronto.

Regras do documento oficial (docs/IDENTIDADE-VISUAL.md): não redigitar, não distorcer, não inclinar, não reconstruir, não acrescentar azul ou outra cor de destaque e preservar o contraste. Se o caso não está aqui, a resposta é a mesma: use o arquivo oficial, sem mudanças.

• Não estique nem achate.

• Não gire nem incline.

• Não use outras cores. Nunca azul.

• Nexus

  Não redigite “Nexus” com uma fonte.

• Não use fundo de baixo contraste.

• Não reconstrua. Não existe lockup vertical.

• Não aplique sombra, brilho ou efeitos.

• Não use só o contorno.

Nota de produção: caixa de corte dos arquivos SVG

Os SVG do lockup e do wordmark desta página e do kit são os arquivos canônicos do repositório, só com a cor trocada. A caixa de corte (viewBox) desses arquivos corta 3,5 a 4 unidades nas bordas: a ponta esquerda do símbolo e a curva do “s”. Os PNG do kit e as pranchetas acima mostram o desenho inteiro.

Proposta — a definir Ampliar o viewBox para -4 0 693.5 158 (lockup) e -6071 -1279 453.5 114 (wordmark). Os paths não mudam. Pelo fluxo oficial, a correção entra primeiro em assets/ e só depois nos derivados.

Voltar ao topo

04 · Símbolo e ícones de app

O símbolo carrega a marca quando falta espaço.

No avatar, o símbolo fica sobre um quadrado #0F0F0F com cantos arredondados. Em tamanhos pequenos o traço fica mais grosso para continuar legível.

Estes são os quadros reais do ícone em produção (nexus-windows.ico), ampliados e em tamanho real. O desenho é o do avatar; nos tamanhos pequenos, o gerador engrossa o traço.

• Traço extra no .ico (grade 64): até 20 px, +1,4; até 32 px, +0,9; até 48 px, +0,45.
• Derivado O mestre Nexus - Simbolo.svg resolve de outro jeito: símbolo menor e raio maior. 32 px: raio 4,339 (13,6%), símbolo 69,8%, traço 1,422. 16 px: raio 2,257 (14,1%), símbolo 65,4%, traço 0,665. No mestre, o quadrado é #000000.
• Proposta — a definir Escolher uma das duas soluções e gravar os arquivos de 32 e 16 px em assets/. As pranchetas de apresentação do mestre v3 (raio 6,71%) não são o padrão.

O avatar branco é o arquivo canônico assets/nexus-avatar.svg. As versões verde e de fundo verde trocam só as cores, como as três do mestre v3.

Paths do assets/nexus-menubarTemplate.svg, só com a cor trocada. Proposta — a definir Use o avatar quando a marca precisa de fundo próprio (perfil, ícone, favicon) e o símbolo sem fundo quando a peça já tem fundo #0F0F0F ou #65FC6C.

Voltar ao topo

05 · Cores

Escuro por padrão. Verde quando importa.

A interface é escura. O verde #65FC6C é o único acento. Clique em um código para copiar.

• Fundo principal#0F0F0FRGB 15 15 15 · cor de fundo desta página
• Verde Nexus · acento exclusivo#65FC6CRGB 101 252 108 · 14,33:1 sobre #0F0F0F
• Marca sobre escuro#FFFFFFRGB 255 255 255 · 19,17:1
• Superfície escura#0B0B0BRGB 11 11 11 · instalador, campos
• Texto principal#F5F5F5RGB 245 245 245 · 17,58:1
• Marca sobre verde#000000RGB 0 0 0 · 15,69:1 sobre verde
• Linhas discretas#242424RGB 36 36 36 · só decorativo

• Marca = #FFFFFF; texto de interface = #F5F5F5.
• O verde do vídeo mede #70FF71, provavelmente por causa da compressão (não confirmado no projeto do After Effects). A cor oficial continua #65FC6C.
• Nunca azul nem outra cor de destaque. O verde é o único acento.

Estado atual do portal e dos e-mails. São valores em uso, ainda não padronizados.

• Card do portal#101010RGB 16 16 16
• Superfície elevada#151515RGB 21 21 21
• Borda de card#2A2A2ARGB 42 42 42
• Verde escuro (fundo suave)#102817RGB 16 40 23
• Texto secundário (portal)#9696966,48:1 sobre #0F0F0F
• Texto terciário#6767673,39:1 · só texto grande
• Corpo do e-mail#A3A3A37,50:1 sobre #101110
• Cartão do e-mail#101110RGB 16 17 16

• Sucesso#65FC6CApp e portal
• Erro no portal#F28B8BCaixa #241414, borda #5B3030
• Erro no app#FF7474App desktop
• Aviso no app#E0A030Só no contador de caracteres

• Texto sobre verde#071008Hoje há 7 variações
• Verde ao passar o mouse#8AFF90Hoje há 6 tons
• Erro único#F28B8BCaixa #241414, borda #5B3030
• Aviso único#E3C783Hoje sem cor global

• AAA ≥ 7:1 · AA ≥ 4,5:1 · AA grande ≥ 3:1 (texto a partir de 18 px, ou 14 px em negrito).
• Texto sobre o verde é sempre quase preto, nunca branco.
• Proposta — a definir #676767 só em texto grande (18 px, ou 14 px em negrito). Hoje ele aparece em 11 px no e-mail, o que reprova. O ícone “em breve” (#555 sobre #252525) deve ser tratado como decoração, sem informação que dependa dele.

Voltar ao topo

06 · Tipografia

Inter na interface. A marca nunca é texto.

Inter é a fonte de interface da marca: portal, app e e-mails. Os painéis dentro dos apps seguem a fonte do programa (Arial). Esta página carrega a Inter variável auto-hospedada (licença OFL).

Valores tirados do uso real no portal, nos e-mails e no checkout. Hoje cada componente define o seu tamanho; esta escala ainda não é oficial.

Voltar ao topo

07 · Iconografia e interface

Ícones nascem do triângulo do símbolo.

As ferramentas usam traço único em currentColor, pontas arredondadas e o triângulo do Nexus como peça-mãe. Pull é o mesmo ícone do Push, virado para baixo.

Diretriz do dono, ainda não implementada nos painéis.

• Ordem desejada: Push, Pull, Raster, Pull raster, Artboard, Frame, Guides, Colors.
• Derivado Como está hoje: no Illustrator, Swatches vem antes de Guides; no Photoshop, a barra termina em Push Guides, Import PSD e Push Sequence; no Figma (plugin e aba Figma do After Effects), Guides vem antes de Colors.
• Ícones reais dos painéis: fundo #424242, raio de 5 a 7 px conforme o painel, caixa de 165,798 unidades. Traço 5 nos triângulos, 4 no Frame e 3 em Guides, Colors e Timeline.

• Sucesso #65FC6C (aviso flutuante com fundo #101A11). Erro #FF7474 no app e #F28B8B no portal. Aviso #E0A030 só no contador.
• “Pendente”: no app, a linha inteira fica com opacidade .48, o que dá 2,95:1 e reprova no AA. Aqui a opacidade fica só no ponto e o texto usa #8A8A8A (5,73:1).
• Nos painéis, status e foco ainda usam azul (#3446B8, #2680EB), o que contraria a regra “nunca azul”.

• Os selos seguem as cores dos fabricantes, não a paleta Nexus. Hoje Figma, Photoshop e After Effects têm cores diferentes em cada superfície, e o Figma aparece como “F” ou “Fg”.
• Dois selos reprovam no contraste AA: “F” branco sobre #F24E1E (3,57:1) e “Fg” branco sobre #A259FF (3,88:1).
• Proposta — a definir Uma tabela única com as cores oficiais de cada fabricante. Nos fundos claros, texto preto (#000000 sobre #F24E1E = 5,88:1; sobre #A259FF = 5,41:1).

Voltar ao topo

08 · Componentes

Peças do portal, com os valores reais.

Reproduzidos do CSS do portal (web-portal/src/style.css). Cada estado aparece lado a lado. Passe o mouse ou use Tab para ver a interação real.

• Largura de conteúdo de 1240 px (landing e conta), com margem lateral de 64 px; 40 px abaixo de 960 px de largura. Divisórias de ponta a ponta da tela.
• Escala de raio: 6 px (controle pequeno), 8 px (controle), 10 px (controle do checkout), 14 px (card), 16 px (janela e e-mail).
• Hoje nada disso é token: cada tela define o próprio valor.

Voltar ao topo

09 · Movimento

O símbolo se monta, o nome aparece.

O logo animado (reveal) desenha os dois triângulos, encaixa o símbolo e revela o nome letra a letra. São 10 segundos, em 16:9 e 9:16, com fundo preto ou verde.

• Na página, os vídeos tocam em 1280 × 720 e 720 × 1280. Os arquivos para baixar são os originais: H.264, 29,97 fps, 10 s, 3840 × 2160 (16:9) e 2160 × 3840 (9:16), sem som.
• O 16:9 preto sem frase é a primeira versão (v1, de 20/08). Não há export final com esse formato.
• Existem só duas combinações: verde sobre preto ou preto sobre verde. Não há versão branca sobre #0F0F0F.
• A frase no vídeo está sem crase: o certo é “acesso à tecnologia”. A correção precisa ser feita no projeto do After Effects.

Observada quadro a quadro nos vídeos.

1. 0–1 sOs dois triângulos se desenham em traço fino.
2. 1–1,5 sEles giram um em volta do outro.
3. 1,75–2 sAlinham e se sobrepõem: nasce o símbolo.
4. 3–3,75 sO símbolo vai para a esquerda e o nome surge letra a letra.
5. 4–5 sA frase entra palavra a palavra (versões com frase).
6. 5–10 sLogo parado.

• 9:16 em redes e stories; 16:9 em vídeos e apresentações.
• A ordem não muda: símbolo, nome, frase (quando houver) e logo parado.
• Não corte antes de o logo ficar completo (depois de 3,75 s), não acelere e não recolora.

Durações e curvas reais do portal, do checkout e do app. Ainda não há documento oficial de movimento. Clique, passe o mouse ou foque em cada cartão.Toque em cada cartão para ver a curva.

• Regra vigente Toda animação respeita a opção “reduzir movimento” do sistema.
• Derivado A animação de conexão do site pausa quando sai da tela.
• Proposta — a definir Brilhos sempre no verde #65FC6C e com pouca opacidade.

Voltar ao topo

10 · Aplicações

A mesma marca em todo ponto de contato.

E-mail, instalador, imagem de compartilhamento e app usam os mesmos arquivos e as mesmas cores.

• Fundo externo #1F1F1F. Cartão #101110, raio 16, até 600 px de largura. Divisórias #2A2A2A.
• Título 32/38 px, peso 750. Corpo 16/26 px em #A3A3A3. Botão verde com raio 8.
• Nota fina e rodapé: 11 px em #676767 (links #969696; destaque em #8F8F8F, peso 600). Esse cinza reprova no contraste AA em 11 px.
• O logo vai como uma imagem única, para resistir à inversão de cor do Gmail no iOS.

• Composição ilustrativa com as artes reais.
• Lateral: só o símbolo verde, sem branco e sem lockup.
• Cabeçalho: só o lockup branco, sem verde e sem ponto decorativo.
• Não volte com o antigo diagrama de conexões. Os .bmp (RGB 24 bits) saem dos SVG.

Voltar ao topo

11 · Marcas de terceiros

Citamos os apps pelo nome certo.

O Nexus conecta ferramentas de outras empresas. Escreva os nomes delas com a grafia oficial e nunca use os logos delas como se fossem nossos.

Voltar ao topo

12 · Downloads e contato

Tudo o que você precisa, pronto para usar.

Use sempre estes arquivos. Se precisar de outro formato, fale com a gente.