A tecla
A unidade do sistema. Tem borda inferior visível e afunda 5px quando alguém aperta. Aperte as teclas acima.
Este manual reúne o que faz a Two9 ser reconhecida de longe: o logo, as cores, as letras, as imagens e o jeito de se mover. Use-o para criar peças novas sem perder a forma da marca.
Antes do logo vem o que a Two9 acredita. Tudo o que aparece depois neste manual nasce destas três ideias: o que fazemos, quem somos e como falamos.
A Two9 constrói tecnologia que trabalha pelas empresas: sites, apps, sistemas e agentes de IA.
Prometemos o que sabemos entregar, com prazo e escopo claros. Cada detalhe tem motivo, do raio de um canto ao nome de uma variável.
Explicamos tecnologia sem jargão. Quem contrata sabe o que está sendo feito, por que e quando fica pronto.
Procuramos a solução que trabalha sozinha. Se uma tarefa se repete, ela vira automação ou agente de IA.
Falamos como quem entende do assunto e gosta de explicar: direto, gentil e sem exagero. Frases curtas, voz ativa, verbos simples. Sempre em português do Brasil.
Concreto, não grandioso
Assim
Seu atendimento responde em segundos, inclusive de madrugada.
Assim não
Revolucione seu atendimento com IA de ponta e disruptiva!
Verbos simples, voz ativa
Assim
O sistema emite o boleto e avisa o financeiro.
Assim não
A plataforma viabiliza a otimização do fluxo de cobrança.
Escuta antes de vender
Assim
Vamos entender seu processo antes de sugerir uma ferramenta.
Assim não
Temos a solução perfeita para qualquer necessidade.
Botões dizem o que acontece
Assim
Começar um projeto
Assim não
Clique aqui para saber mais
O logo junta o wordmark TWO ao bloco com o 9. Cada parte tem medida e função. Role a página para ver o logo se montar, peça por peça.
Escolha uma parte para destacá-la no desenho.
O raio do canto mede 52 unidades num lado de 363: 14,3%, quase exatamente um sétimo. Toda tecla, botão e cartão quadrado do sistema repete essa proporção, em qualquer tamanho.
Nenhum texto, imagem ou borda entra no espaço em volta do logo. A medida é x, a espessura do traço do O: cerca de 55 unidades, ou 15% da altura do bloco. Vale para todos os lados e todas as versões.
Abaixo destas medidas o logo perde detalhes. Os exemplos estão no tamanho real. Se o espaço for menor que o da versão horizontal, use o símbolo.
Completa
120px na tela, 30mm no impresso
Horizontal
88px na tela, 22mm no impresso
Símbolo
16px na tela, 5mm no impresso
Use a versão em cor sempre que puder. As versões de uma cor existem para quando a cor não é possível: gravação, carimbo, serigrafia.
Versão principal. Use sempre que o fundo for escuro.
Para fundos claros: propostas, documentos e e-mails.
Impressão em uma cor, carimbos e documentos fiscais.
Quando o amarelo é o fundo: brindes, adesivos e sinalização.
Uma cor sobre fundo escuro: gravação, serigrafia e vídeo.
Sobre fotos escuras, sempre numa área calma da imagem.
O símbolo não tem versão para fundo claro: o bloco amarelo com o 9 em Tinta já funciona sobre branco. Nunca use a versão branca sobre o amarelo.
O logo só funciona se for reconhecido sempre do mesmo jeito. Estes são os erros mais comuns. Todos os exemplos usam o arquivo real, alterado de propósito.
Não estique nem achate. Redimensione sempre mantendo a proporção.
O logo fica na horizontal. Inclinado, ele perde a leitura de tecla.
O bloco é Amarelo Two9. Só muda nas versões de uma cor.
O logo é sólido. A versão vazada some em tamanhos pequenos.
Nada de sombra, brilho, degradê ou relevo sobre o logo.

Fotos cheias de detalhe engolem o bloco. Prefira áreas calmas.
Carvão é o fundo, Branco é a voz e o Amarelo Two9 é a luz. Use pouco amarelo: ele marca o que importa. Clique numa cor para copiar o HEX.
Os valores CMYK são aproximados. Antes de produzir qualquer impresso, valide a cor com uma prova de impressão na gráfica.
Tons entre o Carvão e o Branco para fundos alternados, teclas e texto secundário.
Carvão profundo
#1C1A1B
Fundos alternados e rodapé.
Grafite
#2F2D2E
Teclas e superfícies elevadas.
Fumaça
#A19E9B
Texto secundário sobre Carvão.
Numa peça típica, o Carvão domina e o amarelo aparece em poucos pontos. Se o amarelo passar de um oitavo da área, ele deixa de ser luz e vira fundo.
Os três pares da marca passam com folga no nível AAA da WCAG, que pede 7:1 para texto comum.
11,2:1
Tinta sobre Amarelo
Botões e textos sobre o amarelo.
15,6:1
Branco sobre Carvão
Títulos e texto forte no site.
10,7:1
Amarelo sobre Carvão
Destaques, links e estados ativos.
Três famílias, cada uma com um trabalho. Todas são gratuitas no Google Fonts e já estão no site. Não misture outras fontes nas peças da marca.
Títulos
Geometria larga e redonda, parente do TWO do logo. Use em peso 600 com espaçamento apertado.
Software que trabalha por você.
Texto e interface
Clara em telas pequenas e confortável em textos longos. Corpo de 18px, entrelinha 1,6.
Projetamos sites, apps e sistemas que funcionam no dia a dia da sua equipe.
Código e dados de agentes
Só para código real e registros de agentes, como chamadas de ferramenta. Nunca para enfeitar.
agente.buscar_pedido({ numero: "4821" })
Uma escala tipográfica clássica, estendida para títulos grandes. Títulos de seção usam um tamanho fluido entre 36 e 72px.
text-7xl120pxtext-6xl96pxtext-5xl72pxtext-4xl60pxtext-3xl48pxtext-2xl36pxtext-xl24pxtext-lg21pxtext-md18pxtext-base16pxtext-sm14pxtext-xs12pxAs letras do TWO foram desenhadas sob medida. Unbounded é parente próxima, mas não é igual. Nunca redigite o logo: use sempre os arquivos oficiais.
Três peças constroem qualquer layout da Two9. Elas saem do bloco do logo e funcionam melhor juntas. Experimente cada uma.
A unidade do sistema. Tem borda inferior visível e afunda 5px quando alguém aperta. Aperte as teclas acima.
O amarelo é luz, não tinta. Ele vaza por baixo do grafite para marcar ação e estados ativos.
Uma grade de teclas que se apertam sozinhas. É a imagem dos agentes de IA trabalhando.
As imagens da Two9 mostram tecnologia como objeto: peças de grafite, uma luz amarela e nada que distraia. É a mesma ideia do logo, em três dimensões.

Toda imagem segue as mesmas cinco regras, seja foto, render ou ilustração. Se uma delas quebrar, a imagem não é da Two9.
Grafite fosco
Objetos em grafite com acabamento fosco, sem brilho metálico.
Uma luz amarela
Uma única fonte de luz, amarela, vinda de baixo ou de dentro do objeto.
Fundo carvão
Fundos escuros e limpos, entre #141213 e #252324.
Sem rostos
Mãos podem aparecer. Rostos, não: a tecnologia é a protagonista.
Sem texto na imagem
Títulos e chamadas ficam no layout, nunca dentro da foto.





A marca se move como um teclado: aperta, acende e digita. Cada movimento tem duração e curva fixas. Toque nos botões para ver cada um.
Com movimento reduzido ativado no sistema, o site pula direto para o estado final. Os demos respeitam essa escolha.
Teclas, botões e cartões clicáveis afundam 5px e voltam. Rápido, sem quique.
ease-pressEstados ativos ganham luz de baixo para cima, como uma tecla iluminada por dentro.
ease-out-expoSequências acendem uma depois da outra, com 30 a 60ms entre elas. Teclas que se apertam sozinhas.
expo.outComo a marca aparece fora da tela. Em todas as peças, o Carvão domina, o logo respira e o amarelo surge como luz.




Tudo o que você precisa para aplicar a marca. Baixe o kit completo ou só o arquivo que vai usar agora.
Precisa de outro formato ou tem dúvida sobre um uso? Escreva para [email protected].