# Workshop IA — Master Design System — conteúdo completo URL canônica: https://workshop.razoesparaacreditar.com/design-system/ Versão: 1.0.0 Idioma: pt-BR Este arquivo é gerado a partir das fontes canônicas do design system. Use informações variáveis de campanha somente quando confirmadas em um briefing atual. # Manual mestre Fonte: https://workshop.razoesparaacreditar.com/design-system/README.md ```markdown # 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
Método em ação

Encontre o detalhe que muda tudo.

Texto de apoio claro, concreto e orientado ao próximo passo.

Começar agora
``` ``` # Diretrizes de conteúdo Fonte: https://workshop.razoesparaacreditar.com/design-system/content-guidelines.md ```markdown # Diretrizes de conteúdo e voz ## Voz central Humana, observadora, precisa e editorial. A marca não “ensina truques de IA”; ela ajuda pessoas a reconhecer histórias e transformá-las com método. ## Ordem da mensagem 1. Vida, tensão ou desejo. 2. Detalhe ou diagnóstico. 3. Método. 4. Tecnologia. 5. Resultado. 6. Próximo passo. IA não deve ser a primeira palavra quando a história pode ser. ## Construção de headlines ### Identificação - “Sua melhor história talvez já tenha acontecido.” - “Você não está sem histórias. Está perto demais para enxergá-las.” ### Tensão - “Se a sua vida tem história, por que dá branco na hora de postar?” - “A IA está adivinhando quem você é.” ### Método - “Do detalhe comum ao conteúdo que emociona.” - “Você conta cru. O processo devolve história.” ### Autoridade - “A tecnologia é nova. O repertório, não.” - “Quatorze anos vendo o que ninguém vê.” ### Resultado - “2 histórias garimpadas. 4 conteúdos prontos.” ## Palavras preferidas - Garimpar. - Encontrar. - Reconhecer. - Detalhe. - História. - Cena. - Repertório. - Processo. - Contexto. - Transformar. - Conteúdo. - Ao vivo. ## Palavras a evitar - Hack. - Segredo. - Fórmula mágica. - Prompt perfeito. - Viral garantido. - Revolucionário. - Disruptivo. - Desbloqueie seu potencial. - Resultados extraordinários sem esforço. ## Regras para CTA O CTA deve dizer o que acontece depois. - “Garantir minha vaga.” - “Clique em Saiba Mais.” - “Ver como funciona.” - “Começar o garimpo.” - “Baixar o material.” - “Assistir ao exemplo.” Evitar “Enviar”, “Continuar” ou “Clique aqui” sem contexto. ## Prova Preferir: - Número com origem. - Entregável. - Demonstração. - Antes e depois. - Nome e função de quem conduz. - Restrição honesta. Não transformar métricas variáveis em parte permanente do design system. Dados de audiência e performance devem ser atualizados na aplicação. ## Microcopy Microcopy deve reduzir incerteza: - “Conta gratuita do Claude já dá conta.” - “Pagamento processado pela Hotmart.” - “Você tem 7 dias para solicitar reembolso.” - “Sem gravação.” ## Leitura em campanhas 1. **1 segundo:** tensão, resultado ou pergunta. 2. **3 segundos:** método e relevância. 3. **5 segundos:** data, preço, prova e CTA. ## Tom por contexto | Contexto | Tom | |---|---| | Anúncio frio | Direto e identificável | | Landing page | Didático e convincente | | E-mail | Pessoal e observador | | Aula | Claro e processual | | Documento | Editorial e objetivo | | Apresentação | Tese forte e concisa | | Suporte | Calmo, específico e humano | ``` # Matriz de aplicações Fonte: https://workshop.razoesparaacreditar.com/design-system/application-matrix.md ```markdown # Matriz de aplicação ## Formatos e áreas seguras | Aplicação | Dimensão/base | Área segura | Direção | |---|---:|---:|---| | Feed vertical | 1080 × 1350 | 80 px | Headline + foco único + ação | | Feed quadrado | 1080 × 1080 | 72 px | Resultado, objeção ou dado | | Stories/Reels | 1080 × 1920 | 250 topo, 310 base, 72 lados | Jornada vertical | | Meta horizontal | 1200 × 628 | 56 px | 56% copy / 44% visual | | Apresentação | 1920 × 1080 | 96 px | Uma tese por slide | | Documento A4 | 210 × 297 mm | 18 mm | Papel, leitura editorial | | E-mail | 640 px | 24–32 px | Uma coluna | | Web | 1180 px | gutter fluido | 12 colunas | ## Densidade por aplicação | Aplicação | Headline | Apoio | Elementos visuais | |---|---:|---:|---:| | Anúncio | 1 | 0–1 | 1 principal | | Hero web | 1 | 1–2 | 1 principal + 2 sinais | | Seção web | 1 | 1 | 1–3 | | Slide | 1 | 0–1 | 1 | | Página de documento | 1 | 2–5 | conforme leitura | | E-mail | 1 | 2–4 | 0–2 | ## Combinações aprovadas ### Humana escura - Petróleo 950. - Fotografia de pessoa. - Título branco. - Destaque magenta 300. - Prova lima. ### Editorial clara - Papel. - Título petróleo. - Linha magenta. - Mono em magenta 700. - Fotografia retangular ou recorte de publicação. ### Processo claro - Creme. - Linhas petróleo. - Magenta como rota. - Cartões de descoberta. - Lima no resultado. ### Texto puro - Petróleo 800/900. - Manrope off-white. - Bold apenas em preço e CTA. - 25–35% de espaço negativo. - Assinatura mono discreta. ## Critérios por canal ### Web - CTA visível no primeiro viewport. - Componentes acessíveis. - Movimento progressivo e opcional. - Imagens com dimensões definidas. ### Social - Não depender da legenda. - Logo e CTA legíveis em tela pequena. - Uma ideia por peça. - Alternar claro, escuro, humano e tipográfico. ### Apresentação - Evitar “dashboard de cards”. - Uma tese por slide. - Dados sempre acompanhados de interpretação. - Usar o beija-flor como assinatura, não decoração recorrente. ### Documento - Fraunces apenas em títulos e citações. - Corpo em Manrope 10.5–12 pt. - Mono em cabeçalhos, data, versão e labels. - Magenta em no máximo 10% da página. ### E-mail - Corpo em fonte segura ou Manrope quando suportada. - Botão com texto explícito. - Fundo predominantemente claro. - Imagem não deve conter a única versão da mensagem. ### Materiais de aula - Numeração visível. - Exemplo antes da abstração. - Separar “o que observar”, “o que fazer” e “o que sai”. - Usar cards de descoberta para exercícios. ``` # Changelog Fonte: https://workshop.razoesparaacreditar.com/design-system/CHANGELOG.md ```markdown # Changelog ## 1.0.0 — 2026-07-16 - Unificação do sistema da landing page e dos criativos. - Definição de tokens canônicos. - Inclusão de componentes reutilizáveis. - Regras para web, social, apresentações, documentos, e-mail e aula. - Inventário de assets. - Documentação visual e starter HTML. ``` # Manifesto do sistema Fonte: https://workshop.razoesparaacreditar.com/design-system/design-system.json ```json { "$schema": "https://json-schema.org/draft/2020-12/schema", "name": "Workshop IA — Master Design System", "version": "1.0.0", "language": "pt-BR", "canonicalUrl": "https://workshop.razoesparaacreditar.com/design-system/", "lastUpdated": "2026-07-16", "concept": "Editorial de histórias + laboratório de garimpo", "principle": "Petróleo estrutura. Papel respira. Magenta emociona. Lima comprova.", "entrypoints": { "visual": "https://workshop.razoesparaacreditar.com/design-system/", "ai": "https://workshop.razoesparaacreditar.com/design-system/ai-context.md", "llms": "https://workshop.razoesparaacreditar.com/design-system/llms.txt", "fullText": "https://workshop.razoesparaacreditar.com/design-system/llms-full.txt" }, "sources": { "manual": "README.md", "content": "content-guidelines.md", "applications": "application-matrix.md", "tokens": "tokens.json", "webTokens": "tokens.css", "components": "components.css", "assets": "assets/manifest.json", "changelog": "CHANGELOG.md" }, "authorityOrder": [ "tokens.json", "tokens.css", "components.css", "README.md", "content-guidelines.md", "application-matrix.md", "assets/manifest.json", "index.html" ], "rules": { "storyBeforeTechnology": true, "variableCampaignFactsBelongToBriefing": true, "doNotInventMetrics": true, "avoidGenericAiFuturism": true, "minimumAccessibility": "WCAG AA" } } ``` # Tokens portáveis Fonte: https://workshop.razoesparaacreditar.com/design-system/tokens.json ```json { "$schema": "https://design-tokens.github.io/community-group/format/", "meta": { "name": "Workshop IA Master Design System", "version": "1.0.0", "updated": "2026-07-16", "principle": "Petroleo estrutura. Papel respira. Magenta emociona. Lima comprova." }, "color": { "petrol": { "1000": { "$type": "color", "$value": "#001820" }, "950": { "$type": "color", "$value": "#021F29" }, "900": { "$type": "color", "$value": "#032F3D" }, "800": { "$type": "color", "$value": "#064B5F" }, "700": { "$type": "color", "$value": "#086278" }, "100": { "$type": "color", "$value": "#DBE8EA" } }, "magenta": { "800": { "$type": "color", "$value": "#720568" }, "700": { "$type": "color", "$value": "#8F087F" }, "500": { "$type": "color", "$value": "#D02BB5" }, "300": { "$type": "color", "$value": "#F08CDC" }, "100": { "$type": "color", "$value": "#F9D8F2" } }, "lime": { "500": { "$type": "color", "$value": "#D9F65B" }, "200": { "$type": "color", "$value": "#EFFBBD" } }, "neutral": { "paper": { "$type": "color", "$value": "#FFFDF8" }, "cream100": { "$type": "color", "$value": "#F6F0E5" }, "cream300": { "$type": "color", "$value": "#EAE0CF" }, "white": { "$type": "color", "$value": "#FFFFFF" }, "black": { "$type": "color", "$value": "#001015" } }, "semantic": { "textPrimary": { "$type": "color", "$value": "{color.petrol.900}" }, "textSecondary": { "$type": "color", "$value": "#41616A" }, "textTertiary": { "$type": "color", "$value": "#70868B" }, "emotion": { "$type": "color", "$value": "{color.magenta.700}" }, "proof": { "$type": "color", "$value": "{color.lime.500}" }, "border": { "$type": "color", "$value": "#DED5C5" } } }, "typography": { "family": { "display": { "$type": "fontFamily", "$value": "Fraunces" }, "body": { "$type": "fontFamily", "$value": "Manrope" }, "data": { "$type": "fontFamily", "$value": "IBM Plex Mono" } }, "web": { "h1": { "$type": "dimension", "$value": "76px" }, "h2": { "$type": "dimension", "$value": "58px" }, "h3": { "$type": "dimension", "$value": "32px" }, "lead": { "$type": "dimension", "$value": "20px" }, "body": { "$type": "dimension", "$value": "16px" }, "micro": { "$type": "dimension", "$value": "12px" } }, "art": { "display": { "$type": "dimension", "$value": "108px" }, "h1": { "$type": "dimension", "$value": "82px" }, "h2": { "$type": "dimension", "$value": "58px" }, "lead": { "$type": "dimension", "$value": "30px" }, "body": { "$type": "dimension", "$value": "22px" }, "micro": { "$type": "dimension", "$value": "14px" } } }, "spacing": { "1": { "$type": "dimension", "$value": "4px" }, "2": { "$type": "dimension", "$value": "8px" }, "3": { "$type": "dimension", "$value": "12px" }, "4": { "$type": "dimension", "$value": "16px" }, "5": { "$type": "dimension", "$value": "24px" }, "6": { "$type": "dimension", "$value": "32px" }, "7": { "$type": "dimension", "$value": "48px" }, "8": { "$type": "dimension", "$value": "64px" }, "9": { "$type": "dimension", "$value": "80px" }, "10": { "$type": "dimension", "$value": "104px" }, "11": { "$type": "dimension", "$value": "144px" } }, "radius": { "xs": { "$type": "dimension", "$value": "4px" }, "sm": { "$type": "dimension", "$value": "6px" }, "md": { "$type": "dimension", "$value": "10px" }, "lg": { "$type": "dimension", "$value": "18px" }, "xl": { "$type": "dimension", "$value": "28px" } }, "format": { "feedPortrait": { "width": 1080, "height": 1350, "safe": 80 }, "feedSquare": { "width": 1080, "height": 1080, "safe": 72 }, "story": { "width": 1080, "height": 1920, "safeTop": 250, "safeBottom": 310, "safeSide": 72 }, "landscape": { "width": 1200, "height": 628, "safe": 56 }, "presentation": { "width": 1920, "height": 1080, "safe": 96 }, "documentA4": { "widthMm": 210, "heightMm": 297, "marginMm": 18 }, "email": { "maxWidth": 640 } } } ``` # Manifesto de assets Fonte: https://workshop.razoesparaacreditar.com/design-system/assets/manifest.json ```json { "version": "1.0.0", "assets": [ { "file": "logo-workshop-on-dark.png", "role": "primary-brand", "useOn": ["petrol", "dark-photo"], "minimumWidthPx": 180, "notes": "Assinatura principal. Não adicionar caixa branca." }, { "file": "logo-workshop-on-light.png", "role": "primary-brand", "useOn": ["paper", "cream", "light-photo"], "minimumWidthPx": 180, "notes": "Preservar proporção e área de respiro." }, { "file": "logo-razoes-on-dark.png", "role": "authority-endorsement", "useOn": ["petrol", "dark-photo"], "minimumWidthPx": 140, "notes": "Chancela. Não competir com o logo do workshop." }, { "file": "logo-razoes-on-light.png", "role": "authority-endorsement", "useOn": ["paper", "cream", "light-photo"], "minimumWidthPx": 140, "notes": "Pode liderar aplicações editoriais do método Razões." }, { "file": "beija-flor.png", "role": "brand-symbol", "useOn": ["signature", "decorative-passage"], "notes": "8–22% de opacidade quando decorativo. Não criar pattern." }, { "file": "vicente-tedx.jpg", "role": "authority-photo", "useOn": ["authority", "speaker", "event"], "notes": "Preservar rosto, gesto e contexto de palco." }, { "file": "hero.jpg", "role": "narrative-process", "useOn": ["hero", "story-process"], "notes": "Visual abstrato aprovado para conexão entre detalhe e conteúdo." }, { "file": "garimpo.jpg", "role": "process-object", "useOn": ["mechanism", "discovery-card", "exercise"], "notes": "Representa investigação e extração." }, { "file": "antes-depois.jpg", "role": "comparison", "useOn": ["before-after", "case", "lesson"], "notes": "Usar quando a comparação for explicitamente explicada." }, { "file": "aurora-celeste.jpg", "role": "content-output", "useOn": ["result", "transformation"], "notes": "Não usar como fundo atmosférico sem função." } ] } ``` # Tokens CSS Fonte: https://workshop.razoesparaacreditar.com/design-system/tokens.css ```css :root { /* ========================================================= WORKSHOP IA — MASTER DESIGN TOKENS · v1.0 Petróleo estrutura. Papel respira. Magenta emociona. Lima comprova. Tipografia editorial humaniza. ========================================================= */ /* Brand color primitives */ --wi-petrol-1000: #001820; --wi-petrol-950: #021f29; --wi-petrol-900: #032f3d; --wi-petrol-800: #064b5f; --wi-petrol-700: #086278; --wi-petrol-100: #dbe8ea; --wi-magenta-800: #720568; --wi-magenta-700: #8f087f; --wi-magenta-500: #d02bb5; --wi-magenta-300: #f08cdc; --wi-magenta-100: #f9d8f2; --wi-lime-500: #d9f65b; --wi-lime-200: #effbbd; --wi-paper: #fffdf8; --wi-cream-100: #f6f0e5; --wi-cream-300: #eae0cf; --wi-white: #ffffff; --wi-black: #001015; /* Functional color aliases */ --wi-bg-page: var(--wi-paper); --wi-bg-section: var(--wi-cream-100); --wi-bg-inverse: var(--wi-petrol-950); --wi-bg-card: var(--wi-white); --wi-text-primary: var(--wi-petrol-900); --wi-text-secondary: #41616a; --wi-text-tertiary: #70868b; --wi-text-inverse: var(--wi-white); --wi-text-inverse-muted: #b8cdd1; --wi-accent-emotion: var(--wi-magenta-700); --wi-accent-emotion-bright: var(--wi-magenta-500); --wi-accent-proof: var(--wi-lime-500); --wi-border: #ded5c5; --wi-border-inverse: rgba(255, 255, 255, .17); --wi-focus: var(--wi-lime-500); /* Approved semantic states */ --wi-success: #167153; --wi-warning: #a85a0a; --wi-danger: #a52b3f; --wi-info: var(--wi-petrol-700); /* Typography */ --wi-font-display: "Fraunces", Georgia, serif; --wi-font-body: "Manrope", "Helvetica Neue", sans-serif; --wi-font-data: "IBM Plex Mono", "Courier New", monospace; /* Fluid web type scale */ --wi-type-display-xl: clamp(3.4rem, 7.4vw, 6.9rem); --wi-type-display-lg: clamp(2.8rem, 6vw, 5.2rem); --wi-type-h1: clamp(2.55rem, 5.2vw, 4.8rem); --wi-type-h2: clamp(2.05rem, 4vw, 3.65rem); --wi-type-h3: clamp(1.45rem, 2.2vw, 2rem); --wi-type-lead: clamp(1.08rem, 1.5vw, 1.3rem); --wi-type-body-lg: 1.125rem; --wi-type-body: 1rem; --wi-type-small: .875rem; --wi-type-micro: .75rem; /* Static editorial scale for exported art */ --wi-art-display: 108px; --wi-art-h1: 82px; --wi-art-h2: 58px; --wi-art-lead: 30px; --wi-art-body: 22px; --wi-art-micro: 14px; /* Line height and tracking */ --wi-leading-display: .96; --wi-leading-heading: 1.04; --wi-leading-body: 1.65; --wi-tracking-display: -.04em; --wi-tracking-data: .13em; /* Spacing — base 4, primary rhythm 8 */ --wi-space-0: 0; --wi-space-1: 4px; --wi-space-2: 8px; --wi-space-3: 12px; --wi-space-4: 16px; --wi-space-5: 24px; --wi-space-6: 32px; --wi-space-7: 48px; --wi-space-8: 64px; --wi-space-9: 80px; --wi-space-10: 104px; --wi-space-11: 144px; --wi-space-section: clamp(72px, 9vw, 128px); /* Layout */ --wi-container-wide: 1180px; --wi-container-reading: 780px; --wi-container-narrow: 620px; --wi-gutter: clamp(20px, 4vw, 48px); --wi-grid-gap: clamp(20px, 3vw, 40px); /* Radius */ --wi-radius-xs: 4px; --wi-radius-sm: 6px; --wi-radius-md: 10px; --wi-radius-lg: 18px; --wi-radius-xl: 28px; --wi-radius-pill: 999px; /* Depth */ --wi-shadow-soft: 0 2px 0 rgba(3, 47, 61, .08), 0 12px 32px rgba(3, 47, 61, .07); --wi-shadow-raised: 0 2px 0 rgba(3, 47, 61, .1), 0 26px 64px rgba(3, 47, 61, .13); --wi-shadow-editorial: 12px 14px 0 rgba(3, 47, 61, .13); --wi-shadow-magenta: 8px 9px 0 var(--wi-magenta-500); --wi-shadow-lime: 8px 9px 0 var(--wi-lime-500); /* Motion */ --wi-duration-fast: 160ms; --wi-duration-medium: 320ms; --wi-duration-slow: 650ms; --wi-ease-standard: cubic-bezier(.22, .61, .36, 1); --wi-ease-emphasis: cubic-bezier(.16, 1, .3, 1); /* Layers */ --wi-z-base: 0; --wi-z-content: 10; --wi-z-floating: 30; --wi-z-nav: 60; --wi-z-modal: 100; --wi-z-grain: 200; /* Common safe areas */ --wi-safe-feed: 80px; --wi-safe-square: 72px; --wi-safe-story-side: 72px; --wi-safe-story-top: 250px; --wi-safe-story-bottom: 310px; --wi-safe-landscape: 56px; } /* Context themes */ .wi-theme-light { --wi-surface: var(--wi-paper); --wi-surface-raised: var(--wi-white); --wi-copy: var(--wi-text-primary); --wi-copy-muted: var(--wi-text-secondary); --wi-highlight: var(--wi-magenta-700); --wi-rule: var(--wi-border); } .wi-theme-dark { --wi-surface: var(--wi-petrol-950); --wi-surface-raised: var(--wi-petrol-900); --wi-copy: var(--wi-white); --wi-copy-muted: var(--wi-text-inverse-muted); --wi-highlight: var(--wi-magenta-300); --wi-rule: var(--wi-border-inverse); } /* Media format metadata, available to design automation */ @custom-media --wi-mobile (width <= 720px); @custom-media --wi-tablet (width <= 980px); @media (prefers-reduced-motion: reduce) { :root { --wi-duration-fast: 1ms; --wi-duration-medium: 1ms; --wi-duration-slow: 1ms; } } ``` # Componentes CSS Fonte: https://workshop.razoesparaacreditar.com/design-system/components.css ```css @import url("./tokens.css"); *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--wi-bg-page); color: var(--wi-text-primary); font-family: var(--wi-font-body); font-size: var(--wi-type-body); line-height: var(--wi-leading-body); -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; } ::selection { background: var(--wi-magenta-700); color: var(--wi-white); } .wi-container { width: min(calc(100% - (2 * var(--wi-gutter))), var(--wi-container-wide)); margin-inline: auto; } .wi-reading { width: min(calc(100% - (2 * var(--wi-gutter))), var(--wi-container-reading)); margin-inline: auto; } .wi-section { position: relative; padding-block: var(--wi-space-section); } .wi-grid { display: grid; gap: var(--wi-grid-gap); } .wi-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wi-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wi-display, .wi-h1, .wi-h2, .wi-h3 { margin: 0; color: var(--wi-copy, var(--wi-text-primary)); font-family: var(--wi-font-display); font-weight: 650; letter-spacing: var(--wi-tracking-display); text-wrap: balance; } .wi-display { font-size: var(--wi-type-display-lg); line-height: var(--wi-leading-display); } .wi-h1 { font-size: var(--wi-type-h1); line-height: var(--wi-leading-display); } .wi-h2 { font-size: var(--wi-type-h2); line-height: var(--wi-leading-heading); } .wi-h3 { font-size: var(--wi-type-h3); line-height: 1.14; } .wi-lead { color: var(--wi-copy-muted, var(--wi-text-secondary)); font-size: var(--wi-type-lead); line-height: 1.6; } .wi-em { color: var(--wi-highlight, var(--wi-magenta-700)); font-family: var(--wi-font-display); font-style: italic; font-weight: 550; } .wi-eyebrow { display: inline-flex; align-items: center; gap: 12px; color: var(--wi-highlight, var(--wi-magenta-700)); font-family: var(--wi-font-data); font-size: var(--wi-type-micro); font-weight: 600; letter-spacing: var(--wi-tracking-data); text-transform: uppercase; } .wi-eyebrow::before { content: ""; width: 30px; height: 2px; background: currentColor; } .wi-data { color: var(--wi-accent-proof); font-family: var(--wi-font-display); font-size: var(--wi-type-h2); font-weight: 700; line-height: 1; } .wi-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 16px 25px; border: 1px solid var(--wi-petrol-950); border-radius: var(--wi-radius-sm); background: var(--wi-petrol-900); box-shadow: 5px 5px 0 var(--wi-magenta-500); color: var(--wi-white); cursor: pointer; font-family: var(--wi-font-body); font-size: .95rem; font-weight: 800; text-decoration: none; transition: transform var(--wi-duration-fast) var(--wi-ease-standard), box-shadow var(--wi-duration-fast) var(--wi-ease-standard), background var(--wi-duration-fast) var(--wi-ease-standard); } .wi-button:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--wi-magenta-500); background: var(--wi-petrol-800); } .wi-button:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--wi-magenta-500); } .wi-button:focus-visible { outline: 3px solid var(--wi-focus); outline-offset: 4px; } .wi-button--accent { background: var(--wi-magenta-700); border-color: var(--wi-magenta-800); box-shadow: 5px 5px 0 var(--wi-lime-500); } .wi-button--light { background: var(--wi-white); border-color: var(--wi-white); color: var(--wi-petrol-900); box-shadow: 5px 5px 0 var(--wi-magenta-500); } .wi-button--ghost { background: transparent; color: var(--wi-copy, var(--wi-text-primary)); box-shadow: none; border-color: var(--wi-rule, var(--wi-border)); } .wi-button--small { min-height: 42px; padding: 10px 16px; font-size: .78rem; box-shadow: 3px 3px 0 var(--wi-magenta-500); } .wi-card { padding: var(--wi-space-6); border: 1px solid var(--wi-rule, var(--wi-border)); border-radius: var(--wi-radius-md); background: var(--wi-surface-raised, var(--wi-white)); box-shadow: var(--wi-shadow-soft); color: var(--wi-copy, var(--wi-text-primary)); } .wi-card--editorial { box-shadow: var(--wi-shadow-editorial); } .wi-card--discovery { position: relative; border-radius: var(--wi-radius-xs); box-shadow: var(--wi-shadow-magenta); transform: rotate(-1.2deg); } .wi-card--dark { --wi-copy: var(--wi-white); --wi-copy-muted: var(--wi-text-inverse-muted); --wi-rule: var(--wi-border-inverse); background: var(--wi-petrol-900); } .wi-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid currentColor; border-radius: var(--wi-radius-pill); color: var(--wi-magenta-700); font-family: var(--wi-font-data); font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .wi-badge--proof { border: 0; background: var(--wi-lime-500); color: var(--wi-petrol-950); } .wi-badge--dark { color: var(--wi-magenta-300); } .wi-proof { display: grid; gap: 5px; padding-left: var(--wi-space-5); border-left: 3px solid var(--wi-magenta-500); } .wi-proof strong { font-family: var(--wi-font-display); font-size: 2.4rem; line-height: 1; } .wi-proof span { color: var(--wi-copy-muted, var(--wi-text-secondary)); font-size: var(--wi-type-small); font-weight: 700; text-transform: uppercase; } .wi-quote { margin: 0; padding-left: var(--wi-space-6); border-left: 3px solid var(--wi-magenta-500); color: var(--wi-copy, var(--wi-text-primary)); font-family: var(--wi-font-display); font-size: clamp(1.7rem, 3vw, 2.8rem); font-style: italic; line-height: 1.16; } .wi-quote footer { margin-top: var(--wi-space-4); color: var(--wi-copy-muted, var(--wi-text-secondary)); font-family: var(--wi-font-data); font-size: .72rem; font-style: normal; letter-spacing: .1em; text-transform: uppercase; } .wi-event-strip { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--wi-space-5); padding-top: var(--wi-space-5); border-top: 1px solid var(--wi-rule, var(--wi-border)); } .wi-event-strip__copy { display: grid; gap: 3px; } .wi-event-strip__copy strong { color: var(--wi-copy, var(--wi-text-primary)); } .wi-event-strip__copy span { color: var(--wi-highlight, var(--wi-magenta-700)); font-family: var(--wi-font-data); font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .wi-logo { display: block; object-fit: contain; object-position: left center; } .wi-logo--workshop { width: min(100%, 320px); } .wi-logo--razoes { width: min(100%, 280px); } .wi-photo-arch { overflow: hidden; border-radius: 48% 48% var(--wi-radius-md) var(--wi-radius-md); } .wi-photo-arch img { width: 100%; height: 100%; object-fit: cover; } .wi-route { position: relative; height: 3px; background: repeating-linear-gradient(90deg, var(--wi-magenta-500) 0 10px, transparent 10px 20px); } .wi-route::before, .wi-route::after { content: ""; position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--wi-lime-500); border: 3px solid var(--wi-petrol-950); transform: translateY(-50%); } .wi-route::before { left: 0; } .wi-route::after { right: 0; } .wi-grain { position: relative; isolation: isolate; } .wi-grain::after { content: ""; position: absolute; inset: 0; z-index: var(--wi-z-grain); pointer-events: none; opacity: .03; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } @media (max-width: 820px) { .wi-grid-2, .wi-grid-3 { grid-template-columns: 1fr; } .wi-event-strip { grid-template-columns: 1fr; } } @media (max-width: 520px) { .wi-button { width: 100%; } .wi-card { padding: var(--wi-space-5); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 1ms !important; } } ```