@lugom.io/hefesto 0.2.0 → 0.3.0

package/skills/hefesto-design/references/aesthetics.md

@@ -0,0 +1,343 @@
+# Guia de Estilos Visuais
+
+> "Escolha uma direção conceitual clara e execute com precisão. Maximalismo ousado e minimalismo refinado ambos funcionam — o que importa é intencionalidade, não intensidade."
+>
+> "NUNCA convirja para escolhas comuns entre projetos diferentes."
+
+---
+
+## Estilos
+
+### 1. Brutalist
+Estética crua e honesta que rejeita decoração superficial. Inspira-se na arquitetura brutalista: concreto exposto, estrutura visível, zero ornamento. Comunica autenticidade radical e rebeldia contra o design polido corporativo.
+
+- **Tipografia**: Monospace ou sans-serif bold extrema (Courier, Space Mono, Arial Black)
+- **Paleta**: Preto, branco, cores primárias saturadas como acento
+- **Espaçamento**: Irregular, assimétrico, padding mínimo ou exagerado
+- **Texturas/Efeitos**: Bordas duras, sem border-radius, sem sombras suaves
+- **Quando usar**: Portfolios criativos, arte, agências experimentais, zines digitais
+- **Quando evitar**: Bancos, saúde, público sênior, e-commerce mainstream
+- **Referências**: Bloomberg.com (antigo), Craigslist, brutalistwebsites.com
+- **Combinação**: Space Mono + preto/branco/vermelho + grid quebrado
+
+### 2. Glassmorphism
+Superfícies translúcidas com blur de fundo, evocando vidro fosco. Cria profundidade e hierarquia visual através de camadas semi-transparentes. Popular desde iOS 7 e Windows 11.
+
+- **Tipografia**: Sans-serif leve (Inter, SF Pro, Segoe UI)
+- **Paleta**: Fundos com 10-40% opacidade, bordas brancas 1px com ~20% opacidade
+- **Espaçamento**: Generoso, cards com padding 24-32px
+- **Texturas/Efeitos**: `backdrop-filter: blur(10-20px)`, gradientes sutis, borda luminosa
+- **Quando usar**: Dashboards, apps modernos, interfaces com imagens de fundo ricas
+- **Quando evitar**: Projetos que precisam de alto contraste, acessibilidade rigorosa, dispositivos lentos
+- **Referências**: Apple Music, Windows 11 widgets, Linear
+- **Combinação**: SF Pro + brancos translúcidos sobre gradiente escuro + sombras difusas
+
+### 3. Minimalist
+Menos é mais. Cada elemento deve justificar sua existência. Whitespace é o protagonista. Foco absoluto no conteúdo e funcionalidade sem distrações visuais.
+
+- **Tipografia**: Uma família versátil (Inter, Helvetica Neue, System UI)
+- **Paleta**: 2-3 cores máximo, muito branco/cinza, um acento forte
+- **Espaçamento**: Abundante whitespace, grid rígido, respiração generosa
+- **Texturas/Efeitos**: Nenhum. Sem gradientes, sem sombras pesadas
+- **Quando usar**: Portfolios elegantes, ferramentas de produtividade, editorial premium
+- **Quando evitar**: Público infantil, entretenimento, gamificação, conteúdo denso
+- **Referências**: Apple.com, Notion, Medium, Stripe docs
+- **Combinação**: Inter + branco/cinza-900/#2563EB + espaçamento 8px scale
+
+### 4. Maximalist
+Mais é mais. Camadas visuais densas, padrões ricos, cores vibrantes. Celebra a abundância e o excesso controlado. Cada superfície conta uma história visual.
+
+- **Tipografia**: Mix de serifa decorativa + sans-serif bold (Playfair Display + Montserrat)
+- **Paleta**: 5-8 cores saturadas, gradientes complexos, contrastes altos
+- **Espaçamento**: Denso mas rítmico, overlapping intencional
+- **Texturas/Efeitos**: Padrões, ilustrações, texturas, animações abundantes
+- **Quando usar**: Moda, música, entretenimento, marcas jovens e expressivas
+- **Quando evitar**: Ferramentas B2B, documentação técnica, público corporativo conservador
+- **Referências**: Gucci.com, Spotify Wrapped, Awwwards winners
+- **Combinação**: Playfair + Montserrat / paleta vibrante multi-cor / spacing tight
+
+### 5. Retro-futuristic
+Nostalgia encontra ficção científica. Combina elementos dos anos 70-80 (gradientes cromados, tipografia geométrica) com visão de futuro. Sensação de "o futuro como era imaginado no passado".
+
+- **Tipografia**: Geométrica bold (Orbitron, Audiowide, Space Grotesk)
+- **Paleta**: Neon sobre escuro, cromados, laranja/ciano/magenta
+- **Espaçamento**: Simétrico, padding generoso, alinhamento centralizado
+- **Texturas/Efeitos**: Glow neon, reflexos, linhas de grid, scanlines sutis
+- **Quando usar**: Games, tech inovadora, eventos, música eletrônica
+- **Quando evitar**: Saúde, finanças tradicionais, governo, educação infantil
+- **Referências**: Cybertruck site, Synthwave aesthetics, No Man's Sky
+- **Combinação**: Orbitron + preto/neon ciano/magenta + glow effects
+
+### 6. Organic/Natural
+Formas fluidas, curvas naturais, cores terrosas. Evoca sustentabilidade, saúde e conexão com a natureza. Bordas suaves, ilustrações botânicas, texturas orgânicas.
+
+- **Tipografia**: Serifa suave (Lora, Merriweather) ou sans humanista (Nunito)
+- **Paleta**: Verdes, marrons, beige, terracota, sage, off-white quente
+- **Espaçamento**: Fluido, assimétrico natural, curvas no layout
+- **Texturas/Efeitos**: Texturas de papel, aquarela sutil, border-radius grandes/irregulares
+- **Quando usar**: Produtos orgânicos, bem-estar, sustentabilidade, spas, alimentação saudável
+- **Quando evitar**: Fintech, cybersecurity, tech hardcore, gaming competitivo
+- **Referências**: Aesop.com, Patagonia, Headspace
+- **Combinação**: Lora + sage/terracota/cream + blob shapes + texturas naturais
+
+### 7. Editorial/Magazine
+Layout inspirado em revistas impressas. Tipografia é a estrela — tamanhos dramáticos, hierarquia clara, grid com colunas. Conta histórias visuais através da composição tipográfica.
+
+- **Tipografia**: Serifa display grande (PP Editorial, Playfair) + sans para corpo
+- **Paleta**: Monocromático ou muito restrito, alto contraste
+- **Espaçamento**: Grid de colunas, whitespace editorial, margens largas
+- **Texturas/Efeitos**: Sem efeitos. Fotografia forte, crop dramático
+- **Quando usar**: Magazines online, blogs premium, storytelling, case studies
+- **Quando evitar**: Apps utilitários, dashboards, e-commerce com muito SKU
+- **Referências**: NYT, The Outline (antigo), Monocle, Hodinkee
+- **Combinação**: PP Editorial + sans clean / preto/branco + 1 cor / grid 12 colunas
+
+### 8. Art Deco
+Geometria simétrica, linhas finas douradas, padrões repetitivos. Evoca os anos 1920-30: luxo, glamour, craftsmanship. Elegância geométrica com detalhes ornamentais controlados.
+
+- **Tipografia**: Geométrica display (Poiret One, Josefin Sans, Metropolis)
+- **Paleta**: Preto, dourado, navy, emerald, cream, branco
+- **Espaçamento**: Simétrico rigoroso, padding consistente, bordas decorativas
+- **Texturas/Efeitos**: Linhas finas geométricas, padrões sunburst, dourado metálico
+- **Quando usar**: Hotéis de luxo, joalheria, eventos formais, whisky/vinho
+- **Quando evitar**: Tech startups, apps infantis, SaaS utilitário
+- **Referências**: The Great Gatsby movie site, luxury hotel sites
+- **Combinação**: Metropolis + preto/dourado/cream + bordas geométricas finas
+
+### 9. Soft/Pastel
+Cores suaves, bordas arredondadas, sensação acolhedora e convidativa. Friendly sem ser infantil. Transmite calma, acessibilidade e confiança gentil.
+
+- **Tipografia**: Sans-serif rounded (Nunito, Quicksand, Poppins)
+- **Paleta**: Pastéis — lavanda, rosa claro, mint, baby blue, pêssego
+- **Espaçamento**: Generoso, border-radius 12-20px, padding 20-32px
+- **Texturas/Efeitos**: Sombras suaves e difusas, gradientes pastel sutis
+- **Quando usar**: Saúde mental, apps femininos, educação, bem-estar, onboarding
+- **Quando evitar**: Finanças sérias, segurança, industrial, público masculino tradicional
+- **Referências**: Headspace, Calm, Notion templates
+- **Combinação**: Poppins + lavanda/mint/rosa claro + border-radius 16px
+
+### 10. Industrial
+Concreto, metal, tipografia bold. Estética de fábrica e engenharia. Funcional, robusta, sem frescura. Comunica durabilidade e seriedade técnica.
+
+- **Tipografia**: Sans-serif condensada bold (Oswald, Barlow Condensed, Impact)
+- **Paleta**: Cinzas, preto, amarelo segurança, laranja, vermelho industrial
+- **Espaçamento**: Grid rígido, linhas divisórias grossas, espaço funcional
+- **Texturas/Efeitos**: Texturas metálicas, grain sutil, bordas retas
+- **Quando usar**: Construção, manufatura, ferramentas, automotive, hardware
+- **Quando evitar**: Moda feminina, spa, educação infantil, wedding
+- **Referências**: CAT, DeWalt, sites de manufatura pesada
+- **Combinação**: Oswald + cinza escuro/amarelo segurança/preto + grid denso
+
+### 11. Luxury/Refined
+Elegância silenciosa. Menos elementos, qualidade máxima de cada um. Tipografia fina, cores deep, espaçamento que diz "temos espaço de sobra". Old money aesthetic digital.
+
+- **Tipografia**: Serifa fina (Cormorant Garamond, Didot) + sans-serif light
+- **Paleta**: Preto profundo, off-white, dourado sutil, burgundy, navy
+- **Espaçamento**: Extremamente generoso, margens 80-120px, padding luxuoso
+- **Texturas/Efeitos**: Animações lentas e suaves, transições de 600ms+, parallax sutil
+- **Quando usar**: Moda alta, joalheria, hotéis 5 estrelas, imobiliário premium
+- **Quando evitar**: SaaS B2B, utilidades, preço baixo, público jovem casual
+- **Referências**: Rolex.com, LVMH, Four Seasons, Cartier
+- **Combinação**: Cormorant Garamond + preto/off-white/dourado + letter-spacing 2-4px
+
+### 12. Playful
+Diversão, cor, movimento. Ilustrações custom, micro-interações alegres, personalidade forte. Faz o usuário sorrir sem parecer infantil demais.
+
+- **Tipografia**: Sans-serif bold rounded (Fredoka, Baloo, Nunito Black)
+- **Paleta**: Cores primárias saturadas, contrastes alegres, combinações inesperadas
+- **Espaçamento**: Variado, assimétrico intencional, elementos "fora do grid"
+- **Texturas/Efeitos**: Ilustrações, animações bounce, confetti, emojis contextuais
+- **Quando usar**: Educação, gamificação, apps sociais, produtos para jovens
+- **Quando evitar**: Finanças, saúde crítica, jurídico, governo
+- **Referências**: Duolingo, Slack, Figma (marketing site)
+- **Combinação**: Fredoka + cores primárias vibrantes + border-radius 20px+ + bouncy animations
+
+### 13. Neo-Memphis
+Revival do Memphis Group dos anos 80. Formas geométricas ousadas, padrões gráficos, cores primárias em combinações não-convencionais. Energético e artístico.
+
+- **Tipografia**: Geométrica bold (Gilroy, Futura, Syne)
+- **Paleta**: Primárias + secundárias saturadas, rosa quente, azul elétrico, amarelo
+- **Espaçamento**: Assimétrico, overlap de formas, composição dinâmica
+- **Texturas/Efeitos**: Formas geométricas (círculos, triângulos, ondas), padrões repetitivos
+- **Quando usar**: Agências criativas, eventos, moda streetwear, branding jovem
+- **Quando evitar**: Corporativo, médico, jurídico, público conservador
+- **Referências**: Mailchimp rebrand, Figma Config
+- **Combinação**: Syne + rosa/azul/amarelo/preto + formas geométricas decorativas
+
+### 14. Swiss/International
+O avô do design gráfico moderno. Grid matemático, tipografia sem-serifa, hierarquia através de peso e tamanho. Clareza acima de tudo. Informação pura.
+
+- **Tipografia**: Helvetica, Univers, Aktiv Grotesk (sem-serifa neutra)
+- **Paleta**: Preto, branco, vermelho. Cores como informação, não decoração
+- **Espaçamento**: Grid matemático rigoroso, alinhamento à esquerda, baseline grid
+- **Texturas/Efeitos**: Zero. Tipografia É o design
+- **Quando usar**: Sistemas de informação, sinalização, infográficos, design systems
+- **Quando evitar**: Entretenimento, público infantil, marcas emocionais
+- **Referências**: SBB (ferrovias suíças), original Swiss posters
+- **Combinação**: Helvetica Neue + preto/branco/vermelho + grid 12 col + alinhamento rígido
+
+### 15. Dark Mode Premium
+Não apenas "cores invertidas" — design pensado para escuro. Fundos não são #000 (usar #0a0a0a a #1a1a1a). Hierarquia por luminosidade e elevação sutil.
+
+- **Tipografia**: Sans-serif medium weight (Inter, SF Pro) — nunca thin em dark
+- **Paleta**: Cinzas escuros escalonados (4-5 níveis), acentos luminosos, branco nunca puro
+- **Espaçamento**: Igual ou mais generoso que light, elevação por sutil diferença de tom
+- **Texturas/Efeitos**: Bordas sutis (1px branco 8-12%), glow suave em acentos, gradientes escuros
+- **Quando usar**: Dev tools, media players, apps noturnos, gaming, creative tools
+- **Quando evitar**: Como única opção sem alternativa light. Documentos longos para leitura
+- **Referências**: Linear, Vercel, Raycast, Discord
+- **Combinação**: Inter Medium + #0f0f0f/#1a1a1a/#fafafa + acento saturado + bordas sutis
+
+### 16. Neumorphism
+Soft UI — elementos parecem extrudados ou pressionados na superfície. Sombras duplas (uma clara, uma escura) criam efeito 3D sutil. Fundo e elemento são a mesma cor.
+
+- **Tipografia**: Sans-serif regular (Inter, Roboto)
+- **Paleta**: Monocromático — uma cor de fundo com variações de sombra
+- **Espaçamento**: Generoso para as sombras terem espaço de respiração
+- **Texturas/Efeitos**: `box-shadow` duplo (inset e outset), sem bordas, fundo = elemento
+- **Quando usar**: Dashboards pessoais, widgets, calculadoras, concept designs
+- **Quando evitar**: Qualquer coisa com muitos elementos, acessibilidade crítica, mobile
+- **Referências**: Neumorphism.io (gerador)
+- **Combinação**: Inter + cinza/bege claro mono + sombras duplas + zero bordas
+
+### 17. Flat Design
+Sem sombras, sem gradientes, sem skeuomorphism. Cores sólidas, ícones simples, tipografia clean. Descendente direto do Swiss Style adaptado para interfaces digitais.
+
+- **Tipografia**: Sans-serif geométrica (Roboto, Open Sans, Lato)
+- **Paleta**: Cores sólidas saturadas, sem gradientes, contraste claro
+- **Espaçamento**: Consistente, grid simples, padding uniforme
+- **Texturas/Efeitos**: Nenhum. Cor sólida flat
+- **Quando usar**: Infográficos, apps utilitários, onboarding, ícones
+- **Quando evitar**: Quando hierarquia de profundidade é necessária, luxury
+- **Referências**: Windows 8 Metro, early Material Design
+- **Combinação**: Roboto + cores sólidas Material palette + padding 16px uniforme
+
+### 18. Scandinavian
+Funcionalidade elegante. Inspirado no design nórdico: materiais naturais, luz, simplicidade com calor. Minimalismo com alma — não é frio, é acolhedor.
+
+- **Tipografia**: Sans-serif humanista (DM Sans, Source Sans Pro, GT Walsheim)
+- **Paleta**: Brancos quentes, cinzas com tom, madeira, preto suave (#1a1a1a)
+- **Espaçamento**: Amplo, respiração natural, assimetria sutil e intencional
+- **Texturas/Efeitos**: Fotografias naturais, texturas de madeira/linho sutis
+- **Quando usar**: Furniture, lifestyle, bem-estar, arquitetura, produtos premium acessíveis
+- **Quando evitar**: Tech agressiva, gaming, nightlife, fast-food
+- **Referências**: Muji, HAY, IKEA (linha premium), menu.app
+- **Combinação**: DM Sans + off-white quente/cinza-500/#1a1a1a + fotos naturais
+
+### 19. Japanese Wabi-sabi
+Beleza na imperfeição e na simplicidade. Assimetria intencional, texturas naturais, paleta restrita. Ma (間) — o espaço vazio como elemento ativo de design.
+
+- **Tipografia**: Serifa elegante ou sans-serif fina (Noto Serif, EB Garamond)
+- **Paleta**: Tons terrosos, indigo, cinzas quentes, off-white, preto suave
+- **Espaçamento**: Ma — espaço generoso e assimétrico, respiro como protagonista
+- **Texturas/Efeitos**: Texturas de papel washi, brush strokes sutis, grain
+- **Quando usar**: Chá, cerâmica, meditação, arte, produtos artesanais
+- **Quando evitar**: SaaS corporativo, fast-paced, público que espera "polido"
+- **Referências**: Sites de ryokans japoneses, Muji Japan
+- **Combinação**: EB Garamond + off-white/indigo/cinza quente + assimetria intencional
+
+### 20. Bauhaus
+Forma segue função. Geometria primária (círculo, quadrado, triângulo), cores primárias, composição como sistema. Arte + engenharia unificadas.
+
+- **Tipografia**: Geométrica pura (Futura, Century Gothic, Jost)
+- **Paleta**: Vermelho, azul, amarelo + preto/branco. Cores como sistema, não decoração
+- **Espaçamento**: Geométrico, baseado em módulos, proporções matemáticas
+- **Texturas/Efeitos**: Zero texturas. Formas geométricas puras como decoração
+- **Quando usar**: Arquitetura, design education, galerias, branding conceitual
+- **Quando evitar**: Público amplo mainstream, e-commerce, healthcare
+- **Referências**: Bauhaus.de, museus de arte moderna
+- **Combinação**: Futura + vermelho/azul/amarelo/preto/branco + grid modular
+
+### 21. Material You (Material Design 3)
+Design adaptativo que extrai cores do contexto do usuário. Componentes expressivos com estados claros. Equilíbrio entre personalização e consistência sistêmica.
+
+- **Tipografia**: Roboto Flex ou sans-serif variável com eixos ópticos
+- **Paleta**: Dynamic Color — gerada de source color via tonal palettes (5 tonais de 13 tons cada)
+- **Espaçamento**: 4dp grid, tokens de spacing (compact, medium, expanded)
+- **Texturas/Efeitos**: Elevation com tonal overlay (não apenas sombra), shapes expressivos
+- **Quando usar**: Apps Android, produtos Google ecosystem, design systems escaláveis
+- **Quando evitar**: iOS-first, luxury minimalista, editorial
+- **Referências**: material.io/design, Google apps recentes
+- **Combinação**: Roboto Flex + dynamic color palette + corner radius variável + 4dp grid
+
+### 22. Cyberpunk
+Distopia digital estilizada. Neon sobre escuro, glitch effects, terminais, hacking aesthetic. Futuro caótico e hiper-tecnológico com influência asiática urbana.
+
+- **Tipografia**: Monospace ou sans bold condensada (JetBrains Mono, Rajdhani)
+- **Paleta**: Preto profundo, neon (ciano, magenta, verde lime, roxo elétrico)
+- **Espaçamento**: Tight, denso, informação empilhada como terminal
+- **Texturas/Efeitos**: Glitch, scanlines, noise, HUD overlays, neon glow
+- **Quando usar**: Games, cybersecurity, hacking tools, events tech underground
+- **Quando evitar**: Qualquer contexto institucional, saúde, educação, público 50+
+- **Referências**: Cyberpunk 2077, Mr. Robot aesthetics
+- **Combinação**: JetBrains Mono + preto/#00ff9f/magenta + glitch + terminal UI
+
+### 23. Gradient Mesh
+Gradientes complexos multi-cor como elemento hero. Blobs de cor fluidas, mesh gradients, aurora effects. Moderno, etéreo e visualmente impactante.
+
+- **Tipografia**: Sans-serif clean para não competir (Inter, Satoshi)
+- **Paleta**: 3-5 cores em gradiente mesh, fundos claros ou escuros
+- **Espaçamento**: Amplo — o gradiente precisa de espaço para respirar
+- **Texturas/Efeitos**: CSS conic-gradient, mesh via SVG/canvas, blur layers
+- **Quando usar**: Landing pages, headers hero, backgrounds de apps, branding tech
+- **Quando evitar**: Conteúdo denso, formulários complexos, acessibilidade estrita
+- **Referências**: Stripe.com, Linear homepage, Apple keynotes
+- **Combinação**: Satoshi + mesh gradiente como hero + conteúdo clean sobre fundo sólido
+
+### 24. Vaporwave
+Nostalgia dos 90s/early internet distorcida. Estátuas gregas, palmeiras, gradientes rosa-roxo, grid 3D, fontes cursivas pixeladas. Ironia estética como linguagem.
+
+- **Tipografia**: Display retrô, caracteres japoneses decorativos, serif italic
+- **Paleta**: Rosa, ciano, roxo, sunset orange, lavanda
+- **Espaçamento**: Irregular, centralizado, floating elements
+- **Texturas/Efeitos**: Grid 3D perspectiva, chrome text, VHS grain, sunset gradients
+- **Quando usar**: Projetos artísticos, música lofi, colecionáveis, ironia conceitual
+- **Quando evitar**: Qualquer uso profissional/corporativo, UX que precisa ser levada a sério
+- **Referências**: Vaporwave.js, pools.cool (antigo)
+- **Combinação**: Serif italic + rosa/ciano/roxo + 3D grid + estátuas pixeladas
+
+### 25. Corporate Modern
+Profissional, confiável, escalável. O padrão para SaaS B2B. Clean sem ser minimal demais. Cores de marca consistentes. Ilustrações vetoriais friendly.
+
+- **Tipografia**: Sans-serif profissional (Inter, IBM Plex Sans, Plus Jakarta Sans)
+- **Paleta**: Azul primário, cinzas neutros, 1-2 acentos, backgrounds claros
+- **Espaçamento**: Grid consistente, 8px base, padding 16/24/32/48, max-width 1200px
+- **Texturas/Efeitos**: Sombras sutis (elevation), border-radius 8px, ilustrações flat
+- **Quando usar**: SaaS, enterprise, B2B, plataformas de gestão, docs
+- **Quando evitar**: Quando se quer diferenciar de "mais um SaaS", mercados criativos
+- **Referências**: Atlassian, HubSpot, Salesforce (redesign), Vercel
+- **Combinação**: Inter + azul-600/cinza-100/cinza-900 + 8px grid + ilustrações flat
+
+---
+
+## Como Escolher
+
+Árvore de decisão:
+
+```
+1. DOMÍNIO
+   ├── Finanças/Enterprise → Corporate Modern, Swiss, Minimalist
+   ├── Saúde/Bem-estar → Organic, Soft/Pastel, Scandinavian
+   ├── Tech/Dev Tools → Dark Mode Premium, Minimalist, Corporate Modern
+   ├── Moda/Luxo → Luxury, Art Deco, Editorial
+   ├── Criativo/Arte → Brutalist, Maximalist, Neo-Memphis
+   ├── Games/Entertainment → Cyberpunk, Retro-futuristic, Maximalist
+   ├── Educação → Playful, Flat Design, Corporate Modern
+   └── Lifestyle/Food → Scandinavian, Organic, Soft/Pastel
+
+2. PÚBLICO-ALVO
+   ├── Jovens (18-25) → Maximalist, Neo-Memphis, Vaporwave, Cyberpunk
+   ├── Profissionais (25-45) → Minimalist, Corporate Modern, Swiss
+   ├── Premium/Affluent → Luxury, Art Deco, Scandinavian
+   ├── Técnico/Dev → Dark Mode Premium, Brutalist, Swiss
+   └── Amplo/Geral → Corporate Modern, Flat Design, Material You
+
+3. TOM
+   ├── Sério/Confiável → Swiss, Corporate Modern, Minimalist
+   ├── Friendly/Acolhedor → Soft/Pastel, Playful, Scandinavian
+   ├── Ousado/Disruptivo → Brutalist, Maximalist, Cyberpunk
+   ├── Elegante/Sofisticado → Luxury, Art Deco, Editorial
+   └── Moderno/Tech → Glassmorphism, Gradient Mesh, Dark Mode Premium
+```
+
+Após cruzar domínio × público × tom, selecione 3 candidatos e apresente ao usuário com mockup de cada. Nunca escolha o estilo "óbvio" sem considerar alternativas — a diferenciação visual é vantagem competitiva.

package/skills/hefesto-design/references/anti-patterns.md

@@ -0,0 +1,107 @@
+# Anti-padrões de Design
+
+Catálogo consolidado de erros comuns com impacto e alternativas concretas.
+
+---
+
+## Estética Genérica
+
+Anti-padrões que fazem todo projeto parecer igual. O design deve ter direção intencional — cada projeto é único.
+
+| Anti-padrão | Por que é ruim | O que fazer |
+|---|---|---|
+| Azul padrão (#2563EB) em tudo | Indistinguível de 90% dos SaaS. Zero identidade | Escolher cor primária com base no domínio e público. Justificar a escolha |
+| Inter/Roboto sempre | Fontes seguras mas genéricas. Não comunica personalidade | Pesquisar tipografia que reflete o tom da marca. Sans genérica apenas para corpo se necessário |
+| Border-radius 8px em tudo | Morno. Nem arredondado expressivo nem reto intencional | Escolher: 0px (geométrico/industrial), 4px (preciso), 16px+ (soft/friendly), ou variável por componente |
+| Gradiente roxo-rosa AI | Clichê massificado desde 2023. Sinaliza "genérico" | Paleta que diferencia. Se precisa gradiente, usar cores da marca com intenção |
+| Ilustrações estilo "Humaaans" | Toda landing page SaaS de 2019-2024. Fadiga visual completa | Ilustrações custom, fotografia, ícones estilizados, ou tipografia como hero visual |
+| Hero section: headline + subtext + CTA + mockup | Template padrão. Usuário já faz scroll automático | Experimentar: editorial, interativo, video background, storytelling, ou direto ao produto |
+| Card com sombra sutil + avatar + text + CTA | "Card genérico de dashboard". Sem personalidade | Estilizar com a identidade do projeto: bordas, cores, layout, tipografia únicos |
+| Cores pastéis + rounded corners + blob shapes | O "friendly SaaS" kit. Clonado mil vezes | Se friendly, ser original no como. Se não precisa ser friendly, não ser |
+
+---
+
+## Contrato Visual
+
+Anti-padrões que violam a integridade visual do sistema de design.
+
+| Anti-padrão | Bloqueado por | Regra |
+|---|---|---|
+| Cores hardcoded (#hex no componente) | Sistema de tokens | Todo valor de cor deve vir de um token semântico, nunca direto |
+| Tipografia fora da escala (15px, 19px) | Escala tipográfica | Usar apenas tamanhos da escala definida (12, 14, 16, 18, 20, 24, 30, 36, 48) |
+| Espaçamento arbitrário (13px, 37px) | Escala de espaçamento | Usar apenas valores da escala (4, 8, 12, 16, 24, 32, 48, 64) |
+| Componente com estilo inline | Separação de concerns | Estilos via classes/tokens, nunca style="" com valores mágicos |
+| Sombra diferente por componente | Escala de elevação | Definir 4-5 níveis de sombra e reutilizar consistentemente |
+| Ícones misturando bibliotecas | Consistência iconográfica | Uma biblioteca de ícones por projeto (Lucide OU Heroicons OU Phosphor) |
+| Font-weight inconsistente (300, 350, 450) | Sistema tipográfico | Usar pesos padrão: 400 (regular), 500 (medium), 600 (semibold), 700 (bold) |
+| Z-index aleatório (999, 9999, 99999) | Escala de z-index | Definir escala: base(1), dropdown(10), sticky(20), modal(30), toast(40), tooltip(50) |
+
+---
+
+## Interação
+
+Anti-padrões que prejudicam a experiência do usuário durante interação.
+
+| Anti-padrão | Impacto | Alternativa |
+|---|---|---|
+| Emoji como ícone (🔍 ✅ ❌) | Renderiza diferente por OS/browser, não escala, não anima | SVG de Lucide, Heroicons, ou Phosphor Icons |
+| Tooltip como documentação | Inacessível em mobile (sem hover), texto oculto | Helper text visível, expandable section, ou link para docs |
+| Confirmação genérica "Tem certeza?" | Não informa consequência, usuário clica "sim" sem pensar | "Excluir 'Projeto X'? Esta ação não pode ser desfeita. 3 membros perderão acesso." |
+| Notificação sem ação | "Algo deu errado" — e agora? Usuário não sabe o que fazer | Incluir ação de recuperação: "Tentar novamente", "Ver detalhes", "Contatar suporte" |
+| Conteúdo atrás de hover (desktop-only) | ~60% tráfego é mobile. Funcionalidade invisível para maioria | Sempre visível, ou alternativa tap. Hover apenas para enriquecer, nunca como gate |
+| Link que parece botão e botão que parece link | Confunde expectativa: link navega, botão age | Links navegam (text+underline). Botões executam ações (filled/outlined container) |
+| Scroll hijacking | Frustra usuário. Quebra expectativa física de scroll | Scroll nativo. Parallax sutil no máximo, respeitando prefers-reduced-motion |
+| Auto-play com áudio | Invasivo, surpreende, causa rejeição imediata | Muted por padrão com controles visíveis. Nunca auto-play de áudio |
+| Infinite scroll sem posição | Usuário perde localização, não consegue voltar ao ponto, footer inacessível | Paginação, ou infinite scroll com "Voltar ao topo" + indicador de posição |
+| Form submit sem feedback | Usuário clica, nada acontece. Clica de novo. Ação duplicada | Spinner no botão + disabled imediato. Toast de sucesso ou redirect |
+
+---
+
+## Performance
+
+Anti-padrões que impactam performance percebida e real.
+
+| Anti-padrão | Impacto | Alternativa |
+|---|---|---|
+| Animar width/height/top/left | Causa reflow + repaint. 60fps impossível. Jank visível | Animar transform (translate, scale) e opacity — rodam na GPU |
+| `transition: all 300ms` | Anima TUDO incluindo layout. Transições inesperadas | Explicitar: `transition: background-color 150ms, transform 100ms` |
+| Imagem PNG de 2MB no hero | Largest Contentful Paint > 4s. Bounce rate sobe 30% | WebP/AVIF comprimido, srcset para sizes, lazy loading abaixo do fold |
+| Web fonts bloqueando render | FOIT (flash of invisible text) por 2-3 segundos | `font-display: swap`, preload fontes críticas, fallback de sistema |
+| Animações de entrada na página | Delay de 500ms+ antes de conteúdo ser legível | Conteúdo visível imediatamente. Animações sutis (fade, slide curto) se necessário |
+| Backdrop-filter em elementos grandes | `backdrop-filter: blur()` é caro em áreas grandes, especialmente mobile | Limitar a áreas pequenas (nav bar, cards). Testar em dispositivos low-end |
+| Muitos box-shadow empilhados | Cada sombra é render extra. 5+ sombras = lag perceptível | Máximo 2 sombras por elemento. Usar pseudo-element para sombras complexas |
+| GIF animado como elemento de UI | Pesado, sem controle, sem pausa, sem a11y | Lottie, CSS animation, ou vídeo curto com controls |
+
+---
+
+## Dark Mode
+
+Anti-padrões específicos de implementação de tema escuro.
+
+| Anti-padrão | Impacto | Alternativa |
+|---|---|---|
+| Inverter cores com `filter: invert(1)` | Inverte imagens, ícones, logos. Cores erradas. Inacessível | Redefine tokens semânticos para dark. Troca propriedades, não filtros |
+| Fundo #000000 puro | Glow/bleeding em OLED. Contraste extremo causa fadiga ocular | Usar #0a0a0a a #1a1a1a como base |
+| Texto #ffffff puro | Contraste máximo = fadiga em leitura longa | Usar #f0f0f0 a #fafafa. Ainda passa WCAG AA com sobra |
+| Mesma saturação de cores | Cores saturadas sobre fundo escuro "vibram" e causam fadiga | Dessaturar 10-20% e usar tons mais claros (blue-400 em vez de blue-600) |
+| Sombras iguais ao light mode | Sombras são invisíveis em fundo escuro. Perdem hierarquia | Substituir por: bordas sutis (1px branco 8-12%), ou diferença de tom entre camadas |
+| Não testar contraste no dark | "Funciona no light, deve funcionar no dark" — frequentemente falha | Testar WCAG AA separadamente para cada modo. Cores de link e secundárias são as que mais falham |
+| Imagens sem tratamento | Imagens claras "brilham" em fundo escuro, dominam a tela | Reduzir brilho levemente (filter: brightness(0.9)) ou adicionar border sutil |
+| Toggle sem transição | Troca instantânea de tema é abrupta e desorientadora | `transition: background-color 200ms, color 200ms` no body/root |
+
+---
+
+## Resumo — Os 10 Piores
+
+Os anti-padrões com maior impacto negativo, em ordem:
+
+1. **Cores hardcoded** — impossibilita theming, dark mode, e consistência
+2. **Sem focus-visible** — exclui usuários de teclado completamente
+3. **Emoji como ícones** — inconsistência visual entre plataformas
+4. **Estética genérica** (azul + Inter + 8px radius) — zero diferenciação de marca
+5. **Animar layout properties** — jank visual e performance ruim
+6. **Tooltip como documentação** — funcionalidade invisível em mobile
+7. **Form submit sem feedback** — ações duplicadas e frustração
+8. **Contraste insuficiente** — ilegível para ~15% dos usuários
+9. **Inverter cores para dark mode** — quebra tudo, piora acessibilidade
+10. **Scroll hijacking** — frustra expectativa física fundamental

package/skills/hefesto-design/references/checklist.md

@@ -0,0 +1,66 @@
+# Design Checklist — Pre-delivery
+
+Verificações obrigatórias antes de entregar qualquer interface. Cada item é específico e verificável.
+
+---
+
+## Qualidade Visual (5 checks)
+
+- [ ] **Sem emoji como ícones** — Usar SVG de bibliotecas (Lucide, Heroicons, Phosphor). Emojis renderizam diferente por sistema operacional e não escalam
+- [ ] **Escala de espaçamento consistente** — Todo padding/margin/gap usa valores da escala definida (4, 8, 12, 16, 24, 32, 48, 64px). Zero valores arbitrários (13px, 37px, 22px)
+- [ ] **Tipografia hierárquica** — Máximo 2 famílias tipográficas. Tamanhos seguem escala definida. Pesos criam hierarquia (regular body, medium labels, semibold/bold headings)
+- [ ] **Alinhamento e grid** — Elementos alinhados a um grid consistente. Sem pixels "off" (1-2px de desalinhamento). Verificar em inspetor do browser
+- [ ] **Assets em resolução adequada** — Imagens em 2x para retina. SVG para ícones e logos. Sem imagens pixeladas ou deformadas por aspect-ratio incorreto
+
+---
+
+## Interação (6 checks)
+
+- [ ] **Hover states em todos os interativos** — Botões, links, cards clicáveis, toggles, menus — todos têm feedback visual em hover (desktop)
+- [ ] **Focus-visible ring** — Todo elemento focável tem outline visível em navegação por Tab (2px+, cor contrastante, offset 2px). Testar: navegar toda a página com Tab
+- [ ] **Loading states em ações** — Botões que disparam requests mostram spinner + disabled durante loading. Largura do botão não muda
+- [ ] **Estados vazios** — Toda lista/tabela/feed tem estado vazio com: ícone + texto explicativo + CTA para criar/adicionar
+- [ ] **Feedback de ações** — Toda ação do usuário (salvar, enviar, deletar) tem feedback visual: toast, redirect, ou mudança de estado
+- [ ] **Confirmação destrutiva** — Ações irreversíveis (deletar, cancelar) passam por modal de confirmação com texto claro. Botão seguro é o primário, destrutivo é outline/ghost
+
+---
+
+## Light/Dark Mode (5 checks)
+
+- [ ] **Contraste WCAG AA em ambos os modos** — Texto normal ≥ 4.5:1, texto grande ≥ 3:1. Testar separadamente para light E dark. Ferramenta: DevTools ou WebAIM
+- [ ] **Fundo dark não é #000** — Usar tons de #0a0a0a a #1a1a1a. Texto não é #fff — usar #f0f0f0 a #fafafa. Evitar contraste extremo
+- [ ] **Sombras adaptadas** — Em dark mode, sombras são quase invisíveis. Substituir por bordas sutis (1px rgba(255,255,255,0.08-0.12)) ou diferença de tom de fundo
+- [ ] **Cores semânticas mantidas** — Vermelho continua erro, verde continua sucesso. Dessaturar 10-20% e clarear tons em dark mode
+- [ ] **Transição suave** — Troca de tema tem transition no body (200-300ms) para não ser abrupta. `transition: background-color 200ms, color 200ms`
+
+---
+
+## Layout (6 checks)
+
+- [ ] **Responsivo em 4 breakpoints** — Testar em: 320px (mobile mínimo), 768px (tablet), 1024px (desktop), 1440px (desktop largo). Sem quebra de layout, texto cortado ou overflow
+- [ ] **Sem scroll horizontal** — Nenhum conteúdo causa scroll horizontal no body. Exceções: tabelas e carrosséis, que devem ter overflow-x: auto no container, não no body
+- [ ] **Container com max-width** — Conteúdo principal tem max-width (1200-1440px) com margin auto. Texto nunca edge-to-edge em telas > 1440px
+- [ ] **Touch targets ≥ 44px** — Todo elemento clicável em mobile tem área mínima de 44×44px. Verificar com DevTools (toggle device toolbar + inspecionar tamanho)
+- [ ] **Espaçamento entre touch targets ≥ 8px** — Botões e links adjacentes têm no mínimo 8px de gap para evitar toques acidentais
+- [ ] **Largura de linha ≤ 75ch** — Parágrafos e texto corrido limitados a 65-75 caracteres por linha via max-width: 65ch no container de texto
+
+---
+
+## Acessibilidade (5 checks)
+
+- [ ] **Navegação completa por teclado** — Fluxo inteiro completável com Tab + Enter + Space + Escape. Testar: desligar mouse e completar a tarefa principal
+- [ ] **Alt text em imagens** — Imagens informativas têm alt descritivo. Imagens decorativas têm alt="" (vazio, não ausente). Verificar: desabilitar imagens e ler o alt
+- [ ] **Labels em todos os inputs** — Cada campo tem label visível e conectado (for/id). Placeholder não conta como label. Verificar: labels visíveis após preenchimento
+- [ ] **Hierarquia de headings** — Uma h1 por página. Sequência sem pular: h1→h2→h3 (nunca h1→h3). Verificar: extensão HeadingsMap ou DevTools
+- [ ] **prefers-reduced-motion** — Animações decorativas desabilitadas com @media (prefers-reduced-motion: reduce). Testar: DevTools → Rendering → Emulate prefers-reduced-motion
+
+---
+
+## Copywriting (6 checks)
+
+- [ ] **Botões descritivos** — Texto do botão descreve a ação: "Salvar rascunho", "Enviar pedido", "Criar conta". Nunca genéricos: "OK", "Enviar", "Clique aqui", "Submit"
+- [ ] **Mensagens de erro acionáveis** — Erros descrevem como corrigir, não o que está errado. "Inclua um @ no email" > "Email inválido". "Mínimo 8 caracteres" > "Senha fraca"
+- [ ] **Microcopy consistente** — Termos consistentes em toda a interface: se é "Excluir" em um lugar, não é "Deletar" em outro. Se é "Salvar", não é "Gravar"
+- [ ] **Hierarquia de informação** — Título → contexto → ação. Informação mais importante primeiro. Scanner de 3 segundos: o usuário entende o propósito da tela?
+- [ ] **Sem jargão técnico** — Mensagens voltadas ao usuário evitam termos técnicos: "Erro 500" → "Algo deu errado. Tente novamente". "Null reference" → nunca visível ao usuário
+- [ ] **Tom adequado** — Erros são diretos e empáticos, nunca culpam o usuário ("Você errou"). Sucesso é breve e positivo. Instruções são claras e imperativas