IntermediárioUI DesignAberto

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.

coresdesign tokensmodo escuroacessibilidadepaleta

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

  1. 1Cole o prompt diretamente no ChatGPT, Claude, Gemini ou qualquer assistente de IA.
  2. 2Personalize os campos entre colchetes [assim] com suas informações específicas.
  3. 3Para melhores resultados, forneça contexto adicional sobre seu caso de uso.
  4. 4Combine múltiplos prompts em uma conversa para resultados mais completos.
  5. 5Salve os prompts que mais usa para acesso rápido no futuro.

Prompts relacionados

Ver todos

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.

Assinar por R$ 49,90/mês

Cancele quando quiser. Sem multas.