Brandbook Versão 2.0 · Outubro de 2026

A marca T3i, do pixel ao palco.

Logo, cor, tipografia, componentes e o jeito certo de aplicar em cada canal. Para quem desenha, programa, imprime, filma ou escreve pela T3i.

Baixar a logo → Versão para IA (.md)
Logo T3i Experience branca sobre fundo preto
Logo T3i Experience preta sobre fundo branco
Documento T3i-BRND-001
Versão 2.0 · 27.10.2026
Idiomas PT · EN · ES · ZH · AR
Uso Público e parceiros
01 · Princípios

Quatro ideias seguram a marca. O resto é consequência.

A T3i cria e opera experiências com tecnologia para marcas em eventos, feiras e estandes. A identidade é minimalista de propósito: precisa funcionar num painel de LED, numa credencial, num story e numa proposta sem perder presença. Antes de qualquer regra deste guia, valem estas quatro.

01

Preto e branco primeiro.

A marca é monocromática. A cor entra como acento, uma por página, e nunca na logo.

02

Espaço é o luxo.

Menos elementos, mais respiro. O premium vem de espaço, tipografia e consistência, não de efeito.

03

A experiência é a estrela.

Gente vivendo a ativação vale mais que qualquer grafismo. O layout abre espaço para o “uau” de quem participa.

04

Direto e humano.

Frase curta e palavra simples. O texto fala do que o participante sente e do que a marca leva.

03 · Cor

Preto, branco e um acento. Só um por vez.

A logo existe em preto e em branco, e a marca inteira parte daí. Na tela, o fundo é um preto levemente aberto, mais confortável para ler que o preto puro. A cor de acento muda a cada página ou peça e nunca encosta na logo.

Cores da marca

T3i Preto

#000000RGB 0 0 0CMYK 0 0 0 100

Logo e texto em impressos. Em áreas grandes impressas, preto rico (CMYK 60 40 40 100).

T3i Branco

#FFFFFFRGB 255 255 255CMYK 0 0 0 0

Logo, títulos e texto principal na tela.

Cores de tela

Tinta

#0A0A0A

Fundo de toda tela: site, LED, vídeo, slide escuro.

Grafite

#151515

Menus que abrem, seletor de idioma e barra do celular.

Névoa

#B8B8B3

Texto secundário, rótulos e a segunda parte do título.

Papel

#FAFAF7

Slides claros do carrossel e materiais de fundo claro.

Fundo do rodapé

#050505

O último bloco da página, um passo mais escuro.

Linha

rgba(255,255,255,.08)

Fios entre blocos e grades.

Linha forte

rgba(255,255,255,.18)

Bordas de botão, tag e menu.

Certo e errado

#3DDC84#FF5A4F

Só em guias e em aviso de interface: sucesso e erro.

Acento

#E63329 #8E5CFF #33D17A #E8A33D #E8376B #FF2E88 #4A9BE0 #2EE6D0 #B6F03C #FF8A1F #7DF9FF #5C6CFF #E8FF3A

Cada página e cada peça tem a sua cor de acento, saturada e diferente das que já existem. As de cima já estão em uso. O amarelo #E8FF3A é o sinal do Instagram e só aparece no último slide do carrossel, o do convite.

04 · Tipografia

Três famílias. Cada uma com um trabalho.

Títulos em Space Grotesk, texto em Inter Tight e rótulos em JetBrains Mono. As três são gratuitas, com licença SIL Open Font, e o site carrega do próprio domínio. A logo não é texto: é desenho, e nunca se redigita.

Aa

Space Grotesk

Títulos, subtítulo do hero e números grandes. Peso 500, letras um pouco mais juntas que o normal.

Títulos · 400 · 500
Aa

Inter Tight

Texto corrido, botões e menus. Peso 300 nos parágrafos claros sobre fundo escuro, 400 no resto, 500 em botão.

Texto · 300 · 400 · 500
Aa

JetBrains Mono

Rótulos, tags, numeração e dados técnicos. Pequena, em caixa alta e com letras espaçadas.

Rótulos · 400

Escala

Título do heroDo pixel ao palco.Space Grotesk 500 · 44 a 116 px · -0.035em · entrelinha 0.95
Título de seçãoBrinde, todo mundo entrega.Space Grotesk 500 · 36 a 64 px · -0.02em · 1.05
Título de cardA tecnologia serve o conceito.Space Grotesk 500 · 22 a 32 px · 1.15
SubtítuloEntramos no projeto para somar.Space Grotesk 400 · 20 a 28 px · 1.25
AberturaO participante posa e leva o desenho na hora.Inter Tight 300 · 17 a 20 px · 1.55
CorpoSistema no ar, dados entrando e premiação conferida.Inter Tight 300 ou 400 · 16 px · 1.6
Rótulo03 · JornadaJetBrains Mono 400 · 10 a 11 px · caixa alta · 0.14em a 0.2em
05 · Layout

Doze colunas e muito respiro. A grade aparece nos fios.

Toda página usa uma grade de 12 colunas, com margem lateral de 5,5% da tela e no máximo 1480 px de conteúdo. Blocos lado a lado se separam por um fio de 1 px, nunca por sombra ou caixa arredondada.

Respiro

120 px entre seções.

88 px no celular. O hero ocupa a tela inteira, com o texto na metade de baixo.

Cantos

Retos, quase sempre.

Card, botão e foto têm canto reto. Redondo só nas pílulas: botão do topo, seletor de idioma e barra do celular.

Quebras

1100, 900, 760, 560 e 360 px.

Abaixo de 900 px o menu some e entra a barra do celular. Abaixo de 560 px a logo cai para 32 px.

06 · Imagem e vídeo

Gente de verdade, evento de verdade. A foto prova o que o texto promete.

A mídia da T3i é registro de ativação real: pessoas participando, reagindo e levando o resultado. É ela que vende. O layout existe para deixar essa imagem respirar.

01

O resultado primeiro.

A primeira imagem mostra a pessoa com o resultado na mão ou a ação acontecendo. Nunca só alguém parado em frente a uma tela.

02

Vertical por padrão.

Quase todo material nasce em 1080 × 1920. Antes de pôr numa caixa horizontal, recorte onde está a ação, sem cortar cabeça nem produto.

03

Vídeo no site é mudo.

Entra sem faixa de áudio, em loop e com imagem de capa. Som só em Reels e filmes, com música de licença livre.

04

Escuro por cima do vídeo.

Texto sobre imagem ganha uma camada escura em degradê até o preto da página. Leitura antes de tudo.

05

Cor natural.

Sem filtro pesado, sem preto e branco artificial e sem vinheta. Corrija a luz, não invente clima.

06

Arquivo leve.

Foto com 900 a 1200 px de largura, vídeo com 720 px. Uma página de case inteira fica entre 2 e 4 MB.

07 · Ícones

Traço fino, ponta redonda. Um desenho para cada ideia.

Ícones são desenhados em linha, numa grade de 24 px, na cor do texto ou do acento. Num bloco com vários itens, cada um tem o seu ícone: oito quadrados com o mesmo símbolo parecem descuido.

Foto
IA
Robô
Música
Jogo
Prêmio
Dados
QR code
08 · Movimento

Entra suave, nunca pula. Movimento guia o olho, não enfeita.

O conteúdo sobe um pouco e aparece quando chega na tela, desacelerando no fim. Botões trocam de cor num instante. Nada gira, pisca ou explode.

Entrada
Opacidade de 0 a 1 e subida de 28 px em 0,9 s, com a curva cubic-bezier(.2,.8,.2,1). Itens vizinhos entram em sequência, a cada 0,08 s.
Toque e passagem do mouse
Botão inverte branco e preto em 0,2 s. A seta anda 4 px. O card clareia de leve.
Rolagem
Depois de 24 px de rolagem, o topo ganha fundo escuro com desfoque.
Vídeo
Corte na batida, tomadas de 1,5 a 3 segundos, nenhum quadro parado mais de 4.
Movimento reduzido
Quem desligou animação no sistema vê a página parada e completa.
09 · Escrita

Frase curta. Ponto final. Sem enfeite.

A T3i fala como quem já fez: direto, confiante e sem jargão. O texto conta o que o participante sente e o que a marca leva. Número só quando alguém mediu.

Direta

Uma ideia por frase.

Ponto final no lugar de vírgula empilhada. Se dá para cortar uma palavra, corte.

Confiante

Prova no lugar de adjetivo.

O que aconteceu, quanto tempo levou, o que a pessoa levou para casa.

Humana

Fala do público.

A reação de quem participa e o resultado da marca vêm antes do equipamento.

Escreva assim

Escreva assim
Não assim
Por quê
Movimento no estande e gente em volta.
Duas horas de fila.
Fila só no sentido bom: estande cheio. Nunca espera.
Cerca de 30 segundos por copo.
Tecnologia de ponta, experiência única.
Número concreto no lugar de adjetivo vazio.
Quando a marca quer, entra a captura de leads.
Sem cadastro.
Recurso que não rodou num evento não vira falta.
O cesto do balão é de verdade.
O cesto é de vime.
Palavra que todo mundo entende de primeira.
Atendemos no Brasil e no exterior.
Presentes em 12 países.
Alcance sem número nem lista de cidades.
Milhares de ativações realizadas.
Há 12 anos no mercado.
A força vem do volume e do que é próprio, nunca do tempo de casa.

Nomes que se escrevem sempre iguais

T3i ExperienceSelfieCupAutógrafo MóvelRobô CaricaturaReflexo InfinitoTúnel de LEDFila VirtualRobo Futuro · Humanoide G1Pooh Panda RobôTitan Cachorro Robô
10 · Componentes

Peças prontas. Monte com elas, não do zero.

Todo case e toda página da T3i saem destes mesmos blocos. Página nova copia o estilo de uma página recente e troca só a cor de acento.

Ver os cases →Falar no WhatsApp

Botões

Inter Tight 500, 14 px, borda branca de 1 px e canto reto. O principal é cheio, o secundário é vazado. Na passagem do mouse, invertem.

t3i.site

Pílula do topo

A única peça redonda do menu. Fundo branco e sobe 2 px na passagem do mouse.

01 · Contexto
RobóticaDestaque
Etapa 01 · Captura

Rótulos

JetBrains Mono em caixa alta. Numeração sempre com dois dígitos. O acento entra na tag de destaque e no ponto da etapa.

Brinde, todo mundo entrega. Obra construída pelo público, não.

Título com virada

Space Grotesk 500. A primeira parte afirma, a segunda vira o jogo, em névoa.

Grade de cards

Células separadas por 1 px de linha, com numeração mono, título e texto curto. Três ou quatro por linha.

Case 04Robótica
Participante segurando a caricatura desenhada pelo braço robótico
Robótica · IA + Desenho ao vivo

Robô Caricatura.

Ver case →

Card de case

Miniatura 4:5, categoria em pílula, tags mono, título com ponto final e o link “Ver case”.

PT
EN ES ZH AR

Seletor de idioma

Bandeiras desenhadas em SVG, nunca emoji. Leva sempre para a mesma página no outro idioma.

Barra do celular

Só abaixo de 900 px. Cinco itens, o ativo sobe num círculo e o último é sempre WhatsApp.

WhatsApp flutuante

Só no computador, no canto de baixo. No celular, quem faz esse papel é a barra.

11 · Canais

Cada canal tem seu jeito. A marca é a mesma em todos.

Formato, área segura e o passo a passo de cada lugar onde a T3i aparece. Se o canal não está aqui, vale o princípio mais próximo e uma conversa antes de produzir.

1440 × 900 · 375 × 812

11.1

Site e páginas de case

Cada case conta uma ativação do começo ao fim, num ritmo que se repete em todas as páginas.

Como fazer
  1. Siga o ritmo: hero com vídeo, contexto, camadas da experiência, jornada em etapas, resultado, blocos da solução, convite final e rodapé.
  2. Logo por imagem no topo e no rodapé. Nunca o nome digitado no lugar dela.
  3. Vídeo do hero mudo, em loop, com o texto na metade de baixo da tela.
  4. No celular, barra de navegação embaixo com cinco itens, o último WhatsApp.
  5. Publique nos cinco idiomas no mesmo dia, com o seletor levando para a mesma página.
Evite
  • Página que rola para o lado ou texto escondido atrás da barra do celular.
  • Foto e vídeo sem otimizar, que deixam a página lenta.
Exemplo de cartão de link: a logo T3i sobre fundo preto

900 × 472 · JPG · até 72 KB

11.2

Cartão de link no WhatsApp

A imagem que aparece quando alguém cola o link numa conversa. Muitas vezes é o primeiro contato com a página.

Como fazer
  1. Imagem de 900 × 472 px com até 72 KB no computador. O servidor engorda o arquivo, e acima de 90 KB o WhatsApp mostra uma miniatura pequena.
  2. Endereço da imagem sempre completo, começando por https://.
  3. Título curto: é ele que aparece na conversa.
  4. Trocou a imagem? Mande o link com uma variação no fim, como ?v=2. O WhatsApp guarda a miniatura antiga.
Evite
  • Logo de cliente legível sem autorização.
  • Texto pequeno, que vira borrão na miniatura.
1080 × 1350 Área segura da capa · 810 × 1080 O resultado na mão de quem participou.

1080 × 1350 · 4:5 · 7 slides

11.3

Carrossel do Instagram

Sete slides que contam um case ou uma ideia, do gancho ao convite.

Como fazer
  1. O slide 1 é o resultado ou a ação que gera curiosidade. O “como” fica para os seguintes.
  2. Na capa, tudo o que importa dentro de 810 × 1080 centrados: a grade do perfil corta as bordas.
  3. Alterne slides claros e escuros. O acento vai em ícone, número e no ponto do rótulo.
  4. O amarelo de sinal aparece só no último slide, o do convite.
  5. Feche chamando para conversa: “Link na bio. A gente projeta junto.”
Evite
  • Capa com alguém só olhando para a tela, antes de qualquer resultado.
  • Dois slides amarelos, ou “manda um direct” como chamada.
Topo: 250 px Texto aqui Legenda e botões do app

1080 × 1920 · 30 fps · 15 a 25 s

11.4

Reels

Vídeo vertical curto, visto sem som e decidido nos dois primeiros segundos.

Como fazer
  1. Gancho até o segundo 2: a imagem mais forte do evento, não a logo.
  2. Texto entre 250 px do topo e 1480 px de altura, e a mais de 120 px da borda direita, longe da legenda e dos botões do app.
  3. Uma frase curta por cena, legível sem som e com palavra simples.
  4. Feche com a logo grande, t3i.site e a palavra para comentar.
  5. Música de licença livre. Arquivo final em H.264 com áudio AAC.
Evite
  • Logo pequena num canto como fecho.
  • Texto na parte de baixo, onde a legenda do app cobre.
Frase do fecho t3i.site Chamada separada

Fecho 1080 × 1920 · logo com 860 px

11.5

Filmes e vídeos de marca

Todo vídeo da T3i termina do mesmo jeito: a marca grande, limpa e sem pressa.

Como fazer
  1. Feche com o cartão padrão: fundo #0A0A0A limpo e a logo branca no centro, com 80% da largura do quadro.
  2. t3i.site embaixo da logo. A frase de fecho, se houver, vai em cima.
  3. A chamada fica separada da logo, nunca dentro dela.
  4. O cartão fica pelo menos 5,6 segundos na tela.
Evite
  • Logo pequena, dentro de uma plaquinha, sobre imagem carregada ou espremida num canto.
  • Logo ampliada a partir do PNG de 600 px. Use o SVG ou o PNG de 2400 px.
Margem 42 px Parar. Participar. Lembrar.

840 × 672 · 5:4 · LED P2.9

11.6

Painel de LED e palco

Tela grande vista de longe, por gente andando e conversando. No painel do showroom, 840 × 672 pixels. Em outro painel, a mesma lógica na resolução dele.

Como fazer
  1. Fundo #0A0A0A: no LED, preto é luz apagada e dá o maior contraste.
  2. Leitura de 3 a 6 metros: título com pelo menos 70 px no painel, apoio com 42 px e nada abaixo de 28 px.
  3. No máximo seis palavras por tela, por pelo menos 2,5 segundos.
  4. Margem segura de 42 px e traço com pelo menos 2 px.
  5. Logo do arquivo SVG. O PNG pequeno estoura no painel.
Evite
  • Tela branca cheia, que ofusca de perto.
  • Linha fina e listra, que tremem no LED e criam ondas em quem filma. Vídeo vertical esticado para encher a tela.
Arte da campanha Toque para começar
Ação principal QR code no resultado

Totem 43 vertical · Tela touch 32

11.7

Totem e tela touch

A interface que o participante usa no evento. Ela veste a marca do cliente. A T3i cuida de como ela funciona.

Como fazer
  1. A tela segue a arte da campanha da marca. A T3i assina discreta, ou não assina quando o projeto é white label.
  2. Tela de espera com uma chamada curta e movimento, para atrair de longe.
  3. Uma decisão por tela e o menor caminho possível até o resultado.
  4. Botão com pelo menos 2 cm de lado e resposta imediata a cada toque.
  5. Contagem regressiva visível antes da foto. Resultado na tela com QR code grande, preto no branco.
  6. Sem toque por um tempo, a tela volta sozinha para o início.
Evite
  • Texto pequeno para quem está em pé, a um passo da tela.
  • Formulário longo. O cadastro pede só o que a marca vai usar.
Experiência da marca no evento. Do conceito à operação.

1920 × 1080 · 16:9 · PDF

11.8

Proposta e apresentação

O documento que a marca ou a agência leva para aprovar. Cada slide vende uma ideia.

Como fazer
  1. Capa preta com a logo branca e o nome do projeto da marca.
  2. Comece pelo objetivo da marca. Depois a experiência, a jornada do participante e o que a marca leva.
  3. Um assunto por slide, título em duas partes e foto de evento real em tela cheia.
  4. Feche com o próximo passo e o WhatsApp go.t3i.site/whats.
  5. Envie em PDF. Sem as fontes instaladas, use Arial.
Evite
  • Slide com parágrafo longo ou lista de especificação técnica.
  • Tempo de casa ou número de eventos como argumento.
Nome da pessoa Equipe T3i

Vetor · mínimo 25 mm

11.9

Impressos, uniforme e credencial

Tudo o que sai em papel, tecido ou material. Aqui o erro custa caro, então o arquivo certo importa.

Como fazer
  1. Mande para a gráfica o SVG ou o PDF, nunca um print de tela.
  2. Logo preta em fundo claro e branca em fundo escuro. Na logo e no texto, preto 100% K.
  3. Fundo de cor, foto ou material com textura: use a logo em bloco.
  4. Na camiseta e na credencial, a logo inteira, com a área de proteção em volta.
  5. Peça uma prova antes de rodar a tiragem.
Evite
  • Logo com menos de 25 mm de largura.
  • Contorno, sombra ou efeito para “destacar”. Logo sobre dobra, costura ou zíper.
12 · Arquitetura de marca

Uma marca-mãe. Produtos com nome e cara próprios.

A T3i Experience assina a empresa. Alguns produtos ganharam site e identidade próprios para vender melhor sozinhos, sempre com a T3i como endosso.

Marca-mãe

T3i Experience

Site, cases, propostas, redes e equipe. Preto, branco e um acento por página.

Nome anterior

Descomplique Eventos

Mesma empresa e mesma equipe. Material antigo com esse nome é nosso e pode ser usado. Peça nova sai como T3i Experience.

Produto · autografomovel.com.br

Autógrafo Móvel

Papel e caneta rosa. Fraunces, Caveat e DM Sans.

Produto · selfiecup.com.br

SelfieCup

Cobalto e gema, fotos como adesivo. Bricolage Grotesque e Figtree.

Produto · robocaricatura.com.br

Robô Caricatura

Grafite com grade técnica e laranja. Unbounded, Manrope e IBM Plex Mono.

13 · Acessibilidade e idiomas

Todo mundo lê. Em cinco idiomas.

Uma página bonita que parte do público não consegue usar está errada. Estas regras valem para o site, para a interface da ativação e para qualquer peça digital.

01

Contraste.

Texto com pelo menos 4,5:1 contra o fundo. Branco sobre #0A0A0A dá 19,8:1 e a névoa dá 9,9:1.

02

Alvo de toque.

Pelo menos 44 px no celular e 2 cm no totem. Espaço entre botões para o dedo não errar.

03

Texto alternativo.

Toda imagem descreve o que mostra. Vídeo de fundo e ícone decorativo ficam escondidos do leitor de tela.

04

Movimento reduzido.

Quem desligou animação no sistema vê a página parada e completa.

05

Cinco idiomas.

Português, inglês, espanhol, chinês e árabe. Mudou o português, os outros quatro mudam junto.

06

Árabe.

Da direita para a esquerda, sem espaço extra entre letras, com setas e layout espelhados.

14 · Downloads

Os arquivos oficiais. Use estes, nunca um print.

SVG é a primeira escolha: escala sem perder qualidade, do ícone do site ao painel de LED. PNG transparente para apresentação e vídeo. PDF para gráfica.

Pacote da logo

Logo branca e preta transparentes e as duas versões em bloco, em SVG e PNG, num arquivo só.

Baixar tudo ZIP · 112 KB

Logo branca

Transparente, para fundo escuro. A versão padrão.

SVG8 KBPNG 2400 px24 KBPNG 600 px12 KB

Logo preta

Transparente, para fundo claro.

SVG8 KBPNG 2400 px21 KBPNG 600 px13 KB

Logo em bloco preto

Logo branca sobre um retângulo preto, para fundo carregado ou incerto.

SVG9 KBPNG 3000 px53 KBPDF2,6 MB

Logo em bloco branco

Logo preta sobre um retângulo branco, para impressos e fundos claros carregados.

SVG8 KBPNG 3000 px54 KBPDF2,6 MB
Aa

Fontes

Space Grotesk, Inter Tight e JetBrains Mono. Gratuitas, com licença SIL Open Font.

Space Grotesk↗Inter Tight↗JetBrains Mono↗

Brandbook para IA

Este guia inteiro em Markdown, para colar numa IA antes de pedir uma peça.

MDbrandbook.md

Variáveis de design

:root {
  /* marca */
  --t3i-preto: #000000;
  --t3i-branco: #FFFFFF;
  /* tela */
  --ink: #0A0A0A;          /* fundo */
  --grafite: #151515;      /* menus e barra do celular */
  --fog: #B8B8B3;          /* texto secundario e rotulos */
  --papel: #FAFAF7;        /* slides e materiais claros */
  --line: rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.18);
  --neon: #7DF9FF;         /* acento: um por pagina */
  /* tipografia */
  --display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --text: 'Inter Tight', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', 'Courier New', monospace;
  /* layout */
  --margin: 5.5vw;
  --gutter: 24px;
  --max: 1480px;
  --ease: cubic-bezier(.2,.8,.2,1);
}
15 · Para IA

Mande para a sua IA. Ela aplica a marca sem adivinhar.

Este brandbook também existe em Markdown, num arquivo só, com cores, medidas e as regras de cada canal escritas para uma IA ler. Passe o link para o ChatGPT, o Claude ou a ferramenta da sua agência antes de pedir a peça.

O arquivo https://t3i.site/logo/brandbook.md

Atualizado junto com esta página. Tem tudo o que está aqui, mais os valores exatos de cada regra.

Abrir o arquivo →
Um pedido que funciona

Leia o brandbook da T3i Experience em https://t3i.site/logo/brandbook.md e siga todas as regras dele. Depois crie: [descreva a peça, o canal e o formato].

Dúvida de aplicação

Vai produzir algo com a marca?
Fala com a gente antes de imprimir.

Manda a peça ou o rascunho pelo WhatsApp. A gente confere logo, cor e texto antes de sair.

Falar no WhatsApp → Ver todos os cases
Falar no WhatsApp →