Pular para o conteúdo

Marca Two9

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.

Versão
1.0
Atualizado
Outubro de 2026
Capítulos
11
Formatos
SVG, PNG e Markdown

Essência

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.

Posicionamento

A Two9 constrói tecnologia que trabalha pelas empresas: sites, apps, sistemas e agentes de IA.

Personalidade

  • Preciso

    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.

  • Próximo

    Explicamos tecnologia sem jargão. Quem contrata sabe o que está sendo feito, por que e quando fica pronto.

  • Inventivo

    Procuramos a solução que trabalha sozinha. Se uma tarefa se repete, ela vira automação ou agente de IA.

Voz e tom

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

Versões

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.

Formato do logo

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.

Usos incorretos

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 faça

    Distorcer

    Não estique nem achate. Redimensione sempre mantendo a proporção.

  • Não faça

    Girar

    O logo fica na horizontal. Inclinado, ele perde a leitura de tecla.

  • Não faça

    Trocar a cor do bloco

    O bloco é Amarelo Two9. Só muda nas versões de uma cor.

  • Não faça

    Usar só o contorno

    O logo é sólido. A versão vazada some em tamanhos pequenos.

  • Não faça

    Aplicar sombra ou brilho

    Nada de sombra, brilho, degradê ou relevo sobre o logo.

  • Não faça

    Usar sobre fundo agitado

    Fotos cheias de detalhe engolem o bloco. Prefira áreas calmas.

Também evite

  • Usar a versão branca sobre o amarelo.
  • Redigitar o logo com qualquer fonte.
  • Mudar a posição do bloco em relação ao TWO.
  • Colocar o logo dentro de outra forma ou moldura.

Cores

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.

  • Carvão

    Fundo da marca. Ocupa a maior parte de cada peça.

    HEX
    #252324
    RGB
    37 35 36
    CMYK
    0 5 3 85
  • Amarelo Two9

    A luz. Ação, destaque e o bloco do logo.

    HEX
    #F2D611
    RGB
    242 214 17
    CMYK
    0 12 93 5
  • Tinta

    O 9 do logo e textos sobre amarelo ou branco.

    HEX
    #231F20
    RGB
    35 31 32
    CMYK
    0 0 0 100
  • Branco

    Títulos sobre fundo escuro e respiro em peças claras.

    HEX
    #FFFFFF
    RGB
    255 255 255
    CMYK
    0 0 0 0

Os valores CMYK são aproximados. Antes de produzir qualquer impresso, valide a cor com uma prova de impressão na gráfica.

Neutros de apoio

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.

Proporção de uso

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.

Pares de contraste

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.

Tipografia

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.

  • Unbounded

    Títulos

    Geometria larga e redonda, parente do TWO do logo. Use em peso 600 com espaçamento apertado.

    Software que trabalha por você.

  • Figtree

    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.

    • Regular 400
    • Medium 500
    • Semibold 600
    Ver Figtree no Google Fonts (abre em nova aba)
  • Martian Mono

    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" })

Escala

Uma escala tipográfica clássica, estendida para títulos grandes. Títulos de seção usam um tamanho fluido entre 36 e 72px.

  1. text-7xl120px
  2. text-6xl96px
  3. text-5xl72px
  4. text-4xl60px
  5. text-3xl48px
  6. text-2xl36px
  7. text-xl24px
  8. text-lg21px
  9. text-md18px
  10. text-base16px
  11. text-sm14px
  12. text-xs12px

O logo não é uma fonte

As letras do TWO foram desenhadas sob medida. Unbounded é parente próxima, mas não é igual. Nunca redigite o logo: use sempre os arquivos oficiais.

Logo oficial da Two9
Arquivo oficial do logo
Unbounded digitada: parece, mas não é o logo

Elementos gráficos

Três peças constroem qualquer layout da Two9. Elas saem do bloco do logo e funcionam melhor juntas. Experimente cada uma.

A tecla

A unidade do sistema. Tem borda inferior visível e afunda 5px quando alguém aperta. Aperte as teclas acima.

70%

A luz que vem de baixo

O amarelo é luz, não tinta. Ele vaza por baixo do grafite para marcar ação e estados ativos.

O campo de teclas

Uma grade de teclas que se apertam sozinhas. É a imagem dos agentes de IA trabalhando.

Imagens

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.

Cubos de grafite orbitando um cubo de vidro amarelo aceso, ligados por filamentos de luz.
Agentes de IA

Grafite e luz amarela

Toda imagem segue as mesmas cinco regras, seja foto, render ou ilustração. Se uma delas quebrar, a imagem não é da Two9.

  1. Grafite fosco

    Objetos em grafite com acabamento fosco, sem brilho metálico.

  2. Uma luz amarela

    Uma única fonte de luz, amarela, vinda de baixo ou de dentro do objeto.

  3. Fundo carvão

    Fundos escuros e limpos, entre #141213 e #252324.

  4. Sem rostos

    Mãos podem aparecer. Rostos, não: a tecnologia é a protagonista.

  5. Sem texto na imagem

    Títulos e chamadas ficam no layout, nunca dentro da foto.

Peças de grafite caindo como dominós, a última acesa em amarelo.
Automação
Janela de navegador em vidro escuro desenhada com linhas de luz amarela.
Sites
Celular de grafite cuja tela é feita de teclas arredondadas, uma delas acesa em amarelo.
Aplicativos
Placas de grafite empilhadas, cortadas por canais de luz amarela.
Sistemas
Esfera, cubo e cilindro de grafite equilibrados sobre um pedestal, com um cubo amarelo.
Design de produto

Movimento

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.

Pressionar

Teclas, botões e cartões clicáveis afundam 5px e voltam. Rápido, sem quique.

Duração
150ms
Curva
ease-press

Acender

Estados ativos ganham luz de baixo para cima, como uma tecla iluminada por dentro.

Duração
300 a 500ms
Curva
ease-out-expo

Onda e digitação

Sequências acendem uma depois da outra, com 30 a 60ms entre elas. Teclas que se apertam sozinhas.

Duração
0,8 a 1,2s no total
Curva
expo.out

Aplicações

Como a marca aparece fora da tela. Em todas as peças, o Carvão domina, o logo respira e o amarelo surge como luz.

Logo da Two9 iluminado na parede de um escritório escuro.
SinalizaçãoO bloco aceso por trás. Na parede, a luz vem do próprio símbolo.
Mão segurando um celular com o ícone do aplicativo Two9 na tela.
Ícone do aplicativoO símbolo sozinho, com o canto de 14,3%, vira o ícone na tela.
Moletom preto com o logo da Two9 no peito.
VestuárioVersão em cor sobre tecido preto, sempre com a área de proteção.
Cartões de visita em carvão e em amarelo, papel timbrado e envelope da Two9 sobre uma mesa escura.
PapelariaCartões em Carvão e em Amarelo, papel timbrado e envelope. Sobre o amarelo, o logo vai em preto.