@lugom.io/hefesto 0.3.0 → 1.0.0

package/skills/hefesto-design/data/styles.csv

@@ -1,53 +0,0 @@
-id,name,keywords_pt,keywords_en,description,typography_style,palette_type,spacing_style,animation_style,mood,best_for,avoid_with,example_sites
-1,Brutalist,"cru bruto ousado anti-design tipografia pesada","raw bold anti-design heavy typography grunge",Estética crua e intencional que rejeita convenções visuais. Layouts assimétricos e tipografia dominante.,Mono ou sans-serif bold em tamanhos extremos,Alto contraste com cores primárias ou preto/branco,Irregular e assimétrico com sobreposições,Mínima ou glitch abrupto,Provocador e autêntico,Portfólios criativos e agências de design e revistas digitais,Saúde e finanças e público sênior,bloomberg.com;brutalistwebsites.com;balenciaga.com
-2,Glassmorphism,"vidro transparência desfoque camadas profundidade blur","glass transparency blur layers frosted depth",Superfícies translúcidas com desfoque de fundo que criam senso de profundidade e hierarquia.,Sans-serif leve com alto contraste sobre superfícies translúcidas,Gradientes suaves com transparência e bordas sutis,Moderado com padding generoso nos cards,Transições suaves de opacidade e blur,Moderno e sofisticado,Apps móveis e dashboards e interfaces premium,Sites com muito texto e e-commerce com muitas imagens,apple.com;linear.app;vercel.com
-3,Minimalist,"minimalista limpo simples espaço branco menos é mais","minimal clean simple whitespace less-is-more",Redução ao essencial. Muito espaço em branco e hierarquia clara e poucos elementos.,Sans-serif geométrica com poucos pesos e tamanhos limitados,Monocromático ou duo-tom com neutros predominantes,Generoso com muito whitespace e grid rigoroso,Sutil e funcional com micro-interações,Calmo e focado,Portfólios e produtos premium e landing pages,Plataformas infantis e entretenimento e gaming,apple.com;everlane.com;aesop.com
-4,Maximalist,"maximalista exuberante cheio cores vibrantes camadas","maximalist vibrant busy layered colorful eclectic",Abundância visual intencional. Muitas cores e texturas e padrões sobrepostos com energia.,Display fonts decorativas misturadas com sans-serif,Multi-cromático vibrante com gradientes e padrões,Denso mas ritmado com hierarquia por escala,Abundante com parallax e scroll-triggered,Energético e expressivo,Moda e entretenimento e música e festivais,Bancos e governo e saúde,kfrfrr.com;superrare.com;gucci.com
-5,Retro-futuristic,"retro-futurismo sci-fi espacial neon futuro vintage","retro-futurism sci-fi space neon vintage-future",Fusão de estética retrô (anos 60-80) com elementos futuristas. Chrome e gradientes e tipografia bold.,Display geométrica bold com mono para detalhes,Escuros com acentos neon e gradientes metálicos,Moderado com alinhamento em grid angular,Transições com glow e efeitos de scanner,Nostálgico-futurista e ousado,Jogos e música eletrônica e tech startups,Saúde e educação infantil e governo,cyberpunk.net;nichegalactic.com
-6,Organic-Natural,"orgânico natural terra sustentável floral curvas","organic natural earth sustainable floral curves",Formas orgânicas e curvas suaves e paletas terrosas inspiradas na natureza.,Serif humanista ou sans com cantos arredondados,Tons terrosos e verdes e marrons com texturas naturais,Fluido com margens irregulares e formas curvas,Suave e fluida como movimento de plantas,Acolhedor e sustentável,Marcas sustentáveis e alimentação orgânica e wellness,Fintech e cybersecurity e gaming,patagonia.com;aesop.com;rituals.com
-7,Editorial-Magazine,"editorial revista layout assimétrico tipografia expressiva","editorial magazine asymmetric-layout expressive-type",Layout inspirado em design editorial com grid dinâmico e tipografia como elemento gráfico.,Serif display para títulos com sans-serif para corpo,Neutros sofisticados com um acento editorial forte,Assimétrico com colunas variáveis e pull-quotes,Scroll-driven com revelação de conteúdo,Sofisticado e narrativo,Revistas digitais e blogs premium e portfólios de fotografia,Dashboards e apps de produtividade e e-commerce,nytimes.com;bloomberg.com;medium.com
-8,Art-Deco,"art déco geométrico dourado elegante gatsby luxo","art-deco geometric gold elegant gatsby luxury",Geometria simétrica e ornamentos lineares e paleta dourada inspirada nos anos 1920.,Serif condensada geométrica com detalhes ornamentais,Preto e dourado com marfim e bordô como secundários,Simétrico e formal com bordas ornamentais,Elegante e contida com reveals suaves,Opulento e clássico,Hotéis de luxo e joalherias e eventos premium,Tech startups e apps infantis e marketplaces,thepeninsulahk.com;artdecosociety.org
-9,Soft-Pastel,"pastel suave delicado feminino candy arredondado","pastel soft delicate candy rounded gentle",Cores suaves e desaturadas com bordas arredondadas e sensação acolhedora e delicada.,Sans-serif arredondada com pesos medium e regular,Pastéis com rosa e lavanda e menta e pêssego,Generoso com bordas arredondadas e sombras suaves,Bounce suave e transições elásticas,Gentil e acessível,Apps de bem-estar e produtos infantis e marcas femininas,Segurança e automotivo e indústria pesada,glossier.com;headspace.com;notion.so
-10,Industrial-Utilitarian,"industrial utilitário fábrica funcional grade técnico","industrial utilitarian factory functional grid technical",Estética funcional e honesta inspirada em design industrial e sinalização técnica.,Mono ou sans-serif condensada com pesos uniformes,Cinzas e amarelo segurança e preto com acentos de alerta,Grid rígido com espaçamento uniforme e compacto,Funcional e mínima com estados de loading,Eficiente e direto,Ferramentas de engenharia e dashboards de dados e DevOps,Moda e luxo e infantil,github.com;vercel.com;linear.app
-11,Luxury-Refined,"luxo refinado premium exclusivo elegante alta-costura","luxury refined premium exclusive elegant high-end",Elegância contida com materiais visuais ricos e tipografia clássica e muito whitespace.,Serif moderna com tracking largo e pesos light,Neutros escuros com dourado ou champagne e brancos quentes,Extremamente generoso com ritmo lento e pausado,Lenta e cinematográfica com parallax sutil,Exclusivo e aspiracional,Marcas de luxo e joalherias e hotelaria premium,SaaS e ferramentas e e-commerce genérico,rolex.com;chanelcom;bottegaveneta.com
-12,Playful-Toy,"lúdico divertido colorido infantil animado brinquedo","playful toy colorful fun animated childlike",Visual alegre com cores primárias e formas geométricas simples e interações divertidas.,Sans-serif rounded bold com display divertidas,Cores primárias saturadas com fundos claros,Generoso com formas irregulares e assimetria controlada,Bouncy e elástica com micro-interações divertidas,Divertido e energético,Apps infantis e educação e jogos casuais e marcas jovens,Finanças e saúde e governo e jurídico,duolingo.com;headspace.com;figma.com
-13,Neo-Memphis,"neo-memphis geométrico padrões formas abstratas pop","neo-memphis geometric patterns abstract-shapes pop",Resgate do Memphis Design com formas geométricas abstratas e padrões repetitivos e cores vibrantes.,Display geométrica bold com sans-serif para corpo,Cores vibrantes contrastantes com padrões geométricos,Moderado com sobreposições de formas decorativas,Energética com rotações e movimentos de formas,Artístico e irreverente,Agências criativas e marcas jovens e eventos de design,Bancos e hospitais e governo,mailchimp.com;dropbox.com
-14,Swiss-International,"suíço internacional grid tipográfico helvética funcional","swiss international typographic-grid helvetica functional",Design tipográfico baseado em grid rigoroso. Clareza e objetividade e hierarquia funcional.,Sans-serif neo-grotesca com hierarquia por peso e tamanho,Predominantemente branco com preto e um acento funcional,Grid modular rigoroso com baseline alignment,Mínima e funcional com transições rápidas,Claro e objetivo,Corporativo e institucional e museus e publicações,Gaming e entretenimento e moda streetwear,swissinfo.ch;smashingmagazine.com
-15,Dark-Mode-Premium,"modo escuro premium noturno sofisticado contraste","dark-mode premium night sophisticated high-contrast",Interface escura sofisticada com hierarquia por luminosidade e acentos vibrantes controlados.,Sans-serif com pesos variados para hierarquia por luminosidade,Cinzas escuros em camadas com acentos vibrantes pontuais,Moderado a generoso com separação por elevação,Suave com transições de opacidade e glow sutil,Sofisticado e imersivo,Apps de música e streaming e ferramentas dev e fintech,Educação infantil e saúde e e-commerce de alimentos,spotify.com;linear.app;arc.net
-16,Gradient-Mesh,"gradiente mesh aurora degradê fluido cores vibrantes","gradient mesh aurora fluid-gradient vibrant-colors",Gradientes complexos e fluidos como background principal criando profundidade e movimento.,Sans-serif moderna com pesos contrastantes sobre gradientes,Gradientes multi-cor vibrantes com transições fluidas,Moderado a generoso centrado no conteúdo sobre gradientes,Gradientes animados lentamente com morphing suave,Dinâmico e futurista,Landing pages de startups e apps criativos e portfólios,E-commerce com muitas fotos e dashboards de dados,stripe.com;linear.app;vercel.com
-17,Monochromatic,"monocromático um-cor tons variações minimalista","monochromatic one-color tonal variations minimalist",Paleta baseada em variações de uma única matiz. Elegância pela restrição cromática.,Sans-serif ou serif clássica com hierarquia por peso,Uma matiz em múltiplas saturações e luminosidades,Generoso e limpo com hierarquia por tom,Sutil com variações de tom e opacidade,Refinado e coeso,Portfólios e marcas pessoais e produtos premium,Marketplaces e apps infantis e gaming,apple.com;squarespace.com
-18,High-Contrast,"alto contraste acessível bold impactante preto branco","high-contrast accessible bold impactful black-white",Contraste extremo entre elementos para máximo impacto visual e acessibilidade.,Sans-serif bold com tamanhos grandes e alto contraste,Preto e branco puros com um acento vibrante opcional,Moderado com separação clara entre seções,Rápida e assertiva com cortes secos,Impactante e acessível,Publicações e ativismo e moda e acessibilidade,Wellness e spas e produtos infantis,nike.com;apple.com;bloomberg.com
-19,Handcrafted-Artisanal,"artesanal feito-à-mão texturas ilustração orgânico","handcrafted artisanal textures illustration hand-drawn",Elementos visuais que parecem feitos à mão com texturas e ilustrações e imperfeições intencionais.,Fontes manuscritas ou serif irregular com body sans humanista,Tons quentes naturais com texturas de papel e tecido,Irregular e orgânico com margens variáveis,Suave com efeitos de desenho e revelação,Autêntico e pessoal,Cafeterias e cervejarias artesanais e marcas locais e portfólios,Fintech e tech corporativo e governo,mailchimp.com;basecamp.com
-20,Cyberpunk-Neon,"cyberpunk neon futuro distópico glitch hacker","cyberpunk neon dystopian glitch hacker futuristic",Estética escura com neons intensos e glitches visuais e atmosfera distópica futurista.,Mono ou display angular com efeitos de glow e scan-line,Preto profundo com neons ciano e magenta e verde,Compacto e denso com bordas afiadas,Glitch e flickr com transições abruptas e scanlines,Rebelde e futurista,Gaming e cybersecurity e música eletrônica e tech,Saúde e educação infantil e governo e food,cyberpunk.net;figma.com
-21,Scandinavian,"escandinavo nórdico clean funcional madeira claro","scandinavian nordic clean functional wood light",Funcionalidade e beleza discreta inspirada no design nórdico. Cores claras e materiais naturais.,Sans-serif limpa com pesos regulares e hierarquia sutil,Brancos quentes e cinzas claros com madeira e acentos suaves,Generoso e arejado com proporções harmônicas,Sutil e funcional com micro-interações discretas,Sereno e funcional,Móveis e decoração e lifestyle e apps de bem-estar,Gaming e cybersecurity e entretenimento pesado,muji.com;ikea.com;kinfolk.com
-22,Wabi-Sabi,"wabi-sabi japonês imperfeição assimetria simplicidade zen","wabi-sabi japanese imperfection asymmetry simplicity zen",Beleza na imperfeição e na simplicidade. Assimetria intencional e texturas naturais e vazio.,Serif delicada ou sans-serif com muito espaço e pesos leves,Neutros com texturas naturais e tons de pedra e areia,Muito generoso com vazio intencional e assimetria,Quase nenhuma com transições lentas e respiradas,Contemplativo e sereno,Galerias de arte e cerâmica e wellness e meditação,E-commerce rápido e gaming e dashboards,rikumo.com;muji.com
-23,Bauhaus,"bauhaus geométrico primárias funcional escola alemã","bauhaus geometric primary-colors functional german-school",Formas geométricas puras e cores primárias e funcionalidade como princípio central.,Sans-serif geométrica pura com hierarquia por escala,Primárias puras com preto e branco e cinza,Grid modular com proporções geométricas,Funcional e geométrica com rotações e escalas,Racional e artístico,Museus e escolas de design e arquitetura e galerias,Apps infantis casuais e food delivery e wellness,bauhaus.de;moma.org
-24,Material-You,"material you dinâmico adaptativo arredondado colorido google","material-you dynamic adaptive rounded colorful google",Design system adaptativo com cores dinâmicas e formas arredondadas e superfícies em camadas.,Sans-serif (Google Sans ou Product Sans style) com pesos variados,Cores dinâmicas derivadas de conteúdo com tonal surfaces,Moderado a generoso com cantos arredondados e elevação,Transições de container e shared-element animations,Pessoal e adaptativo,Apps Android e produtos Google e aplicações multiplataforma,Sites editoriais e luxury e portfólios artísticos,material.io;google.com;android.com
-25,Neumorphism,"neumorfismo soft-ui relevo extrusão sombra suave","neumorphism soft-ui emboss extrusion soft-shadow",Elementos que parecem extrudados da superfície usando sombras internas e externas sutis.,Sans-serif com pesos medium sobre superfícies extrudadas,Monocromático suave com sombras para profundidade,Generoso com elementos separados por profundidade,Sutil com mudanças de sombra em hover e press,Suave e tátil,Dashboards pessoais e apps de smart home e controles,E-commerce com muitas fotos e sites de conteúdo pesado,dribbble.com/tags/neumorphism
-26,Flat-Design,"flat design plano sem-sombras cores sólidas ícones","flat-design flat no-shadows solid-colors icons",Design plano sem sombras ou gradientes. Cores sólidas e ícones simples e clareza total.,Sans-serif limpa com hierarquia por cor e peso,Cores sólidas vibrantes sem gradientes ou sombras,Consistente e baseado em grid com padding uniforme,Mínima com transições de cor e posição,Claro e direto,Apps utilitários e dashboards e interfaces de sistema,Luxury e editorial e portfólios artísticos,microsoft.com;flatuicolors.com
-27,Skeuomorphic,"skeuomórfico realista texturas couro madeira botões reais","skeuomorphic realistic textures leather wood real-buttons",Elementos digitais que imitam objetos físicos com texturas e sombras e profundidade realista.,Serif ou sans com efeitos de relevo e textura,Texturas realistas com sombras naturais e reflexos,Baseado na metáfora física do objeto imitado,Realista com física simulada e profundidade,Familiar e tangível,Apps de música e instrumentos e jogos e ferramentas criativas,Interfaces corporativas e dashboards de dados,garageband (app);pocket-casts (app)
-28,Retro-Vintage,"retrô vintage anos-50-60-70 nostalgia tipografia clássica","retro vintage 50s-60s-70s nostalgia classic-typography",Nostalgia visual de décadas passadas com tipografia clássica e paletas retrô e texturas envelhecidas.,Display retro serif ou script com body sans clássica,Tons sépia e mostarda e avermelhados com texturas grain,Moderado com layouts simétricos e molduras decorativas,Sutil com efeitos de film grain e fade,Nostálgico e charmoso,Restaurantes e cervejarias e marcas heritage e eventos,Tech startups e fintech e SaaS moderno,mailchimp.com;dropbox.com (brand refresh)
-29,Vaporwave,"vaporwave estético rosa roxo azul 90s digital nostalgia","vaporwave aesthetic pink purple blue 90s digital-nostalgia",Estética digital nostálgica dos anos 90 com gradientes rosa-roxo e elementos 3D e tipografia glitch.,Display com efeitos chrome e japonês decorativo com body sans,Rosa e roxo e ciano com gradientes sunset e chrome,Moderado com elementos flutuantes e grids 3D,Drift suave com efeitos de VHS e scan lines,Nostálgico-digital e irônico,Projetos artísticos e músicas e eventos e moda streetwear,Bancos e saúde e governo e educação formal,poolsuite.net;vaporwave.js.org
-30,Corporate-Modern,"corporativo moderno profissional clean confiável","corporate modern professional clean trustworthy",Visual profissional e confiável com hierarquia clara e cores institucionais e layout previsível.,Sans-serif profissional com hierarquia por peso e tamanho,Azuis corporativos com neutros e um acento funcional,Moderado e consistente com grid previsível,Sutil e funcional com hover states e transições,Confiável e profissional,SaaS B2B e bancos digitais e consultorias e enterprise,Entretenimento e gaming e projetos artísticos,salesforce.com;slack.com;stripe.com
-31,AI-Native,"inteligência artificial streaming chat tempo-real gradiente escuro","ai-native streaming chat real-time dark-gradient",Interfaces de IA com streaming de texto e gradientes escuros e feedback em tempo real e respostas incrementais.,Sans-serif moderna com mono para code blocks e outputs de IA,Escuros profundos com acentos de gradiente púrpura e azul,Compacto em painéis com generoso no conteúdo gerado,Streaming de texto e skeleton loaders e pulsos sutis,Inteligente e responsivo,Chatbots e copilots e ferramentas de IA generativa e IDEs,Sites institucionais e e-commerce e infantil,claude.ai;chat.openai.com;v0.dev
-32,Dashboard-Dense,"dashboard denso dados métricas painéis tabelas gráficos","dashboard dense data metrics panels tables charts",Dashboards de dados com alta densidade informacional e múltiplos painéis e widgets compactos.,Sans-serif condensada com mono para números e hierarquia por peso,Escuros com acentos semafóricos verde e amarelo e vermelho,Compacto e denso com grid rígido e gutters mínimos,Funcional com transições rápidas e hover tooltips,Analítico e eficiente,Plataformas de analytics e monitoramento e admin panels e fintech,Landing pages e portfólios e sites editoriais,grafana.com;datadog.com;mixpanel.com
-33,Bento-Grid,"bento grid assimétrico cards apple modular mosaico","bento grid asymmetric cards apple modular mosaic",Layout em grid assimétrico inspirado em bentô com cards de tamanhos variados e hierarquia visual por escala.,Sans-serif limpa com hierarquia por escala e peso dentro dos cards,Neutros claros ou escuros com acentos vibrantes pontuais por card,Grid assimétrico com gaps consistentes e cards de tamanhos variados,Hover expansivo e transições suaves de escala nos cards,Organizado e contemporâneo,Landing pages de produto e portfólios e apresentações de features,Formulários e apps de texto pesado e dashboards densos,apple.com;linear.app;raycast.com
-34,Claymorphism,"clay argila 3D arredondado pastel sombra suave inflado","claymorphism clay 3D rounded pastel soft-shadow inflated",Formas 3D arredondadas com sombras suaves e cores pastéis saturadas e aparência inflada e tátil.,Sans-serif arredondada bold com pesos medium e large,Pastéis saturados com sombras coloridas e fundos claros,Generoso com bordas muito arredondadas e elevação suave,Bounce e scale com efeitos elásticos em interação,Lúdico e tátil,Apps infantis e onboarding flows e landing pages criativas,Dashboards corporativos e fintech e conteúdo pesado,dribbble.com/tags/claymorphism;N/A
-35,Y2K-Revival,"y2k 2000 chrome rosa azul pixel brilho cyber nostalgia","y2k revival chrome pink blue pixel shine cyber nostalgia",Nostalgia dos anos 2000 com efeitos chrome e rosa e azul metálico e fontes pixel e brilhos.,Display pixel ou techno com body sans-serif limpa,Rosa e azul metálico com chrome e prata e brilhos,Moderado com elementos flutuantes e bordas brilhantes,Brilhos e reflexos com rotações e efeitos de estrela,Nostálgico e divertido,Moda e beleza e música pop e marcas jovens e eventos,Saúde e governo e educação formal e finanças,charli-xcx.com;oliviarodrigo.com
-36,Acid-Graphics,"ácido distorcido warped neon tipografia deformada psicodélico","acid graphics distorted warped neon deformed-type psychedelic",Gráficos distorcidos com cores ácidas e tipografia warped e composições experimentais e caóticas.,Display warped e distorcida com escalas extremas e rotações,Neons ácidos com verde limão e magenta e amarelo sobre preto,Irregular e sobreposto com colisões intencionais,Distorções e morphing contínuo e efeitos de melt,Transgressor e experimental,Festivais de música e zines digitais e moda underground e arte,Corporativo e saúde e educação e governo,kfrfrr.com;acidgraphix.com
-37,Kinetic-Typography,"tipografia cinética movimento texto animado letras protagonista","kinetic-typography motion text animated letters protagonist",Tipografia como protagonista visual com movimento e animação e escala dinâmica de texto.,Display ultra-bold em tamanhos enormes com animações por letra,Mínima com preto e branco ou monocromático e acento pontual,Generoso para dar espaço ao movimento tipográfico,Animações de texto com scroll-driven e split-text reveals,Dramático e expressivo,Agências criativas e portfólios de motion e landing pages de impacto,E-commerce e apps de produtividade e dashboards,dennissnellenberg.com;rfrfrr.com
-38,Data-Visualization,"visualização dados gráficos infográficos analítico chart","data-visualization charts infographics analytical dataviz",Interfaces focadas em visualização de dados com gráficos interativos e narrativa por dados.,Sans-serif com mono para valores e tabular nums para alinhamento,Sequenciais e divergentes otimizadas para daltonismo e legibilidade,Moderado com hierarquia por importância do dado,Transições de dados com morphing de gráficos e drill-down,Informativo e confiável,Relatórios e jornalismo de dados e pesquisa e plataformas científicas,Portfólios artísticos e moda e entretenimento,observablehq.com;flourish.studio;datatowrapper.de
-39,Dark-Academia,"academia sóbrio clássico serif papel texturas marrom","dark-academia classic sober serif paper textures brown",Tons sóbrios acadêmicos com serifs clássicas e texturas de papel envelhecido e atmosfera literária.,Serif clássica para títulos e body com itálicos expressivos,Marrons e sépia e creme e dourado envelhecido com texturas de papel,Moderado a generoso com margens amplas e ritmo de leitura,Sutil com fade-in suave e efeitos de página,Intelectual e contemplativo,Blogs literários e livrarias e academias e publicações culturais,Tech startups e gaming e apps infantis e e-commerce rápido,jstor.org;lithub.com
-40,Cottagecore-Digital,"cottagecore rural romântico flores campo natureza vintage digital","cottagecore rural romantic flowers countryside nature vintage digital",Estética rural romântica adaptada para digital com flores e tons quentes e texturas orgânicas.,Serif suave ou script delicada para títulos com sans humanista para body,Tons quentes de verde salvia e rosa antigo e creme e lavanda,Generoso e arejado com bordas suaves e molduras florais,Sutil com parallax leve e transições delicadas,Acolhedor e nostálgico,Marcas de bem-estar e jardinagem e gastronomia artesanal e casamentos,Fintech e cybersecurity e gaming e tech corporativo,terrain.com;magnolia.com
-41,Afrofuturism,"afrofuturismo africano futuro herança tecnologia ancestral","afrofuturism african future heritage technology ancestral",Fusão de herança africana com tecnologia futurista e padrões geométricos tribais e paletas vibrantes.,Display bold com influências de padrões africanos e sans moderna,Dourados e roxos profundos e terrosos vibrantes com acentos metálicos,Moderado a generoso com padrões geométricos como elementos de grid,Energética com morphing de padrões e transições rítmicas,Empoderador e visionário,Arte e cultura e música afro e moda e tecnologia social,Corporativo conservador e governo tradicional e infantil genérico,wakandaforever.com;okayafrica.com
-42,Solarpunk,"solarpunk sustentável utopia verde solar ecológico futuro","solarpunk sustainable utopia green solar ecological future",Utopia sustentável com verdes vibrantes e tons solares e elementos orgânicos integrados com tecnologia.,Sans-serif humanista com detalhes orgânicos e pesos variados,Verdes vibrantes e amarelo solar e terracota com brancos quentes,Generoso com formas orgânicas e curvas integradas ao grid,Fluida e orgânica com crescimento e particle effects de folhas,Otimista e sustentável,Marcas ecológicas e energy tech e urbanismo e educação ambiental,Fintech conservador e luxo e cybersecurity e moda fast,solarpunks.net;lowtechmagazine.com
-43,Retro-Computing,"terminal retro computador fósforo monospace verde âmbar CRT","retro-computing terminal phosphor monospace green amber CRT",Terminais de computador retrô com fontes monospace e cores de fósforo verde ou âmbar sobre preto.,Monospace pura estilo terminal com cursor piscante e line-height apertado,Fósforo verde ou âmbar sobre preto profundo com scanlines,Compacto com line-height apertado e padding de terminal,Cursor blink e typing animation e scanline scroll,Técnico e nostálgico,Ferramentas dev e CTF e cybersecurity e portfólios de engenheiros,Moda e infantil e food e wellness e luxo,cool-retro-term (app);hackertyper.net
-44,Pixel-Art,"pixel arte bitmap retro 8bit 16bit jogo sprite","pixel-art bitmap retro 8bit 16bit game sprite",Estética pixelada com fontes bitmap e paletas de cores limitadas e nostalgia de jogos retrô.,Fontes bitmap pixel-perfect com tamanhos em múltiplos de 8,Paletas limitadas de 8 a 16 cores com dithering opcional,Grid baseado em múltiplos de 8px com alinhamento pixel-perfect,Step animations com frame-by-frame e sem anti-aliasing,Retrô e charmoso,Jogos indie e portfólios de game dev e landing pages criativas,Saúde e finanças e governo e corporativo,itch.io;pico-8.com
-45,Isometric,"isométrico 3D perspectiva 30 graus ilustração técnico","isometric 3D perspective 30-degrees illustration technical",Ilustrações isométricas com perspectiva fixa de 30 graus e profundidade sem ponto de fuga.,Sans-serif geométrica limpa que complementa as ilustrações,Vibrantes mas harmônicas com gradientes sutis nas superfícies 3D,Generoso com ilustrações isométricas como hero elements,Montagem de cenas isométricas e hover reveals de camadas,Técnico e acessível,Landing pages de produto e explainers e infográficos e onboarding,Blogs de texto e e-commerce de moda e editoriais,stripe.com;slack.com;figma.com
-46,3D-Immersive,"3D imersivo WebGL parallax profundidade tridimensional","3D immersive WebGL parallax depth three-dimensional",Interfaces com profundidade 3D real e parallax pesado e elementos WebGL e navegação espacial.,Sans-serif moderna com hierarquia por profundidade Z e escala,Gradientes de profundidade com iluminação dinâmica e sombras realistas,Espacial com profundidade Z e camadas em perspectiva,Parallax intenso e scroll-driven 3D e transições de câmera,Imersivo e cinematográfico,Experiências de marca e automotivo e imobiliário e portfólios premium,Apps de produtividade e dashboards e e-commerce genérico,apple.com/airpods-pro;porsche.com;bruno-simon.com
-47,Psychedelic,"psicodélico vibrante saturado orgânico fluido padrões espiral","psychedelic vibrant saturated organic fluid patterns spiral",Cores vibrantes e saturadas com padrões orgânicos e espirais e gradientes fluidos e efeitos ópticos.,Display groovy ou sans-serif ultra-bold com distorções orgânicas,Vibrantes hipersaturadas com gradientes multi-cor e contrastes extremos,Fluido e irregular com formas orgânicas que se expandem,Morphing contínuo e ondulações e efeitos de onda,Expansivo e transcendente,Festivais e música e arte experimental e cannabis e moda streetwear,Bancos e governo e saúde e educação formal,levitation.fm;desertdaze.org
-48,Magazine-Grid,"revista grid complexo editorial mix tamanhos colunas","magazine-grid complex-grid editorial mixed-sizes columns",Layout editorial com grid complexo e variação de tamanhos e tipografia forte e ritmo dinâmico.,Mix de serif display e sans-serif com escala extrema entre títulos e corpo,Neutros sofisticados com acentos editoriais e fotografia como cor,Variado com colunas assimétricas e full-bleed e pull-quotes,Scroll-driven com revelação sequencial e parallax de imagens,Narrativo e sofisticado,Revistas digitais e portfólios de fotografia e sites de moda e cultura,Dashboards e SaaS e apps utilitários e formulários,nytimes.com;vogue.com;bloomberg.com
-49,Text-Only,"texto somente tipografia pura sem-imagens hierarquia textual","text-only typography-only no-images textual-hierarchy",Zero imagens com hierarquia construída apenas por tipografia e espaçamento e cor e peso.,Sistema tipográfico refinado com múltiplos pesos e tamanhos e serifs expressivas,Mínima com preto e branco e um acento funcional para links,Muito generoso com line-height amplo e margens de leitura,Mínima com transições de cor e underline animations,Intelectual e focado,Blogs e publicações e portfólios de escritores e manifestos e docs,E-commerce e gaming e apps infantis e dashboards visuais,danluu.com;motherfuckingwebsite.com;gwern.net
-50,Micro-Interaction-Heavy,"micro-interação feedback tátil hover animação detalhe resposta","micro-interaction feedback tactile hover animation detail response",Interfaces ricas em micro-interações com feedback tátil e respostas visuais em cada ação do usuário.,Sans-serif com pesos que respondem a interação e estados visuais claros,Versátil com mudanças de cor como feedback em hover e click e focus,Moderado com espaço suficiente para perceber as micro-interações,Abundante com spring physics e haptic feedback e state transitions,Responsivo e polido,Apps mobile-first e fintech e SaaS premium e e-commerce interativo,Sites de conteúdo estático e blogs e páginas institucionais,stripe.com;linear.app;vercel.com
-51,Neobrutalism,"neobrutalismo cores vibrantes bordas grossas sombras duras offset","neobrutalism vibrant-colors thick-borders hard-shadows offset",Evolução do brutalism com cores vibrantes e bordas pretas grossas e sombras duras com offset e formas simples.,Sans-serif bold ou mono com tamanhos grandes e hierarquia por cor,Cores vibrantes e sólidas com bordas pretas grossas e fundos contrastantes,Moderado com elementos claramente separados por bordas e sombras,Direta com hover offsets e transições de sombra rápidas,Ousado e acessível,Apps de produtividade e startups e landing pages e ferramentas indie,Luxo e saúde e governo e corporativo conservador,gumroad.com;figma.com;notion.so
-52,Japanese-Minimal,"japonês minimalismo zen whitespace wabi-sabi moderno ma","japanese-minimal zen whitespace wabi-sabi modern ma",Minimalismo japonês com muito whitespace e detalhes sutis e conceito de ma e wabi-sabi aplicado ao digital.,Serif delicada ou sans-serif com pesos ultra-light e tracking generoso,Neutros suaves com branco e cinza claro e um acento natural discreto,Extremamente generoso com vazio como elemento de design e ritmo lento,Quase imperceptível com transições lentas e fade sutis,Sereno e contemplativo,Galerias e arquitetura e cerâmica e marcas premium japonesas e chá,E-commerce rápido e gaming e dashboards e apps infantis,muji.com;rikumo.com;kengo-kuma.com

package/skills/hefesto-design/data/typography.csv

@@ -1,41 +0,0 @@
-id,name,display_font,body_font,display_weight,body_weight,heading_size,subheading_size,body_size,small_size,line_height_heading,line_height_body,mood,best_for,google_fonts,pairing_reason
-1,Editorial Clássico,Playfair Display,Source Sans 3,700,400,3rem,1.5rem,1.125rem,0.875rem,1.15,1.7,Sofisticado e narrativo,Revistas digitais e blogs premium e sites editoriais,true,Serif display elegante contrasta com sans humanista legível para longas leituras
-2,Tech Moderno,Space Grotesk,DM Sans,700,400,2.5rem,1.25rem,1rem,0.875rem,1.2,1.6,Técnico e preciso,SaaS e startups tech e dashboards e ferramentas dev,true,Duas sans geométricas com personalidades distintas criam hierarquia sem conflito
-3,Luxury Refinado,Cormorant Garamond,Lato,600,300,3.5rem,1.5rem,1.0625rem,0.8125rem,1.15,1.75,Exclusivo e elegante,Marcas de luxo e joalherias e hotéis premium,true,Serif delicada e refinada com sans-serif light cria leveza aspiracional
-4,Playful Alegre,Fredoka,Nunito,600,400,2.75rem,1.375rem,1.0625rem,0.8125rem,1.2,1.65,Divertido e acessível,Apps infantis e educação e jogos casuais,true,Duas fontes arredondadas em pesos diferentes criam hierarquia lúdica e amigável
-5,Corporate Sólido,Lexend,Work Sans,700,400,2.5rem,1.25rem,1rem,0.875rem,1.2,1.6,Profissional e confiável,Corporativo B2B e consultorias e enterprise e bancos,true,Lexend otimizada para leitura com Work Sans profissional cria confiança
-6,Creative Bold,Syne,Outfit,800,400,3.5rem,1.5rem,1.0625rem,0.8125rem,1.1,1.65,Ousado e expressivo,Agências criativas e portfólios e estúdios de design,true,Display geométrica bold com body sans contemporânea para máximo impacto visual
-7,Medical Limpo,Overpass,Karla,700,400,2.25rem,1.25rem,1rem,0.875rem,1.25,1.7,Claro e confiável,Saúde e clínicas e healthtech e farmácia,true,Sans governamental limpa com Karla legível transmite clareza médica
-8,Legal Formal,Libre Baskerville,Source Serif 4,700,400,2.5rem,1.25rem,1.0625rem,0.8125rem,1.2,1.75,Formal e respeitável,Escritórios de advocacia e documentos legais e contratos,true,Duas serifs clássicas em estilos complementares para formalidade jurídica
-9,Educação Friendly,Poppins,Mulish,600,400,2.5rem,1.25rem,1.0625rem,0.875rem,1.25,1.65,Amigável e claro,Plataformas de ensino e cursos online e universidades,true,Poppins geométrica amigável com Mulish neutra para leitura confortável e prolongada
-10,Gaming Intense,Orbitron,Rajdhani,700,500,3rem,1.5rem,1rem,0.8125rem,1.15,1.55,Futurista e intenso,Jogos e esports e plataformas de gaming,true,Display sci-fi com body angular cria atmosfera tecnológica e competitiva
-11,Minimalist Puro,Instrument Sans,Instrument Serif,500,400,2.5rem,1.25rem,1rem,0.875rem,1.2,1.7,Limpo e equilibrado,Portfólios minimalistas e galerias e marcas pessoais,true,Mesma família em sans e serif cria harmonia perfeita com contraste tipográfico sutil
-12,Brutalist Raw,Space Mono,JetBrains Mono,700,400,3rem,1.5rem,1rem,0.8125rem,1.15,1.6,Cru e técnico,Sites brutalist e projetos de arte e publicações experimentais,true,Duas mono com personalidades distintas reforçam estética raw e anti-design
-13,Retro Nostálgico,Alfa Slab One,Merriweather,400,300,3.5rem,1.5rem,1.0625rem,0.875rem,1.1,1.75,Nostálgico e caloroso,Restaurantes retrô e cervejas artesanais e marcas heritage,true,Slab display pesada com serif body legível evoca cartazes vintage
-14,Futurista Limpo,Exo 2,Titillium Web,700,400,2.75rem,1.375rem,1rem,0.875rem,1.15,1.6,Futurista e preciso,Tech futurista e automotive e aeroespacial e sci-fi,true,Duas sans geométricas com toques futuristas criam visual de ficção científica crível
-15,Orgânico Suave,Fraunces,Atkinson Hyperlegible,600,400,3rem,1.5rem,1.0625rem,0.875rem,1.2,1.7,Natural e acolhedor,Marcas orgânicas e sustentáveis e wellness e alimentação natural,true,Serif variável soft com body otimizada para legibilidade une beleza e acessibilidade
-16,Swiss Grid,Instrument Sans,IBM Plex Sans,600,400,2.5rem,1.25rem,1rem,0.875rem,1.2,1.6,Racional e objetivo,Design tipográfico e publicações e museus e instituições,true,Duas neo-grotescas com grid rigoroso seguem tradição do estilo internacional
-17,Art Deco Glamour,Poiret One,Raleway,400,300,3.5rem,1.5rem,1.0625rem,0.875rem,1.1,1.7,Glamouroso e vintage,Hotéis de luxo e joias e eventos premium e art deco,true,Display geométrica decorativa anos 20 com body elegante e leve
-18,Magazine Bold,Clash Display,General Sans,700,400,4rem,1.75rem,1.0625rem,0.8125rem,1.05,1.65,Impactante e editorial,Revistas de moda e lifestyle e publicações visuais,true,Display impactante com tracking apertado e body sans limpa para editorial de impacto
-19,Handwritten Pessoal,Caveat,Nunito Sans,700,400,2.75rem,1.375rem,1rem,0.875rem,1.2,1.65,Pessoal e informal,Blogs pessoais e portfólios criativos e convites e marcas artesanais,true,Script casual com sans arredondada cria tom pessoal sem sacrificar legibilidade
-20,Data Dense,JetBrains Mono,IBM Plex Sans,700,400,2rem,1.125rem,0.9375rem,0.8125rem,1.25,1.55,Técnico e eficiente,Dashboards de dados e analytics e terminais e DevOps,true,Mono técnica para dados com sans humanista para prosa em interfaces data-heavy
-21,Startup Energético,Plus Jakarta Sans,Figtree,800,400,3rem,1.5rem,1rem,0.875rem,1.15,1.6,Moderno e energético,Startups e landing pages e pitch decks e SaaS jovem,true,Display bold moderna com body amigável cria energia de startup sem ser juvenil demais
-22,Newspaper Clássico,Libre Caslon Display,Charter,400,400,3rem,1.5rem,1.0625rem,0.875rem,1.15,1.75,Sério e informativo,Portais de notícia e jornalismo e documentários e reportagens,true,Display jornalística clássica com body serif otimizada para leitura longa
-23,Eco Natural,DM Serif Display,Cabin,400,400,3rem,1.5rem,1.0625rem,0.875rem,1.15,1.65,Natural e consciente,Marcas eco e sustentabilidade e agricultura e natureza,true,Serif orgânica com sans humanista transmite seriedade ambiental com acessibilidade
-24,Fashion Minimal,Bodoni Moda,Outfit,900,300,4rem,1.75rem,1rem,0.8125rem,1.05,1.65,Chique e editorial,Moda e beauty e lifestyle premium e galerias,true,Bodoni ultra-refinada com body contemporânea leve para elegância fashion
-25,Fintech Seguro,Manrope,Public Sans,700,400,2.5rem,1.25rem,1rem,0.875rem,1.2,1.6,Confiável e moderno,Bancos digitais e fintechs e seguradoras e investimentos,true,Sans geométrica moderna com sans governamental cria confiança digital
-26,Kids Educativo,Baloo 2,Quicksand,700,500,2.75rem,1.375rem,1.0625rem,0.875rem,1.25,1.65,Divertido e legível,Educação infantil e jogos educativos e apps para crianças,true,Display arredondada bold com body geométrica friendly para público infantil
-27,Arquitetura Preciso,Archivo,Barlow,600,400,2.5rem,1.25rem,1rem,0.875rem,1.2,1.6,Preciso e estrutural,Arquitetura e engenharia e construção e design de interiores,true,Sans condensável precisa com body limpa para projetos que exigem clareza técnica
-28,Wellness Sereno,Tenor Sans,Jost,400,300,2.75rem,1.375rem,1.0625rem,0.875rem,1.25,1.75,Sereno e equilibrado,Yoga e meditação e spas e terapias e bem-estar,true,Sans elegante com espaçamento amplo e body leve para transmitir calma e equilíbrio
-29,Food Apetitoso,Playfair Display SC,Lora,700,400,3rem,1.5rem,1.0625rem,0.875rem,1.15,1.7,Quente e convidativo,Restaurantes e gastronomia e receitas e food blogs,true,Small caps display com serif warm body para atmosfera gastronômica sofisticada
-30,Esports Competitivo,Chakra Petch,Saira,700,500,3rem,1.5rem,1rem,0.8125rem,1.15,1.5,Agressivo e competitivo,Esports e competições e ligas de gaming,true,Angular tech display com body condensada para interfaces competitivas de alta velocidade
-31,Music Festival,Unbounded,Albert Sans,800,400,4rem,1.75rem,1rem,0.875rem,1.05,1.6,Vibrante e enérgico,Festivais de música e shows e artistas e rádios,true,Display expansiva bold com body limpa para cartazes digitais e promoções musicais
-32,Governo Acessível,Noto Sans,Noto Serif,600,400,2.25rem,1.25rem,1.0625rem,0.875rem,1.25,1.7,Acessível e oficial,Portais governamentais e serviços públicos e institucional,true,Família Noto com suporte universal de caracteres para máxima acessibilidade pública
-33,Portfolio Artístico,Gambetta,Spectral,500,400,3.5rem,1.5rem,1.0625rem,0.875rem,1.1,1.7,Artístico e curado,Portfólios de artistas e fotógrafos e designers e galerias,true,Serif display escultural com body serif complementar para apresentação artística
-34,Real Estate Elegante,Marcellus,Assistant,400,400,3rem,1.5rem,1rem,0.875rem,1.15,1.65,Elegante e confiável,Imobiliárias e empreendimentos e interiores e decoração,true,Serif clássica com sans limpa para transmitir solidez e bom gosto imobiliário
-35,Travel Aventura,Josefin Sans,Hind,700,400,3rem,1.5rem,1rem,0.875rem,1.2,1.6,Aventureiro e moderno,Agências de viagem e turismo e aventura e lifestyle,true,Sans geométrica com personalidade e body com suporte multi-script para contexto global
-36,Crypto Futurista,Audiowide,Share Tech,400,400,2.75rem,1.375rem,1rem,0.875rem,1.15,1.55,Tecnológico e descentralizado,Plataformas crypto e blockchain e DeFi e Web3,true,Display futurista mono-width com body técnica para estética blockchain
-37,SaaS Dashboard,Red Hat Display,Red Hat Text,700,400,2.25rem,1.125rem,0.9375rem,0.8125rem,1.2,1.55,Profissional e funcional,Dashboards SaaS e painéis admin e ferramentas B2B,true,Família Red Hat otimizada para UI com display para títulos e text para dados
-38,Nonprofit Humano,Bitter,Open Sans,700,400,2.5rem,1.25rem,1.0625rem,0.875rem,1.2,1.7,Humano e engajante,ONGs e causas sociais e fundações e projetos sociais,true,Slab serif acolhedora com sans universal cria conexão humana em comunicação social
-39,Scandinavian Limpo,DM Sans,Source Sans 3,500,400,2.5rem,1.25rem,1rem,0.875rem,1.25,1.65,Sereno e funcional,Design escandinavo e móveis e decoração e lifestyle nórdico,true,Duas sans com personalidade discreta e proporcional para estética nórdica funcional
-40,Vaporwave Estético,Press Start 2P,VT323,400,400,2rem,1.25rem,1.125rem,0.9375rem,1.3,1.6,Nostálgico e digital,Projetos vaporwave e retro digital e pixel art e nostalgia 90s,true,Pixel fonts que evocam era dos computadores pessoais e estética digital nostálgica

package/skills/hefesto-design/data/ux-rules.csv

@@ -1,61 +0,0 @@
-id,name,priority,category,rule,standard,avoid,reference,reasoning
-1,Contraste mínimo de texto,critical,acessibilidade,Texto normal deve ter contraste mínimo de 4.5:1 e texto grande (18px+ ou 14px+ bold) de 3:1 contra o fundo,WCAG 2.1 AA: texto normal 4.5:1 e texto grande 3:1,Cinza claro sobre branco e texto colorido sobre fundo colorido sem verificar contraste,WCAG 2.1 Success Criterion 1.4.3,Aproximadamente 8% dos homens têm daltonismo. Baixo contraste causa fadiga visual em todos os usuários.
-2,Touch target mínimo,critical,interacao,Elementos interativos devem ter área de toque mínima de 44x44px em mobile e 24x24px em desktop,WCAG 2.5.8: mínimo 44x44 CSS pixels para touch e 24x24 para pointer,Ícones de 16px sem padding e links inline sem espaçamento e botões menores que 32px,WCAG 2.5.8 Target Size,Dedos humanos cobrem ~48px de área. Targets pequenos causam erros de toque e frustração.
-3,Foco visível obrigatório,critical,acessibilidade,Todo elemento interativo deve ter indicador de foco visível com contraste mínimo de 3:1,Outline de 2px com offset de 2px e contraste mínimo de 3:1,outline:none sem substituto e focus apenas via cor de fundo sutil,WCAG 2.4.7 Focus Visible,Usuários de teclado dependem exclusivamente do foco visível para navegar. Sem ele a interface é inacessível.
-4,Hierarquia de heading sequencial,critical,acessibilidade,Headings devem seguir ordem sequencial h1 > h2 > h3 sem pular níveis. Apenas um h1 por página,Um h1 por página seguido de h2 e h3 em sequência sem pulos,Usar h1 em múltiplos lugares e pular de h2 para h4 e usar heading por estilo visual,WCAG 1.3.1 Info and Relationships,Screen readers navegam por headings. Hierarquia quebrada cria experiência confusa e desorientadora.
-5,Label em todo input,critical,forms,Todo campo de formulário deve ter label visível associado via for/id. Placeholder não substitui label,Label visível com for apontando para id do input. Placeholder como exemplo apenas,Placeholder como único label e label oculto sem necessidade e floating label que desaparece,WCAG 1.3.1 e 3.3.2,Labels desaparecem ao digitar. Usuários com memória curta e screen readers precisam de labels persistentes.
-6,Não depender só de cor,critical,acessibilidade,Informação transmitida por cor deve ter indicador adicional como ícone ou texto ou padrão,Cor + ícone + texto para estados como erro/sucesso. Padrões em gráficos além de cor,Campo de erro marcado apenas com borda vermelha e status indicado apenas por cor,WCAG 1.4.1 Use of Color,Daltonismo afeta 1 em 12 homens. Cor sozinha é invisível para muitos usuários.
-7,Texto alternativo em imagens,critical,acessibilidade,Imagens informativas devem ter alt descritivo. Decorativas devem ter alt vazio. Imagens complexas precisam de descrição longa,Alt descritivo para informativas e alt="" para decorativas e aria-describedby para complexas,Alt genérico como "imagem" e alt ausente em imagens informativas e alt em ícones decorativos,WCAG 1.1.1 Non-text Content,Screen readers leem alt text. Sem ele imagens são invisíveis ou confusas para usuários cegos.
-8,Feedback de erro específico,critical,forms,Mensagens de erro devem ser específicas e dizer o que fazer para corrigir. Posicionar próximo ao campo,Mensagem junto ao campo com aria-describedby. Texto como "Email deve conter @" em vez de "Campo inválido",Erro genérico "campo inválido" e erro apenas no topo do form e erro sem instrução de correção,WCAG 3.3.1 e 3.3.3,Erros vagos frustram. Usuários precisam saber exatamente o que corrigir e como corrigir.
-9,Navegação por teclado completa,critical,interacao,Toda funcionalidade disponível via mouse deve ser acessível via teclado sem armadilhas de foco,Tab navega sequencialmente e Enter/Space ativam e Escape fecha overlays e setas em widgets,Funcionalidade apenas via hover e drag-and-drop sem alternativa e custom widgets sem keyboard,WCAG 2.1.1 Keyboard,Muitos usuários não usam mouse: deficiência motora e power users e screen reader users.
-10,Prefers-reduced-motion,critical,animacao,Respeitar prefers-reduced-motion reduzindo ou removendo animações para usuários sensíveis,Usar @media (prefers-reduced-motion: reduce) para simplificar ou remover animações,Animações sem fallback e parallax intenso e flashing sem controle,WCAG 2.3.1 Three Flashes,Animações podem causar enjoo e dor de cabeça e convulsões em pessoas com vestibular disorders.
-11,Hierarquia visual clara,high,layout,Estabelecer hierarquia com tamanho e peso e cor e espaço. O mais importante deve ser o mais visível,Título maior que subtítulo maior que corpo. CTA primário mais proeminente que secundário,Tudo do mesmo tamanho e múltiplos elementos competindo por atenção e hierarquia apenas por cor,Gestalt e princípios de design visual,Sem hierarquia o usuário não sabe onde olhar primeiro e a taxa de conclusão de tarefas cai.
-12,Espaçamento consistente,high,espacamento,Usar escala de espaçamento consistente baseada em múltiplos de 4px ou 8px,Escala: 4 8 12 16 24 32 48 64 96. Padding interno menor que margin externo,Espaçamento arbitrário e padding inconsistente entre componentes similares,Material Design spacing,Espaçamento inconsistente cria sensação de amadorismo e dificulta scanning visual do conteúdo.
-13,Loading state em toda ação assíncrona,high,interacao,Toda ação que leva mais de 300ms deve mostrar feedback visual de carregamento,Spinner inline ou skeleton para conteúdo e botão disabled com spinner para ações,Tela congelada sem feedback e spinner genérico de página inteira para ação local,Nielsen Norman Group response times,Sem feedback o usuário não sabe se a ação funcionou e pode clicar repetidamente.
-14,Máximo 80 caracteres por linha,high,tipografia,Linhas de texto para leitura prolongada devem ter entre 45 e 80 caracteres incluindo espaços,Ideal: 65-75 caracteres. max-width no container de texto. Usar ch como unidade,Texto de parede a parede em tela cheia e colunas muito estreitas com menos de 30 caracteres,Robert Bringhurst tipografia,Linhas longas demais causam perda ao retornar. Curtas demais quebram o ritmo de leitura.
-15,CTA primário único por viewport,high,interacao,Cada viewport deve ter no máximo um CTA primário claro. Ações secundárias com menor destaque,Um botão primário e demais como secondary/outline/ghost/link,Múltiplos botões primários competindo e CTA primário visualmente igual ao secundário,Steve Krug - Don't Make Me Think,Múltiplos CTAs primários causam paralisia de decisão e reduzem taxa de conversão.
-16,Breakpoints responsivos,high,layout,Design deve adaptar-se a mobile (320px+) e tablet (768px+) e desktop (1024px+) e wide (1440px+),Mobile-first com breakpoints em 640 768 1024 1280 1536. Testar em 320px,Layout fixo em pixels e breakpoints que cortam conteúdo e ignorar telas menores que 375px,Responsive Web Design,Mais de 60% do tráfego global é mobile. Layout não-responsivo perde a maioria dos usuários.
-17,Z-index organizado,high,layout,Usar escala de z-index com tokens semânticos em vez de valores arbitrários,Escala: base(0) dropdown(100) sticky(200) modal(300) popover(400) toast(500),z-index: 9999 e valores arbitrários e z-index war entre componentes,CSS Architecture best practices,Z-index arbitrário cria conflitos impossíveis de debugar e sobreposições inesperadas.
-18,Scroll suave e previsível,high,interacao,Scroll deve ser suave e previsível. Anchor links com scroll-behavior smooth. Evitar scroll hijacking,scroll-behavior: smooth no CSS. Scroll snap com cuidado. Preservar scroll nativo,Scroll hijacking que muda velocidade e scroll horizontal surpresa e sticky elements que cobrem tudo,Nielsen Norman Group scroll patterns,Scroll hijacking é a violação mais comum da expectativa do usuário e causa frustração imediata.
-19,Tipografia responsiva,high,tipografia,Tamanhos de fonte devem escalar com viewport usando clamp() ou escala fluida,clamp(1rem 2.5vw 1.25rem) para body. Escala proporcional para headings,Font-size fixo em px e texto muito pequeno em mobile e heading que não escala,Utopia fluid type,Texto muito pequeno em mobile é ilegível. Muito grande em desktop desperdiça espaço.
-20,Consistência de componentes,high,estilo,Componentes iguais devem ter aparência e comportamento idênticos em toda a aplicação,Design tokens para cores e espaçamentos e border-radius. Component library unificada,Botão com 3 estilos diferentes e cards com radiis diferentes e inputs inconsistentes,Design System principles,Inconsistência visual cria carga cognitiva e faz a interface parecer não-profissional.
-21,Formulário em etapas para 7+ campos,high,forms,Formulários com mais de 7 campos devem ser divididos em etapas com progress indicator,Multi-step form com 3-5 campos por etapa. Progress bar ou stepper mostrando etapas,Formulário gigante em página única e mais de 10 campos sem agrupamento,Miller's Law e form UX research,Formulários longos intimidam. Dividir em etapas reduz abandono em até 300%.
-22,Empty state útil,high,interacao,Telas vazias devem ter ilustração ou ícone e texto explicativo e CTA para a próxima ação,Ícone contextual + título + descrição + CTA primário. Tom amigável e orientador,Tela em branco e apenas texto "nenhum resultado" e empty state sem ação sugerida,Luke Wroblewski empty states,Empty states são oportunidade de guiar o usuário. Tela vazia causa confusão e abandono.
-23,Skip navigation link,high,acessibilidade,Primeiro elemento focável deve ser link "Pular para conteúdo" que leva ao main content,Link visível em focus antes do header. Ancora para main ou id do conteúdo principal,Ausência de skip link e skip link que não funciona e skip link permanentemente visível,WCAG 2.4.1 Bypass Blocks,Usuários de teclado e screen reader precisam pular navegação repetitiva em cada página.
-24,Aria-live para conteúdo dinâmico,high,acessibilidade,Conteúdo atualizado dinamicamente sem reload deve ser anunciado via aria-live,aria-live=polite para atualizações não urgentes e aria-live=assertive para alertas críticos,Conteúdo dinâmico silencioso e aria-live=assertive para tudo e atualizações frequentes demais,WCAG 4.1.3 Status Messages,Screen readers não detectam mudanças visuais. Sem aria-live atualizações dinâmicas são invisíveis.
-25,Color mode com transição,high,estilo,Suportar dark/light mode com transição suave e respeitar prefers-color-scheme do sistema,Detectar preferência do sistema e permitir override manual e transição de 200ms,Forçar apenas um modo e dark mode com contraste ruim e transição abrupta sem animation,WCAG e user preference,Muitos usuários preferem dark mode por conforto visual. Respeitar preferência do sistema é esperado.
-26,Truncamento com acesso ao completo,medium,interacao,Texto truncado deve oferecer acesso ao conteúdo completo via tooltip ou expand ou modal,text-overflow: ellipsis com title ou tooltip em hover/focus e opção de expandir,Truncar sem acesso ao texto completo e truncar no meio de palavras e truncar títulos importantes,UX writing best practices,Usuários precisam poder acessar conteúdo completo. Truncamento sem escape é perda de informação.
-27,Contraste em elementos interativos,medium,acessibilidade,Bordas e ícones de elementos interativos devem ter contraste mínimo de 3:1 contra o fundo,WCAG 1.4.11: contraste de 3:1 para componentes UI e indicadores gráficos,Bordas cinza-claro sobre branco e ícones de baixo contraste e dividers invisíveis,WCAG 1.4.11 Non-text Contrast,Se o usuário não consegue ver as bordas do input ele não sabe que é um campo interativo.
-28,Animação com propósito,medium,animacao,Toda animação deve ter propósito funcional: feedback e orientação espacial e hierarquia de atenção,Micro-interações para feedback. Transições para orientação. Máximo 400ms para UI,Animação decorativa que atrasa a tarefa e loading spinner com animação complexa e bounce excessivo,Material Design motion principles,Animação sem propósito é distração que atrasa o usuário e consome bateria em mobile.
-29,Debounce em search,medium,performance,Campos de busca com resultados em tempo real devem ter debounce de 300-500ms,300ms debounce para autocomplete e 500ms para busca completa. Cancelar requests anteriores,Busca a cada keystroke sem debounce e sem cancelamento de requests e sem loading state,UX engineering best practices,Busca sem debounce sobrecarrega servidor e causa flickering de resultados irritante.
-30,Confirmação para ações destrutivas,medium,interacao,Ações irreversíveis devem ter confirmação explícita com descrição clara do que será perdido,Dialog de confirmação com descrição específica. Botão destrutivo em vermelho à direita. Opção de desfazer quando possível,Deletar sem confirmação e confirmação genérica "tem certeza?" e ação destrutiva sem undo,Nielsen Norman Group confirmation dialogs,Ações acidentais irreversíveis causam perda de dados e destroem confiança na interface.
-31,Espaço entre label e campo,medium,espacamento,Manter espaço consistente entre label e seu campo: 4-8px. Label mais próximo do campo que do campo anterior,Label 4-8px acima do campo. Espaço entre grupos de campo maior que entre label e campo (Lei da Proximidade),Label equidistante entre dois campos e label muito longe do campo associado,Gestalt - Lei da Proximidade,Se o label está equidistante de dois campos o usuário não sabe a qual pertence.
-32,Padding interno de containers,medium,espacamento,Containers devem ter padding proporcional ao tamanho: cards 16-24px e modals 24-32px e sections 32-64px,Cards: 16-24px. Modals: 24-32px. Page sections: 48-96px. Proporcional à viewport,Padding zero em cards e padding gigante em elementos pequenos e padding inconsistente entre cards,Spacing design patterns,Padding correto cria respiro visual e melhora legibilidade. Sem padding o conteúdo parece claustrofóbico.
-33,Max-width em containers de texto,medium,tipografia,Limitar largura de containers de texto a 65-75ch para manter legibilidade,max-width: 65ch a 75ch para prose. Container centralizado com margin auto,Texto full-width em telas grandes e max-width muito restritivo em mobile,Typographic best practices,Olhos humanos perdem a linha ao retornar da direita. 65ch é o sweet spot para conforto.
-34,Aspect ratio em imagens,medium,layout,Imagens devem manter aspect ratio e ter dimensões explícitas para evitar layout shift,aspect-ratio no CSS e width/height explícitos no HTML. Object-fit: cover para crop,Imagens sem dimensões causando CLS e imagens esticadas e aspect-ratio inconsistente em grids,Core Web Vitals CLS,Imagens sem dimensão causam layout shift que é a experiência mais frustrante em mobile.
-35,Feedback háptico e visual em mobile,medium,interacao,Interações em mobile devem fornecer feedback imediato visual e quando possível háptico,Ripple ou highlight em touch. Haptic feedback para ações importantes. 100ms máximo de delay,Touch sem feedback visual e delay perceptível entre toque e resposta e feedback apenas auditivo,Mobile UX patterns,Sem feedback o usuário não sabe se o toque foi registrado e tenta novamente causando double-tap.
-36,Ordem de tabulação lógica,medium,acessibilidade,A ordem de Tab deve seguir a ordem visual e lógica do conteúdo sem pulos inesperados,Ordem do DOM = ordem visual = ordem de Tab. Evitar tabindex positivo,tabindex com valores altos e ordem de Tab diferente da visual e elementos focáveis escondidos,WCAG 2.4.3 Focus Order,Quando ordem de foco e visual divergem o usuário de teclado se perde e fica desorientado.
-37,Font-size mínimo de 16px em mobile,medium,tipografia,Corpo de texto em mobile deve ter no mínimo 16px para evitar zoom forçado do browser,Body: 16px mínimo. Small text: 14px com uso limitado. Input: 16px para evitar zoom no iOS,Texto body menor que 14px e inputs com font menores que 16px no iOS e small text abaixo de 12px,iOS Safari zoom behavior e WCAG,iOS Safari dá zoom automático em inputs menores que 16px. Texto pequeno é ilegível em mobile.
-38,Skeleton antes de spinner,medium,performance,Para conteúdo estruturado usar skeleton screens em vez de spinner genérico,Skeleton que mimetiza layout real do conteúdo por 300ms antes de mostrar spinner,Spinner de página inteira para lista de cards e skeleton que não parece com o conteúdo real,Google skeleton screen research,Skeletons criam percepção de velocidade superior. Spinners comunicam "espere" enquanto skeletons comunicam "já vem".
-39,Estado de hover consistente,medium,interacao,Elementos interativos devem ter hover state visualmente distinto e consistente em toda a app,Mudança de background ou shadow ou scale sutil. 150ms de transição. Cursor: pointer,Hover que muda muito o layout e hover sem transição e hover inconsistente entre componentes,Fitts Law e interaction design,Hover inconsistente confunde sobre o que é clicável. Hover abrupto sem transição parece quebrado.
-40,Sticky header com shadow on scroll,medium,layout,Headers fixos devem ter shadow ou separator apenas quando a página tem scroll para indicar elevação,Shadow de 1-2px blur aparecendo com scroll. transition: box-shadow 200ms. Header transparente sem scroll,Header com shadow permanente e header que cobre conteúdo e header sem indicação de elevação,Material Design elevation,Header com shadow permanente compete com o conteúdo. Sem shadow ao scrollar o header parece flutuar.
-41,Validação inline em tempo real,medium,forms,Validar campos ao blur (não ao digitar) mostrando feedback inline imediato com instruções de correção,Validar em blur. Mostrar erro junto ao campo. Revalidar ao digitar após primeiro erro. Sucesso visual,Validar apenas no submit e validar durante digitação e erro que desaparece sem o usuário ver,Luke Wroblewski inline validation research,Validação no submit força scroll até o erro. Inline no blur é 22% mais rápido para completar forms.
-42,Espaçamento entre ações,medium,espacamento,Botões e ações devem ter espaço suficiente entre si para evitar cliques acidentais: mínimo 8px,Mínimo 8px entre botões. 16px quando ações são opostas (salvar/cancelar). Agrupar relacionados,Botões colados sem espaço e ações opostas muito próximas e botão destrutivo junto ao primário,Touch target spacing guidelines,Botões muito próximos causam cliques acidentais especialmente em mobile e especialmente em ações destrutivas.
-43,Semântica HTML antes de ARIA,medium,acessibilidade,Usar elementos HTML semânticos (button nav header) antes de recorrer a roles ARIA,button para ações e a para links e nav para navegação e dialog para modais. ARIA apenas quando HTML não basta,div com role=button e span como link e div como nav e ARIA redundante em elementos semânticos,WAI-ARIA first rule,HTML semântico tem comportamento nativo de teclado e foco. ARIA adiciona semântica mas não comportamento.
-44,Indicador de campo obrigatório,medium,forms,Campos obrigatórios devem ser marcados com asterisco e aria-required ou required nativo,Asterisco vermelho com title ou legenda explicando. required no input. aria-required quando custom,Apenas asterisco sem explicação e required sem indicação visual e todos os campos sem marcação,WCAG 3.3.2 Labels or Instructions,Sem indicador claro o usuário submete e descobre que faltou campo causando frustração e retrabalho.
-45,Grid de 4px ou 8px,medium,espacamento,Alinhar todos os elementos a um grid base de 4px (compacto) ou 8px (confortável) para ritmo visual,Todos os tamanhos múltiplos de 4: margin padding height border-radius. Escala: 4 8 12 16 20 24 32 48 64,Valores arbitrários como 13px 7px 15px e misturar bases diferentes e ignorar grid em ícones,Grid systems em design,Grid de 4/8px cria ritmo visual subconsciente que faz o layout parecer harmonioso e profissional.
-46,Autocomplete em forms comuns,medium,forms,Campos de dados pessoais devem ter autocomplete correto para preenchimento automático do browser,autocomplete=name email tel address-line1 cc-number etc. Atributo correto por tipo de dado,Autocomplete=off em campos de endereço e campos sem autocomplete em checkout e nomes incorretos,HTML autocomplete attribute spec,Autocomplete correto reduz tempo de preenchimento em 30% e reduz erros em campos como endereço.
-47,Lazy loading de imagens,medium,performance,Imagens abaixo do fold devem ter loading=lazy nativo. Imagens do LCP nunca devem ter lazy,loading=lazy em imagens below-fold. fetchpriority=high na LCP image. Sem lazy no hero,Lazy em todas as imagens incluindo hero e sem lazy em nenhuma imagem e lazy sem dimensões,Core Web Vitals LCP,Lazy loading melhora LCP mas se aplicado à hero image piora. Equilíbrio é essencial.
-48,Ação primária à direita,medium,interacao,Em pares de ações (salvar/cancelar) a ação primária deve estar à direita (padrão ocidental de leitura),Primária à direita e secundária à esquerda. Em mobile ação primária pode ser full-width embaixo,Primária à esquerda e ações sem ordem consistente e primária e secundária visualmente iguais,Platform HIG e cultural conventions,Padrão ocidental lê da esquerda para direita. Última coisa lida tem maior chance de ser clicada.
-49,Cor do link distinguível,medium,estilo,Links inline devem ser visualmente distinguíveis do texto ao redor por cor E underline ou peso,Underline + cor diferente do texto. Em hover mudar um dos dois. Links visitados com cor diferente,Link sem underline e sem diferença de cor e link que parece botão em texto inline,WCAG 1.4.1 e link identification,Sem indicador visual o usuário não sabe o que é clicável causando links perdidos e navegação confusa.
-50,Whitespace como elemento de design,medium,layout,Usar espaço vazio intencionalmente para criar respiro e agrupar e separar e hierarquizar,Espaço entre seções maior que dentro de seções. Margem proporcional à importância,Medo de espaço vazio preenchendo tudo e espaço inconsistente entre seções e conteúdo claustrofóbico,Gestalt - Lei da Proximidade,Whitespace não é espaço desperdiçado. É elemento ativo que organiza e comunica hierarquia.
-51,Input com máscara quando aplicável,medium,forms,Campos com formato esperado devem ter máscara visual: telefone CPF cartão data,Máscara que formata ao digitar. Permitir colar sem máscara. Aceitar variações de formato,Máscara que atrapalha digitação e máscara sem aceitar colagem e formato rígido que rejeita válidos,Form UX patterns,Máscaras reduzem erros de formato e comunicam visualmente o formato esperado.
-52,Border-radius consistente,medium,estilo,Usar escala de border-radius consistente: small (4px) medium (8px) large (16px) full (9999px),Escala definida em tokens. Cards e modals com mesmo radius. Botões menores com radius menor,Radius arbitrários misturados e botão com 8px ao lado de card com 12px e radius que corta conteúdo,Design tokens best practices,Radius inconsistente cria sensação de que componentes são de sistemas diferentes.
-53,Feedback visual em drag and drop,medium,interacao,Operações de drag-and-drop devem ter indicadores claros: zona de drop e posição e estados,Highlight da drop-zone ao arrastar. Indicador de posição. Ghost do item. Ação de fallback para teclado,Drag sem indicação de drop válido e sem ghost do item e sem alternativa de teclado,WAI-ARIA drag-and-drop,Sem feedback visual o usuário não sabe onde pode soltar. Sem alternativa de teclado exclui usuários.
-54,Notificação com ação de desfazer,medium,interacao,Ações destrutivas reversíveis devem oferecer toast com opção de desfazer por 5-8 segundos,Toast com botão "Desfazer" e countdown visual. Executar ação apenas após timeout sem undo,Deletar imediatamente sem opção de undo e undo difícil de encontrar e toast que some em 2s,Gmail undo pattern,Undo é mais eficiente que confirmação prévia. Reduz fricção mantendo segurança contra erros.
-55,Aria-label em ícones interativos,medium,acessibilidade,Botões com apenas ícone devem ter aria-label descritivo da ação não do ícone,aria-label="Fechar" não aria-label="X". aria-label="Buscar" não aria-label="Lupa",Ícone sem aria-label e aria-label descrevendo o ícone e não a ação e title em vez de aria-label,WCAG 1.1.1 e 4.1.2,Screen readers anunciam "botão" sem contexto. aria-label="X" diz nada. aria-label="Fechar" comunica a ação.
-56,Performance de fontes,low,performance,Carregar fontes com font-display: swap e preload das fontes críticas e subsets para idiomas,font-display: swap. Preload com crossorigin. Subset para latin ou latin-ext. Woff2 prioritário,Flash de texto invisível FOIT e carregar todos os pesos e font-display: block,Core Web Vitals CLS e FCP,Fontes bloqueiam renderização. font-display:swap mostra texto imediatamente e troca quando a fonte carrega.
-57,Consistência de ícones,low,estilo,Usar família de ícones consistente em estilo e peso e tamanho. Nunca misturar estilos,Mesma família de ícones em toda app. Peso do ícone compatível com peso do texto adjacente,Misturar ícones outline com filled e ícones de famílias diferentes e ícones pixelados em telas retina,Iconography guidelines,Ícones inconsistentes criam ruído visual e parecem que vieram de projetos diferentes.
-58,Separação visual de seções,low,layout,Seções de conteúdo devem ser visualmente separadas por espaço ou cor de fundo ou divider sutil,Alternar cor de fundo entre seções ou usar espaço generoso de 64-96px ou divider de 1px,Seções sem separação clara e muitos dividers pesados e zebra striping em seções de página,Layout design patterns,Sem separação clara o conteúdo vira um bloco monolítico e o usuário não consegue escanear.
-59,Transição de 150-300ms para UI,low,animacao,Transições de UI devem ser entre 150-300ms. Abaixo é imperceptível e acima atrasa o fluxo,150ms para hover e toggles. 200ms para expand/collapse. 300ms para modais. 0ms para cores,Transições de 500ms+ para hover e transição de 0ms que parece abrupta e durações inconsistentes,Material Design motion duration,Pesquisa mostra que 200ms é o sweet spot. Abaixo o olho não registra e acima o cérebro detecta atraso.
-60,Ordem visual mobile-first,low,layout,Definir ordem visual pensando primeiro em mobile e expandindo para desktop em vez do contrário,Empilhar em mobile e distribuir em colunas no desktop. Menu hamburger em mobile e expandido em desktop,Esconder funcionalidade em mobile e layout desktop shrinkado em mobile e scroll horizontal em mobile,Responsive design methodology,Mobile-first garante que funcionalidade essencial está acessível. Desktop-first frequentemente resulta em mobile quebrado.

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

@@ -1,335 +0,0 @@
-# Acessibilidade — Guia Prático WCAG AA
-
-## Por que acessibilidade importa
-
-Acessibilidade não é feature opcional — é requisito. ~15% da população mundial tem alguma deficiência. Além disso, boa acessibilidade melhora a experiência para todos: uso com uma mão, ao sol, em movimento, com áudio desligado. É também requisito legal em muitos países.
-
----
-
-## Contraste de Cores
-
-### Ratios mínimos (WCAG AA)
-
-| Tipo de conteúdo | Ratio mínimo | Exemplo |
-|---|---|---|
-| Texto normal (< 18px / < 14px bold) | 4.5:1 | Cinza #6b7280 sobre branco = 4.6:1 ✓ |
-| Texto grande (≥ 18px / ≥ 14px bold) | 3:1 | Cinza #9ca3af sobre branco = 2.9:1 ✗ |
-| Componentes UI e gráficos | 3:1 | Bordas, ícones, focus rings |
-| Texto decorativo/logos | Sem requisito | — |
-
-### Como calcular
-
-A fórmula usa luminância relativa: `(L1 + 0.05) / (L2 + 0.05)` onde L1 é o mais claro.
-
-Na prática, usar ferramentas:
-- DevTools do Chrome: inspecionar elemento → cor → mostra ratio
-- WebAIM Contrast Checker: webaim.org/resources/contrastchecker
-- Figma: plugin Stark ou A11y - Color Contrast Checker
-
-### Armadilhas comuns
-
-- **Placeholder text**: geralmente cinza claro (~#9ca3af) que falha no contraste. Se placeholder carrega informação, precisa de 4.5:1
-- **Texto sobre imagem**: sem fundo/overlay, contraste varia. Solução: overlay escuro semi-transparente ou text-shadow
-- **Texto sobre gradiente**: testar no ponto de menor contraste do gradiente
-- **Disabled states**: isentos de contraste mínimo, mas devem ser reconhecíveis como desabilitados
-- **Cores de marca**: se a cor de marca não tem contraste suficiente, usar tom mais escuro/claro para texto
-
-### Pares seguros testados
-
-Para fundo branco (#ffffff):
-- Texto principal: #111827 (ratio 15.4:1) ou #1f2937 (12.6:1)
-- Texto secundário: #4b5563 (7.0:1) ou #6b7280 (4.6:1)
-- Limite aceitável: #6b7280 é o cinza mais claro que passa em 4.5:1
-- Links: #2563eb (4.6:1) passa, #3b82f6 (3.6:1) NÃO passa
-
-Para fundo escuro (#0f0f0f):
-- Texto principal: #f9fafb (18.2:1)
-- Texto secundário: #9ca3af (6.8:1)
-- Links: #60a5fa (6.1:1)
-
----
-
-## Focus Management
-
-### Especificação do focus ring
-
-```css
-/* Focus ring padrão recomendado */
-:focus-visible {
-  outline: 2px solid var(--border-focus);     /* cor: azul ou cor de marca */
-  outline-offset: 2px;                         /* espaço entre elemento e ring */
-  border-radius: inherit;                      /* acompanhar shape do elemento */
-}
-
-/* Nunca remover outline sem substituto */
-/* ✗ ERRADO */
-:focus { outline: none; }
-
-/* ✓ CERTO — substituir, não remover */
-:focus { outline: none; }
-:focus-visible {
-  outline: 2px solid #2563eb;
-  outline-offset: 2px;
-}
-```
-
-### Tab order
-
-- Ordem visual = ordem do DOM = ordem de tab. Se divergem, reorganizar o DOM
-- Nunca usar `tabindex > 0` (bagunça a ordem)
-- `tabindex="0"`: torna focável na ordem natural (usar em custom elements)
-- `tabindex="-1"`: focável por JS mas não por Tab (útil para focus management programático)
-
-### Focus trap para modais
-
-Quando modal abre:
-1. Registrar o elemento que tinha focus antes
-2. Mover focus para o primeiro elemento interativo do modal (ou o close button)
-3. Tab/Shift+Tab devem ciclar apenas dentro do modal
-4. Ao fechar, restaurar focus para o elemento que abriu o modal
-
-Implementação moderna: `<dialog>` nativo faz focus trap automaticamente. Alternativa: atributo `inert` no conteúdo por trás.
-
-```html
-<!-- Moderno: usar dialog nativo -->
-<dialog id="my-modal">
-  <button autofocus>Fechar</button>
-  <!-- conteúdo -->
-</dialog>
-
-<!-- Alternativa: inert no resto -->
-<main inert><!-- conteúdo principal --></main>
-<div role="dialog" aria-modal="true"><!-- modal --></div>
-```
-
-### focus vs focus-visible
-
-- `:focus` — ativado em TODO tipo de focus (click, tab, JS)
-- `:focus-visible` — ativado apenas quando o browser determina que o focus deve ser visível (geralmente Tab)
-- Usar `:focus-visible` para estilos visuais, `:focus` para lógica de JS quando necessário
-
----
-
-## Screen Readers
-
-### ARIA roles essenciais
-
-| Role | Quando usar | Exemplo |
-|---|---|---|
-| `button` | Elemento não-button que age como botão | `<div role="button" tabindex="0">` |
-| `dialog` | Modal/dialog customizado | `<div role="dialog" aria-modal="true">` |
-| `alert` | Mensagem urgente (erro, aviso) | `<div role="alert">Erro ao salvar</div>` |
-| `status` | Atualização não-urgente | `<div role="status">3 resultados</div>` |
-| `navigation` | Container de navegação | `<nav>` (implícito) ou `<div role="navigation">` |
-| `search` | Área de busca | `<form role="search">` |
-| `tab`, `tablist`, `tabpanel` | Interface de tabs | Componente de tabs customizado |
-| `complementary` | Conteúdo complementar | `<aside>` (implícito) |
-| `list`, `listitem` | Lista customizada | Quando não usar `<ul>/<li>` |
-
-**Regra de ouro**: preferir HTML semântico. `<button>` é melhor que `<div role="button">`. ARIA é último recurso quando HTML nativo não é suficiente.
-
-### aria-label vs aria-labelledby
-
-- `aria-label`: texto que substitui o label visível. Usar quando NÃO há texto visível (icon button)
-- `aria-labelledby`: aponta para o ID de outro elemento cujo texto é o label. Usar quando o label já existe na tela
-- `aria-describedby`: informação adicional (helper text, error message). Não substitui label
-
-```html
-<!-- aria-label: sem texto visível -->
-<button aria-label="Fechar modal">
-  <svg><!-- ícone X --></svg>
-</button>
-
-<!-- aria-labelledby: label existe na tela -->
-<h2 id="modal-title">Confirmar exclusão</h2>
-<div role="dialog" aria-labelledby="modal-title">...</div>
-
-<!-- aria-describedby: info adicional -->
-<label for="email">Email</label>
-<input id="email" aria-describedby="email-help email-error" />
-<span id="email-help">Usaremos para enviar a confirmação</span>
-<span id="email-error" role="alert">Formato de email inválido</span>
-```
-
-### Regiões ao vivo (aria-live)
-
-Para conteúdo que muda dinamicamente sem interação direta do usuário:
-
-- `aria-live="polite"`: anuncia quando screen reader estiver ocioso (atualizações de status, contadores)
-- `aria-live="assertive"`: interrompe para anunciar imediatamente (erros, alertas críticos)
-- `role="alert"` = `aria-live="assertive"` (atalho)
-- `role="status"` = `aria-live="polite"` (atalho)
-
-O elemento com `aria-live` deve existir no DOM ANTES do conteúdo mudar. Inserir o texto dentro dele, não inserir o elemento inteiro.
-
-### Semântica HTML
-
-Usar o elemento HTML correto resolve 80% da acessibilidade:
-
-| Em vez de... | Usar... | Por quê |
-|---|---|---|
-| `<div onclick>` | `<button>` | Keyboard, role, focus automáticos |
-| `<div class="heading">` | `<h1>` a `<h6>` | Navegação por headings |
-| `<div class="list">` | `<ul>/<ol>` | Anuncia "lista, 5 itens" |
-| `<div class="nav">` | `<nav>` | Landmark navigation |
-| `<span class="link">` | `<a href>` | Keyboard, right-click, middle-click |
-| `<div class="input">` | `<input>` | Focus, autocomplete, validação |
-
----
-
-## Navegação por Teclado
-
-### Padrões de interação
-
-| Tecla | Ação |
-|---|---|
-| `Tab` | Avançar para próximo elemento focável |
-| `Shift + Tab` | Voltar para elemento focável anterior |
-| `Enter` | Ativar links e botões |
-| `Space` | Ativar botões, toggles, checkboxes |
-| `Escape` | Fechar modal, dropdown, popup, tooltip |
-| `Arrow Up/Down` | Navegar dentro de select, menu, listbox |
-| `Arrow Left/Right` | Navegar entre tabs, radio buttons |
-| `Home / End` | Primeiro / último item em lista, menu |
-
-### Skip links
-
-Primeiro elemento focável da página. Invisível até receber focus. Leva para `#main-content`.
-
-```html
-<body>
-  <a href="#main-content" class="skip-link">Pular para o conteúdo</a>
-  <nav><!-- navegação --></nav>
-  <main id="main-content" tabindex="-1">
-    <!-- conteúdo principal -->
-  </main>
-</body>
-```
-
-```css
-.skip-link {
-  position: absolute;
-  left: -9999px;
-  top: auto;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-}
-.skip-link:focus {
-  position: fixed;
-  top: 8px;
-  left: 8px;
-  width: auto;
-  height: auto;
-  padding: 8px 16px;
-  background: var(--surface-primary);
-  color: var(--text-primary);
-  z-index: 9999;
-  border: 2px solid var(--border-focus);
-  border-radius: 4px;
-}
-```
-
----
-
-## Reduced Motion
-
-### Como implementar
-
-```css
-/* Animações padrão */
-.element {
-  transition: transform 250ms ease, opacity 200ms ease;
-}
-
-/* Fallback para reduced motion */
-@media (prefers-reduced-motion: reduce) {
-  .element {
-    transition: opacity 100ms ease; /* manter fade, remover movimento */
-  }
-
-  /* Ou reset global */
-  *, *::before, *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
-}
-```
-
-### O que simplificar vs remover
-
-| Manter (simplificado) | Remover completamente |
-|---|---|
-| Fade in/out (encurtar para 100ms) | Parallax scrolling |
-| Mudança de cor | Slide-in de longe |
-| Scale sutil (0.98→1) | Bounce, shake, wobble |
-| Opacity transitions | Auto-play de animações longas |
-| — | Background animations |
-| — | Scroll-triggered animations |
-
----
-
-## Dark Mode e Acessibilidade
-
-- Testar contraste WCAG AA separadamente para dark mode — não assumir que light funciona = dark funciona
-- Cores que passam em light frequentemente falham em dark e vice-versa
-- Fundo escuro: nunca #000000 (glow effect cansa os olhos). Usar #0a0a0a a #1a1a1a
-- Texto em dark: nunca #ffffff puro. Usar #f0f0f0 a #fafafa
-- Cores saturadas em fundo escuro: reduzir saturação 10-20%, aumentar lightness
-- Sombras: praticamente invisíveis em dark. Substituir por bordas sutis (1px branco 8-12%)
-- Imagens: podem precisar de ajuste de brilho ou overlay sutil para não "brilhar" demais
-
----
-
-## Forms Acessíveis
-
-- Cada input TEM que ter um `<label>` (visível ou `sr-only`, nunca ausente)
-- Grupos de inputs relacionados: `<fieldset>` + `<legend>` (ex: endereço, dados pessoais)
-- Mensagens de erro: `aria-describedby` no input + `role="alert"` na mensagem
-- Required: atributo `required` no input + indicador visual (asterisco na label)
-- Autocomplete: atributo `autocomplete` com valor correto (name, email, tel, street-address, etc.)
-- Não desabilitar paste — especialmente em campos de senha e email de confirmação
-- Ordem de tab: seguir ordem visual de leitura (cima para baixo, esquerda para direita)
-
----
-
-## Imagens e Mídia
-
-### Alt text
-
-| Tipo de imagem | Alt text | Exemplo |
-|---|---|---|
-| Informativa | Descrever a informação transmitida | `alt="Gráfico mostrando aumento de 40% em vendas no Q3"` |
-| Decorativa | String vazia | `alt=""` (não omitir o atributo) |
-| Link/Botão | Descrever o destino/ação | `alt="Ir para página inicial"` |
-| Texto em imagem | Transcrever o texto | `alt="Promoção: 50% de desconto até sexta"` |
-| Complexa (infográfico) | Resumo + link para descrição longa | `alt="Infográfico sobre ciclo da água. Descrição completa abaixo."` |
-
-Regra: se a imagem sumisse, o que o usuário perderia? Se nada → decorativa. Se informação → descrever.
-
-### Vídeo e áudio
-- Vídeo: legendas (captions) obrigatórias para diálogo. Audiodescrição para conteúdo visual significativo
-- Áudio: transcrição textual disponível
-- Auto-play: nunca com áudio. Com vídeo, apenas se muted + controles visíveis
-
----
-
-## Checklist Rápido — 15 Verificações
-
-1. [ ] Contraste de texto ≥ 4.5:1 (normal) e ≥ 3:1 (grande) — light E dark mode
-2. [ ] Todo elemento interativo tem focus-visible ring (2px+, cor contrastante)
-3. [ ] Tab order segue ordem visual de leitura
-4. [ ] Todo input tem label visível conectada via for/id
-5. [ ] Imagens informativas têm alt descritivo, decorativas têm alt=""
-6. [ ] Botões de ícone têm aria-label descritivo
-7. [ ] Uma e apenas uma h1 por página, headings em ordem sequencial
-8. [ ] Cor nunca é o único indicador (sempre combinar com texto/ícone)
-9. [ ] Formulários mostram erros com texto + posição próxima ao campo + aria-invalid
-10. [ ] Modais têm focus trap, Escape fecha, focus retorna ao trigger
-11. [ ] Skip link existe e funciona (testar com Tab na página)
-12. [ ] prefers-reduced-motion é respeitada (animações reduzidas/desabilitadas)
-13. [ ] Autocomplete com valores corretos em inputs de dados pessoais
-14. [ ] ARIA roles usados apenas quando HTML semântico não é suficiente
-15. [ ] Fluxo completo navegável apenas com teclado (Tab, Enter, Space, Escape)