Pular para o conteúdo principal

Paleta de Cores

Esta página define a paleta de cores oficial da documentação n8n Brasil e como utilizá-la de forma consistente.

Cores Principais​

n8n Pink (#ea4b71)​

  • Uso: Cor principal da marca n8n
  • Aplicação: Títulos, ícones principais, destaque de elementos
  • Exemplo: 
    <ion-icon name="star" style={{ color: '#ea4b71' }}></ion-icon>

n8n Blue (#0066cc)​

  • Uso: Cor secundária da marca
  • Aplicação: Links, botões, elementos interativos
  • Exemplo: Links de navegação e call-to-actions

Cores Semânticas​

Sucesso (#10b981)​

  • Uso: Confirmações, sucessos, checkmarks
  • Aplicação: Status de sucesso, validações positivas
  • Exemplo: 
    <ion-icon name="checkmark" style={{ color: '#10b981' }}></ion-icon>

Aviso (#f59e0b)​

  • Uso: Alertas, avisos, informações importantes
  • Aplicação: Notificações, dicas, conteúdo em construção
  • Exemplo: 
    <ion-icon name="warning" style={{ color: '#f59e0b' }}></ion-icon>

Erro (#ef4444)​

  • Uso: Erros, falhas, problemas críticos
  • Aplicação: Mensagens de erro, validações negativas
  • Exemplo: 
    <ion-icon name="close-circle" style={{ color: '#ef4444' }}></ion-icon>

Informação (#06b6d4)​

  • Uso: Informações neutras, dados, estatísticas
  • Aplicação: Tooltips, informações adicionais
  • Exemplo: 
    <ion-icon name="information" style={{ color: '#06b6d4' }}></ion-icon>

Cores Neutras​

Cinza Escuro (#374151)​

  • Uso: Texto principal, títulos secundários
  • Aplicação: Conteúdo de leitura, navegação

Cinza Médio (#6b7280)​

  • Uso: Texto secundário, subtítulos
  • Aplicação: Descrições, metadados

Cinza Claro (#9ca3af)​

  • Uso: Texto terciário, placeholders
  • Aplicação: Textos de suporte, legendas

Cinza Muito Claro (#f3f4f6)​

  • Uso: Fundos, separadores
  • Aplicação: Backgrounds de seções, cards

Cores de Destaque​

Roxo (#8b5cf6)​

  • Uso: Elementos especiais, premium
  • Aplicação: Features avançadas, conteúdo premium

Verde (#84cc16)​

  • Uso: Links, elementos de ação
  • Aplicação: Links externos, referências

Rosa (#ec4899)​

  • Uso: Elementos de destaque, callouts
  • Aplicação: Destaques especiais, promoções

Como Usar​

Em Componentes IonicIcon​

<LocalIcon name="star" color="#ea4b71" size={24} />
<LocalIcon name="checkmark" color="#10b981" size={20} />
<LocalIcon name="warning" color="#f59e0b" size={16} />

Em CSS Customizado​

.success-color { color: #10b981; }
.warning-color { color: #f59e0b; }
.error-color { color: #ef4444; }
.info-color { color: #06b6d4; }

Em Admonitions​

:::tip[**Dica**]
Conteúdo com cor de sucesso automática
:::

:::warning[**Atenção**]
Conteúdo com cor de aviso automática
:::

:::danger[**Cuidado**]
Conteúdo com cor de erro automática
:::

:::info[**Informação**]
Conteúdo com cor de informação automática
:::

Acessibilidade​

Contraste Mínimo​

  • Texto sobre fundo claro: 4.5:1
  • Texto sobre fundo escuro: 3:1
  • Elementos grandes: 3:1

Teste de Contraste​

Sempre teste o contraste usando ferramentas como:

Exemplos Práticos​

Cards de Destaque​

<HighlightCard 
  title="Destaque Importante"
  description="Informação relevante"
  type="success" // Usa cor #10b981
/>

<ArticleCard 
  title="Título do Card"
  description="Descrição"
  link="./caminho"
  // Links usam cor #84cc16
/>

Status de Workflow​

// Sucesso
<ion-icon name="checkmark-circle" style={{ color: '#10b981' }}></ion-icon>

// Em execução  
<ion-icon name="time" style={{ color: '#f59e0b' }}></ion-icon>

// Erro
<ion-icon name="close-circle" style={{ color: '#ef4444' }}></ion-icon>

Checklist de Cores​

Antes de usar cores, verifique:

  • Contraste adequado para acessibilidade
  • Consistência com a paleta oficial
  • Semântica correta (sucesso, erro, aviso, info)
  • Uso moderado de cores vibrantes
  • Teste em diferentes dispositivos

Uma paleta consistente cria uma experiência visual coesa e profissional!