Brandbook Versión 2.0 · octubre de 2026

La marca T3i, del píxel al escenario.

Logo, color, tipografía, componentes y la forma correcta de aplicarlos en cada canal. Para quien diseña, programa, imprime, filma o escribe para T3i.

Descargar el logo → Versión para IA (.md)
Logo T3i Experience blanco sobre fondo negro
Logo T3i Experience negro sobre fondo blanco
Documento T3i-BRND-001
Versión 2.0 · 27.10.2026
Idiomas PT · EN · ES · ZH · AR
Uso Público y socios
01 · Principios

Cuatro ideas sostienen la marca. Lo demás es consecuencia.

T3i crea y opera experiencias con tecnología para marcas en eventos, ferias y stands. La identidad es minimalista a propósito: tiene que funcionar en un panel de LED, en una credencial, en una historia de Instagram y en una propuesta sin perder presencia. Antes de cualquier regla de esta guía, valen estas cuatro.

01

Primero, blanco y negro.

La marca es monocromática. El color entra como acento, uno por página, y nunca en el logo.

02

El espacio es el lujo.

Menos elementos, más aire. Lo premium viene del espacio, la tipografía y la consistencia, no de los efectos.

03

La experiencia es la estrella.

Gente viviendo la activación vale más que cualquier gráfico. El layout abre espacio para el “wow” de quien participa.

04

Directo y humano.

Frase corta y palabra simple. El texto habla de lo que siente el participante y de lo que se lleva la marca.

03 · Color

Negro, blanco y un acento. Solo uno a la vez.

El logo existe en negro y en blanco, y toda la marca parte de ahí. En pantalla, el fondo es un negro apenas aclarado, más cómodo para leer que el negro puro. El color de acento cambia en cada página o pieza y nunca toca el logo.

Colores de la marca

T3i Negro

#000000RGB 0 0 0CMYK 0 0 0 100

Logo y texto en impresos. En áreas grandes impresas, negro enriquecido (CMYK 60 40 40 100).

T3i Blanco

#FFFFFFRGB 255 255 255CMYK 0 0 0 0

Logo, títulos y texto principal en pantalla.

Colores de pantalla

Tinta

#0A0A0A

Fondo de toda pantalla: sitio, LED, video, slide oscuro.

Grafito

#151515

Menús desplegables, selector de idioma y barra del celular.

Niebla

#B8B8B3

Texto secundario, etiquetas y la segunda parte del título.

Papel

#FAFAF7

Slides claros del carrusel y materiales de fondo claro.

Fondo del pie de página

#050505

El último bloque de la página, un paso más oscuro.

Línea

rgba(255,255,255,.08)

Líneas finas entre bloques y retículas.

Línea fuerte

rgba(255,255,255,.18)

Bordes de botón, tag y menú.

Correcto e incorrecto

#3DDC84#FF5A4F

Solo en guías y en avisos de interfaz: éxito y error.

Acento

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

Cada página y cada pieza tiene su color de acento, saturado y distinto de los que ya existen. Los de arriba ya están en uso. El amarillo #E8FF3A es la señal de Instagram y solo aparece en el último slide del carrusel, el de la invitación.

04 · Tipografía

Tres familias. Cada una con su trabajo.

Títulos en Space Grotesk, texto en Inter Tight y etiquetas en JetBrains Mono. Las tres son gratuitas, con licencia SIL Open Font, y el sitio las carga desde su propio dominio. El logo no es texto: es dibujo, y nunca se vuelve a escribir.

Aa

Space Grotesk

Títulos, subtítulo del hero y números grandes. Peso 500, letras un poco más juntas de lo normal.

Títulos · 400 · 500
Aa

Inter Tight

Texto corrido, botones y menús. Peso 300 en los párrafos claros sobre fondo oscuro, 400 en el resto, 500 en botones.

Texto · 300 · 400 · 500
Aa

JetBrains Mono

Etiquetas, tags, numeración y datos técnicos. Pequeña, en mayúsculas y con letras espaciadas.

Etiquetas · 400

Escala

Título del heroDel píxel al escenario.Space Grotesk 500 · 44 a 116 px · -0.035em · interlineado 0.95
Título de secciónUn obsequio lo entrega cualquiera.Space Grotesk 500 · 36 a 64 px · -0.02em · 1.05
Título de tarjetaLa tecnología sirve al concepto.Space Grotesk 500 · 22 a 32 px · 1.15
SubtítuloEntramos al proyecto para sumar.Space Grotesk 400 · 20 a 28 px · 1.25
AperturaEl participante posa y se lleva el dibujo al momento.Inter Tight 300 · 17 a 20 px · 1.55
CuerpoSistema en línea, datos entrando y premios verificados.Inter Tight 300 o 400 · 16 px · 1.6
Etiqueta03 · RecorridoJetBrains Mono 400 · 10 a 11 px · mayúsculas · 0.14em a 0.2em
05 · Layout

Doce columnas y mucho aire. La retícula se ve en las líneas finas.

Toda página usa una retícula de 12 columnas, con margen lateral del 5,5% de la pantalla y como máximo 1480 px de contenido. Los bloques lado a lado se separan con una línea de 1 px, nunca con sombra ni caja redondeada.

Aire

120 px entre secciones.

88 px en celular. El hero ocupa toda la pantalla, con el texto en la mitad inferior.

Esquinas

Rectas, casi siempre.

Tarjeta, botón y foto tienen esquinas rectas. Redondo solo en las píldoras: botón superior, selector de idioma y barra del celular.

Puntos de quiebre

1100, 900, 760, 560 y 360 px.

Por debajo de 900 px el menú desaparece y entra la barra del celular. Por debajo de 560 px el logo baja a 32 px.

06 · Imagen y video

Gente real, evento real. La foto prueba lo que el texto promete.

El material de T3i es registro de activación real: personas participando, reaccionando y llevándose el resultado. Es lo que vende. El layout existe para dejar respirar esa imagen.

01

El resultado primero.

La primera imagen muestra a la persona con el resultado en la mano o la acción sucediendo. Nunca solo a alguien parado frente a una pantalla.

02

Vertical por defecto.

Casi todo el material nace en 1080 × 1920. Antes de ponerlo en una caja horizontal, recorta donde está la acción, sin cortar cabezas ni producto.

03

El video del sitio es mudo.

Entra sin pista de audio, en loop y con imagen de portada. Sonido solo en Reels y filmes, con música de licencia libre.

04

Oscuro sobre el video.

El texto sobre imagen lleva una capa oscura en degradado hasta el negro de la página. La lectura antes que todo.

05

Color natural.

Sin filtro pesado, sin blanco y negro artificial y sin viñeta. Corrige la luz, no inventes clima.

06

Archivo ligero.

Foto de 900 a 1200 px de ancho, video de 720 px. Una página de caso completa queda entre 2 y 4 MB.

07 · Íconos

Trazo fino, punta redonda. Un dibujo para cada idea.

Los íconos se dibujan en línea, en una retícula de 24 px, del color del texto o del acento. En un bloque con varios ítems, cada uno tiene su propio ícono: ocho cuadrados con el mismo símbolo parecen descuido.

Foto
IA
Robot
Música
Juego
Premio
Datos
Código QR
08 · Movimiento

Entra suave, nunca salta. El movimiento guía la mirada, no adorna.

El contenido sube un poco y aparece cuando llega a la pantalla, desacelerando al final. Los botones cambian de color en un instante. Nada gira, parpadea ni explota.

Entrada
Opacidad de 0 a 1 y subida de 28 px en 0,9 s, con la curva cubic-bezier(.2,.8,.2,1). Los elementos vecinos entran en secuencia, cada 0,08 s.
Toque y paso del mouse
El botón invierte blanco y negro en 0,2 s. La flecha avanza 4 px. La tarjeta se aclara un poco.
Desplazamiento
Después de 24 px de desplazamiento, el encabezado toma fondo oscuro con desenfoque.
Video
Corte al ritmo de la música, tomas de 1,5 a 3 segundos, ningún plano quieto más de 4.
Movimiento reducido
Quien desactivó las animaciones en el sistema ve la página quieta y completa.
09 · Redacción

Frase corta. Punto final. Sin adornos.

T3i habla como quien ya lo hizo: directo, seguro y sin jerga. El texto cuenta lo que siente el participante y lo que se lleva la marca. Números solo cuando alguien midió.

Directa

Una idea por frase.

Punto final en lugar de comas amontonadas. Si se puede cortar una palabra, córtala.

Segura

Pruebas en lugar de adjetivos.

Lo que pasó, cuánto tardó, lo que la persona se llevó a casa.

Humana

Habla del público.

La reacción de quien participa y el resultado de la marca van antes que el equipamiento.

Escribe así

Escribe así
No así
Por qué
Movimiento en el stand y gente alrededor.
Dos horas de fila.
Fila solo en el buen sentido: stand lleno. Nunca espera.
Unos 30 segundos por vaso.
Tecnología de punta, experiencia única.
Número concreto en lugar de adjetivo vacío.
Cuando la marca quiere, entra la captura de leads.
Sin registro.
Un recurso que no se usó en un evento no se presenta como carencia.
La canasta del globo es de verdad.
La canasta es de mimbre.
Palabras que todo el mundo entiende a la primera.
Atendemos en Brasil y en el exterior.
Presentes en 12 países.
Alcance sin números ni lista de ciudades.
Miles de activaciones realizadas.
Con 12 años en el mercado.
La fuerza viene del volumen y de lo propio, nunca de la antigüedad.

Nombres que siempre se escriben igual

T3i ExperienceSelfieCupAutógrafo MóvelRobô CaricaturaReflexo InfinitoTúnel de LEDFila VirtualRobo Futuro · Humanoide G1Pooh Panda RobotTitan Perro Robot
10 · Componentes

Piezas listas. Arma con ellas, no desde cero.

Todo caso y toda página de T3i salen de estos mismos bloques. Una página nueva copia el estilo de una página reciente y cambia solo el color de acento.

Ver los casos →Hablar por WhatsApp

Botones

Inter Tight 500, 14 px, borde blanco de 1 px y esquina recta. El principal es relleno, el secundario solo tiene contorno. Al pasar el mouse, se invierten.

t3i.site

Píldora superior

La única pieza redonda del menú. Fondo blanco y sube 2 px al pasar el mouse.

01 · Contexto
RobóticaDestacado
Etapa 01 · Captura

Etiquetas

JetBrains Mono en mayúsculas. Numeración siempre con dos dígitos. El acento entra en la tag destacada y en el punto de la etapa.

Un obsequio lo entrega cualquiera. Una obra construida por el público, no.

Título con giro

Space Grotesk 500. La primera parte afirma, la segunda da el giro, en niebla.

Retícula de tarjetas

Celdas separadas por 1 px de línea, con numeración mono, título y texto corto. Tres o cuatro por fila.

Caso 04Robótica
Participante sosteniendo la caricatura dibujada por el brazo robótico
Robótica · IA + Dibujo en vivo

Robô Caricatura.

Ver caso →

Tarjeta de caso

Miniatura 4:5, categoría en píldora, tags mono, título con punto final y el enlace “Ver caso”.

PT
EN ES ZH AR

Selector de idioma

Banderas dibujadas en SVG, nunca emoji. Siempre lleva a la misma página en el otro idioma.

Barra del celular

Solo por debajo de 900 px. Cinco ítems, el activo sube en un círculo y el último es siempre WhatsApp.

WhatsApp flotante

Solo en computadora, en la esquina inferior. En celular, ese papel lo cumple la barra.

11 · Canales

Cada canal tiene su estilo. La marca es la misma en todos.

Formato, área segura y el paso a paso de cada lugar donde aparece T3i. Si el canal no está aquí, vale el principio más cercano y una conversación antes de producir.

1440 × 900 · 375 × 812

11.1

Sitio y páginas de caso

Cada caso cuenta una activación de principio a fin, con un ritmo que se repite en todas las páginas.

Cómo hacerlo
  1. Sigue el ritmo: hero con video, contexto, capas de la experiencia, recorrido por etapas, resultado, bloques de la solución, invitación final y pie de página.
  2. Logo como imagen arriba y en el pie de página. Nunca el nombre escrito en su lugar.
  3. Video del hero sin sonido, en loop, con el texto en la mitad inferior de la pantalla.
  4. En celular, barra de navegación abajo con cinco ítems, el último WhatsApp.
  5. Publica en los cinco idiomas el mismo día, con el selector llevando a la misma página.
Evita
  • Página que se desplaza hacia el costado o texto escondido detrás de la barra del celular.
  • Fotos y videos sin optimizar, que vuelven lenta la página.
Ejemplo de tarjeta de enlace: el logo T3i sobre fondo negro

900 × 472 · JPG · hasta 72 KB

11.2

Tarjeta de enlace en WhatsApp

La imagen que aparece cuando alguien pega el enlace en una conversación. Muchas veces es el primer contacto con la página.

Cómo hacerlo
  1. Imagen de 900 × 472 px con hasta 72 KB en el archivo local. El servidor engorda el archivo, y por encima de 90 KB WhatsApp muestra una miniatura pequeña.
  2. Dirección de la imagen siempre completa, empezando por https://.
  3. Título corto: es el que aparece en la conversación.
  4. ¿Cambiaste la imagen? Manda el enlace con una variación al final, como ?v=2. WhatsApp guarda la miniatura anterior.
Evita
  • Logo de cliente legible sin autorización.
  • Texto pequeño, que se vuelve una mancha en la miniatura.
1080 × 1350 Área segura de la portada · 810 × 1080 El resultado en la mano de quien participó.

1080 × 1350 · 4:5 · 7 slides

11.3

Carrusel de Instagram

Siete slides que cuentan un caso o una idea, del gancho a la invitación.

Cómo hacerlo
  1. El slide 1 es el resultado o la acción que genera curiosidad. El “cómo” queda para los siguientes.
  2. En la portada, todo lo importante dentro de 810 × 1080 centrados: la cuadrícula del perfil corta los bordes.
  3. Alterna slides claros y oscuros. El acento va en ícono, número y en el punto de la etiqueta.
  4. El amarillo de señal aparece solo en el último slide, el de la invitación.
  5. Cierra invitando a conversar: “Link en la bio. Lo diseñamos juntos.”
Evita
  • Portada con alguien solo mirando la pantalla, antes de cualquier resultado.
  • Dos slides amarillos, o “mándanos un DM” como llamado.
Arriba: 250 px Texto aquí Descripción y botones de la app

1080 × 1920 · 30 fps · 15 a 25 s

11.4

Reels

Video vertical corto, visto sin sonido y decidido en los dos primeros segundos.

Cómo hacerlo
  1. Gancho hasta el segundo 2: la imagen más fuerte del evento, no el logo.
  2. Texto entre 250 px desde arriba y 1480 px de altura, y a más de 120 px del borde derecho, lejos de la descripción y de los botones de la app.
  3. Una frase corta por escena, legible sin sonido y con palabras simples.
  4. Cierra con el logo grande, t3i.site y la palabra para comentar.
  5. Música de licencia libre. Archivo final en H.264 con audio AAC.
Evita
  • Logo pequeño en una esquina como cierre.
  • Texto en la parte de abajo, donde lo tapa la descripción de la app.
Frase de cierre t3i.site Llamado aparte

Cierre 1080 × 1920 · logo de 860 px

11.5

Filmes y videos de marca

Todo video de T3i termina igual: la marca grande, limpia y sin prisa.

Cómo hacerlo
  1. Cierra con la tarjeta estándar: fondo #0A0A0A limpio y el logo blanco al centro, con el 80% del ancho del cuadro.
  2. t3i.site debajo del logo. La frase de cierre, si la hay, va arriba.
  3. El llamado va separado del logo, nunca dentro de él.
  4. La tarjeta queda al menos 5,6 segundos en pantalla.
Evita
  • Logo pequeño, dentro de una plaquita, sobre una imagen recargada o apretado en una esquina.
  • Logo ampliado desde el PNG de 600 px. Usa el SVG o el PNG de 2400 px.
Margen 42 px Parar. Participar. Recordar.

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

11.6

Panel de LED y escenario

Pantalla grande vista de lejos, por gente que camina y conversa. En el panel del showroom, 840 × 672 píxeles. En otro panel, la misma lógica en su resolución.

Cómo hacerlo
  1. Fondo #0A0A0A: en el LED, el negro es luz apagada y da el mayor contraste.
  2. Lectura de 3 a 6 metros: título con al menos 70 px en el panel, texto de apoyo con 42 px y nada por debajo de 28 px.
  3. Como máximo seis palabras por pantalla, durante al menos 2,5 segundos.
  4. Margen seguro de 42 px y trazo de al menos 2 px.
  5. Logo desde el archivo SVG. El PNG pequeño se pixela en el panel.
Evita
  • Pantalla blanca completa, que encandila de cerca.
  • Líneas finas y rayas, que tiemblan en el LED y crean ondas en quien filma. Video vertical estirado para llenar la pantalla.
Arte de la campaña Toca para empezar
Acción principal Código QR en el resultado

Tótem 43 vertical · Pantalla táctil 32

11.7

Tótem y pantalla táctil

La interfaz que el participante usa en el evento. Viste la marca del cliente. T3i se ocupa de cómo funciona.

Cómo hacerlo
  1. La pantalla sigue el arte de la campaña de la marca. T3i firma con discreción, o no firma cuando el proyecto es white label.
  2. Pantalla de espera con un llamado corto y movimiento, para atraer de lejos.
  3. Una decisión por pantalla y el camino más corto posible hasta el resultado.
  4. Botón de al menos 2 cm de lado y respuesta inmediata a cada toque.
  5. Cuenta regresiva visible antes de la foto. Resultado en pantalla con código QR grande, negro sobre blanco.
  6. Si nadie la toca por un tiempo, la pantalla vuelve sola al inicio.
Evita
  • Texto pequeño para quien está de pie, a un paso de la pantalla.
  • Formulario largo. El registro pide solo lo que la marca va a usar.
Experiencia de la marca en el evento. Del concepto a la operación.

1920 × 1080 · 16:9 · PDF

11.8

Propuesta y presentación

El documento que la marca o la agencia lleva para aprobar. Cada slide vende una idea.

Cómo hacerlo
  1. Portada negra con el logo blanco y el nombre del proyecto de la marca.
  2. Empieza por el objetivo de la marca. Después la experiencia, el recorrido del participante y lo que se lleva la marca.
  3. Un tema por slide, título en dos partes y foto de evento real a pantalla completa.
  4. Cierra con el próximo paso y el WhatsApp go.t3i.site/whats.
  5. Envía en PDF. Sin las fuentes instaladas, usa Arial.
Evita
  • Slide con párrafo largo o lista de especificaciones técnicas.
  • Antigüedad o número de eventos como argumento.
Nombre de la persona Equipo T3i

Vector · mínimo 25 mm

11.9

Impresos, uniforme y credencial

Todo lo que sale en papel, tela u otro material. Aquí el error cuesta caro, así que el archivo correcto importa.

Cómo hacerlo
  1. Manda a la imprenta el SVG o el PDF, nunca una captura de pantalla.
  2. Logo negro en fondo claro y blanco en fondo oscuro. En el logo y en el texto, negro 100% K.
  3. Fondo de color, foto o material con textura: usa el logo en bloque.
  4. En la camiseta y en la credencial, el logo entero, con el área de protección alrededor.
  5. Pide una prueba antes de imprimir el tiraje.
Evita
  • Logo de menos de 25 mm de ancho.
  • Contorno, sombra o efecto para “resaltar”. Logo sobre un doblez, una costura o un cierre.
12 · Arquitectura de marca

Una marca madre. Productos con nombre y cara propios.

T3i Experience firma la empresa. Algunos productos tienen sitio e identidad propios para venderse mejor solos, siempre con T3i como respaldo.

Marca madre

T3i Experience

Sitio, casos, propuestas, redes y equipo. Negro, blanco y un acento por página.

Nombre anterior

Descomplique Eventos

La misma empresa y el mismo equipo. El material antiguo con ese nombre es nuestro y se puede usar. Una pieza nueva sale como T3i Experience.

Producto · autografomovel.com.br

Autógrafo Móvel

Papel y bolígrafo rosa. Fraunces, Caveat y DM Sans.

Producto · selfiecup.com.br

SelfieCup

Cobalto y amarillo yema, fotos como stickers. Bricolage Grotesque y Figtree.

Producto · robocaricatura.com.br

Robô Caricatura

Grafito con retícula técnica y naranja. Unbounded, Manrope e IBM Plex Mono.

13 · Accesibilidad e idiomas

Todos leen. En cinco idiomas.

Una página bonita que parte del público no puede usar está mal. Estas reglas valen para el sitio, para la interfaz de la activación y para cualquier pieza digital.

01

Contraste.

Texto con al menos 4,5:1 contra el fondo. Blanco sobre #0A0A0A da 19,8:1 y la niebla da 9,9:1.

02

Área de toque.

Al menos 44 px en celular y 2 cm en el tótem. Espacio entre botones para que el dedo no se equivoque.

03

Texto alternativo.

Toda imagen describe lo que muestra. El video de fondo y el ícono decorativo quedan ocultos para el lector de pantalla.

04

Movimiento reducido.

Quien desactivó las animaciones en el sistema ve la página quieta y completa.

05

Cinco idiomas.

Portugués, inglés, español, chino y árabe. Si cambia el portugués, los otros cuatro cambian junto con él.

06

Árabe.

De derecha a izquierda, sin espacio extra entre letras, con flechas y layout en espejo.

14 · Descargas

Los archivos oficiales. Usa estos, nunca una captura.

SVG es la primera opción: escala sin perder calidad, del ícono del sitio al panel de LED. PNG transparente para presentación y video. PDF para imprenta.

Paquete del logo

Logo blanco y negro transparentes y las dos versiones en bloque, en SVG y PNG, en un solo archivo.

Descargar todo ZIP · 112 KB

Logo blanco

Transparente, para fondo oscuro. La versión estándar.

SVG8 KBPNG 2400 px24 KBPNG 600 px12 KB

Logo negro

Transparente, para fondo claro.

SVG8 KBPNG 2400 px21 KBPNG 600 px13 KB

Logo en bloque negro

Logo blanco sobre un rectángulo negro, para fondo recargado o incierto.

SVG9 KBPNG 3000 px53 KBPDF2,6 MB

Logo en bloque blanco

Logo negro sobre un rectángulo blanco, para impresos y fondos claros recargados.

SVG8 KBPNG 3000 px54 KBPDF2,6 MB
Aa

Fuentes

Space Grotesk, Inter Tight y JetBrains Mono. Gratuitas, con licencia SIL Open Font.

Space Grotesk↗Inter Tight↗JetBrains Mono↗

Brandbook para IA

Esta guía completa en Markdown, para pegar en una IA antes de pedir una pieza.

MDbrandbook.md

Variables de diseño

: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

Mándalo a tu IA. Aplica la marca sin adivinar.

Este brandbook también existe en Markdown, en un solo archivo, con colores, medidas y las reglas de cada canal escritas para que una IA las lea. Pasa el enlace a ChatGPT, a Claude o a la herramienta de tu agencia antes de pedir la pieza.

El archivo https://t3i.site/logo/brandbook.md

Se actualiza junto con esta página. Tiene todo lo que está aquí, más los valores exactos de cada regla.

Abrir el archivo →
Un pedido que funciona

Lee el brandbook de T3i Experience en https://t3i.site/logo/brandbook.md y sigue todas sus reglas. Después crea: [describe la pieza, el canal y el formato].

Dudas de aplicación

¿Vas a producir algo con la marca?
Habla con nosotros antes de imprimir.

Manda la pieza o el borrador por WhatsApp. Revisamos logo, color y texto antes de que salga.

Hablar por WhatsApp → Ver todos los casos
Hablar por WhatsApp →