Brand Kit

Documento canônico: 02-brand/brand-kit.md

Status: ✅ APROVADO — Fernando Parreiras, 20 Abril 2026

Fonte de verdade do sistema visual Tech Human. Qualquer alteração em cores, tipografia ou tokens começa aqui e propaga para os HTMLs em 03-market-materials/website/.

Renderização visual: 03-market-materials/website/brand-kit.html

Acesso no Playbook: 02-brand/brand-kit-visual.md

Conceito

Tech Human = TECH (estrutura, método, execução) + HUMAN (pessoas, propósito, entrega real).

A marca posiciona a consultoria como quem faz a ponte entre decisão estratégica e execução técnica — com responsabilidade pelo resultado.

Tagline mestre: “Tecnologia sozinha é ferramenta. Com humanidade, ela se torna legado.”

1. Paleta de cores

Token	Hex	Uso
`--th-black`	`#080809`	Background principal
`--th-dark`	`#0F0F11`	Background secundário
`--th-surface`	`#2A2B2D`	Cards, superfícies elevadas
`--th-card`	`#141416`	Cards internos
`--th-lime`	`#D8FF57`	Acento principal — CTAs, destaques, ícones ativos
`--th-lime-dim`	`#BBED2F`	Variação escura do lime — hover states
`--th-lime-glow`	`rgba(216, 255, 87, 0.08)`	Background sutil sobre dark
`--th-light`	`#ECEDF0`	Texto principal sobre dark
`--th-muted`	`rgba(236, 237, 240, 0.45)`	Texto secundário, labels
`--th-gray`	`#4E555E`	Texto terciário, separadores
`--th-border`	`rgba(255, 255, 255, 0.07)`	Bordas de cards e dividers

Regras de uso de cor

Lime com propósito: o --th-lime ilumina o que importa — não é decoração. Usar em: headlines de impacto, CTAs, badges de status, destaques de score.
Fundo sempre escuro: nunca usar o lime como background de áreas grandes. Ele funciona sobre dark, não como fundo.
Hierarquia: --th-light → corpo de texto, --th-muted → suporte, --th-gray → metadados.
Verde #44BB44 e vermelho #FF4444: apenas para estados semânticos (aprovado/reprovado, OK/erro). Nunca como cor de marca.

2. Tipografia

Família única: Raleway (Google Fonts) https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,400&display=swap

Escala

Nível	Peso	Tamanho	Letter-spacing	Uso
Display	900	`clamp(40px, 5vw, 68px)`	`-2px`	Hero, títulos de capa
H1	800	`32px`	`-1px`	Títulos de seção
H2	700	`22px`	`-0.5px`	Subtítulos, cards principais
Body	400	`15px`	`normal`	Corpo de texto, lh 1.7
Body sm	400	`13px`	`normal`	Cards, descrições
Label	700	`10px`	`3–4px`	Uppercase labels, eyebrows
Micro	700	`9px`	`3px`	Uppercase micro labels

Regras tipográficas

Raleway é a única família aprovada. Nunca substituir por Inter, Arial ou system fonts.
Letter-spacing negativo apenas em pesos 800–900 (exibe intenção, não acidente).
Labels e eyebrows: sempre text-transform: uppercase + letter-spacing: 3–4px + peso 700.
Itálico: apenas em citações, frases assinatura e copy persuasivo — nunca em dados técnicos.

3. Logos

Fonte canônica: 02-brand/assets/logos/ Espelho publicável do site: 03-market-materials/website/assets/logos/

Quando um logo for alterado, manter os dois diretórios sincronizados. A página visual do Brand Kit usa o espelho dentro de website/ para que a pasta possa ser publicada sozinha.

Versões disponíveis

Arquivo	Fundo recomendado	Uso
`02-brand/assets/logos/th-logo-horizontal-lime.svg`	Escuro neutro (`#2A2B2D`)	Impressos, apresentações dark
`02-brand/assets/logos/th-logo-horizontal-dark.svg`	Dark neutro (`#1A1A1C`)	App dark mode, e-mail
`02-brand/assets/logos/th-logo-horizontal-white.svg`	Preto (`#080809`)	Site, digital-first
`02-brand/assets/logos/th-icon-circle-lime.svg`	Lime	Favicon, avatar principal
`02-brand/assets/logos/th-icon-circle-dark.svg`	Dark	App dark, e-mail
`02-brand/assets/logos/th-icon-circle-black.svg`	Preto	Impressão P&B
`02-brand/assets/logos/th-icon-circle-white.svg`	Branco	Browser claro, docs
`02-brand/assets/logos/th-mark-dark.svg`	Claro	Watermark, fundo claro
`02-brand/assets/logos/th-mark-lime.svg`	Escuro	Overlay, fundo escuro

Área de respiro

Manter espaço mínimo ao redor do logo equivalente à altura do ícone TH circular em todos os quatro lados.

4. Restrições de uso

❌ Proibido	Razão
Distorcer ou comprimir o logo	Quebra proporção e identidade
Mudar as cores da paleta aprovada	Cria inconsistência de marca
Usar degradê sobre o logo	Não aprovado no sistema
Substituir Raleway por outra fonte	Tipografia é parte da identidade
Não respeitar área de respiro	Logo perde respiro visual
Usar logo sobre fundos complexos (foto, ruído)	Legibilidade comprometida
Separar o ícone TH do texto em contexto de assinatura	A unidade TH + “Tech Human” é indivisível

5. CSS Variables (tokens canônicos)

Copiar e colar em qualquer projeto digital da Tech Human:

/* Tech Human Design Tokens — v2.0 */
:root {
  /* Backgrounds */
  --th-black:      #080809;
  --th-dark:       #0F0F11;
  --th-surface:    #2A2B2D;
  --th-card:       #141416;

  /* Accent */
  --th-lime:       #D8FF57;
  --th-lime-dim:   #BBED2F;
  --th-lime-glow:  rgba(216, 255, 87, 0.08);

  /* Text */
  --th-light:      #ECEDF0;
  --th-muted:      rgba(236, 237, 240, 0.45);
  --th-gray:       #4E555E;

  /* Borders */
  --th-border:     rgba(255, 255, 255, 0.07);

  /* Typography */
  --th-font:       'Raleway', sans-serif;

  /* Border radius */
  --th-radius-sm:  4px;
  --th-radius:     8px;
  --th-radius-lg:  12px;
}

6. Guias complementares

Documento	Caminho	Conteúdo
Arquitetura de Marca	`02-brand/brand-architecture.md`	Hierarquia TH/Trustyu/NeedyU.ai/JARVIS, contextos por canal, nomenclatura
Mensagens por Audiência	`02-brand/messages-by-audience.md`	Copy aprovado por perfil de decisor, frases assinatura, vocab proibido
Brand Kit (visual)	`03-market-materials/website/brand-kit.html`	Renderização interativa do sistema de marca
Brand Kit Visual no Playbook	`02-brand/brand-kit-visual.md`	Página navegável com embed do HTML visual e links rápidos