Sistema de cores para produto digital com acessibilidade garantida
Cria uma paleta de cores completa com tokens semanticos, modos claro/escuro e conformidade WCAG AA.
Objetivo do Prompt
Definir um sistema de cores robusto e acessivel que funcione em todos os contextos de UI, reduzindo decisoes ad hoc e garantindo consistencia visual.
Exemplo Real de Uso
A FinFlow, fintech de Recife com 200 mil usuarios ativos, esta redesenhando seu app e precisa de um sistema de cores que funcione tanto no modo claro quanto escuro, mantendo contraste WCAG AA em todos os componentes.
Prompt
Crie um sistema de cores completo para [NOME DO PRODUTO], um [TIPO DE PRODUTO] do setor de [SETOR] voltado para [PUBLICO-ALVO]. A identidade visual atual usa as cores [COR PRIMARIA] e [COR SECUNDARIA]. O produto precisa suportar modo claro e escuro. **1) Paleta Base:** - Cor primaria: 10 variacoes (50 a 950) com valores HEX, HSL e RGB - Cor secundaria: 10 variacoes - Neutros: 12 variacoes (do branco ao preto) - Semanticas: success, warning, error, info (5 variacoes cada) **2) Tokens Semanticos:** - Background: primary, secondary, tertiary, inverse - Text: primary, secondary, disabled, inverse, link - Border: default, focus, error - Interactive: default, hover, pressed, disabled - Surface: card, modal, tooltip, overlay **3) Modo Escuro:** - Mapeamento completo de cada token para dark mode - Regras de elevacao (surface levels 0-5) - Ajustes de saturacao para cores semanticas no escuro **4) Acessibilidade:** - Tabela de contraste para todas as combinacoes texto/fundo (WCAG AA minimo) - Pares proibidos (contraste insuficiente) - Alternativas para daltonismo (deuteranopia, protanopia) **5) Implementacao no Figma:** - Estrutura de variaveis recomendada - Naming convention para tokens - Como organizar os estilos de cor Formate como documentacao tecnica pronta para implementar no [FIGMA/ADOBE XD/STORYBOOK].
Como usar este prompt
- 1Cole o prompt diretamente no ChatGPT, Claude, Gemini ou qualquer assistente de IA.
- 2Personalize os campos entre colchetes [assim] com suas informações específicas.
- 3Para melhores resultados, forneça contexto adicional sobre seu caso de uso.
- 4Combine múltiplos prompts em uma conversa para resultados mais completos.
- 5Salve os prompts que mais usa para acesso rápido no futuro.
Prompts relacionados
Ver todosHierarquia tipografica para interfaces responsivas
Define uma escala tipografica completa com fluid typography, pesos e espacamentos para web e mobile.
Layout responsivo com grid system para dashboards complexos
Projeta um sistema de grid flexivel para dashboards com cards, tabelas e graficos que se adaptam a qualquer viewport.
Biblioteca de micro-interacoes para engajamento e feedback
Cataloga micro-interacoes para estados de componentes, transicoes e feedback visual que melhoram a percepcao de qualidade.
Especificacao completa de dark mode para produto existente
Guia tecnico para implementar dark mode em um produto que so possui tema claro, cobrindo todos os edge cases.
Explore outras categorias de prompts
Assine o AulasDeIA para desbloquear
Acesse 10.000+ prompts prontos para usar em qualquer profissão, além de todos os cursos da plataforma.
Cancele quando quiser. Sem multas.
