@lugom.io/hefesto 0.3.0 → 1.0.0

package/skills/hefesto-design/data/anti-patterns.csv

@@ -1,41 +0,0 @@
-id,name,category,severity,description,why_bad,alternative,detect_pattern
-1,Placeholder como label,forms,critical,Usar placeholder como único indicador do campo sem label visível,Placeholder desaparece ao digitar deixando o usuário sem saber o que preencheu. Screen readers podem não ler placeholder,Sempre usar label visível com for/id. Placeholder apenas como exemplo de formato,"placeholder=[\"'][^\"']+[\"'](?![\s\S]*<label[\s>])"
-2,Div como botão,acessibilidade,critical,Usar div ou span com onClick em vez de elemento button nativo,Div não é focável por teclado e não tem role de button e não responde a Enter/Space nativamente,Usar elemento button nativo. Se impossível adicionar role=button tabindex=0 e handler de Enter/Space,"<div[^>]*onClick|<span[^>]*onClick|<div[^>]*@click"
-3,Outline none sem substituto,acessibilidade,critical,Remover outline de foco com CSS sem oferecer indicador visual alternativo,Usuários de teclado ficam completamente cegos sobre qual elemento está focado,Customizar outline com cor e offset ou usar box-shadow como substituto,"outline:\s*none|outline:\s*0[^.]"
-4,Texto sobre imagem sem overlay,tipografia,critical,Colocar texto diretamente sobre imagem sem overlay ou sombra garantindo contraste,Contraste varia conforme a imagem. Partes da imagem podem tornar texto ilegível,Usar overlay escuro semi-transparente ou text-shadow ou background no texto,""
-5,Autoplay de vídeo com som,interacao,critical,Vídeo com autoplay que inicia com som ligado sem interação do usuário,Intrusivo e agressivo. Browsers bloqueiam. Pode causar constrangimento em público,Autoplay apenas muted com controles visíveis. Som apenas após interação do usuário,"autoplay(?!.*muted)"
-6,Cor como único indicador,acessibilidade,critical,Usar cor como única forma de transmitir informação (erro em vermelho sem ícone ou texto),8% dos homens têm daltonismo. Cor sozinha é invisível para eles. Fail WCAG 1.4.1,Combinar cor com ícone e texto e padrão. Nunca depender apenas de matiz,""
-7,Z-index 9999,layout,high,Usar z-index com valores absurdos como 9999 ou 999999 para forçar sobreposição,Cria guerra de z-index impossível de manter. Novos componentes precisam de valores ainda maiores,Criar escala semântica de z-index com tokens: base dropdown sticky modal popover toast,"z-index:\s*(\d{4,})"
-8,Text-align justify,tipografia,high,Usar text-align: justify em textos web sem hifenização,Cria rios de espaço em branco irregulares entre palavras. Piora com fontes grandes ou colunas estreitas,Usar text-align: left (start) que é mais legível na web. Se justify adicionar hyphens: auto,"text-align:\s*justify"
-9,Font-size em px fixo,tipografia,high,Usar font-size com valores fixos em px que não escalam com preferências do usuário,Ignora configurações de acessibilidade do browser. Usuários com baixa visão não conseguem aumentar,Usar rem para font-size. em para media queries. Permitir zoom de 200% sem quebrar layout,"font-size:\s*\d+px"
-10,Animação sem reduced-motion,animacao,high,Animações CSS ou JS que não respeitam prefers-reduced-motion do sistema operacional,Pode causar enjoo e dor de cabeça e até convulsões em pessoas com distúrbios vestibulares,Usar @media (prefers-reduced-motion: reduce) para simplificar ou remover animações,"@keyframes(?![\s\S]*prefers-reduced-motion)"
-11,Imagem sem dimensões,performance,high,Tag img sem width e height explícitos causando layout shift durante carregamento,Causa CLS (Cumulative Layout Shift) que é a experiência mais frustrante em mobile,Sempre definir width e height no HTML e usar aspect-ratio no CSS,"<img(?![^>]*width)[^>]*>"
-12,Input sem autocomplete,forms,high,Campos de dados pessoais sem atributo autocomplete impedindo preenchimento automático,Força digitação manual de dados que o browser já conhece. Aumenta tempo e erros em checkout,Adicionar autocomplete correto: name email tel address-line1 cc-number etc,"<input[^>]*type=\"(text|email|tel)\"(?![^>]*autocomplete)[^>]*>"
-13,Link sem href ou com href=#,interacao,high,Usar tag a sem href ou com href="#" para ações JavaScript,Link sem href não é focável. href="#" causa scroll para o topo. Semântica incorreta,Usar button para ações JavaScript. Link apenas para navegação com URL válida,"<a[^>]*href=\"#\"[^>]*>|<a(?![^>]*href)[^>]*>"
-14,Scroll horizontal surpresa,layout,high,Conteúdo que causa scroll horizontal inesperado em mobile por overflow não controlado,Usuário perde conteúdo e fica desorientado. Scroll horizontal é inesperado na maioria dos contextos,Usar overflow-x: hidden ou overflow-wrap: break-word. Testar em 320px. Usar max-width: 100%,""
-15,Modal sobre modal,interacao,high,Abrir um modal por cima de outro modal criando stack de overlays,Confunde o usuário sobre contexto. Dificulta navegação por teclado. Focus trap conflitante,Fechar modal atual antes de abrir outro ou usar drawer/panel lateral para segundo nível,""
-16,Texto cinza claro sobre branco,cores,high,Usar cinza claro (#999 ou mais claro) como cor de texto sobre fundo branco ou claro,Fail de contraste WCAG. Texto praticamente invisível para baixa visão e em telas com brilho,Usar no mínimo #595959 sobre branco para 4.5:1 de contraste no body text,"color:\s*#(9[0-9a-f]{2}|[a-f][0-9a-f]{2}|ccc|ddd|eee|bbb|aaa)"
-17,Carousel automático,interacao,high,Carousel que avança automaticamente sem controle de pausa do usuário,Usuário não consegue ler. Conteúdo muda antes de terminar. Animação constante causa distração,Carousel manual com botões prev/next. Se automático ter botão de pause e parar em hover,""
-18,Botão sem tipo explícito,forms,medium,Tag button dentro de form sem type explícito fazendo submit acidental,Button sem type dentro de form default para type=submit. Click acidental submete o formulário,Sempre definir type=button ou type=submit explicitamente,"<button(?![^>]*type)[^>]*>"
-19,Lorem ipsum em produção,copywriting,medium,Texto placeholder Lorem Ipsum esquecido em ambiente de produção,Demonstra falta de atenção e profissionalismo. Confunde usuários. Prejudica SEO,Usar conteúdo real desde o início do desenvolvimento. Criar microcopy genuíno,"[Ll]orem\s+[Ii]psum"
-20,Click here como texto de link,copywriting,medium,Usar "clique aqui" ou "saiba mais" como texto de link sem contexto descritivo,Screen readers listam links fora do contexto. "clique aqui" não diz nada sobre o destino,Usar texto descritivo do destino: "ver documentação da API" em vez de "clique aqui","[Cc]lique\s+aqui|[Cc]lick\s+here|[Ss]aiba\s+mais</a>"
-21,Important em CSS,estilo,medium,Uso excessivo de !important para resolver conflitos de especificidade no CSS,Cria cascata impossível de manter. Cada override precisa de outro !important,Resolver especificidade com seletores corretos ou CSS Layers ou refatorar arquitetura,"!important"
-22,Opacidade como disabled,interacao,medium,Usar apenas opacity para indicar estado disabled sem impedir interação,Elemento ainda clicável. Opacity baixa pode ser confundida com loading. Sem cursor adequado,Combinar opacity com pointer-events:none e cursor:not-allowed e aria-disabled=true,"opacity:\s*0\.[3-5](?![\s\S]*pointer-events)"
-23,Imagem como texto,acessibilidade,medium,Renderizar texto como imagem em vez de usar texto real com CSS,Texto em imagem não é selecionável nem traduzível nem acessível nem responsivo,Usar texto HTML com CSS para estilização. SVG apenas para logos. Texto real sempre,""
-24,Select para menos de 5 opções,forms,medium,Usar dropdown select para lista com menos de 5 opções escondendo todas as alternativas,Esconde opções que caberiam na tela. Requer click extra para ver. Mais lento que radio buttons,Usar radio buttons para 2-5 opções visíveis. Select apenas para 5+ opções,""
-25,Notificação sem ação,interacao,medium,Toast ou notificação que informa sobre algo sem oferecer ação relevante,Interrompe sem utilidade. Usuário lê e não pode fazer nada. Apenas ruído visual,Incluir ação contextual: link para o item e botão de desfazer e opção de ver detalhes,""
-26,Tabela não-responsiva,layout,medium,Tabela HTML que não se adapta a telas pequenas causando overflow horizontal,Conteúdo fica cortado ou requer scroll horizontal em mobile. Dados ficam inacessíveis,Scroll horizontal com indicador ou card-stack em mobile ou hide de colunas não-essenciais,""
-27,Tooltip em mobile,interacao,medium,Depender de tooltip (hover) para informação em dispositivos touch que não têm hover,Touch não tem hover. Tooltip fica inacessível. Informação essencial fica escondida,Usar inline text ou expandable section em mobile. Tooltip apenas como enhancement em desktop,""
-28,Background-image com texto,acessibilidade,medium,Texto importante sobre background-image CSS sem garantir contraste em todas as áreas,Contraste varia conforme a imagem. Responsividade muda a área visível. Impossível garantir legibilidade,Usar overlay com opacity ou gradient overlay ou text com background-color semi-transparente,""
-29,Formulário sem error summary,forms,medium,Formulário que mostra erros apenas inline sem resumo no topo ao submeter,Usuário com muitos erros precisa fazer scroll para encontrar todos. Screen readers perdem erros fora do viewport,Adicionar resumo de erros no topo do form com links para cada campo com erro. Foco no resumo,""
-30,Infinite scroll sem fallback,interacao,medium,Infinite scroll como única forma de navegar conteúdo sem paginação ou load more como fallback,Footer fica inacessível. Não é possível compartilhar posição. Foco se perde para screen readers,Oferecer opção de paginação ou load more button. Preservar posição no histórico do browser,""
-31,Texto todo em maiúsculas longo,tipografia,medium,Blocos de texto inteiros em text-transform uppercase dificultando leitura,Maiúsculas eliminam ascendentes/descendentes que ajudam reconhecimento de palavras. Leitura 10% mais lenta,Uppercase apenas para labels curtos e badges e botões. Nunca para parágrafos ou frases longas,"text-transform:\s*uppercase"
-32,Contraste insuficiente em dark mode,cores,medium,Dark mode com textos cinza sobre fundo escuro sem manter o contraste mínimo de 4.5:1,Mesmo fail de contraste que em light mode. Dark mode não é desculpa para texto ilegível,Manter 4.5:1 mínimo em dark mode. Testar com ferramentas de contraste. Texto mínimo #A0A0A0 sobre #121212,""
-33,Link abrindo nova aba sem aviso,interacao,medium,Link com target=_blank sem indicação visual ou textual de que abrirá nova aba,Usuário perde contexto. Botão voltar não funciona. Desorientador para screen reader users,Indicar com ícone de external link e aria-label incluindo "abre em nova aba". Usar rel=noopener,"target=\"_blank\"(?![^>]*rel=\"noopener)"
-34,Padding zero em botão,espacamento,medium,Botão com padding mínimo ou zero tornando o target de clique muito pequeno,Touch target menor que 44px. Difícil de clicar em mobile. Parece apertado e não-profissional,Mínimo padding de 12px horizontal e 8px vertical. Touch target de 44x44px em mobile,"padding:\s*0[^.]"
-35,Animação em loop infinito,animacao,medium,Animação decorativa que roda em loop infinito sem controle do usuário,Distrai constantemente. Consome bateria. Pode causar desconforto em usuários sensíveis,Animação finita ou com controle de pause. Respeitar prefers-reduced-motion,""
-36,Cores vibrantes em texto longo,cores,medium,Usar cores saturadas vibrantes como vermelho ou azul brilhante para parágrafos de texto,Cores vibrantes causam fadiga visual em leitura prolongada. Difícil de ler por mais de 30 segundos,Cores vibrantes apenas para destaques e links e badges. Body text em cinza escuro ou preto suave,""
-37,Form sem indicação de progresso,forms,medium,Formulário multi-step sem indicador de progresso ou número total de etapas,Usuário não sabe quanto falta. Pode abandonar achando que o form é infinito,Stepper ou progress bar com etapa atual/total. Indicar etapa no título da seção,""
-38,Espaçamento não-múltiplo de 4,espacamento,medium,Usar valores de espaçamento arbitrários que não seguem grid de 4px ou 8px,Layout parece desalinhado subconscientemente. Inconsistência visual entre componentes,Definir escala baseada em 4px: 4 8 12 16 20 24 32 40 48 64 80 96,"margin:\s*\d*[13579]px|padding:\s*\d*[13579]px"
-39,Título genérico de página,copywriting,medium,Título de página genérico como "Home" ou "Dashboard" sem contexto específico,Screen readers anunciam título ao entrar na página. Título genérico não ajuda navegação. Piora SEO,Título descritivo e único: "Relatório de Vendas - Janeiro 2025 | NomeApp","<title>(Home|Dashboard|Page|Página|Untitled)</title>"
-40,Vários font-families misturados,tipografia,medium,Usar mais de 3 famílias tipográficas diferentes na mesma interface,Cria ruído visual e falta de coesão. Cada fonte adicional é peso de download. Inconsistência,Máximo 2-3 fontes: display heading e body e mono para código. Hierarquia por peso e tamanho,""

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

@@ -1,26 +0,0 @@
-id,name,category,best_for,data_type,max_items,a11y_notes,animation,alternatives,description
-bar-chart,Bar Chart,comparison,Comparar valores entre categorias discretas,categorical,12,Usar aria-label por barra; pattern fills para daltonismo,bars growing from axis 300ms staggered,horizontal-bar;dot-plot,Barras verticais para comparação. Ideal até 12 categorias.
-line-chart,Line Chart,trend,Mostrar tendência ao longo do tempo,time-series,50,Markers nos pontos; não depender só de cor,path draw 500ms,area-chart;sparkline,Linhas para séries temporais. Ideal para 1-5 séries.
-area-chart,Area Chart,trend,Mostrar volume ao longo do tempo,time-series,30,Texturas ou opacidade distintas por área,fill from bottom 400ms,line-chart;stacked-bar,Área preenchida sob linhas. Bom para mostrar magnitude.
-scatter-plot,Scatter Plot,relationship,Mostrar correlação entre variáveis,continuous,200,Tamanho mínimo 8px por ponto; tooltips,dots appear staggered 200ms,bubble-chart,Pontos dispersos para correlação. Bom com muitos dados.
-pie-chart,Pie Chart,composition,Mostrar proporção do todo,categorical,6,Usar labels diretos; evitar legendas separadas,segments rotate in 500ms,donut;stacked-bar,Fatias de proporção. MAX 6 fatias; mais que isso usar bar chart.
-donut-chart,Donut Chart,composition,Proporção com espaço central para KPI,categorical,6,Mesmo que pie; centro para valor total,ring draw 600ms,pie;treemap,Donut com métrica central. Mesmo limite de 6 fatias.
-treemap,Treemap,composition,Hierarquia com proporção de área,hierarchical,30,Texto legível em cada bloco; cores por categoria,blocks appear 300ms,sunburst;stacked-bar,Retângulos proporcionais aninhados. Bom para hierarquias.
-heatmap,Heatmap,distribution,Padrões de intensidade em duas dimensões,matrix,500,Escala de cor com rótulos; não depender só de cor,cells fade in 200ms staggered,choropleth,Matriz de cores por intensidade. Bom para padrões temporais.
-radar-chart,Radar Chart,comparison,Comparar perfil multivariado,categorical,8,Labels em cada eixo; valores numéricos visíveis,lines draw from center 400ms,parallel-coordinates;bar,Polígono de múltiplas dimensões. Max 8 eixos.
-sankey-diagram,Sankey Diagram,flow,Mostrar fluxo entre estágios,flow,20,Cores distintas por fonte; labels em cada nó,flows animate left-to-right 600ms,funnel;alluvial,Fluxos proporcionais entre nós. Bom para conversão.
-funnel-chart,Funnel Chart,flow,Mostrar taxa de conversão por estágio,sequential,8,Labels com valor e percentual em cada etapa,segments shrink 400ms,bar;sankey,Funil de conversão. Cada estágio mostra perda.
-gauge-chart,Gauge Chart,progress,Mostrar valor atual vs meta,single-value,1,Valor numérico sempre visível; cores semânticas,needle animate 500ms,progress-ring;kpi-card,Medidor circular de progresso. Um valor por gauge.
-candlestick,Candlestick,trend,Mostrar OHLC (open/high/low/close),financial,60,Cores para alta/baixa; tooltip com 4 valores,candles grow 200ms,bar,Candlestick para dados financeiros. Requer 4 valores por ponto.
-waterfall,Waterfall,comparison,Mostrar contribuição incremental ao total,sequential,15,Cores para positivo/negativo/total; labels de valor,bars cascade 300ms,stacked-bar,Cascata de incrementos. Bom para P&L e budgets.
-bubble-chart,Bubble Chart,relationship,3 variáveis: x; y e tamanho,continuous,50,Tamanho mínimo legível; legend de escala,bubbles scale in 300ms,scatter,Scatter com terceira dimensão via tamanho.
-histogram,Histogram,distribution,Mostrar distribuição de frequência,continuous,30,Eixo Y = frequência; bins claramente definidos,bars grow 300ms,density-plot;box-plot,Barras de frequência para distribuição contínua.
-box-plot,Box Plot,distribution,Mostrar distribuição estatística (quartis),statistical,10,Labels para mediana e quartis; outliers marcados,draw from median 400ms,violin;histogram,Caixa de quartis com whiskers. Para comparar distribuições.
-parallel-coordinates,Parallel Coordinates,relationship,Comparar itens em múltiplas dimensões,multivariate,50,Highlight on hover; eixos com labels claros,lines draw 300ms,radar;table,Linhas paralelas para análise multidimensional.
-chord-diagram,Chord Diagram,relationship,Mostrar conexões entre entidades,relational,15,Arcos com cores distintas; tooltip para valores,arcs draw 500ms,network;sankey,Arcos circulares de relação. Bom para fluxo bidirecional.
-sunburst,Sunburst,composition,Hierarquia radial com drill-down,hierarchical,50,Navegação click-to-zoom; breadcrumb de contexto,rings expand from center 400ms,treemap;nested-donut,Anéis concêntricos hierárquicos. Bom para drill-down.
-network-graph,Network Graph,relationship,Mostrar conexões entre nós,graph,100,Nós com labels; zoom e pan; tooltip nos edges,force simulation animate,chord;matrix,Grafos de nós e arestas. Para relações complexas.
-timeline,Timeline,trend,Mostrar eventos no tempo,temporal,50,Navegação por teclado; zoom temporal; markers acessíveis,events appear staggered 100ms,gantt;calendar,Linha temporal de eventos. Horizontal ou vertical.
-sparkline,Sparkline,trend,Indicar tendência inline sem eixos,time-series,30,aria-label com tendência (subindo/descendo),line draw 200ms,line-chart;trend-arrow,Mini gráfico de tendência sem eixos. Embedding em tabelas/cards.
-progress-ring,Progress Ring,progress,Mostrar progresso circular de uma métrica,percentage,1,Valor numérico no centro; cor semântica,ring fill clockwise 500ms,gauge;progress-bar,Anel de progresso. Valor 0-100%.
-data-table,Data Table,comparison,Mostrar dados tabulares com sort e filter,any,1000,Cabeçalhos th; scope; sortable anunciado; zebra stripes,fade rows 100ms,list;cards,Tabela de dados com ordenação e filtros. Para datasets grandes.

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

@@ -1,108 +0,0 @@
-id,name,industry,mood,dominant,secondary,accent,on_dominant,on_secondary,on_accent,dominant_dark,secondary_dark,accent_dark,on_dominant_dark,contrast_aa,description
-1,Fintech Confiança,fintech,confiável e seguro,#1A2332,#F5F7FA,#2563EB,#FFFFFF,#1A2332,#FFFFFF,#0F1720,#1E2A3A,#3B82F6,#E2E8F0,true,Azul escuro profundo transmite segurança financeira com acento vibrante para CTAs
-2,Fintech Inovação,fintech,moderno e dinâmico,#FFFFFF,#F0F4FF,#6366F1,#111827,#1E1B4B,#070707,#111827,#1E1B4B,#818CF8,#E0E7FF,true,Base clara com índigo vibrante para fintechs que priorizam inovação
-3,Fintech Verde,fintech,crescimento e prosperidade,#0D1B2A,#1B2D45,#00C9A7,#F0F4F8,#C8D6E5,#0D1B2A,#080F18,#111D30,#00E6BE,#D4F5ED,true,Verde água sobre escuros para fintechs focadas em investimento e crescimento
-4,Fintech Minimalista,fintech,neutro e preciso,#FFFFFF,#F8F9FA,#0066FF,#212529,#495057,#FFFFFF,#121212,#1E1E1E,#4D94FF,#E8E8E8,true,Paleta neutra extrema com azul funcional para fintechs data-driven
-5,Saúde Calma,saúde,calmo e confiável,#FFFFFF,#E8F4F8,#0891B2,#1E293B,#164E63,#040B0D,#0F172A,#153040,#22D3EE,#E0F2FE,true,Ciano suave que transmite limpeza e calma clínica
-6,Saúde Acolhedora,saúde,acolhedor e humano,#FFF7ED,#FFFFFF,#059669,#431407,#1F2937,#040D0A,#1A1410,#1C2520,#34D399,#D1FAE5,true,Tons quentes com verde saúde para clínicas e consultórios humanizados
-7,Saúde Digital,saúde,tecnológico e preciso,#F0FDFA,#FFFFFF,#14B8A6,#134E4A,#374151,#050D0C,#0D1F1D,#1A2B2A,#2DD4BF,#CCFBF1,true,Teal moderno para healthtech e telemedicina
-8,Wellness Zen,saúde,sereno e natural,#FAFAF5,#F0EDE5,#8B7355,#3D3929,#5C5240,#060606,#1C1A14,#2A2720,#A68B6B,#F0EDE5,true,Tons de areia e terra para spas e centros de bem-estar
-9,E-commerce Energia,e-commerce,urgente e vibrante,#FFFFFF,#FFF1F2,#E11D48,#1F2937,#881337,#FFFFFF,#111827,#1F1215,#FB7185,#FFF1F2,true,Rosa vibrante que cria urgência e destaca promoções
-10,E-commerce Confiança,e-commerce,confiável e acessível,#FFFFFF,#F8FAFC,#F59E0B,#0F172A,#334155,#0F172A,#0F172A,#1C2333,#FBBF24,#F8FAFC,true,Amarelo âmbar quente que transmite bons negócios e acessibilidade
-11,E-commerce Premium,e-commerce,sofisticado e exclusivo,#1A1A1A,#2D2D2D,#C9A96E,#F5F5F5,#E0E0E0,#0D0B09,#0D0D0D,#1A1A1A,#D4B97A,#F5F5F5,true,Preto com dourado para marketplaces de produtos premium
-12,E-commerce Verde,e-commerce,sustentável e consciente,#FFFFFF,#F0FDF4,#16A34A,#1F2937,#166534,#050D08,#111827,#132A1B,#4ADE80,#F0FDF4,true,Verde natureza para e-commerce de produtos sustentáveis e orgânicos
-13,Educação Amigável,educação,amigável e motivador,#FFFFFF,#EFF6FF,#3B82F6,#1E293B,#1E40AF,#06090D,#111827,#172240,#60A5FA,#DBEAFE,true,Azul acessível e amigável para plataformas de ensino
-14,Educação Criativa,educação,criativo e engajante,#FFFBEB,#FEF3C7,#7C3AED,#1C1917,#5B21B6,#FFFFFF,#1A1718,#1E1630,#A78BFA,#EDE9FE,true,Roxo criativo com base quente para plataformas de aprendizado infantil
-15,Educação Institucional,educação,sério e acadêmico,#FFFFFF,#F1F5F9,#1E3A5F,#1E293B,#334155,#FFFFFF,#0F172A,#1A2744,#4B7AAF,#E2E8F0,true,Azul marinho acadêmico para universidades e cursos formais
-16,Food Apetitoso,food,apetitoso e quente,#FFFBEB,#FFF7ED,#DC2626,#451A03,#7F1D1D,#FFFFFF,#1C1510,#2A1A14,#EF4444,#FEE2E2,true,Vermelho apetitoso com base quente para restaurantes e delivery
-17,Food Saudável,food,saudável e fresco,#F0FDF4,#FFFFFF,#65A30D,#1A2E05,#365314,#090D05,#121C0A,#1E2C15,#84CC16,#ECFCCB,true,Verde lima fresco para restaurantes saudáveis e orgânicos
-18,Food Café,food,aconchegante e artesanal,#FAF5F0,#EFEBE5,#8B5E3C,#3D2B1A,#5C4033,#FFFFFF,#1F1812,#2E251D,#A67B5B,#F5EDE5,true,Marrom café com tons quentes para cafeterias e padarias artesanais
-19,Tech-SaaS Moderno,tech,moderno e eficiente,#FFFFFF,#F8FAFC,#6366F1,#0F172A,#334155,#070707,#0F172A,#1E1B4B,#818CF8,#E0E7FF,true,Índigo moderno para SaaS de produtividade e ferramentas B2B
-20,Tech-SaaS Energia,tech,energético e inovador,#0F172A,#1E293B,#8B5CF6,#F8FAFC,#CBD5E1,#09070D,#070B14,#111827,#A78BFA,#EDE9FE,true,Roxo elétrico sobre dark para ferramentas dev e plataformas técnicas
-21,Tech-SaaS Limpo,tech,limpo e confiável,#FFFFFF,#F1F5F9,#0EA5E9,#0F172A,#475569,#040A0D,#0F172A,#1A2940,#38BDF8,#E0F2FE,true,Azul céu limpo para SaaS de comunicação e colaboração
-22,Tech-SaaS Growth,tech,growth e conversão,#FFFFFF,#F0FDF4,#22C55E,#0F172A,#166534,#050D08,#0F172A,#132A1B,#4ADE80,#DCFCE7,true,Verde sucesso para SaaS de analytics e growth hacking
-23,Tech-SaaS Neutro,tech,profissional e discreto,#FFFFFF,#F9FAFB,#111827,#111827,#4B5563,#FFFFFF,#111827,#1F2937,#F9FAFB,#7A8190,true,Paleta quase monocromática para ferramentas que deixam o conteúdo brilhar
-24,Entertainment Vibrante,entertainment,divertido e imersivo,#1A1A2E,#16213E,#E94560,#EDF2F4,#A8DADC,#0D0608,#0D0D17,#0B1120,#FF6B81,#FFE0E6,true,Vermelho vibrante sobre escuro para streaming e entretenimento
-25,Entertainment Gaming,entertainment,intenso e competitivo,#0A0A0A,#1A1A2E,#00FF88,#E0E0E0,#B0B0D0,#040D09,#050505,#0D0D18,#00FF88,#C0FFE0,true,Verde neon sobre preto para plataformas de gaming
-26,Gaming RPG,entertainment,épico e fantasia,#1B1040,#2A1B5E,#FFD700,#E8E0F0,#C8B8E8,#1B1040,#0E0820,#15103A,#FFE44D,#FFF8D0,true,Dourado sobre roxo profundo para jogos de fantasia e RPG
-27,Luxury Clássico,luxury,exclusivo e atemporal,#1A1A1A,#F5F0EB,#C5A47E,#F5F0EB,#1A1A1A,#0D0B0A,#0D0D0D,#2A2520,#D4B896,#F5F0EB,true,Dourado champagne com preto e marfim para marcas de alto luxo
-28,Luxury Moderno,luxury,sofisticado e contemporâneo,#FAF9F7,#FFFFFF,#1A1A1A,#1A1A1A,#4A4A4A,#FAF9F7,#121210,#1A1A1A,#E8E6E3,#7D7D7D,true,Monocromático refinado com toques de textura para luxo contemporâneo
-29,Luxury Joalheria,luxury,precioso e radiante,#0C0C14,#1A1A2A,#E8C547,#F0EDE0,#C0B8A0,#0C0C14,#060608,#0E0E18,#F0D060,#FFF8D0,true,Ouro intenso sobre preto profundo para joalherias e relojoarias
-30,Eco Sustentável,sustainability,sustentável e otimista,#F0F9F4,#FFFFFF,#059669,#1B4332,#374151,#040D0A,#112820,#1A2E24,#34D399,#D1FAE5,true,Verde esperança para marcas e produtos eco-friendly
-31,Eco Terra,sustainability,natural e honesto,#FAF5EF,#F0EAE0,#6B7C3E,#3D3522,#4A4030,#FFFFFF,#1C1A14,#2A2720,#8BA050,#E8F0D0,true,Verde oliva terroso para agricultura sustentável e produtos naturais
-32,Real Estate Premium,real-estate,confiável e premium,#FFFFFF,#F5F5F0,#1B4965,#1B4965,#4A6375,#FFFFFF,#0F2735,#1A3A50,#5B8BA0,#E0EAF0,true,Azul petróleo para imobiliárias premium e empreendimentos de alto padrão
-33,Real Estate Familiar,real-estate,acolhedor e seguro,#FFFCF5,#FFF5E6,#D97706,#3B2506,#92400E,#0D0904,#1C1A10,#2A2418,#F59E0B,#FEF3C7,true,Âmbar acolhedor para imobiliárias focadas em famílias
-34,Auto Performance,automotive,potente e premium,#111111,#1C1C1C,#FF0000,#F5F5F5,#CCCCCC,#0D0404,#080808,#121212,#FF3333,#FFD0D0,true,Vermelho performance sobre preto para marcas automotivas esportivas
-35,Auto Elétrico,automotive,inovador e limpo,#F0F4F8,#FFFFFF,#00A3FF,#1A2B3C,#3A5068,#040A0D,#0E1A28,#162030,#33B8FF,#D0EEFF,true,Azul elétrico limpo para veículos elétricos e mobilidade sustentável
-36,Fashion Vanguarda,fashion,ousado e autoral,#000000,#1A1A1A,#FF3366,#FFFFFF,#E0E0E0,#0D0607,#000000,#0D0D0D,#FF6688,#FFD0DD,true,Rosa choque sobre preto para marcas de moda de vanguarda
-37,Fashion Clean,fashion,elegante e editorial,#FFFFFF,#F5F5F5,#000000,#000000,#333333,#FFFFFF,#111111,#1A1A1A,#FFFFFF,#7C7C7C,true,Preto e branco puro para moda minimalista e editorial
-38,Fashion Streetwear,fashion,urbano e jovem,#1A1A1A,#2D2D2D,#FFE600,#FFFFFF,#E0E0E0,#0D0C04,#0D0D0D,#1A1A1A,#FFE600,#7E7E34,true,Amarelo vibrante sobre preto para marcas de streetwear
-39,Travel Aventura,travel,aventureiro e inspirador,#1E3D59,#F0F4F8,#FF6E40,#F0F4F8,#2C4A62,#0D0806,#12283A,#0F2030,#FF8A65,#FFE0D0,true,Laranja aventura com azul profundo para agências de viagem
-40,Travel Luxo,travel,sofisticado e paradisíaco,#003B46,#FFFFFF,#C4A35A,#E0D8C0,#3B5B65,#003B46,#002530,#1A3540,#D4B870,#F5EED0,true,Dourado com teal profundo para viagens premium e resorts
-41,Sports Energia,sports,energético e competitivo,#1A1A2E,#FFFFFF,#FF4500,#FFFFFF,#1A1A2E,#0D0604,#0D0D18,#1A1A2E,#FF6633,#FFE0D0,true,Laranja fogo para marcas esportivas e fitness
-42,Sports Tech,sports,performático e analítico,#0A0E17,#141C2E,#00E5FF,#E0E8F0,#8898AA,#0A0E17,#05070C,#0A1020,#33ECFF,#D0F8FF,true,Ciano elétrico para wearables e analytics esportivo
-43,Kids Alegre,kids,alegre e seguro,#FFFFFF,#FFF8E7,#FF6B6B,#2D3436,#6D4C41,#0D0808,#1A1A20,#2D2520,#FF8A8A,#FFE0E0,true,Vermelho coral suave com base quente para apps e produtos infantis
-44,Kids Educativo,kids,divertido e educativo,#F5F0FF,#FFFFFF,#7C4DFF,#2E1065,#4A4458,#FFFFFF,#1A1530,#201840,#9E7BFF,#E8DEFF,true,Roxo divertido para plataformas educativas infantis
-45,News Clássico,news,sério e imparcial,#FFFFFF,#F5F5F5,#C62828,#1A1A1A,#424242,#FFFFFF,#121212,#1E1E1E,#EF5350,#FFCDD2,true,Vermelho editorial com base neutra para portais de notícia tradicionais
-46,News Digital,news,moderno e ágil,#FFFFFF,#F0F2F5,#1565C0,#1A1A1A,#424242,#FFFFFF,#111827,#1A2540,#42A5F5,#BBDEFB,true,Azul confiável para veículos de mídia digital
-47,Productivity Focus,productivity,focado e eficiente,#FFFFFF,#F7F8FA,#5B5FC7,#1E1E1E,#44475A,#FFFFFF,#1E1E2E,#2A2A40,#7B7FD7,#E8E8FF,true,Índigo suave para ferramentas de produtividade e gestão de tarefas
-48,Productivity Warm,productivity,humano e colaborativo,#FFFCF8,#FFF5EB,#E67E22,#2C1810,#7C4A1E,#0D0905,#1C1510,#2A2018,#F0983A,#FFF0DB,true,Laranja quente para ferramentas de colaboração e comunicação
-49,Productivity Dark,productivity,intenso e imersivo,#1E1E2E,#2A2A40,#7AA2F7,#C8D3F5,#A0AAC0,#1E1E2E,#151520,#1E1E30,#7AA2F7,#C8D3F5,true,Paleta escura produtiva para IDEs e ferramentas de desenvolvimento
-50,Social Vibrante,social,conectado e expressivo,#FFFFFF,#F0F2F5,#1877F2,#1C2B3A,#65676B,#05080D,#18191A,#242526,#4599FF,#D0E4FF,true,Azul social vibrante para redes sociais e comunidades
-51,Social Criativo,social,criativo e jovem,#FAFAFA,#FFFFFF,#E1306C,#262626,#767676,#0D0608,#121212,#1E1E1E,#F06292,#FFD0E0,true,Rosa gradiente para redes sociais visuais e criativas
-52,Crypto Bold,crypto,descentralizado e ousado,#0D0D0D,#1A1A2E,#F7931A,#F0F0F0,#B0B0C8,#0D0905,#060606,#0D0D18,#FFAD4D,#FFF0D0,true,Laranja bitcoin sobre preto para plataformas crypto e exchanges
-53,Crypto DeFi,crypto,futurista e tecnológico,#0B0E11,#1E2329,#02C076,#EAECEF,#848E9C,#0B0E11,#06080C,#141820,#33D49A,#D0F5E5,true,Verde DeFi sobre escuro para protocolos e dApps
-54,AI Futurista,ai,futurista e inteligente,#0F0F1A,#1A1A30,#7C3AED,#E8E0F8,#A0A0C8,#FFFFFF,#08080E,#101020,#9F67FF,#E8DDFF,true,Roxo AI sobre azul escuro profundo para produtos de inteligência artificial
-55,AI Confiável,ai,confiável e transparente,#FFFFFF,#F0F4FF,#2563EB,#111827,#4B5563,#FFFFFF,#111827,#1A2540,#60A5FA,#DBEAFE,true,Azul transparente para AI focada em confiança e explicabilidade
-56,AI Criativo,ai,criativo e generativo,#1A1025,#2D1B4E,#E879F9,#F5E6FF,#C8A0E0,#1A1025,#0E0818,#1A1030,#F0A0FF,#FAE0FF,true,Magenta generativo para ferramentas de AI criativa e geração de conteúdo
-57,Government Institucional,government,oficial e acessível,#FFFFFF,#F0F4F8,#1351B4,#1C1C1C,#333333,#FFFFFF,#0F172A,#182848,#5E8FD0,#D0E0F5,true,Azul institucional padrão gov.br para portais governamentais
-58,Government Cidadão,government,acolhedor e democrático,#FFFFFF,#F5F8F0,#2E7D32,#1B2A1E,#424242,#FFFFFF,#121812,#1C2A1E,#66BB6A,#C8E6C9,true,Verde cidadão para serviços públicos e participação social
-59,Nonprofit Esperança,nonprofit,esperançoso e engajante,#FFFFFF,#FFF3E0,#E65100,#1A120A,#4E342E,#0D0704,#1A1510,#2A2018,#FF8A40,#FFE0C0,true,Laranja esperança para ONGs e causas sociais
-60,Nonprofit Natureza,nonprofit,consciente e ativista,#F0F7F0,#FFFFFF,#2E7D32,#1B3D1E,#33691E,#FFFFFF,#121C12,#1E2E1E,#66BB6A,#C8E6C9,true,Verde ativista para ONGs ambientais e projetos de conservação
-61,Creative Agency,creative,ousado e inovador,#FFFFFF,#F5F5F5,#FF0055,#111111,#444444,#0D0407,#111111,#1C1C1C,#FF3377,#FFD0DD,true,Rosa magenta ousado para agências criativas e estúdios de design
-62,Creative Studio,creative,artístico e experimental,#0A0A0A,#1C1C1C,#FFCC00,#F5F5F5,#B0B0B0,#0D0B04,#050505,#121212,#FFD633,#FFF5B0,true,Amarelo ouro sobre preto para estúdios de arte e design experimental
-63,Creative Portfolio,creative,pessoal e curado,#FAFAFA,#FFFFFF,#1A1A1A,#1A1A1A,#666666,#FAFAFA,#111111,#1E1E1E,#E0E0E0,#7C7C7C,true,Monocromático neutro que deixa o trabalho criativo ser o protagonista
-64,Music Festival,music,vibrante e imersivo,#0A0A1A,#1A1A30,#FF2D55,#F0E8FF,#A0A0C8,#0D0507,#050510,#0D0D20,#FF5577,#FFD0DD,true,Rosa intenso sobre escuro para festivais de música e plataformas de audio
-65,Music Clássica,music,elegante e atemporal,#1A1A1A,#F5F0E8,#8B6914,#F5F0E8,#3A3028,#FFFFFF,#0D0D0D,#2A2520,#A68330,#F5EED0,true,Dourado suave com preto para música clássica e ópera
-66,Legal Sério,legal,sério e respeitável,#FFFFFF,#F5F5F0,#1B3F5E,#1C2B3A,#4A6375,#FFFFFF,#0F2030,#182C40,#4A7A9F,#D0E0F0,true,Azul marinho profundo para escritórios de advocacia e serviços jurídicos
-67,Legal Moderno,legal,moderno e acessível,#FFFFFF,#F8F9FA,#374151,#111827,#6B7280,#FFFFFF,#111827,#1F2937,#9CA3AF,#E5E7EB,true,Cinza sofisticado para legaltech e serviços jurídicos digitais
-68,Agriculture Terreno,agriculture,natural e enraizado,#F5F0E8,#E8DFD0,#4A7C59,#2D1B0E,#2D1B0E,#FFFFFF,#1A1510,#2A2318,#5E9E6E,#E8DFD0,true,Tons terrosos e verdes de floresta para agronegócio tradicional
-69,Agriculture Campo,agriculture,rústico e confiável,#FAF6EF,#EDE5D8,#6B8E3A,#302010,#3A2A18,#FFFFFF,#1C1A12,#2A2518,#88B050,#E5F0D0,true,Verde oliva com base de linho para cooperativas e fazendas
-70,AgriTech Moderno,agriculture-tech,tecnológico e sustentável,#F0F8F4,#FFFFFF,#0D9668,#1A3028,#374151,#FFFFFF,#0F2420,#1A3028,#34D399,#D1FAE5,true,Verde tech vibrante para agritech e agricultura de precisão
-71,AgriTech Data,agriculture-tech,analítico e inovador,#FFFFFF,#F0F4FA,#2D7A4F,#111827,#3B5068,#FFFFFF,#111827,#1A2E22,#4ADE80,#D0F5E0,true,Verde digital com azul analítico para plataformas de dados agrícolas
-72,HR Humano,hr,acolhedor e empático,#FFFAF5,#FFF0E5,#D97236,#2C1808,#6E3A12,#FFFFFF,#1C1510,#2A2018,#E8944E,#FFF0DB,true,Laranja acolhedor com base quente para RH humanizado e people-first
-73,HR Cultura,hr,vibrante e inclusivo,#FFF8F5,#FFE8E0,#C0392B,#2C0E0A,#7A1A12,#FFFFFF,#1C1210,#2A1A15,#E06050,#FFD5CC,true,Vermelho coral para cultura organizacional e employer branding
-74,HR Tech Plataforma,hr-tech,profissional e inteligente,#F5F0FF,#FFFFFF,#6C3FC0,#1E1040,#4A4060,#FFFFFF,#141030,#1E1840,#9B7AE0,#E8DEFF,true,Roxo profissional para plataformas de gestão de pessoas e recrutamento
-75,HR Tech Analytics,hr-tech,preciso e estratégico,#FFFFFF,#F0F2FA,#3B50D0,#111827,#3A4060,#FFFFFF,#111827,#1A2050,#6880F0,#D0DBFF,true,Azul-índigo para analytics de RH e people analytics
-76,Logistics Eficiente,logistics,industrial e funcional,#FFFFFF,#F0F0F0,#E87020,#1A1A1A,#4A4A4A,#FFFFFF,#141414,#222222,#F09040,#FFE0C0,true,Laranja industrial com cinza funcional para operações logísticas
-77,Logistics Rápido,logistics,ágil e otimizado,#F5F5F5,#FFFFFF,#D45A00,#1A1A1A,#3A3A3A,#FFFFFF,#141414,#1E1E1E,#E87A30,#FFD8B0,true,Laranja urgente para entregas rápidas e last-mile delivery
-78,Logistics Track,logistics,rastreável e transparente,#F0F8FF,#FFFFFF,#1A8A5A,#112840,#2A5040,#FFFFFF,#0F1E30,#142A20,#40C090,#D0F0E0,true,Verde-azulado para rastreamento e visibilidade de cadeia logística
-79,Logistics Digital,logistics,digital e conectado,#FFFFFF,#F0F5FA,#2070B8,#111827,#3A5068,#FFFFFF,#0F1A28,#162840,#4A9AE0,#D0E5FF,true,Azul tech para plataformas digitais de logística e supply chain
-80,Insurance Proteção,insurance,confiável e protetor,#F0F4FA,#FFFFFF,#1A3A6E,#1A3A6E,#3A5575,#FFFFFF,#0C1A30,#142848,#4A7AB8,#D0E0F5,true,Azul profundo de confiança para seguradoras tradicionais
-81,Insurance Sólido,insurance,sério e estável,#FFFFFF,#F5F5F0,#0D3B66,#0D3B66,#4A6070,#FFFFFF,#081E38,#102E50,#3A78B0,#C8DAF0,true,Azul-marinho sólido para corretoras e grandes seguradoras
-82,Insurance Digital,insurance,moderno e acessível,#F0FAFA,#FFFFFF,#0D9488,#0A3A38,#375858,#FFFFFF,#0C2828,#143838,#2DD4BF,#CCFBF1,true,Teal moderno para insurtechs e seguros digitais
-83,Fitness Energia,fitness,energético e intenso,#FFFFFF,#FFF0ED,#D92B20,#1A0A08,#7A1A12,#FFFFFF,#1A1210,#2A1A15,#EF5350,#FFD0CC,true,Vermelho intenso para academias de alta performance e CrossFit
-84,Fitness Power,fitness,potente e motivador,#1A1018,#2A1828,#FF5722,#F0E0E8,#C0A8B8,#FFFFFF,#0E0810,#181018,#FF7A50,#FFD8CC,true,Laranja fogo sobre escuro para apps de treino e performance
-85,Fitness Calm,fitness,equilibrado e restaurador,#F5F5F0,#EAEAE0,#7A8C6A,#2A2E22,#4A5040,#FFFFFF,#1A1C15,#282C20,#95AA80,#E0EAD5,true,Verde salva com tons terrosos para yoga e pilates
-86,Meditation Zen,meditation,sereno e minimalista,#FAF9F5,#F0EDE8,#A09080,#3A3428,#5A5040,#FFFFFF,#1A1815,#282520,#B8A898,#F0EAE0,true,Neutros suavíssimos para apps de meditação e mindfulness
-87,Meditation Silêncio,meditation,calmo e introspectivo,#F8F5F0,#EDE8E0,#8A8070,#38332A,#585048,#FFFFFF,#1C1A15,#2A2820,#A89888,#F0EAE0,true,Tons de areia quase silenciosos para retiros e práticas contemplativas
-88,Meditation App,meditation,suave e digital,#F5F0FF,#FFFFFF,#7A6AAF,#1E1040,#4A4068,#FFFFFF,#141030,#1E1840,#9A8ACF,#E8E0FF,true,Lavanda suave com azul para apps de meditação guiada
-89,Dating Acolhedor,dating,acolhedor e romântico,#FFF5F5,#FFE8E5,#E05A6E,#3A0A12,#7A2030,#FFFFFF,#1C1012,#2A181C,#F07888,#FFD5DD,true,Rosa coral acolhedor para apps de relacionamento
-90,Dating Moderno,dating,moderno e confiante,#FFFFFF,#FFF0F2,#D94070,#1A0810,#6A2040,#FFFFFF,#1A1015,#28182A,#F06898,#FFD0E0,true,Rosa vibrante moderno para dating apps e matchmaking
-91,Pets Amigável,pets,divertido e carinhoso,#FFF8F0,#FFFFFF,#E87830,#2A1808,#704020,#FFFFFF,#1C1510,#2A2018,#F09850,#FFE0C0,true,Laranja brincalhão com teal para petshops e serviços pet
-92,Pets Premium,pets,sofisticado e exclusivo,#1A1A1A,#2A2828,#C8A860,#F0EAD8,#B8B0A0,#1A1A1A,#0D0D0D,#1A1A18,#D8B870,#F5EDD0,true,Preto sofisticado com dourado para pet shops premium e serviços VIP
-93,Home Aconchego,home,acolhedor e natural,#FAF5F0,#F0E8E0,#C07A5A,#2E1A10,#5A3828,#FFFFFF,#1C1510,#2A2018,#D09070,#F5E0D0,true,Terracota com neutros quentes para decoração e casa
-94,Home Moderno,home,contemporâneo e funcional,#FFFFFF,#F5F2EE,#8A7060,#1A1410,#4A3C30,#FFFFFF,#151210,#252018,#A88A78,#F0E5DA,true,Tons de madeira e linho para interiores modernos e minimalistas
-95,Wedding Elegante,wedding,romântico e refinado,#FFFAF7,#FFF0EA,#B08A6A,#2E2018,#5A4838,#FFFFFF,#1C1812,#2A2520,#C8A888,#F5ECDF,true,Champagne e blush para casamentos e eventos elegantes
-96,Photography Neutro,photography,neutro e profissional,#FFFFFF,#F5F5F5,#1A1A1A,#1A1A1A,#4A4A4A,#FFFFFF,#0D0D0D,#1A1A1A,#E0E0E0,#7C7C7C,true,Preto e branco puro para portfólios de fotografia
-97,Photography Dark,photography,dramático e imersivo,#0A0A0A,#1A1A1A,#FFFFFF,#E0E0E0,#A0A0A0,#0A0A0A,#050505,#0F0F0F,#F0F0F0,#7C7C7C,true,Escuro imersivo para fotógrafos que priorizam imagens em destaque
-98,Construction Industrial,construction,robusto e seguro,#F5F5F0,#EAEAE5,#E07020,#1A1A1A,#3A3A38,#FFFFFF,#141412,#222220,#F09040,#FFE0C0,true,Laranja segurança com cinza concreto para construção civil
-99,Construction Tech,construction,digital e eficiente,#FFFFFF,#F0F2F5,#3A6090,#111827,#3A5068,#FFFFFF,#0F1A28,#162840,#5A8AC0,#D0E0F5,true,Azul técnico para construtechs e gestão de obras digital
-100,Energy Renovável,energy,sustentável e otimista,#FFFFF5,#F5F8E8,#5A8A18,#1A2008,#3A4818,#FFFFFF,#141A0C,#202A12,#78B030,#E0F0B8,true,Amarelo solar com verde folha para energia solar e eólica
-101,Energy Solar,energy,luminoso e limpo,#FFFCF0,#FFF5DA,#C89A10,#2A2008,#6A5010,#FFFFFF,#1C1A0C,#2A2812,#E0B830,#FFF0C0,true,Dourado solar radiante para empresas de energia fotovoltaica
-102,Energy Utility,energy,conservador e estável,#F0F4FA,#FFFFFF,#2A5080,#1A3050,#3A5570,#FFFFFF,#0F1E30,#182C48,#4A80B8,#D0E0F5,true,Azul conservador com cinza para concessionárias de energia
-103,Fintech Crypto-Native,fintech,descentralizado e tech,#0A0A0F,#141418,#00FF7F,#E0F0E8,#A0B0A8,#0A0A0F,#050508,#0A0A10,#00FF7F,#C0FFD8,true,Verde neon crypto sobre preto profundo para exchanges e DeFi nativas
-104,Tech CLI-Dark,tech,hacker e focado,#0C0C0C,#1A1A1A,#33FF66,#D0F0D8,#90B898,#0C0C0C,#060606,#101010,#33FF66,#C0FFD0,true,Verde terminal sobre preto para ferramentas CLI e developer tools
-105,E-commerce Flash-Sale,e-commerce,urgente e impactante,#FFFFFF,#FFF8E8,#D42020,#1A0808,#8A1818,#FFE800,#1A1210,#281818,#F04040,#FFD0D0,true,Vermelho urgente com amarelo impacto para flash sales e promoções relâmpago
-106,Food Vegan,food,fresco e consciente,#F5FAF0,#FFFFFF,#4A8830,#1A2810,#30481A,#FFFFFF,#121C0C,#1E2C15,#68B848,#D8F0C0,true,Verde vivo e fresco para restaurantes veganos e produtos plant-based
-107,Education Gamified,education,divertido e recompensador,#F8F0FF,#FFFFFF,#8B3FC8,#1E1040,#4A2870,#FFFFFF,#141030,#1E1840,#A860E0,#E0D0FF,true,Roxo vibrante com acentos lúdicos para plataformas de ensino gamificado

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

@@ -1,31 +0,0 @@
-id,name,category,atomic_level,variants,states,a11y_role,keyboard,animation_trigger,animation_duration,description
-1,Button,ação,atom,"primary;secondary;outline;ghost;destructive;icon-only;loading","default;hover;active;focus;disabled;loading",button,"Enter ou Space ativa; Tab navega; foco visível obrigatório",hover e press,150ms,Elemento de ação principal. Deve ter min 44x44px touch target e label descritivo. Nunca usar div como botão.
-2,Input,formulário,atom,"text;email;password;number;search;tel;url;date","default;hover;focus;filled;error;disabled;readonly",textbox,"Tab navega; texto digitável; Escape limpa em search",focus e error,200ms,Campo de entrada de texto. Deve ter label associado via for/id. Placeholder nunca substitui label. Mensagem de erro associada via aria-describedby.
-3,Textarea,formulário,atom,"default;auto-resize;with-counter;rich-text","default;hover;focus;filled;error;disabled",textbox,"Tab navega; texto multi-linha; Ctrl+Enter para submit opcional",focus e error,200ms,Campo de texto multi-linha. Counter de caracteres quando há maxlength. Auto-resize melhora UX. Label obrigatório.
-4,Select,formulário,atom,"single;multi;searchable;grouped;native","default;hover;focus;open;error;disabled",combobox ou listbox,"Space/Enter abre; setas navegam; Escape fecha; type-ahead busca",open e close,200ms,Seletor de opções. Select nativo para mobile. Custom select deve implementar padrão ARIA combobox completo. Minimum 8 itens visíveis quando aberto.
-5,Checkbox,formulário,atom,"default;indeterminate;card-checkbox;switch-style","default;hover;checked;indeterminate;focus;disabled;error",checkbox,"Space alterna; Tab navega; grupo com fieldset/legend",check e uncheck,150ms,Seleção múltipla binária. Indeterminate para seleção parcial em árvores. Label clicável obrigatório. Agrupar relacionados com fieldset.
-6,Radio,formulário,atom,"default;card-radio;button-group-style;with-description","default;hover;selected;focus;disabled;error",radio,"Setas navegam no grupo; Tab entra/sai do grupo; Space seleciona",select,150ms,Seleção única em grupo. Mínimo 2 opções. Usar fieldset/legend para o grupo. Setas navegam dentro do radiogroup.
-7,Toggle Switch,formulário,atom,"default;with-label;with-icon;small;large","off;on;hover;focus;disabled",switch,"Space ou Enter alterna; Tab navega; anunciar estado",toggle,250ms,Alternância binária com efeito imediato. Diferente de checkbox pois a ação é instantânea. Deve comunicar estado on/off via aria-checked.
-8,Card,conteúdo,molecule,"default;interactive;media;horizontal;overlay;skeleton","default;hover;active;focus;loading",article ou link,"Se interativo: Enter ativa; Tab navega; foco no card inteiro ou no CTA interno",hover,200ms,Container de conteúdo agrupado. Card interativo deve ter um único destino. Evitar muitos CTAs dentro de um card. Imagem com alt descritivo.
-9,Modal Dialog,overlay,molecule,"default;fullscreen;drawer-style;confirmation;form","open;closing;closed",dialog,"Escape fecha; Tab preso dentro (focus trap); foco inicial no primeiro elemento interativo",enter e exit,300ms,Janela modal que bloqueia interação com o fundo. Focus trap obrigatório. Fechar com Escape. Retornar foco ao trigger ao fechar. Aria-modal=true.
-10,Drawer Sheet,overlay,molecule,"left;right;bottom;top;persistent;temporary","open;closing;closed",dialog ou complementary,"Escape fecha; Tab preso se modal; swipe para fechar em mobile",slide-in e slide-out,300ms,Painel lateral ou inferior deslizante. Usar como dialog se modal. Se persistente pode ser complementary. Suportar swipe em touch.
-11,Toast Notification,feedback,atom,"info;success;warning;error;with-action;with-progress","entering;visible;exiting;dismissed",status ou alert,"Não captura foco; anunciado por screen reader via aria-live; ação via Tab se presente",enter e exit,300ms,Notificação temporária não-intrusiva. Usar role=status para info e role=alert para erros. Auto-dismiss em 5-8s. Máximo 3 toasts simultâneos. Ação de desfazer quando destrutivo.
-12,Alert,feedback,atom,"info;success;warning;error;with-action;dismissible","default;dismissed",alert ou status,"Tab navega para ações internas; não auto-dismiss",enter,300ms,Mensagem contextual inline. Diferente de toast por ser persistente e inline. Ícone + cor + texto para não depender só de cor. Aria-live para alertas dinâmicos.
-13,Badge,indicador,atom,"default;dot;count;status;outline;icon","default;pulse;new",status,"Informativo apenas; associar ao elemento pai via aria-describedby",pulse para novos,200ms,Indicador de status ou contagem. Sempre associar ao contexto via aria. Badge em ícone precisa de aria-label no container. Limitar contagem com 99+.
-14,Avatar,exibição,atom,"image;initials;icon;status;group;sizes","default;loading;error;online;offline;away",img,"Informativo; alt text descritivo; se interativo tratar como button",hover,150ms,Representação visual de usuário ou entidade. Alt text com nome da pessoa. Fallback para iniciais quando imagem falha. Em grupos mostrar +N overflow.
-15,Tooltip,overlay,atom,"default;rich;interactive;error","hidden;showing;visible;hiding",tooltip,"Aparece em hover/focus; Escape fecha; delay de 300ms para aparecer",show e hide,200ms,Informação adicional on-demand. Delay de entrada 300ms e saída 200ms. Nunca colocar conteúdo essencial em tooltip. Touch: mostrar on long-press. Aria-describedby no trigger.
-16,Popover,overlay,molecule,"default;menu;form;rich-content","hidden;showing;visible;hiding",dialog,"Click/Enter abre; Escape fecha; Tab navega conteúdo interno; focus trap",show e hide,200ms,Container de conteúdo flutuante ancorado a um trigger. Diferente de tooltip por ser interativo. Focus trap quando aberto. Fechar ao clicar fora.
-17,Dropdown Menu,navegação,molecule,"default;nested;with-icons;with-shortcuts;context-menu","closed;open;item-focused",menu,"Enter/Space abre; setas navegam; Escape fecha; letras para busca rápida",open e close,150ms,Menu de opções acionável por trigger. Implementar padrão ARIA menu completo. Setas verticais navegam. Sub-menus com seta horizontal. Type-ahead para busca.
-18,Tabs,navegação,molecule,"default;pills;underline;vertical;scrollable;with-icons","default;hover;active;focus;disabled",tablist e tab,"Setas navegam tabs; Tab move para o painel; Home/End para primeiro/último",tab-switch,200ms,Navegação entre painéis de conteúdo. Usar pattern ARIA tabs com tablist/tab/tabpanel. Setas navegam entre tabs. Lazy loading de painéis para performance.
-19,Accordion,conteúdo,molecule,"default;flush;bordered;nested;single-expand;multi-expand","collapsed;expanding;expanded;collapsing",heading e region,"Enter/Space alterna; setas navegam entre headers; Home/End",expand e collapse,300ms,Seções colapsáveis de conteúdo. Cada header é um button dentro de heading. Conteúdo em region com aria-labelledby. Decidir entre single e multi-expand.
-20,Breadcrumb,navegação,molecule,"default;with-dropdown;truncated;with-icons","default;hover;current",navigation e link,"Tab navega entre itens; aria-current=page no item atual",none,0ms,Navegação hierárquica mostrando localização. Usar nav com aria-label=Breadcrumb. Último item com aria-current=page. Truncar com dropdown no meio para paths longos.
-21,Pagination,navegação,molecule,"default;simple;with-input;infinite-scroll;load-more","default;hover;active;disabled;current",navigation,"Tab navega; Enter ativa; aria-current=page na página atual",none,0ms,Navegação entre páginas de conteúdo. Nav com aria-label=Paginação. Botões previous/next sempre visíveis. Ellipsis para ranges grandes. Anunciar mudança de página.
-22,Progress Bar,feedback,atom,"linear;circular;segmented;with-label;indeterminate","empty;partial;complete;indeterminate;error",progressbar,"Informativo; aria-valuenow/min/max; atualizações via aria-live polite",progress-update,300ms,Indicador de progresso de uma operação. Aria-valuenow com porcentagem. Indeterminate quando duração desconhecida. Label descrevendo a operação. Cores não devem ser único indicador.
-23,Skeleton,feedback,atom,"text;circle;rect;card;table-row;custom","loading;loaded",none,"Aria-busy=true no container; aria-hidden nos skeletons",pulse,1500ms,Placeholder visual durante carregamento. Mimetizar layout do conteúdo real. Aria-busy no container. Remover skeletons e anunciar carregamento completo. Preferir sobre spinner para conteúdo estruturado.
-24,Spinner,feedback,atom,"default;overlay;inline;button-spinner;page-loader","spinning;complete",status,"Aria-live=polite com texto de loading; não captura foco",rotate,continuous,Indicador de carregamento indeterminado. Aria-label=Carregando. Usar apenas quando layout do conteúdo é desconhecido. Timeout com mensagem de erro após tempo razoável.
-25,Table,dados,molecule,"default;sortable;selectable;expandable;virtual-scroll;responsive","default;loading;empty;error;sorted;filtered",table,"Tab navega; setas movem entre células; Enter ordena em headers; Space seleciona",sort,200ms,Tabela de dados estruturados. Usar elementos table nativos. Headers com scope. Sortable com aria-sort. Responsive via scroll horizontal ou card-stack em mobile.
-26,Navigation Bar,navegação,organism,"horizontal;vertical;responsive;transparent;sticky;with-search","default;scrolled;mobile-open;mobile-closed",navigation,"Tab navega itens; Enter ativa; menu mobile via hamburger acessível",scroll e mobile-toggle,300ms,Barra de navegação principal do site. Nav com aria-label=Principal. Skip-link como primeiro elemento. Logo como link para home. Menu mobile com toggle acessível.
-27,Sidebar,navegação,organism,"default;collapsible;mini;overlay;with-sections","expanded;collapsed;mobile-overlay","navigation ou complementary","Tab navega; Enter expande seções; setas em sub-menus",collapse e expand,300ms,Navegação lateral persistente. Nav com aria-label descritivo. Collapsible com toggle acessível. Tooltip nos ícones quando colapsada. Overlay em mobile.
-28,Footer,estrutura,organism,"simple;multi-column;mega-footer;minimal;with-newsletter","default",contentinfo,"Tab navega links; organizado por seções com headings",none,0ms,Rodapé do site com links e informações. Usar tag footer com role=contentinfo. Organizar em seções com headings. Links de acessibilidade e legal. Newsletter com label.
-29,Hero Section,conteúdo,organism,"centered;split;video-bg;carousel;animated;minimal","default;loaded;interactive",banner,"Tab navega CTAs; vídeo com controles acessíveis; carousel com pausa",enter,500ms,Seção principal de destaque da página. Hierarquia clara com h1 único. CTA primário e secundário. Imagens com alt. Vídeo com autoplay respeitando prefers-reduced-motion.
-30,Form Field,formulário,molecule,"text;select;checkbox;radio;file;date;range;with-helper","default;focus;filled;error;success;disabled",group,"Tab navega entre fields; erros anunciados via aria-live",error-shake,200ms,Molécula que combina label + input + helper text + error message. Label com for/id. Helper com aria-describedby. Erro com aria-invalid=true e aria-errormessage. Asterisco para required.

package/skills/hefesto-design/data/google-fonts.csv

@@ -1,56 +0,0 @@
-id,name,category,weights,styles,subsets,variable,performance_score,best_for,mood,pair_with,description
-1,Space Grotesk,sans-serif,300;400;500;600;700,normal;italic,latin;latin-ext;vietnamese,true,92,SaaS;tech startups;dashboards,Tecnico e moderno,DM Sans;Source Serif 4;IBM Plex Mono,Geometrica com cantos angulares. Variable com boa performance.
-2,DM Sans,sans-serif,100;200;300;400;500;600;700;800;900;1000,normal;italic,latin;latin-ext,true,95,Apps modernos;interfaces clean;mobile,Neutro e contemporaneo,DM Serif Display;Space Grotesk;JetBrains Mono,Sans humanista versatil. Variable com range amplo.
-3,Plus Jakarta Sans,sans-serif,200;300;400;500;600;700;800,normal;italic,latin;latin-ext;vietnamese,true,93,Startups;fintech;SaaS moderno,Profissional e moderno,Lora;Source Serif 4;Fira Code,Geometrica com terminais suaves. Variable e moderna.
-4,Outfit,sans-serif,100;200;300;400;500;600;700;800;900,normal,latin;latin-ext,true,94,Apps consumer;e-commerce;branding,Amigavel e acessivel,Crimson Pro;Playfair Display,Geometrica redonda com boa legibilidade.
-5,Sora,sans-serif,100;200;300;400;500;600;700;800,normal,latin;latin-ext,true,91,Tech;blockchain;apps futuristas,Futurista e tecnico,Source Serif 4;IBM Plex Serif,Geometrica precisa com proporcoes unicas.
-6,Manrope,sans-serif,200;300;400;500;600;700;800,normal,cyrillic;cyrillic-ext;greek;latin;latin-ext;vietnamese,true,93,SaaS;dashboards;produtos digitais,Tecnico e funcional,Merriweather;Bitter;JetBrains Mono,Semi-geometrica com boa legibilidade em tamanhos pequenos.
-7,Geist Sans,sans-serif,100;200;300;400;500;600;700;800;900,normal,latin;latin-ext,true,96,Dev tools;Vercel;Next.js;IDEs,Tecnico e preciso,Geist Mono;Source Serif 4,Font do Vercel. Otimizada para interfaces de desenvolvimento.
-8,Albert Sans,sans-serif,100;200;300;400;500;600;700;800;900,normal;italic,latin;latin-ext,true,94,Branding;marketing;landing pages,Moderno e versatil,Crimson Pro;Lora,Geometrica com personalidade. Boa para headings e body.
-9,Work Sans,sans-serif,100;200;300;400;500;600;700;800;900,normal;italic,latin;latin-ext;vietnamese,true,93,Interfaces profissionais;enterprise;admin,Profissional e sobrio,Source Serif 4;Merriweather,Otimizada para telas. Boa em tamanhos medios.
-10,Instrument Sans,sans-serif,400;500;600;700,normal;italic,latin;latin-ext,true,90,Portfolios;agencias;design,Elegante e discreto,Instrument Serif;DM Serif Display,Design tool aesthetic. Pairs com Instrument Serif.
-11,Nunito,sans-serif,200;300;400;500;600;700;800;900;1000,normal;italic,cyrillic;cyrillic-ext;latin;latin-ext;vietnamese,true,92,Apps infantis;educacao;saude,Amigavel e arredondado,Merriweather;Lora,Arredondada e suave. Boa para publico amplo.
-12,Figtree,sans-serif,300;400;500;600;700;800;900,normal;italic,latin;latin-ext,true,94,Startups;apps modernos;interfaces,Clean e contemporaneo,Source Serif 4;Crimson Pro,Geometrica moderna do Figma community.
-13,General Sans,sans-serif,200;300;400;500;600;700,normal;italic,latin;latin-ext,false,85,Branding;design editorial;agencies,Sofisticado e moderno,Gambetta;Erode,Nao esta no Google Fonts mas muito usada. Verificar disponibilidade.
-14,Lexend,sans-serif,100;200;300;400;500;600;700;800;900,normal,latin;latin-ext;vietnamese,true,95,Acessibilidade;educacao;leitura,Acessivel e legivel,Crimson Pro;Bitter,Projetada para melhorar velocidade de leitura. Excelente a11y.
-15,Onest,sans-serif,100;200;300;400;500;600;700;800;900,normal,cyrillic;cyrillic-ext;latin;latin-ext,true,93,Apps confiaveis;fintech;saude,Confiavel e clean,Lora;Source Serif 4,Geometrica com ligaduras e kerning refinados.
-16,Urbanist,sans-serif,100;200;300;400;500;600;700;800;900,normal;italic,latin;latin-ext,true,92,Apps urbanos;mobilidade;smart city,Urbano e geometrico,Playfair Display;DM Serif Display,Low-contrast geometrica com multiplos estilos.
-17,Commissioner,sans-serif,100;200;300;400;500;600;700;800;900,normal,cyrillic;cyrillic-ext;greek;latin;latin-ext;vietnamese,true,91,Jornalismo;governo;institucional,Formal e legivel,Crimson Pro;Merriweather,Desenhada para leitura longa. Boa para corpo de texto institucional.
-18,Atkinson Hyperlegible,sans-serif,400;700,normal;italic,latin;latin-ext,false,88,Acessibilidade;saude;publico senior,Maxima legibilidade,Merriweather;Bitter,Projetada pelo Braille Institute para maxima distincao entre caracteres.
-19,Red Hat Display,sans-serif,300;400;500;600;700;800;900,normal;italic,latin;latin-ext,true,90,Tech enterprise;Linux;open source,Tecnico e aberto,Red Hat Text;IBM Plex Serif,Font da Red Hat. Boa para headings tech enterprise.
-20,Bricolage Grotesque,sans-serif,200;300;400;500;600;700;800,normal,latin;latin-ext,true,91,Editoriais;blogs;startups criativas,Expressivo e editorial,Source Serif 4;Lora,Grotesca com personalidade. Boa alternativa expressiva.
-21,Source Serif 4,serif,200;300;400;500;600;700;800;900,normal;italic,cyrillic;cyrillic-ext;greek;latin;latin-ext;vietnamese,true,93,Leitura longa;artigos;editorial,Academico e claro,Source Sans 3;Space Grotesk,Transitional serif do Adobe. Excelente para corpo de texto.
-22,Crimson Pro,serif,200;300;400;500;600;700;800;900,normal;italic,latin;latin-ext;vietnamese,true,91,Blogs;revistas;publicacoes,Literario e refinado,DM Sans;Work Sans,Oldstyle serif com italicos elegantes.
-23,Lora,serif,400;500;600;700,normal;italic,cyrillic;cyrillic-ext;latin;latin-ext;vietnamese,true,90,Blogs;e-commerce premium;editorial,Elegante e contemporaneo,Nunito;DM Sans;Albert Sans,Contemporanea com raizes caligraficas. Boa transicao serif/sans.
-24,Playfair Display,serif,400;500;600;700;800;900,normal;italic,cyrillic;latin;latin-ext;vietnamese,true,88,Luxury;moda;titulos editoriais,Luxuoso e dramatico,DM Sans;Outfit;Lato,Display serif com alto contraste. So para titulos grandes.
-25,Merriweather,serif,300;400;700;900,normal;italic,cyrillic;cyrillic-ext;latin;latin-ext,false,85,Leitura em tela;governo;educacao,Serio e legivel,Manrope;Work Sans;Nunito,Otimizada especificamente para telas. Confiavel para corpo.
-26,DM Serif Display,serif,400,normal;italic,latin;latin-ext,false,87,Titulos impactantes;luxury;editorial,Impactante e elegante,DM Sans;Instrument Sans,Serif display com alto contraste. Apenas 1 peso (usar para titulos).
-27,Instrument Serif,serif,400,normal;italic,latin;latin-ext,false,88,Portfolios;moda;arte,Delicado e artistico,Instrument Sans;DM Sans,Serif com detalhes caligraficos sutis. Pareamento natural com Instrument Sans.
-28,Bitter,serif,100;200;300;400;500;600;700;800;900,normal;italic,cyrillic;cyrillic-ext;latin;latin-ext;vietnamese,true,91,Leitura em tela;apps;interfaces,Funcional e robusto,Manrope;DM Sans,Slab serif projetada para telas. Legivel em tamanhos pequenos.
-29,Cormorant Garamond,serif,300;400;500;600;700,normal;italic,cyrillic;latin;latin-ext;vietnamese,false,82,Luxury;editorial;marcas premium,Elegante e classico,Lato;Montserrat;Fira Sans,Garamond para display. Melhor em tamanhos grandes.
-30,Fraunces,serif,100;200;300;400;500;600;700;800;900,normal;italic,latin;latin-ext;vietnamese,true,89,Craft;organic;marcas artesanais,Artesanal e expressivo,DM Sans;Work Sans,Soft-serif com eixo optico. Variable com efeitos de wonk.
-31,Newsreader,serif,200;300;400;500;600;700;800,normal;italic,latin;latin-ext;vietnamese,true,90,Jornalismo;revistas;artigos longos,Jornalistico e confiavel,Commissioner;Work Sans,Desenhada para jornalismo digital. Excelente em corpo de texto.
-32,Libre Baskerville,serif,400;700,normal;italic,latin;latin-ext,false,84,Sites profissionais;publicacoes;livros,Classico e respeitavel,DM Sans;Space Grotesk,Baskerville web-optimized. Elegante sem ser decorativa.
-33,Spectral,serif,200;300;400;500;600;700;800,normal;italic,cyrillic;latin;latin-ext;vietnamese,false,86,e-books;leitura longa;publicacoes,Literario e confortavel,DM Sans;Figtree,Otimizada para Google Docs. Boa para texto corrido.
-34,EB Garamond,serif,400;500;600;700;800,normal;italic,cyrillic;cyrillic-ext;greek;greek-ext;latin;latin-ext;vietnamese,true,87,Academico;juridico;publicacoes serias,Erudito e atemporal,Work Sans;Manrope,Garamond fiel ao original de Claude Garamond. Para textos que exigem tradicao.
-35,Vollkorn,serif,400;500;600;700;800;900,normal;italic,cyrillic;cyrillic-ext;greek;latin;latin-ext;vietnamese,true,90,Blogs;textos longos;sites pessoais,Caloroso e legivel,Nunito;Albert Sans,Serif organica para texto corrido. Boa em tamanhos pequenos.
-36,Archivo Black,display,400,normal,latin;latin-ext,false,86,Headings bold;esportes;impacto,Impactante e energico,DM Sans;Work Sans,Grotesca black. Apenas para headlines de impacto.
-37,Bebas Neue,display,400,normal,latin;latin-ext,false,88,Posters;esportes;headings condensadas,Bold e condensado,Lora;Source Serif 4,Condensada sem serifas. Uppercase headlines cinematograficas.
-38,Syne,display,400;500;600;700;800,normal,latin;latin-ext,true,89,Criativos;arte;tecnologia;experimental,Experimental e artistico,DM Sans;Figtree,Display com personalidade. Boa para sites criativos.
-39,Clash Display,display,200;300;400;500;600;700,normal,latin;latin-ext,false,85,Startups;tech;headings modernas,Futurista e ousado,DM Sans;Satoshi,Nao Google Fonts (Fontshare). Verificar disponibilidade.
-40,Space Mono,display,400;700,normal;italic,latin;latin-ext;vietnamese,false,87,Retro-futurista;tech;codigo,Retro e tecnico,Space Grotesk;DM Sans,Monospace com estilo. Para headings retro ou codigo estilizado.
-41,Dela Gothic One,display,400,normal,cyrillic;greek;japanese;latin;latin-ext;vietnamese,false,84,Impacto visual;gaming;entretenimento,Massivo e ousado,DM Sans;Nunito,Display black japonesa. Para headlines de muito impacto.
-42,Righteous,display,400,normal,latin;latin-ext,false,85,Retro;anos 70;groovy;entertainment,Retro e divertido,Nunito;DM Sans,Display retro art-deco. Para headings tematicos.
-43,Bungee,display,400,normal,latin;latin-ext;vietnamese,false,83,Signage;games;apps divertidos,Ludico e chamativo,Nunito;Outfit,Display para signage. Multiplas orientacoes (inline; outline; shade).
-44,Anybody,display,100;200;300;400;500;600;700;800;900,normal;italic,latin;latin-ext;vietnamese,true,90,Branding;esportes;headings expressivas,Versatil e expressivo,DM Sans;Space Grotesk,Variable display com width ajustavel. De condensada a extended.
-45,Unbounded,display,200;300;400;500;600;700;800;900,normal,cyrillic;cyrillic-ext;latin;latin-ext;vietnamese,true,89,Tech;blockchain;headings futuristas,Futurista e geometrico,DM Sans;Sora,Display geometrica com cantos arredondados. Para headings tech.
-46,JetBrains Mono,monospace,100;200;300;400;500;600;700;800,normal;italic,cyrillic;cyrillic-ext;latin;latin-ext;vietnamese,true,94,IDEs;terminais;codigo;dev tools,Tecnico e legivel,Space Grotesk;DM Sans,Monospace com ligaduras de codigo. A melhor para IDEs.
-47,Fira Code,monospace,300;400;500;600;700,normal,cyrillic;cyrillic-ext;greek;greek-ext;latin;latin-ext,true,92,Codigo;terminais;sites de dev,Hacker e funcional,Fira Sans;DM Sans,Monospace com ligaduras de programacao. Muito popular.
-48,IBM Plex Mono,monospace,100;200;300;400;500;600;700,normal;italic,cyrillic;cyrillic-ext;latin;latin-ext;vietnamese,false,88,Enterprise;IBM;documentacao tecnica,Corporativo e preciso,IBM Plex Sans;DM Sans,Monospace da IBM. Completa a familia Plex.
-49,Source Code Pro,monospace,200;300;400;500;600;700;800;900,normal;italic,cyrillic;cyrillic-ext;greek;greek-ext;latin;latin-ext;vietnamese,true,91,Codigo;terminais;documentacao,Clean e funcional,Source Sans 3;Source Serif 4,Monospace da Adobe. Consistente com a familia Source.
-50,Geist Mono,monospace,100;200;300;400;500;600;700;800;900,normal,latin;latin-ext,true,95,Dev tools;Vercel;Next.js;terminais,Tecnico e moderno,Geist Sans,Font mono do Vercel. Otimizada para terminais e codigo.
-51,Caveat,handwriting,400;500;600;700,normal,cyrillic;cyrillic-ext;latin;latin-ext,true,90,Anotacoes;destaque informal;call-outs,Informal e pessoal,DM Sans;Work Sans,Script casual para anotacoes. Legivel e com personalidade.
-52,Architects Daughter,handwriting,400,normal,latin,false,82,Anotacoes;wireframes;mood boards,Handmade e descontraido,Nunito;Work Sans,Script de arquiteto. Para elementos de destaque informal.
-53,Kalam,handwriting,300;400;700,normal,devanagari;latin;latin-ext,false,83,Educacao;infantil;notas pessoais,Infantil e caloroso,Nunito;Outfit,Script manuscrita amigavel. Para publico infantil/educacao.
-54,Inter,sans-serif,100;200;300;400;500;600;700;800;900,normal;italic,cyrillic;cyrillic-ext;greek;greek-ext;latin;latin-ext;vietnamese,true,98,BLOQUEADA: escolha default sem intencionalidade,Generico,qualquer,BLOQUEADA. Usada por 40%+ dos sites. Escolher fonte e decisao de design; Inter e ausencia de decisao.
-55,Roboto,sans-serif,100;200;300;400;500;600;700;800;900,normal;italic,cyrillic;cyrillic-ext;greek;greek-ext;latin;latin-ext;vietnamese,true,95,BLOQUEADA: Material Design default,Generico,qualquer,BLOQUEADA. Default do Android/Material. Usar apenas se o projeto e explicitamente Material Design.

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

@@ -1,23 +0,0 @@
-id,name,style,license,format,sizes,best_for,avoid_with,url,description
-1,Lucide,outline,MIT,SVG,16;20;24,SaaS;dashboards;interfaces limpas,Skeuomorphic;Retro-Vintage,lucide.dev,Fork melhorado do Feather. 1500+ ícones com stroke configurável.
-2,Phosphor,outline;filled;duotone;thin;bold;regular,MIT,SVG,16;20;24;32;48,Interfaces versáteis com múltiplos pesos,Nenhum,phosphoricons.com,6 pesos com 1200+ ícones. Excelente versatilidade e consistência.
-3,Heroicons,outline;solid;mini,MIT,SVG,16;20;24,Tailwind CSS;interfaces com Headless UI,Interfaces muito densas,heroicons.com,Ícones do Tailwind Labs. 300+ ícones em 3 variantes.
-4,Tabler Icons,outline,MIT,SVG,24,Dashboards;admin panels;apps web,Apps infantis;luxury,tabler.io/icons,5400+ ícones outline com stroke consistente. Maior biblioteca MIT.
-5,Feather,outline,MIT,SVG,24,Apps minimalistas;open source,Interfaces densas;enterprise,feathericons.com,280+ ícones minimalistas. Simples mas limitado em quantidade.
-6,Material Symbols,outline;filled;rounded;sharp,Apache-2.0,SVG;WOFF2,20;24;40;48,Material Design;Android;apps Google-like,Brutalist;Retro;Apple-style,fonts.google.com/icons,2500+ ícones do Google. Variable font com peso e preenchimento ajustáveis.
-7,Bootstrap Icons,outline;filled,MIT,SVG,16,Sites Bootstrap;interfaces tradicionais,Minimalist extremo;apps mobile-first,icons.getbootstrap.com,2000+ ícones para Bootstrap. Bom para web tradicional.
-8,Ionicons,outline;filled;sharp,MIT,SVG,any,Apps Ionic;mobile-first;cross-platform,Interfaces desktop-heavy,ionic.io/ionicons,Ícones do Ionic Framework. Otimizados para mobile.
-9,Remix Icon,outline;filled,Apache-2.0,SVG,24,Apps modernos;dashboards;e-commerce,Nenhum,remixicon.com,2800+ ícones em 2 estilos. Boa cobertura para e-commerce e social.
-10,Solar Icons,outline;bold;broken;duotone;linear,CC-BY-4.0,SVG,24,Apps premium;interfaces sofisticadas,Open source purista (verificar licença),iconsets.solar,7000+ ícones em 5 estilos. Qualidade premium.
-11,Hugeicons,outline;solid;duotone;twotone;bulk,CC-BY-4.0,SVG,24,Apps com múltiplos temas;interfaces ricas,Projetos MIT-only,hugeicons.com,4000+ ícones em múltiplos estilos. Boa variedade.
-12,Iconoir,outline,MIT,SVG,24,Interfaces clean;apps minimalistas;SaaS,Interfaces muito decorativas,iconoir.com,1500+ ícones outline. Estilo francês refinado e consistente.
-13,Radix Icons,outline,MIT,SVG,15,Shadcn/ui;Radix UI;interfaces acessíveis,Interfaces que precisam de muitos ícones,icons.radix-ui.com,320+ ícones compactos 15x15. Perfeitos para Radix/Shadcn.
-14,Fluent UI Icons,outline;filled,MIT,SVG,16;20;24;28;32;48,Apps Microsoft;enterprise;Teams-like,Startups;apps criativos,github.com/microsoft/fluentui-system-icons,4000+ ícones da Microsoft. 6 tamanhos com grid perfeito.
-15,Carbon Icons,outline,Apache-2.0,SVG,16;20;24;32,IBM Carbon Design;enterprise;data-heavy,Apps consumer;casual,carbondesignsystem.com,Ícones do IBM Carbon. Otimizados para interfaces enterprise densas.
-16,Ant Design Icons,outline;filled;twotone,MIT,SVG,any,Ant Design;apps enterprise chineses,Interfaces ocidentais;minimalist,ant.design/components/icon,Ícones do Ant Design. Bom para admin panels enterprise.
-17,Boxicons,regular;solid;logo,CC-BY-4.0,SVG,24,Apps genéricos;protótipos rápidos,Interfaces premium;luxury,boxicons.com,1600+ ícones incluindo logos de marcas. Bom para prototipagem.
-18,Eva Icons,outline;filled,MIT,SVG,24,Apps mobile;interfaces com animação,Interfaces estáticas;muito densas,akveo.github.io/eva-icons,480+ ícones com animações integradas. Bom para mobile.
-19,Unicons,outline;solid;monochrome;thinline,Apache-2.0,SVG,any,Apps web genéricos;sites corporativos,Interfaces que precisam de originalidade,iconscout.com/unicons,4500+ ícones em múltiplos estilos. Grande variedade.
-20,Simple Icons,filled,CC0-1.0,SVG,any,Logos de marcas;social icons;integrações,Ícones de interface (não são para UI),simpleicons.org,3000+ logos de marcas e serviços. Apenas para representar marcas.
-21,Flagpack,filled,MIT,SVG,any,Seletores de país;internacionalização,Não são ícones de interface,flagpack.xyz,260+ bandeiras de países em estilo consistente. Para i18n.
-22,Country Flag Icons,filled,MIT,SVG,any,Bandeiras em apps;telefone country code,Não são ícones de interface,github.com/hampusborgos/country-flags,Bandeiras completas de todos os países. SVG otimizados.

package/skills/hefesto-design/data/landing-pages.csv

@@ -1,28 +0,0 @@
-id,name,section_type,position,purpose,key_elements,copywriting_pattern,a11y_notes,description
-1,Hero Headline,hero,top,Capturar atenção e comunicar proposta de valor,headline;subheadline;cta-primary;visual-hero,"Headline: benefício em 6-10 palavras. Sub: como entrega. CTA: verbo + resultado",Heading h1 único na página; CTA com role=button,Seção de abertura que define o tom. Deve comunicar o quê e para quem em 5 segundos.
-2,Hero com Vídeo,hero,top,Demonstrar produto em ação,video-player;headline;cta-primary;caption,"Headline: resultado que o produto entrega. CTA: Começar / Ver demo",Video com captions; controles de play/pause acessíveis,Hero com vídeo de demonstração. Autoplay mutado com controles visíveis.
-3,Social Proof Logos,social-proof,top,Construir credibilidade institucional,logo-grid;tagline,"Usado por +500 empresas ou Confiado por líderes de mercado",Logos com alt text do nome da empresa,Grid de logos de clientes. Posicionar logo abaixo do hero.
-4,Social Proof Testimonials,social-proof,middle,Prova social com depoimentos reais,quote;avatar;name;role;company;rating,Depoimento em primeira pessoa sobre resultado concreto,blockquote semântico; cite com autor,"Carrossel ou grid de depoimentos. Incluir foto e cargo real."
-5,Features Grid,features,middle,Apresentar funcionalidades principais,icon;title;description (grid 3-4 colunas),"Título: benefício em 3-5 palavras. Descrição: como funciona em 1 frase",Headings hierárquicos; ícones decorativos com aria-hidden,Grid de features com ícone e texto. Max 6-8 items.
-6,Features Alternating,features,middle,Detalhar features com visuais,image;title;description (alternando esquerda/direita),"Cada feature: problema → como resolve → resultado",Imagens com alt descritivo; hierarquia de headings,Seções alternadas imagem+texto. Bom para 3-5 features principais.
-7,Pricing Table,pricing,middle,Converter visitante em cliente,price-card;feature-list;cta;toggle-annual-monthly,"Plano recomendado destacado. CTA: Começar grátis / Assinar agora",Tabela comparativa com scope; toggle anunciado,Tabela de preços com 2-4 planos. Destaque visual no plano recomendado.
-8,Pricing Toggle,pricing,middle,Mostrar economia anual vs mensal,toggle;price-display;savings-badge,"Toggle: Mensal / Anual (economize X%). Badge: Economia de R$Y",Toggle com aria-pressed; preços atualizados com aria-live,Toggle de período com badge de economia. Ancorar acima da pricing table.
-9,FAQ Accordion,faq,bottom,Resolver objeções e dúvidas comuns,accordion;question;answer,"Pergunta: dúvida do cliente em linguagem dele. Resposta: direta e curta",details/summary ou aria-expanded; teclado enter/space,Accordion de perguntas frequentes. 5-10 perguntas mais comuns.
-10,CTA Banner,cta,bottom,Conversão final após scroll,headline;cta-button;background,"Headline: urgência ou benefício final. CTA: ação clara",CTA com role=button; contraste AA no banner,Banner de chamada final. Posicionar antes do footer. Cor de acento.
-11,CTA Inline,cta,any,Capturar conversão no meio do conteúdo,headline;cta-button;supporting-text,"Pronto para X? CTA: Começar agora",Mesmo padrão do CTA banner,CTA menor embutido entre seções de conteúdo.
-12,Comparison Table,features,middle,Comparar com concorrentes ou planos,table;checkmark;cross;highlight,"Coluna do produto destacada. Checkmarks para features inclusas",Tabela com headers de coluna; scope=col,Tabela comparativa com check/cross. Destacar coluna do próprio produto.
-13,Stats Counter,social-proof,any,Mostrar métricas impressionantes,number;label;icon,"Número grande + label curta: +50K usuários; 99.9% uptime; 4.8/5 rating",Números com aria-label incluindo unidade,Contadores de métricas. 3-4 stats em linha. Animação de contagem.
-14,Team Grid,trust,middle,Humanizar a empresa,avatar;name;role;social-links,Nome e cargo real. Link para LinkedIn opcional,Imagens com alt=nome da pessoa,Grid de membros da equipe. Foto real e cargo.
-15,Logo Wall,social-proof,any,Mostrar integrações ou parceiros,logo-grid;category-filter,"Integra com +50 ferramentas ou Parceiros de confiança",Logos com alt text; decorativos com aria-hidden se redundante,Grid de logos de integrações/parceiros. Pode ter categorias.
-16,Newsletter Signup,cta,bottom,Capturar email para nurturing,email-input;submit-button;privacy-note,"Input: Seu melhor email. CTA: Receber novidades. Privacy: Sem spam.",label associado ao input; form com aria-describedby para privacy,Formulário de newsletter. Minimizar campos (só email).
-17,Footer Mega,navigation,bottom,Navegação completa e informações legais,link-columns;social-icons;copyright;legal-links,Organizar links por categoria. Incluir suporte e legal,nav com aria-label=Footer; links com texto descritivo,Footer com múltiplas colunas de links. Redes sociais e legal.
-18,Before/After,features,middle,Demonstrar transformação visual,slider;before-image;after-image,"Antes: problema visível. Depois: resultado com produto",Slider com aria-label; imagens com alt descritivo,Slider comparativo antes/depois. Interativo com drag.
-19,Demo Video,features,middle,Mostrar produto funcionando,video-player;chapter-marks;cta,"Vídeo de 1-3 min. CTA após vídeo: Testar agora",Captions completas; controles de reprodução,Seção de vídeo demonstrativo. Thumbnail atrativa e autoplay off.
-20,Timeline,features,middle,Mostrar roadmap ou história,timeline-item;date;title;description,"Marcos com datas e conquistas. Futuro: roadmap planejado",Lista ordenada semanticamente; datas em time element,Linha temporal de marcos. Vertical em mobile; horizontal opcional desktop.
-21,Integrations Grid,features,middle,Mostrar compatibilidade,logo;name;category;status,"Conecta com suas ferramentas favoritas. 50+ integrações",Grid com alt nos logos; status com cor + texto,Grid de integrações disponíveis com categorias.
-22,How It Works,features,middle,Explicar processo em 3-4 passos,step-number;title;description;visual,"3 passos: 1. Conecte 2. Configure 3. Pronto. Cada um com ícone/ilustração",Lista ordenada; ícones decorativos,Seção de passos. Sempre 3-4 passos simples com visual.
-23,Guarantee Badge,trust,bottom,Reduzir risco percebido,badge;guarantee-text;details,"Garantia de X dias. Sem perguntas. Reembolso total.",Texto legível; não depender só do ícone,Badge de garantia. Posicionar perto do CTA final.
-24,Early Access,cta,any,Capturar early adopters,email-input;waitlist-count;benefit,"Junte-se a X pessoas na lista. Acesso antecipado + benefício exclusivo",Mesmo padrão de newsletter signup,Formulário de waitlist com contagem social.
-25,App Screenshot,features,any,Mostrar interface do produto,screenshot;device-frame;annotation,Screenshot real em device mockup com anotações de features,Imagem com alt descritivo do que mostra,Screenshot do app em mockup de device. Anotações opcionais.
-26,Pricing Calculator,pricing,middle,Permitir cálculo customizado,slider;inputs;price-display;cta,"Quanto você usa? Slider: X unidades. Preço: R$Y/mês. CTA: Contratar",Inputs com labels; resultado com aria-live,Calculadora interativa de preço por uso.
-27,Trust Badges,trust,any,Reforçar segurança e certificações,badge-icon;label;certification,"SSL Seguro; SOC 2; LGPD Compliant; PCI DSS",Badges com alt text; não decorativos,Badges de segurança e certificações. Perto de formulários de pagamento.

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

@@ -1,46 +0,0 @@
-id,name,category,audience,recommended_style,recommended_palette_type,recommended_spacing,navigation_pattern,key_components,layout_pattern,description
-dashboard-analytics,Dashboard Analytics,analytics,data analysts,Swiss-International;Dark-Mode-Premium,neutral-functional;dark-layered,tight,sidebar + tabs,chart;table;filter;metric-card;date-picker,12-col grid com sidebar fixa,Painel de dados com foco em visualização. Prioriza densidade e scanability.
-saas-landing,SaaS Landing Page,marketing,prospects,Minimalist;Gradient-Mesh,monochromatic;multi-gradient,generous,single-page scroll,hero;features;pricing;testimonials;cta,seções full-width empilhadas,Página de conversão para produto SaaS. Foco em storytelling e CTA claro.
-ecommerce-catalog,E-commerce Catalog,commerce,shoppers,Flat;Corporate-Modern,solid-vibrant;blue-neutral,moderate,top nav + filters sidebar,product-card;filter;cart;breadcrumb;pagination,grid 3-4 colunas com sidebar de filtros,Catálogo de produtos com filtros e navegação por categorias.
-blog-magazine,Blog / Magazine,content,readers,Editorial-Magazine;Magazine-Grid,neutral-accent,generous,top nav + categories,article-card;author-bio;tag;share;newsletter,layout de duas colunas com sidebar,Publicação editorial com foco em leitura e descoberta de conteúdo.
-portfolio,Portfolio,creative,clients,Minimalist;Japanese-Minimal,monochromatic;warm-neutral,generous,minimal nav,project-card;hero;about;contact;lightbox,full-width sections com transições suaves,Vitrine criativa para projetos. Foco em impacto visual e simplicidade.
-admin-panel,Admin Panel,enterprise,operators,Dashboard-Dense;Swiss-International,neutral-functional,tight,sidebar permanente,table;form;modal;toast;breadcrumb,layout com sidebar + content area + action bar,Painel administrativo para operações internas. Prioriza eficiência.
-social-feed,Social Feed,social,users,Flat;Material-You,solid-vibrant;dynamic-tonal,moderate,bottom tab bar (mobile) + sidebar (desktop),post-card;avatar;like;comment;share;story,feed vertical com cards empilhados,Feed social com interações rápidas. Foco em engajamento e scroll contínuo.
-messaging-app,Messaging App,social,users,Dark-Mode-Premium;Minimalist,dark-layered;monochromatic,compact,sidebar de conversas + chat area,message-bubble;input;emoji;attachment;avatar,split view: lista + conversa,App de mensagens em tempo real. Foco em fluidez e resposta rápida.
-marketplace,Marketplace,commerce,buyers;sellers,Corporate-Modern;Flat,blue-neutral;solid-vibrant,moderate,top nav + search + categories,listing-card;search;filter;rating;map,grid com search bar proeminente,Plataforma de compra e venda entre usuários. Busca e confiança são chave.
-booking-system,Booking System,commerce,travelers,Minimalist;Corporate-Modern,monochromatic;blue-neutral,moderate,step wizard + top nav,calendar;date-picker;card;map;review,wizard multi-step com preview lateral,Sistema de reservas com fluxo guiado. Datas e disponibilidade em destaque.
-crm,CRM,enterprise,sales teams,Dashboard-Dense;Corporate-Modern,neutral-functional;blue-neutral,tight,sidebar + tabs + search,contact-card;pipeline;table;chart;activity-log,kanban + list views intercambiáveis,Gestão de relacionamento com clientes. Pipeline visual e histórico de atividades.
-project-management,Project Management,productivity,teams,Flat;Material-You,solid-vibrant;dynamic-tonal,moderate,sidebar + board/list toggle,kanban;task-card;timeline;gantt;avatar-group,views múltiplas: board;list;timeline;calendar,Gestão de projetos com múltiplas visualizações. Colaboração em equipe.
-documentation-site,Documentation Site,content,developers,Minimalist;Text-Only,monochromatic,generous,sidebar de navegação + TOC,search;code-block;table;callout;breadcrumb,sidebar fixa + conteúdo central + TOC direita,Site de documentação técnica. Busca rápida e navegação hierárquica.
-onboarding-flow,Onboarding Flow,utility,new users,Soft-Pastel;Material-You,pastel;dynamic-tonal,generous,step indicator + next/back,progress;illustration;form;tooltip;celebration,wizard linear com ilustrações,Fluxo de boas-vindas para novos usuários. Reduz fricção e guia passo a passo.
-pricing-page,Pricing Page,marketing,prospects,Minimalist;Gradient-Mesh,monochromatic;multi-gradient,generous,embedded in main nav,pricing-card;toggle;feature-table;faq;cta,3 colunas com destaque no plano recomendado,Página de preços com comparativo. Destaque no plano ideal para conversão.
-checkout,Checkout,commerce,buyers,Minimalist,monochromatic,moderate,step indicator minimal,form;order-summary;payment;address;trust-badge,split: formulário esquerda + resumo direita,Fluxo de pagamento otimizado. Mínimo de distrações para maximizar conversão.
-mobile-banking,Mobile Banking,finance,account holders,Minimalist;Glassmorphism,monochromatic;gradient-translucent,moderate,bottom tab bar,balance-card;transaction;chart;transfer;notification,cards empilhados com ações rápidas,App bancário mobile. Saldo visível e ações frequentes acessíveis.
-food-delivery,Food Delivery,commerce,hungry users,Playful;Flat,primary-saturated;solid-vibrant,moderate,bottom tab bar + search,restaurant-card;menu;cart;map;rating,feed de cards com categorias horizontais,App de delivery de comida. Descoberta rápida e pedido em poucos toques.
-streaming-platform,Streaming Platform,entertainment,viewers,Dark-Mode-Premium;Maximalist,dark-layered;multi-chromatic,moderate,top nav + sidebar,hero-banner;carousel;card-grid;player;category,hero fullscreen + rows de conteúdo,Plataforma de streaming de vídeo. Descoberta visual e reprodução imersiva.
-news-reader,News Reader,content,readers,Editorial-Magazine;Swiss-International,neutral-accent;bw-accent,moderate,top nav + categories,article-card;headline;breaking;timeline;share,grid assimétrico com breaking news destaque,Leitor de notícias com hierarquia editorial. Breaking news em destaque.
-learning-platform,Learning Platform,content,students,Soft-Pastel;Material-You,pastel;dynamic-tonal,generous,sidebar de cursos + progress,video-player;quiz;progress;certificate;note,layout de curso com sidebar de módulos,Plataforma de ensino online. Progresso visível e conteúdo estruturado.
-ide-dev-tool,IDE / Dev Tool,productivity,developers,Dark-Mode-Premium;Retro-Computing,dark-layered;neon-dark,tight,sidebar + tabs + terminal,editor;terminal;file-tree;tab;status-bar,panels resizáveis multi-pane,Ambiente de desenvolvimento. Painéis flexíveis e atalhos de teclado.
-email-client,Email Client,productivity,professionals,Swiss-International;Corporate-Modern,bw-accent;blue-neutral,moderate,sidebar + list + reader,email-list;compose;folder;search;attachment,3 painéis: folders + lista + leitura,Cliente de email com três painéis. Produtividade e organização por pastas.
-calendar-app,Calendar App,productivity,professionals,Minimalist;Flat,monochromatic;solid-vibrant,moderate,sidebar + view toggle,calendar-grid;event;time-slot;mini-calendar;recurrence,grid de horários com sidebar de mini-cal,Aplicativo de calendário. Visualizações dia/semana/mês com eventos coloridos.
-file-manager,File Manager,utility,all users,Flat;Swiss-International,solid-vibrant;bw-accent,moderate,sidebar + breadcrumb + toolbar,file-card;folder;breadcrumb;toolbar;context-menu,grid/list toggle com breadcrumb,Gerenciador de arquivos. Navegação por pastas com preview de arquivos.
-settings-panel,Settings Panel,utility,all users,Minimalist;Swiss-International,monochromatic;bw-accent,moderate,sidebar de categorias,form;toggle;select;section-header;save-button,lista de categorias + formulários,Painel de configurações. Organizado por categorias com formulários simples.
-profile-page,Profile Page,social,users,Minimalist;Glassmorphism,monochromatic;gradient-translucent,generous,tab bar sob header,avatar;cover;stats;tab;activity-feed,hero com avatar + tabs de conteúdo,Página de perfil do usuário. Identidade visual e atividade recente.
-search-results,Search Results,utility,searchers,Swiss-International;Minimalist,bw-accent;monochromatic,moderate,top search bar + filters,result-card;filter;pagination;facet;sort,lista com filtros laterais,Página de resultados de busca. Filtros e relevância em destaque.
-notification-center,Notification Center,utility,all users,Flat;Minimalist,solid-vibrant;monochromatic,compact,dropdown ou page,notification-card;badge;filter;mark-read;group,lista cronológica agrupada por tempo,Central de notificações. Agrupamento temporal e ações rápidas.
-kanban-board,Kanban Board,productivity,teams,Flat;Material-You,solid-vibrant;dynamic-tonal,moderate,top toolbar,column;card;avatar;tag;drag-handle,colunas horizontais com drag-and-drop,Quadro kanban para gestão visual. Drag-and-drop entre colunas de status.
-form-wizard,Form Wizard,utility,submitters,Soft-Pastel;Minimalist,pastel;monochromatic,generous,step indicator,form;validation;progress;summary;submit,steps lineares com validação por etapa,Formulário multi-etapa guiado. Validação progressiva e resumo final.
-invoice-receipt,Invoice / Receipt,finance,businesses,Swiss-International;Corporate-Modern,bw-accent;blue-neutral,moderate,embedded,table;total;logo;payment-status;download,layout de documento com cabeçalho e tabela,Documento fiscal ou recibo. Layout formal com dados estruturados.
-report-builder,Report Builder,analytics,analysts,Dashboard-Dense;Swiss-International,neutral-functional;bw-accent,tight,toolbar + canvas,chart;filter;drag-drop;export;template,canvas com drag-drop de widgets,Construtor de relatórios interativo. Widgets arrastáveis e exportação.
-social-media-scheduler,Social Media Scheduler,marketing,marketers,Flat;Corporate-Modern,solid-vibrant;blue-neutral,moderate,sidebar + calendar,calendar;post-preview;analytics;queue;platform-icon,calendar com preview de posts,Agendador de posts em redes sociais. Calendário visual e preview multi-plataforma.
-help-desk,Help Desk / Support,enterprise,support agents,Corporate-Modern;Flat,blue-neutral;solid-vibrant,moderate,sidebar + inbox,ticket-card;chat;knowledge-base;priority;sla-timer,inbox com detalhes do ticket,Sistema de suporte ao cliente. Gestão de tickets com SLA e base de conhecimento.
-inventory-management,Inventory Management,enterprise,warehouse,Dashboard-Dense;Swiss-International,neutral-functional;bw-accent,tight,sidebar + table,table;barcode;stock-level;alert;filter,tabelas densas com alertas visuais,Gestão de estoque. Tabelas densas com alertas de nível crítico.
-pos-system,POS System,commerce,cashiers,Flat;Neobrutalism,solid-vibrant;vibrant-contrast,generous touch,grid de produtos + carrinho,product-grid;cart;payment;receipt;numpad,grid de toque com carrinho lateral,Sistema de ponto de venda. Interface touch-friendly para operações rápidas.
-real-estate-listing,Real Estate Listing,commerce,home seekers,Minimalist;Corporate-Modern,monochromatic;blue-neutral,moderate,search + map,listing-card;map;gallery;filter;contact-form,split map + listings,Listagem de imóveis com mapa. Busca geográfica e galeria de fotos.
-job-board,Job Board,commerce,job seekers,Corporate-Modern;Minimalist,blue-neutral;monochromatic,moderate,search + filters,job-card;filter;apply-button;company-logo;salary,lista filtrada com detalhes,Portal de vagas de emprego. Filtros por área e candidatura simplificada.
-recipe-app,Recipe App,content,home cooks,Organic-Natural;Soft-Pastel,earth-tones;pastel,generous,bottom tab bar,recipe-card;ingredient;timer;step;photo,cards visuais com instruções passo a passo,App de receitas culinárias. Fotos atrativas e modo passo a passo.
-fitness-tracker,Fitness Tracker,utility,athletes,Dark-Mode-Premium;AI-Native,dark-layered;dark-gradient,moderate,bottom tab bar,ring-chart;activity-card;stats;calendar;goal,dashboard pessoal com rings de progresso,Rastreador de exercícios. Anéis de progresso e metas diárias.
-meditation-app,Meditation App,utility,wellness seekers,Japanese-Minimal;Soft-Pastel,warm-neutral;pastel,generous,minimal bottom nav,timer;breathing-guide;session-card;streak;sound-picker,telas calmas com muito whitespace,App de meditação e bem-estar. Interface serena com foco em respiração.
-wedding-planner,Wedding Planner,utility,couples,Soft-Pastel;Luxury-Refined,pastel;dark-gold,generous,sidebar + checklist,checklist;timeline;budget;vendor-card;gallery,timeline visual com checklist,Planejador de casamento. Timeline de tarefas e controle de orçamento.
-pet-care,Pet Care,utility,pet owners,Playful;Soft-Pastel,primary-saturated;pastel,moderate,bottom tab bar,pet-profile;reminder;vet-card;activity;photo,perfil do pet com lembretes e histórico,App de cuidados com pets. Perfil do animal com lembretes de saúde.
-analytics-dashboard-saas,Analytics Dashboard SaaS,analytics,business users,AI-Native;Dashboard-Dense,dark-gradient;neutral-functional,tight,sidebar + command palette,chart;kpi-card;table;alert;ai-insight,dashboard com insights AI integrados,Dashboard analítico com IA. Insights automáticos e visualizações inteligentes.

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

@@ -1,16 +0,0 @@
-id,name,style,base_unit,scale,density,touch_min,description
-1,Tight Dashboard,tight,4px,"4 8 12 16 20 24 32 40 48",alta,40px,Espaçamento compacto para dashboards e painéis de dados densos. Prioriza quantidade de informação visível. Ideal para interfaces analíticas onde o usuário precisa ver muitos dados simultaneamente.
-2,Comfortable App,comfortable,8px,"8 12 16 24 32 48 64 80 96",média,44px,Espaçamento confortável para aplicações web de uso diário. Equilíbrio entre densidade e respiro. Padrão recomendado para a maioria dos SaaS e apps de produtividade.
-3,Generous Editorial,generous,8px,"8 16 24 32 48 64 96 128 160",baixa,48px,Espaçamento generoso para sites editoriais e blogs. Muito whitespace para conforto de leitura prolongada. Ideal para publicações com textos longos e narrativas visuais.
-4,Extreme Luxury,extreme,8px,"16 24 32 48 64 96 128 192 256",muito baixa,48px,Espaçamento extremamente generoso para marcas de luxo. Enorme whitespace como elemento de design. Cada elemento respira com espaço que transmite exclusividade e sofisticação.
-5,Compact Mobile,compact,4px,"4 8 12 16 20 24 32 40 48",alta,44px,Espaçamento compacto otimizado para telas mobile. Touch targets de 44px mínimo mantidos. Prioriza conteúdo útil no viewport limitado sem sacrificar usabilidade touch.
-6,Relaxed Content,relaxed,8px,"8 16 24 32 48 64 80 96 128",média-baixa,44px,Espaçamento relaxado para sites de conteúdo e landing pages. Respiro generoso entre seções. Bom equilíbrio entre conteúdo e whitespace para escaneamento confortável.
-7,Technical Data,technical,4px,"2 4 8 12 16 20 24 32 40",muito alta,36px,Espaçamento ultra-denso para interfaces técnicas como IDEs e terminais e tabelas de dados. Otimizado para mostrar máxima informação. Requer familiaridade do usuário com a interface.
-8,Playful Kids,playful,8px,"8 16 24 32 48 64 80 96 128",baixa,56px,Espaçamento amplo e arejado para apps infantis e educativos. Touch targets grandes de 56px para crianças. Elementos bem separados para reduzir toques acidentais por coordenação motora em desenvolvimento.
-9,Corporate Business,corporate,8px,"8 12 16 24 32 40 48 64 80",média,44px,Espaçamento profissional para interfaces corporativas e B2B. Moderadamente denso para eficiência mas com respiro suficiente para clareza. Ideal para ERPs e CRMs e ferramentas enterprise.
-10,Minimal Portfolio,minimal,8px,"8 16 32 48 64 96 128 160 192",baixa,44px,Espaçamento minimalista com grandes intervalos para portfólios e galerias. O vazio é protagonista. Cada elemento existe isolado com espaço intencional que direciona o olhar.
-11,Dense Form,dense,4px,"4 8 12 16 20 24 28 32 40",alta,44px,Espaçamento otimizado para formulários longos e complexos. Campos próximos para visão geral mas com espaço suficiente para labels e helpers. Touch targets mantidos em 44px.
-12,Airy Wellness,airy,8px,"12 16 24 32 48 64 96 128 160",baixa,48px,Espaçamento arejado e sereno para apps de wellness e meditação e saúde. Transmite calma através do espaço. Cada elemento tem espaço para respirar refletindo o propósito da aplicação.
-13,Modular Grid,modular,8px,"8 16 24 32 48 64 96 128 160",média,44px,Espaçamento baseado em grid modular rigoroso estilo Swiss Design. Todos os elementos alinhados a uma grade de 8px com proporções matemáticas. Ideal para layouts tipográficos e publicações.
-14,Card Interface,card,8px,"8 12 16 24 32 40 48 64 80",média,44px,Espaçamento otimizado para interfaces baseadas em cards. Gap entre cards de 16-24px e padding interno de 16-24px. Hierarquia clara entre espaço interno dos cards e externo entre cards.
-15,Fluid Responsive,fluid,clamp(),"clamp(4px 1vw 8px) a clamp(32px 8vw 128px)",adaptativa,44px,Espaçamento fluido que escala com viewport usando clamp(). Sem breakpoints abruptos. Transição suave de mobile a desktop. Ideal para sites responsivos que precisam funcionar em qualquer tela.