Módulo 1.3 - Sistema de Marca | Design + Vídeo com IA

📐 Design tokens: o que são

Design tokens são variáveis nomeadas que encapsulam decisões visuais. Um valor, um nome, usado em todo o sistema. Muda o token, muda o sistema inteiro de uma vez.

🧱 Tipos de tokens

•Cor: primary, accent, neutral, warn
•Tipografia: font-headline, font-body, font-size-base, line-height
•Espaçamento: spacing-xs, spacing-sm, spacing-md, spacing-lg
•Raio: radius-sm, radius-md, radius-full
•Sombra: shadow-sm, shadow-md, shadow-glow

💡 Por que isso importa

Sem tokens, cada componente tem seu próprio hex hardcoded. Resultado: marca vira colcha de retalhos, e mudar a paleta exige grep-replace em dezenas de arquivos. Com tokens, você muda em um único lugar.

🎨 Paleta em hex codes

Sua paleta reduzida a 4-6 hex codes. Primária, accent, neutro escuro (fundo), neutro claro (texto), warn/hot (alerta). Menos é mais — paleta enxuta também é princípio do MOTION_PHILOSOPHY (≤5 cores simbólicas).

🎨 Exemplo (AIS como referência)

#07121c

accent

#37bdf8

hot

#f09025

deep

#195066

📊 Contraste mínimo

WCAG AA exige 4.5:1 para texto normal, 3:1 para texto grande. Use webaim.org/contrast para checar cada par texto/fundo.

✍️ Tipografia: headline + body

Duas fontes, nunca mais. Uma para headlines (pode ser display, serif, display sans), outra para body (sans-serif legível). Três fontes viram ruído.

✓ Pairings que funcionam

• Serif italic + geometric sans (editorial)
• Display sans + humanist sans (tech)
• Mono + sans (terminal, clinical)
• Slab + neo-grotesque (industrial)

✗ Não fazer

• Três ou mais famílias
• Duas serifs muito parecidas
• Comic Sans em qualquer situação
• Fontes sem fallback ou sem licença

💡 Google Fonts

Para começar sem friction, use fonts.google.com. Carrega via link HTML, grátis, com font-display: swap. Para Claude Design e Hyperframes, inclua o <link> em todas as composições.

🎬 Regras de motion da sua marca

Marca não é só cor e fonte — é ritmo também. Infinite usa motion blur em whip transitions, Linear usa fades limpos, Apple usa spring micro-interactions. É decisão de identidade.

⚙️ Dimensões a decidir

•Duration padrão: 180ms? 400ms? 800ms?
•Easing signature: expo.out? power2.inOut? back.out(1.7)?
•Transições preferidas: fade? whip? scale? shader?
•Motion blur: usar? só em whips? nunca?
•Estilo: "precise mechanical" ou "hand-drawn imperfect"?

📝 Exemplo de seção "Motion" no DESIGN.md

## Motion

- Duration padrão: 400ms
- Easing: expo.out (entrada), power2.inOut (saída)
- Transições: whip-pan com motion blur, fade 200ms
- Signature: kinetic typography com chrome-gradient
  e halo glow em todos os títulos
- Estilo: precise mechanical (nada hand-drawn)

💻 brand-tokens.css com custom props

O arquivo brand-tokens.css é onde suas decisões viram CSS custom properties que todo projeto importa.

📝 Template mínimo

:root {
  /* Cores */
  --brand-primary: #0a0a0f;
  --brand-accent: #37bdf8;
  --brand-hot: #f09025;
  --brand-deep: #195066;

  /* Tipografia */
  --brand-font-headline: 'Inter', sans-serif;
  --brand-font-body: 'Inter', sans-serif;

  /* Espaçamento */
  --brand-space-base: 16px;
  --brand-radius: 12px;

  /* Motion */
  --brand-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --brand-duration: 400ms;
}

💡 Como usar nas composições

Importe no <head>:

<link rel="stylesheet" href="assets/brand-tokens.css">

Depois use var(--brand-accent) em qualquer lugar.

🔍 Find-and-fix sweep

Mesmo com tokens, composições herdadas vêm com valores hardcoded. Uma varredura grep antes de entregar caça handles sociais antigos, cores fora do sistema e referências a marcas do dono anterior.

🔎 Comando de varredura

# Procura hex codes e strings AIS que deveriam ter saído
grep -rEn "(#37bdf8|#f09025|#07121c|#195066|aisoc|AIS Logo|@aiautomationsociety)" video-projects/

# Adapte o regex para sua marca: cole os hex antigos
# e strings que precisam desaparecer

⚠️ Falhas clássicas sem varredura

✗Vídeo entregue com @aiautomationsociety onde deveria ter o handle novo
✗Cena com hex azul antigo (#37bdf8) em vez da nova accent
✗Logo PNG antiga ainda referenciada em <img src="AIS Logo.png">

📋 Checklist pré-deploy

☐ Grep por hex codes antigos
☐ Grep por handles sociais antigos
☐ Grep por nome do cliente/projeto antigo
☐ Grep por URLs antigas (domínios, GitHub handles)
☐ Inspeção visual dos frames-chave

📋 Resumo do Módulo

✓

Design tokens entendidos — cor, tipo, espaçamento, raio, motion

✓

Paleta definida — 4 a 6 hex codes, contraste ≥4.5:1

✓

Tipografia decidida — headline + body, nunca três famílias

✓

Regras de motion escritas — duration, easing, transições signature

✓

brand-tokens.css criado — CSS custom properties importáveis em qualquer composição

✓

Varredura find-and-fix rodada — zero hardcoding antigo restante

Próximo Módulo:

1.4 - MOTION_PHILOSOPHY: a estética do movimento

← Módulo Anterior Próximo Módulo →