# Workshop IA — Master Design System

Versão `1.0.0` · 16 de julho de 2026

Este é o sistema visual mestre do ecossistema **Transformando Histórias em Conteúdos que Emocionam com IA**. Ele consolida os fundamentos usados na landing page e nos anúncios e os transforma em uma base aplicável a websites, páginas de venda, criativos, redes sociais, apresentações, documentos, e-mails, materiais de aula e novas ofertas relacionadas.

O sistema não é apenas uma coleção de cores. Ele define como a marca organiza atenção, traduz histórias em forma visual e equilibra humanidade, método e tecnologia.

## Como navegar

- `index.html` — documentação visual completa.
- `tokens.css` — tokens CSS canônicos.
- `tokens.json` — tokens portáveis no formato DTCG.
- `components.css` — componentes e classes reutilizáveis.
- `starter.html` — ponto de partida para novas páginas e artefatos HTML.
- `content-guidelines.md` — voz, arquitetura de mensagem e critérios de copy.
- `application-matrix.md` — regras por canal e formato.
- `ai-context.md` — porta de entrada recomendada para agentes de IA.
- `llms.txt` — índice público de recursos no padrão llms.txt.
- `llms-full.txt` — versão consolidada do sistema em texto simples.
- `design-system.json` — manifesto legível por máquinas.
- `assets/` — logos, símbolo e imagens aprovadas.
- `assets/manifest.json` — inventário, função e restrições de cada asset.
- `examples/` — exemplos futuros e aplicações aprovadas.

## Como compartilhar com uma IA

Envie preferencialmente esta URL:

`https://workshop.razoesparaacreditar.com/design-system/ai-context.md`

Para uma leitura completa em uma única requisição, use:

`https://workshop.razoesparaacreditar.com/design-system/llms-full.txt`

O endereço visual `https://workshop.razoesparaacreditar.com/design-system/` também expõe essas versões no cabeçalho HTML e nos botões de arquivos.

## 1. Essência do sistema

### Ideia central

**Editorial de histórias + laboratório de garimpo.**

O sistema deve parecer humano antes de parecer tecnológico. A tecnologia é ferramenta; a história é protagonista. O lado editorial aparece na tipografia, na fotografia, no espaço negativo e nas frases-tese. O lado de laboratório aparece em números, rotas, etiquetas, perguntas e sequências de transformação.

### Princípio visual

> Petróleo estrutura. Papel respira. Magenta emociona. Lima comprova.

### Promessa visual

Uma composição precisa tornar visível pelo menos um destes movimentos:

1. Algo comum é observado.
2. Um detalhe é encontrado.
3. O detalhe ganha significado.
4. A história se transforma em conteúdo.

## 2. Personalidade

| Atributo | O que significa | Como aparece |
|---|---|---|
| Humana | A vida real vem antes da ferramenta | Pessoas, cenas, gestos, frases e tensão |
| Editorial | Existe repertório e ponto de vista | Fraunces, assimetria, manchetes e respiro |
| Precisa | A promessa é concreta | Dados, etapas, entregáveis e horários |
| Curiosa | A composição sugere descoberta | Rotas, cartões, perguntas e conexões |
| Autoritativa | O método tem origem e experiência | Vicente, Razões, casos e processo |
| Contemporânea | IA é incorporada sem clichê futurista | Interface limpa, mono e estrutura |

### Não somos

- Futurismo neon.
- Robôs, cérebros digitais ou “prompt mágico”.
- Corporativo genérico.
- Luxury vazio.
- Infantil ou excessivamente lúdico.
- Uma marca de software.
- Uma página de notícias simulada sem contexto.

## 3. Hierarquia da marca

### Logo do workshop

É a assinatura principal em produtos, eventos, páginas, aulas e campanhas diretamente ligadas ao workshop.

- Usar `logo-workshop-on-dark.png` sobre petróleo e fotografia escura.
- Usar `logo-workshop-on-light.png` sobre papel e fundos claros.
- Largura mínima digital recomendada: `180 px`.
- Área de respiro mínima: altura da palavra `WORKSHOP` presente no logo.
- Não aplicar caixa branca para “resolver” contraste.

### Logo do Razões

É chancela de origem e autoridade. Não precisa disputar protagonismo com o logo do workshop.

- Usar em seções de autoridade, rodapés, capas institucionais e assinatura editorial.
- Em materiais que falam do método do Razões, pode assumir o papel principal.
- Nunca deformar ou usar como textura em alta opacidade.

### Beija-flor

É um sinal de passagem, cuidado e origem.

- Como marca: pequeno, íntegro e com contraste total.
- Como elemento decorativo: parcialmente cortado e entre `8%` e `22%` de opacidade.
- Não usar repetidamente como pattern.
- Não competir com headline, preço ou rosto.

## 4. Cor

### Proporção recomendada

- Petróleo e neutros: `75–88%`.
- Magenta: `8–18%`.
- Lima: `2–6%`.

### Funções

- **Petróleo**: estrutura, autoridade, profundidade e base.
- **Papel**: leitura, honestidade, editorial e respiro.
- **Magenta**: emoção, descoberta, caminho e palavra-chave.
- **Lima**: prova, número, preço, status ou conclusão.

### Regras

- Lima não é cor decorativa. Sempre deve significar algo.
- Magenta não deve colorir parágrafos inteiros.
- Evitar magenta com lima em áreas grandes simultaneamente.
- Texto corrido deve usar petróleo, branco ou cinza-azulado.
- Fundos escuros devem dominar campanhas longas, alternados com papel para criar ritmo.

## 5. Tipografia

### Fraunces

Voz humana, tese e descoberta.

Usar em:

- Títulos.
- Frases de autoridade.
- Citações.
- Dados hero.
- Palavra emocional em itálico.

Não usar em:

- Parágrafos longos.
- Botões pequenos.
- Tabelas densas.
- Campos de formulário.

### Manrope

Clareza, instrução e conversão.

Usar em:

- Corpo.
- Botões.
- Descrições.
- Navegação.
- Legendas.
- Textos de interface.

### IBM Plex Mono

Processo, contexto e precisão.

Usar em:

- Data e horário.
- Eyebrows.
- Etapas.
- Código do ingresso.
- Tags.
- Microassinaturas.

Sempre usar com caixa alta e tracking entre `.08em` e `.14em` quando funcionar como etiqueta.

### Regra de contraste tipográfico

Cada composição deve ter:

1. Uma voz principal.
2. Uma voz de explicação.
3. Uma voz de dado ou processo.

Não adicionar uma quarta família tipográfica.

## 6. Espaçamento e layout

O ritmo principal usa múltiplos de `8 px`, com incrementos de `4 px` apenas para ajustes finos.

### Containers

- Amplo: `1180 px`.
- Leitura: `780 px`.
- Estreito: `620 px`.
- E-mail: `640 px`.

### Composição

- Preferir blocos assimétricos a centralização constante.
- Usar espaço negativo como elemento de confiança.
- Manter um foco visual principal por viewport ou peça.
- Cards são agrupadores de informação, não decoração.
- Bordas e sombras devem parecer editoriais, não “soft UI”.

### Grid

- Web desktop: 12 colunas conceituais.
- Tablet: 8 colunas.
- Mobile: 4 colunas.
- Criativos: grid livre respeitando a área segura.
- Apresentação: 12 colunas com margem mínima de `96 px`.

## 7. Motivos proprietários

### Linha de garimpo

Rota magenta, preferencialmente pontilhada, que conecta matéria-prima, descoberta e saída.

### Cartão de descoberta

Cartão claro com número mono, título Fraunces, rotação leve e sombra dura. Representa algo encontrado, não um card de feature genérico.

### Selo de prova

Círculo ou cápsula lima. Deve conter uma única informação:

- `AO VIVO`
- `14 ANOS`
- `2 → 4`
- `R$29`
- `SEM GRAVAÇÃO`

### Arco humano

Recorte fotográfico com cantos superiores circulares ou arqueados. Usar quando a pessoa é a prova principal.

### Grão editorial

Textura de `2–4%` de opacidade. Nunca deve reduzir legibilidade ou gerar compressão visível.

### Pergunta como objeto

O ponto de interrogação, uma pergunta curta ou uma árvore de decisão pode ser tratado como elemento visual. É especialmente útil para explicar garimpo, repertório e objeções.

## 8. Componentes

Os componentes canônicos estão em `components.css`.

### Componentes base

- `.wi-button`
- `.wi-button--accent`
- `.wi-button--light`
- `.wi-card`
- `.wi-card--editorial`
- `.wi-card--discovery`
- `.wi-badge`
- `.wi-badge--proof`
- `.wi-proof`
- `.wi-quote`
- `.wi-event-strip`
- `.wi-photo-arch`
- `.wi-route`
- `.wi-eyebrow`
- `.wi-em`

### Princípio de componentização

Componentes devem carregar função sem impor sempre a mesma composição. O sistema oferece peças; a direção de arte decide como combiná-las.

## 9. Fotografia

### Priorizar

- Gesto.
- Expressão.
- Presença de palco.
- Contato visual.
- Mãos em ação.
- Cenas reais.
- Objetos com significado narrativo.

### Evitar

- Banco de imagens de escritório.
- Pessoa olhando para notebook com sorriso genérico.
- Imagem de IA azul ou holográfica.
- Cortes que eliminam olhos ou mãos sem intenção.
- Overlay magenta pesado sobre pele.

### Tratamento

- Contraste levemente editorial.
- Saturação controlada.
- Petróleo pode entrar como overlay nas bordas.
- Magenta pode conectar elementos, nunca tingir a fotografia inteira.
- Preservar contexto do palco quando autoridade for o argumento.

## 10. Ilustração e ícones

- Linha simples, preferencialmente `1.5–2.5 px`.
- Petróleo como traço principal.
- Magenta para movimento.
- Lima para ponto final, status ou descoberta.
- Cantos ligeiramente orgânicos.
- Evitar coleções de ícones genéricos.
- Ícones devem explicar processo ou resultado.

## 11. Movimento

Movimento deve revelar processo, não decorar.

### Aprovado

- Linha sendo desenhada.
- Cartões entrando em sequência.
- Número contando.
- Fotografia aparecendo por máscara.
- CTA com resposta curta ao hover.

### Evitar

- Parallax constante.
- Flutuação infinita em vários elementos.
- Texto que demora a aparecer.
- Animação que bloqueia CTA.
- Efeito futurista sem relação com o garimpo.

### Tempos

- Microinteração: `160 ms`.
- Estado de componente: `320 ms`.
- Entrada editorial: `650 ms`.

Sempre respeitar `prefers-reduced-motion`.

## 12. Acessibilidade

- Contraste mínimo WCAG AA.
- Foco visível em todos os controles.
- Headings em ordem.
- Alt text descritivo para imagens relevantes.
- Logo decorativo deve ter `alt=""`.
- Não depender apenas de cor para comunicar estado.
- Tamanho mínimo de toque: `44 × 44 px`.
- Corpo mínimo recomendado: `16 px` em web.
- Motion reduzido não pode esconder conteúdo.

## 13. Aplicações

### Landing pages

Usar a combinação completa: editorial, processo, prova, fotografia e conversão.

### Criativos

Reduzir a uma única ideia. Seguir leitura em 1, 3 e 5 segundos.

### Apresentações

Uma tese por slide. Grandes títulos, uma imagem ou um dado. Evitar slides com cards repetidos.

### Documentos

Papel como base, petróleo em títulos, magenta em chamadas e mono em metadados.

### E-mail

Manrope como fonte segura de corpo. Fraunces pode aparecer em imagem ou fallback Georgia. Layout máximo de `640 px`.

### Materiais de aula

Processo e legibilidade têm prioridade. Usar numeração, etapas, exemplos antes/depois e cartões de descoberta.

## 14. Governança

### Fonte da verdade

1. `tokens.json` para integrações e automações.
2. `tokens.css` para código.
3. `components.css` para componentes.
4. `README.md` para decisões.
5. `index.html` para validação visual.

### Versionamento

- `PATCH`: correção sem alterar decisões.
- `MINOR`: novo componente ou aplicação.
- `MAJOR`: mudança de identidade, tipografia ou paleta.

### Regra para novas variações

Uma nova aplicação pode variar composição, mas deve preservar:

- Hierarquia tipográfica.
- Função das cores.
- Um foco principal.
- História antes de IA.
- Uma assinatura de origem.
- Uma evidência concreta quando houver promessa.

## 15. Checklist mestre

- A peça parece humana antes de parecer tecnológica?
- A mensagem principal é entendida sem contexto extra?
- Existe um único foco visual?
- A função do magenta está clara?
- O lima está comprovando algo?
- O logo correto foi usado para o fundo?
- A fotografia preserva reconhecimento e gesto?
- O sistema de tipo contém apenas Fraunces, Manrope e Mono?
- A composição tem espaço para respirar?
- Existe prova, processo ou detalhe — não apenas adjetivo?
- O formato respeita área segura?
- A aplicação funciona sem animação?
- Contraste e foco estão acessíveis?

## Início rápido

```html
<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="components.css">

<section class="wi-section wi-theme-dark" style="background:var(--wi-surface);color:var(--wi-copy)">
  <div class="wi-container">
    <span class="wi-eyebrow">Método em ação</span>
    <h1 class="wi-h1">Encontre o detalhe que <em class="wi-em">muda tudo.</em></h1>
    <p class="wi-lead">Texto de apoio claro, concreto e orientado ao próximo passo.</p>
    <a class="wi-button wi-button--accent" href="#">Começar agora</a>
  </div>
</section>
```