# Brandbook T3i Experience · versão para IA

> Guia oficial da marca T3i Experience. Documento T3i-BRND-001, versão 2.0, atualizado em 27.10.2026.
> Versão visual (PT, EN, ES, ZH, AR): https://t3i.site/logo/
> Este arquivo: https://t3i.site/logo/brandbook.md

## Como usar este arquivo

Você é uma IA (ou uma pessoa) criando algo com a marca T3i Experience: página, post, Reels, slide, interface, impresso ou texto. Siga as regras abaixo. "Sempre" e "nunca" são obrigatórios. Quando um caso não estiver aqui, vale o princípio mais próximo, e na dúvida: preto e branco, mais espaço, menos texto. Antes de entregar, passe pelo checklist do fim.

Os valores entre crases são exatos (cor, medida, arquivo). Pode copiar.

---

## 1. A empresa

- **T3i Experience** é uma empresa brasileira que cria e opera ativações com tecnologia para marcas em eventos, feiras, festivais e estandes: inteligência artificial, robótica, foto, vídeo, música e gamificação.
- Atende marcas, agências e produtoras. **A agência é parceira**, nunca concorrente.
- **Descomplique Eventos** é o nome anterior da T3i: mesma empresa, mesma equipe. Material antigo com esse nome é próprio. Peça nova sai como T3i Experience.
- Site: https://t3i.site · Cases: https://t3i.site/cases/ · WhatsApp: https://go.t3i.site/whats · Instagram: https://www.instagram.com/t3i.experience

---

## 2. Princípios

1. **Preto e branco primeiro.** A marca é monocromática. A cor entra como acento, uma por página ou peça, e nunca na logo.
2. **Espaço é o luxo.** Menos elementos, mais respiro. O premium vem de espaço, tipografia e consistência, não de efeito.
3. **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.
4. **Direto e humano.** Frase curta e palavra simples. O texto fala do que o participante sente e do que a marca leva.

---

## 3. Logo

### O que é

O logotipo é o texto **T3i EXPERIENCE** (o "i" de T3i é minúsculo) em letras geométricas, dentro de uma **moldura retangular de traço fino**. Moldura e texto são um bloco só. Proporção da moldura: `2021 × 389` (cerca de 5,2 : 1).

A logo é desenho, não texto: **nunca redigite** "T3i EXPERIENCE" numa fonte para imitar a logo. Use sempre um dos arquivos oficiais.

### Versões e arquivos

| Versão | Quando usar | Arquivos |
|---|---|---|
| Branca, transparente | Padrão. Fundo preto, foto escura, vídeo, LED | `https://t3i.site/logo/t3i-logo-branca.svg` · `https://t3i.site/logo/t3i-logo-branca.png` (2400 px) · `https://t3i.site/logo/1.png` (600 × 200, só para web pequena) |
| Preta, transparente | Fundo branco ou claro: impressos, documentos, guias | `https://t3i.site/logo/t3i-logo-preta.svg` · `https://t3i.site/logo/t3i-logo-preta.png` (2400 px) · `https://t3i.site/logo/2.png` (600 × 200) |
| Em bloco preto | Fundo colorido, carregado ou incerto | `https://t3i.site/logo/Logo%20T3i%20-%20Fundo%20Preto.svg` · `.png` (3000 × 2000) · `.pdf` |
| Em bloco branco | Impresso ou fundo claro carregado | `https://t3i.site/logo/Logo%20T3i%20-%20Fundo%20Branco.svg` · `.png` · `.pdf` |
| Pacote | Tudo acima em SVG e PNG | `https://t3i.site/logo/t3i-logo-pacote.zip` |

### Regras de uso

- **Área de proteção:** em volta de toda a moldura, um espaço livre igual à **altura do T** (x). Na prática, x é cerca de **41% da altura da moldura** (ou 8% da largura). Nada entra ali: texto, borda, QR code, outra marca.
- **Tamanho mínimo:** `90 px` de largura da moldura na tela; `25 mm` impresso. Se precisar ser menor, escreva "T3i Experience" em texto em vez de encolher a logo.
- **No site:** arquivo `1.png` com `40px` de altura no computador e `32px` em telas até `560px`, no topo e no rodapé de toda página.
- **Em vídeo e palco:** grande, nítida, centralizada e parada o tempo de ler. No fecho de vídeo vertical `1080 × 1920`, a moldura ocupa 80% da largura (`860 px`).
- **Arquivo certo:** SVG para o que escala (site, LED, gráfica). PNG transparente para apresentação e vídeo. PDF para gráfica e fornecedor. **Nunca amplie o `1.png`** (600 px): ele estoura.

### Nunca

- Esticar, achatar, girar ou inclinar.
- Aplicar sombra, brilho, contorno, degradê, 3D ou qualquer efeito.
- Pintar a logo de outra cor que não preto ou branco (inclusive a cor de acento).
- Separar o texto da moldura, ou usar só a moldura, ou só o texto.
- Pôr a logo transparente direto sobre foto ou fundo carregado (use a versão em bloco).
- Usar abaixo do tamanho mínimo, ou espremida num canto, ou dentro de uma "plaquinha".
- Redesenhar com outra fonte.

---

## 4. Cor

### Cores da marca (da logo)

| Nome | HEX | RGB | CMYK | Uso |
|---|---|---|---|---|
| T3i Preto | `#000000` | 0 0 0 | 0 0 0 100 | Logo e texto em impressos. Área grande impressa: preto rico `60 40 40 100` |
| T3i Branco | `#FFFFFF` | 255 255 255 | 0 0 0 0 | Logo, títulos e texto principal na tela |

### Cores de tela

| Nome | Valor | Uso |
|---|---|---|
| Tinta | `#0A0A0A` | Fundo de toda tela: site, LED, vídeo, slide escuro |
| Grafite | `#151515` | Menus que abrem, seletor de idioma, barra do celular |
| Fundo de seção | `#070707` | Seção de destaque (blocos, downloads) |
| Fundo do rodapé | `#050505` | Último bloco da página |
| Card | `#0F0F0F` | Card de case no menu |
| Névoa | `#B8B8B3` | Texto secundário, rótulos, segunda parte do título |
| Texto de corpo | `rgba(255,255,255,.72)` | Parágrafos sobre fundo escuro (`.6` a `.8` conforme a hierarquia) |
| Linha | `rgba(255,255,255,.08)` | Fios entre blocos e grades |
| Linha forte | `rgba(255,255,255,.18)` | Borda de botão, tag e menu |
| Papel | `#FAFAF7` | Slides claros do carrossel e materiais claros |
| Certo / Erro | `#3DDC84` / `#FF5A4F` | Só em guias (certo e errado) e em feedback de interface |

### Acento

- Cada página ou peça tem **uma** cor de acento, saturada e diferente das que já existem.
- Já em uso (não repita numa página nova): `#E63329` `#8E5CFF` `#33D17A` `#E8A33D` `#E8376B` `#FF2E88` `#4A9BE0` `#2EE6D0` `#B6F03C` `#FF8A1F` `#7DF9FF` `#5C6CFF`.
- **Sinal do Instagram:** `#E8FF3A` (amarelo). Só no **último slide** do carrossel, o do convite. Nunca dois slides amarelos.
- Acento entra em: ícone, numeração, ponto do rótulo, tag de destaque, fio fino.
- Acento nunca entra em: fundo de bloco grande, texto corrido, logo.
- Nunca: degradê colorido, neon brilhando, glow, duas cores de acento na mesma peça, cinza inventado para "suavizar" a logo.

### Contraste

- Branco sobre `#0A0A0A`: 19,8 : 1. Névoa `#B8B8B3` sobre `#0A0A0A`: 9,9 : 1. Mínimo aceito para texto: 4,5 : 1.

---

## 5. Tipografia

| Família | Papel | Pesos | Detalhe |
|---|---|---|---|
| **Space Grotesk** | Títulos, subtítulo do hero, números grandes | 400, 500 | `letter-spacing` negativo: `-0.02em` a `-0.035em` |
| **Inter Tight** | Texto, botões, menus | 300, 400, 500 | 300 em parágrafo claro sobre fundo escuro, 500 em botão |
| **JetBrains Mono** | Rótulos, tags, numeração, dados técnicos | 400 | Caixa alta, `10` a `11px`, `letter-spacing` `.14em` a `.2em` |

As três são gratuitas (licença SIL Open Font): https://fonts.google.com/specimen/Space+Grotesk · https://fonts.google.com/specimen/Inter+Tight · https://fonts.google.com/specimen/JetBrains+Mono

Pilhas CSS:

```css
--display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
--text: 'Inter Tight', Helvetica, Arial, sans-serif;
--mono: 'JetBrains Mono', 'Courier New', monospace;
```

### Escala

| Nível | Família e peso | Tamanho | Espaçamento | Entrelinha |
|---|---|---|---|---|
| Título do hero (h1) | Space Grotesk 500 | `clamp(44px, 8vw, 116px)` | `-0.035em` | `0.95` |
| Título de seção (h2) | Space Grotesk 500 | `clamp(36px, 5.5vw, 64px)` | `-0.02em` | `1.05` |
| Título de card (h3) | Space Grotesk 500 | `clamp(22px, 2.4vw, 32px)` | `-0.02em` | `1.15` |
| Subtítulo do hero | Space Grotesk 400 | `clamp(20px, 2.2vw, 28px)` | `-0.015em` | `1.25` |
| Abertura (lede) | Inter Tight 300 | `clamp(17px, 1.4vw, 20px)` | 0 | `1.55` |
| Corpo | Inter Tight 300 ou 400 | `16px` | 0 | `1.6` |
| Rótulo | JetBrains Mono 400, caixa alta | `10` a `11px` | `.14em` a `.2em` | 1.6 |

### Regras

- **Título em duas partes:** a primeira afirma, a segunda vira o jogo e vai em névoa (`#B8B8B3`). Ex.: "Brinde, todo mundo entrega. *Obra construída pelo público, não.*"
- Linha de texto com até 62 caracteres. Título do hero com até 15 caracteres por linha.
- Sem as fontes instaladas (Office, e-mail): **Arial** no lugar das três.
- Chinês: Noto Sans SC. Árabe: Noto Sans Arabic, `letter-spacing: 0` em tudo, da direita para a esquerda.
- Nunca: fonte "tecnológica", futurista, com efeito neon ou display caricata. Rótulo mono em texto longo.

---

## 6. Layout

- Grade de **12 colunas**. Margem lateral `5.5vw`. Calha `24px`. Conteúdo com no máximo `1480px`.
- Respiro entre seções: `120px` (computador) e `88px` (até `900px`).
- **Fios em vez de sombra:** blocos lado a lado formam uma grade com `1px` de linha entre eles (`gap:1px` sobre fundo `rgba(255,255,255,.08)`).
- **Cantos retos** em card, botão e foto. Arredondado só nas pílulas: botão do topo, seletor de idioma, barra do celular (`border-radius: 26px`).
- Quebras: `1100`, `900`, `760`, `560`, `360px`. Abaixo de `900px` o menu some e entra a barra do celular; abaixo de `560px` a logo cai para `32px`.
- No computador, texto de um lado e imagem do outro (duas colunas iguais). No celular, empilha.
- Celular: barra de navegação fixa embaixo, com 5 itens e o último sempre WhatsApp. `body { padding-bottom: 104px }` para nada ficar escondido atrás dela.
- Nunca: página que rola para o lado, sombra para separar bloco, caixa arredondada.

### Ritmo de uma página de case

| # | Seção | Papel |
|---|---|---|
| Hero | Vídeo de fundo escurecido, tag, h1 em duas partes, subtítulo, texto curto, 2 botões | Tela cheia, texto na metade de baixo |
| 01 | Contexto | O problema que a ativação resolve |
| 02 | Camadas | 3 cards com ícone |
| 03 | Jornada | 2 a 4 etapas, texto e mídia alternando de lado |
| 04-05 | Resultado, formatos, personalização | Grades de fios |
| 06 | Blocos da solução | 8 quadrados com ícones diferentes |
| CTA | Convite final | WhatsApp + "Ver todos os cases" |
| Rodapé | Logo, nome do case e ano, datas de publicação, links | |

---

## 7. Imagem e vídeo

- Mídia é **registro de ativação real**: gente participando, reagindo, levando o resultado.
- **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.
- **Vertical por padrão** (`1080 × 1920`). Antes de pôr numa caixa horizontal, recorte onde está a ação, sem cortar cabeça nem produto.
- **Vídeo no site é mudo:** sem faixa de áudio, `autoplay muted loop playsinline` e imagem de capa (`poster`). Som só em Reels e filmes, com música de licença livre.
- Texto sobre imagem ganha camada escura em degradê até `#0A0A0A`.
- Cor natural: sem filtro pesado, sem preto e branco artificial, sem vinheta.
- Peso: 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.
- **Nunca:** marca de concorrente em nenhum lugar (nem fundo, reflexo ou camiseta); marca de cliente em destaque sem autorização da T3i; foto de um case ilustrando outro; banco de imagem no lugar do evento real; print de rede social com uma segunda interface desenhada por cima.

---

## 8. Ícones

- SVG inline, `viewBox="0 0 24 24"`, `fill="none"`, `stroke="currentColor"`, `stroke-width="1.4"` (`1.5` na barra do celular), `stroke-linecap="round"`, `stroke-linejoin="round"`.
- Tamanho: `30` a `34px` em card, `21px` na barra do celular. Cor: a do texto ou a do acento.
- **Cada item de um bloco tem um ícone diferente.** O mesmo ícone repetido em vários quadrados parece descuido.
- Nunca: emoji como ícone, inclusive bandeira de idioma (não aparece no Windows: desenhe a bandeira em SVG); ícone cheio misturado com ícone de linha.

---

## 9. Movimento

- **Entrada:** `opacity 0 → 1` e `translateY(28px) → 0` em `0.9s`, curva `cubic-bezier(.2,.8,.2,1)`. Itens vizinhos em sequência, `0.08s` de atraso entre eles.
- **Hover:** botão inverte branco e preto em `0.2s`; a seta anda `4px`; card clareia de leve.
- **Rolagem:** depois de `24px`, o topo ganha fundo `rgba(10,10,10,.78)` com `backdrop-filter: blur(14px)`.
- **Movimento reduzido:** com `prefers-reduced-motion: reduce`, tudo aparece parado e completo.
- **Vídeo:** corte na batida, tomadas de 1,5 a 3 s, nenhum quadro parado mais de 4 s. Logo entra com escala leve e um brilho que passa uma vez.
- Nunca: girar, piscar, glitch, explosão, câmera lenta longa.

---

## 10. Escrita

### Voz

- **Direta:** uma ideia por frase. Ponto final no lugar de vírgula empilhada.
- **Confiante:** prova no lugar de adjetivo (o que aconteceu, quanto tempo levou, o que a pessoa levou).
- **Humana:** a reação do público e o resultado da marca vêm antes do equipamento.

### Regras

- Frase curta. Título em duas partes, com virada.
- **Nunca use travessão longo** (o traço comprido), em lugar nenhum: texto, título, legenda, nome de arquivo. Use ponto, vírgula, dois-pontos ou hífen curto.
- Número concreto só quando alguém mediu. Não invente número.
- **"Fila" só no sentido positivo:** estande cheio, movimento, gente em volta. Nunca espera ("duas horas de fila"). Prefira "movimento", "gente em volta", "entra na próxima".
- **Recurso que não rodou num evento não vira falta.** Não escreva "sem cadastro", "sem prêmio", "sem lead". Escreva o que aconteceu e o que pode entrar: "Quando a marca quer, entra a captura de leads."
- **Produto sempre no positivo:** o que ele faz, a reação do público e o resultado. Nunca comandos negativos ("não para", "tente resistir").
- **Palavra simples:** troque termo técnico ou de material pelo sentido ("de vime" vira "de verdade").
- **Alcance:** "atendemos no Brasil e no exterior". Sem número de países, sem lista de cidades.
- **Volume:** "milhares de ativações realizadas". Sem número exato de eventos e **sem tempo de casa** (anos de mercado).
- **Agência é parceira:** nenhum texto sugere dispensar a agência. White label e sigilo existem "se pedir".
- **Nome de cliente:** só com autorização da T3i para aquele material, no máximo uma menção, onde vira argumento, nunca no título. **Concorrente: nunca.**
- **Chamada:** sempre para conversa. Site: WhatsApp `https://go.t3i.site/whats`. Instagram: "Link na bio. A gente projeta junto."
- Nunca: "solução inovadora", "experiência única", "tecnologia de ponta", "manda um direct".

### Escreva assim, não assim

| Escreva assim | Não assim | Por quê |
|---|---|---|
| Movimento no estande e gente em volta. | Duas horas de fila. | Fila só no sentido bom |
| Cerca de 30 segundos por copo. | Tecnologia de ponta, experiência única. | Número concreto no lugar de adjetivo |
| Quando a marca quer, entra a captura de leads. | Sem cadastro. | Recurso opcional não é falta |
| O cesto do balão é de verdade. | O cesto é de vime. | Palavra que todo mundo entende |
| Atendemos no Brasil e no exterior. | Presentes em 12 países. | Alcance sem número |
| Milhares de ativações realizadas. | Há 12 anos no mercado. | Força sem tempo de casa |

### Nomes oficiais (escreva sempre igual)

T3i Experience · SelfieCup (versões Tradicional e Premium) · Autógrafo Móvel · Robô Caricatura · Reflexo Infinito (nunca "cabine") · Túnel de LED (nunca "cabine de LED") · Fila Virtual · Pooh Panda Robô · Titan Cachorro Robô · Robo Futuro · Humanoide G1 · Robo Futuro · Humanoide R1 · Super Humanoide H2 · Bot Print.

---

## 11. Componentes

Todo case e toda página da T3i usam os mesmos blocos. Página nova copia o estilo de uma página recente e troca só `--neon`.

### Variáveis

```css
:root {
  --ink: #0A0A0A;
  --white: #FFFFFF;
  --fog: #B8B8B3;
  --line: rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.18);
  --neon: #7DF9FF;            /* acento: um por página */
  --display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --text: 'Inter Tight', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', 'Courier New', monospace;
  --gutter: 24px;
  --margin: 5.5vw;
}
```

### Peças

| Peça | Especificação |
|---|---|
| Botão principal | Fundo branco, texto `#0A0A0A`, Inter Tight 500 `14px`, `padding:16px 24px`, borda `1px` branca, canto reto. Hover: inverte. Seta "→" que anda `4px` |
| Botão secundário | Vazado: fundo transparente, borda `1px` branca, texto branco. Hover: fundo branco |
| Pílula do topo | Única peça redonda do menu: fundo branco, `border-radius:999px`, `padding:11px 18px`, sobe `2px` no hover |
| Tag | Mono `10px`, caixa alta, `letter-spacing:.18em`, borda `1px` `--line-strong`, `padding:6px 12px`. Tag de destaque com borda e texto no acento |
| Rótulo de seção | Mono `11px` caixa alta, precedido de um traço de `32px`: "01 · Contexto". Numeração sempre com dois dígitos |
| Rótulo de etapa | Ponto de `6px` no acento + "Etapa 01 · Nome", dentro do bloco de texto |
| Grade de cards | Células `#0A0A0A` com `gap:1px` sobre `--line`; numeração mono, título Space Grotesk 500 `22px`, texto `15px` peso 300 |
| Card de case (menu) | Fundo `#0F0F0F`, cabeça mono com "Case NN" e categoria em pílula, miniatura 4:5, tags mono, título com ponto final, "Ver case →" |
| Seletor de idioma | Botão pílula com bandeira SVG + código + seta; lista com os 5 idiomas: BR PT · US EN · ES ES · CN ZH · AE AR. Bandeira desenhada em SVG, nunca emoji. Leva para a mesma página no outro idioma |
| Barra do celular | Só até `900px`. Fixa embaixo, fundo `#151515`, `border-radius:26px`, 5 itens com ícone e rótulo mono; o ativo sobe num círculo (`translateY(-26px)`); o último é WhatsApp com ícone em círculo branco |
| WhatsApp flutuante | Só no computador, canto inferior direito, fundo branco, texto "Falar no WhatsApp →" |

### Exemplo de seção

```html
<section id="contexto">
  <div class="section-inner">
    <div class="section-head">
      <div>
        <div class="label">01 · Contexto</div>
        <h2>Brinde, todo mundo entrega. <span class="muted">Obra construída pelo público, não.</span></h2>
      </div>
      <p class="lede">Duas ou três frases curtas sobre o problema que a ativação resolve.</p>
    </div>
  </div>
</section>
```

---

## 12. Canais

### 12.1 Site e páginas de case

- Formato: `1440 × 900` (computador) e `375 × 812` (celular). Nada pode rolar para o lado nos dois.
- Siga o ritmo de página da seção 6.
- Logo por imagem no topo e no rodapé, nunca o nome digitado no lugar dela.
- Vídeo do hero mudo, em loop, com o texto na metade de baixo.
- Celular: barra de navegação embaixo com 5 itens, o último WhatsApp.
- Publique nos 5 idiomas (PT, EN, ES, ZH, AR) no mesmo dia, com o seletor levando para a mesma página.
- Evite: texto escondido atrás da barra do celular; foto e vídeo sem otimizar.

### 12.2 Cartão de link (WhatsApp e redes)

- Imagem `og.jpg` de `900 × 472` px, JPG, até `72 KB` no arquivo local (o servidor engorda cerca de 25%; acima de 90 KB no ar o WhatsApp mostra miniatura pequena).
- Endereço da imagem sempre absoluto (`https://...`).
- `og:title` curto: é ele que aparece na conversa.
- Trocou a imagem: mande o link com variação no fim (`?v=2`), porque o WhatsApp guarda a miniatura antiga por endereço.
- Evite: logo de cliente legível sem autorização; texto pequeno que vira borrão.

### 12.3 Carrossel do Instagram

- `1080 × 1350` (4:5), 7 slides.
- Slide 1 é o **resultado ou a ação** que gera curiosidade, nunca a captura (alguém em frente a uma tela). O "como" fica nos slides 2 a 5.
- **Área segura da capa:** `810 × 1080` centrados, ou seja `135px` de margem nos quatro lados. A grade do perfil corta a capa duas vezes (quadrado e depois 3:4).
- Alterne slides claros (`#FAFAF7`) e escuros (`#0A0A0A`). O acento vai em ícone, número e no ponto do rótulo.
- Amarelo `#E8FF3A` só no último slide, o do convite.
- Convite: "Link na bio. A gente projeta junto." Nunca "manda um direct".

### 12.4 Reels

- `1080 × 1920`, 30 fps, 15 a 25 s.
- Estrutura: gancho (0 a 2 s) > o que é > prova > depoimento > fecho com logo, t3i.site e a palavra para comentar.
- Gancho: a imagem mais forte do evento, não a logo.
- **Área segura de texto:** nada acima de `250px`, nada abaixo de `1480px`, nada a menos de `120px` da borda direita (legenda e botões do app).
- Uma frase curta por cena, legível sem som, com palavra simples e sem repetir palavra nas duas linhas.
- Música de licença livre, sem selo de Content ID. Arquivo final H.264 (High), AAC 48 kHz, `+faststart`, cor bt709.
- Evite: logo pequena num canto como fecho; texto na parte de baixo.

### 12.5 Filmes e vídeos de marca

- Todo vídeo termina no cartão padrão: fundo `#0A0A0A` limpo, logo branca no centro com 80% da largura do quadro (`860 px` em `1080 × 1920`), `t3i.site` embaixo, frase de fecho opcional em cima, chamada separada da logo.
- O cartão fica pelo menos 5,6 s na tela.
- Evite: logo pequena, dentro de plaquinha, sobre imagem carregada, espremida num canto, ou ampliada do PNG de 600 px.

### 12.6 Painel de LED e palco

- Painel do showroom: `840 × 672` (5:4, LED P2.9). Renderize em 2× (`1680 × 1344`) e entregue no tamanho nativo, 30 fps. Outro painel: a mesma lógica na resolução dele.
- Fundo `#0A0A0A` (no LED, preto é luz apagada e dá o maior contraste). Nunca tela branca cheia.
- Leitura de 3 a 6 m: título com pelo menos `70px` no painel, apoio com `42px`, nada abaixo de `28px`. No máximo 6 palavras por tela, pelo menos 2,5 s na tela.
- Margem segura de `42px`. Traço mínimo de `2px` (linha fina e listra tremem e criam moiré em quem filma).
- Logo do SVG. Logo fixa num canto superior com cerca de 5% da altura e 70% de opacidade nos vídeos longos.
- Acervo vertical: nunca estique para encher a tela. Use um vertical + texto ao lado, dois ou três verticais lado a lado, ou fonte horizontal.

### 12.7 Totem e tela touch (interface da ativação)

- Estruturas mais usadas: Totem 43 vertical; Tela touch 32.
- A tela veste a **arte da campanha da marca cliente**. A T3i assina discreta, ou não assina quando o projeto é white label. A T3i cuida de como a interface funciona.
- Tela de espera com chamada curta e movimento, para atrair de longe ("Toque para começar").
- Uma decisão por tela e o menor caminho possível até o resultado.
- Botão com pelo menos 2 cm de lado, resposta imediata a cada toque.
- Contagem regressiva visível antes da foto. Resultado na tela com QR code grande, preto no branco, com respiro.
- Sem toque por um tempo, a tela volta sozinha para o início.
- Cadastro pede só o que a marca vai usar; captura de leads entra quando a marca quer.
- Evite: texto pequeno para quem está em pé a um passo da tela; formulário longo.

### 12.8 Proposta e apresentação

- `1920 × 1080` (16:9), enviada em PDF.
- Capa preta com a logo branca e o nome do projeto da marca.
- Ordem: objetivo da marca > experiência > jornada do participante > o que a marca leva > próximo passo.
- Um assunto por slide, título em duas partes, foto de evento real em tela cheia.
- Fecho com o próximo passo e o WhatsApp `go.t3i.site/whats`.
- Sem as fontes instaladas: Arial.
- Evite: parágrafo longo, lista de especificação técnica, tempo de casa ou número de eventos como argumento.

### 12.9 Impressos, uniforme e credencial

- Para a gráfica: SVG ou PDF, nunca print de tela.
- Logo preta em fundo claro, branca em fundo escuro. Preto 100% K na logo e no texto.
- Fundo de cor, foto ou textura: logo em bloco.
- Camiseta e credencial: logo inteira com a área de proteção em volta.
- Peça prova antes da tiragem.
- Evite: logo abaixo de 25 mm; contorno ou sombra para "destacar"; logo sobre dobra, costura ou zíper.

---

## 13. Arquitetura de marca

| Marca | Papel | Identidade |
|---|---|---|
| T3i Experience | Marca-mãe: site, cases, propostas, redes, equipe | Preto, branco e um acento por página. Space Grotesk, Inter Tight, JetBrains Mono |
| Descomplique Eventos | Nome anterior (mesma empresa) | Material antigo é próprio; peça nova sai como T3i |
| Autógrafo Móvel (autografomovel.com.br) | Produto com site próprio | Papel `#F5EFE4`, caneta rosa `#E63E7A`. Fraunces, Caveat, DM Sans |
| SelfieCup (selfiecup.com.br) | Produto com site próprio | Cobalto `#1F3BFF`, gema `#FFD23F`, fotos como adesivo. Bricolage Grotesque, Figtree |
| Robô Caricatura (robocaricatura.com.br) | Produto com site próprio | Grafite `#15171C` com grade técnica, laranja `#FF5A1F`. Unbounded, Manrope, IBM Plex Mono |

- Site de produto: identidade própria, "por T3i" perto da logo do produto e uma seção preta "Quem faz" com link para https://t3i.site.
- Ao lado de outra marca: mesma altura visual, separadas por um fio fino ou pelo dobro da área de proteção. A marca do cliente vem primeiro.
- Na ativação, a tela veste a identidade do cliente. White label quando a agência pede.
- Nunca misture a identidade de um produto com a da T3i na mesma peça.

---

## 14. Acessibilidade e idiomas

- Contraste de texto de pelo menos 4,5 : 1.
- Alvo de toque: pelo menos `44px` no celular e 2 cm no totem.
- Toda imagem com `alt` descrevendo o que mostra. Vídeo de fundo e ícone decorativo com `aria-hidden="true"`.
- `prefers-reduced-motion` respeitado.
- Idiomas: português (fonte), inglês, espanhol, chinês simplificado e árabe. Mudou o português, os outros quatro mudam junto.
- Árabe: `dir="rtl"`, layout espelhado, `letter-spacing: 0` em títulos e rótulos, setas viradas (→ vira ←).
- Chinês: "Case" e "Cases" viram os dois 案例; para "Todos os cases" use 全部案例.
- Espanhol: sem artigo antes da marca ("T3i crea", nunca "La T3i crea").

---

## 15. Checklist antes de entregar

- [ ] A logo é um arquivo oficial, inteira, sem efeito, na cor certa para o fundo, com área de proteção e acima do tamanho mínimo.
- [ ] Fundo escuro `#0A0A0A` (ou claro `#FAFAF7` / branco em impresso) e no máximo uma cor de acento, fora da logo.
- [ ] Títulos em Space Grotesk, texto em Inter Tight, rótulos em JetBrains Mono (ou Arial, se não houver as fontes).
- [ ] Título em duas partes, frases curtas, palavra simples.
- [ ] Nenhum travessão longo no texto.
- [ ] Nada de "fila" como espera, "sem cadastro", tempo de casa, número de eventos, lista de países, "experiência única".
- [ ] Nenhuma marca de concorrente. Nome de cliente só se autorizado, uma vez, fora do título.
- [ ] Imagem real de evento, com o resultado ou a ação em primeiro plano.
- [ ] Formato e área segura do canal respeitados (seção 12).
- [ ] Chamada final leva para conversa (WhatsApp ou "link na bio").
- [ ] Em página web: nada rola para o lado em 375 px; barra do celular e WhatsApp presentes; 5 idiomas.

---

Dúvida de aplicação: https://go.t3i.site/whats