Módulo 1.5 - Sistema de Cores e Tokens

🎯 Fundamentos da Teoria das Cores

A teoria das cores é a base para criar paletas harmoniosas e funcionais. Entender como as cores interagem e afetam a percepção do usuário é essencial para dashboards que comunicam informações de forma eficaz.

🔵 A Roda de Cores (Color Wheel)

Cores Primárias

Vermelho, Amarelo e Azul são as cores que não podem ser criadas misturando outras cores.

Cores Secundárias

Laranja, Verde e Roxo são criadas misturando duas cores primárias.

🎨 Harmonias de Cores para Dashboards

Monocromática

Uma cor em diferentes tonalidades. Ideal para dashboards limpos e profissionais.

Análoga

Cores adjacentes na roda. Cria sensação de harmonia e fluidez.

Complementar

Cores opostas na roda. Máximo contraste, ideal para destacar elementos importantes.

Triádica

Três cores equidistantes. Vibrante e equilibrada, boa para gráficos com múltiplas séries.

🔥 Cores Quentes

• Transmitem energia, urgência, ação
• Ideais para alertas e CTAs
• Chamam atenção imediata
• Usar com moderação

❄️ Cores Frias

• Transmitem calma, confiança, estabilidade
• Ideais para fundos e elementos principais
• Profissionalismo corporativo
• Mais usadas em dashboards

🏷️ Design Tokens: O Que São e Por Que Usar

Design Tokens são variáveis que armazenam decisões de design (cores, tipografia, espaçamento) de forma agnóstica à plataforma. São o elo entre designers e desenvolvedores, garantindo consistência visual.

📦 Anatomia de um Design Token

// Estrutura de um Token
{
  "name": "color-primary-500",
  "value": "#3B82F6",
  "type": "color",
  "description": "Primary brand color"
}

Nome (Name)

Identificador único, semântico e descritivo

Valor (Value)

O valor real: cor, tamanho, fonte

Tipo (Type)

Categoria: color, spacing, typography

🏗️ Hierarquia de Design Tokens

Primitive Tokens (Base)

Valores brutos sem semântica

blue-500: #3B82F6

Semantic Tokens (Semânticos)

Propósito e significado

color-primary: {blue-500}

Component Tokens (Componentes)

Específicos para componentes

button-primary-bg: {color-primary}

✨ Benefícios dos Design Tokens

✓ Consistência Visual Garantida

✓ Mudanças Globais com Uma Alteração

✓ Ponte Design ↔ Desenvolvimento

✓ Suporte a Múltiplos Temas

✓ Documentação Automática

✓ Escalabilidade do Sistema

🔧 Criando Paletas de Cores com Tailwind

O Tailwind CSS oferece um sistema de cores robusto e extensível. Vamos aprender a personalizar e estender a paleta para criar um design system único para seu dashboard.

⚙️ Configurando Cores no tailwind.config.js

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        // Cores de Marca
        primary: {
          50:  '#eff6ff',
          100: '#dbeafe',
          200: '#bfdbfe',
          300: '#93c5fd',
          400: '#60a5fa',
          500: '#3b82f6', // Principal
          600: '#2563eb',
          700: '#1d4ed8',
          800: '#1e40af',
          900: '#1e3a8a',
        },
        // Dark Mode
        dark: {
          900: '#111827',
          800: '#1f2937',
          700: '#374151',
          600: '#4b5563',
        },
      },
    },
  },
}

📊 Escala de Cores (50-950)

Cada cor deve ter uma escala completa para máxima flexibilidade:

Primary (Azul)

100

200

300

400

500

600

700

800

900

Sucesso (Verde)

100

200

300

400

500

600

700

800

900

🛠️ Ferramentas para Gerar Paletas

Tailwind Ink

Gera escalas completas a partir de uma cor

ink.tailwindcss.com

Coolors

Gerador de paletas harmoniosas

coolors.co

UI Colors

Paletas otimizadas para Tailwind

uicolors.app

Realtime Colors

Preview em tempo real

realtimecolors.com

🎭 Cores Semânticas para Dashboards

Cores semânticas atribuem significado às cores baseado em seu uso, não em seu valor. Em dashboards, isso é crucial para comunicar estados, alertas e informações de forma intuitiva.

🚦 Sistema de Cores de Estado

✓

Sucesso

Ação concluída, meta atingida, status positivo

emerald-500

✗

Erro / Perigo

Falha crítica, alerta urgente, problema

red-500

⚠

Alerta

Atenção necessária, risco moderado

yellow-500

ℹ

Informação

Dados neutros, dicas, informações

blue-500

📈 Cores para KPIs e Métricas

Positivo / Crescimento

+15% vs mês anterior

↑ +15%

Negativo / Queda

-8% vs mês anterior

↓ -8%

Neutro / Estável

0% vs mês anterior

→ 0%

💻 Implementação com CSS Variables

/* Definição de variáveis semânticas */
:root {
  --color-success: #10b981;
  --color-error: #ef4444;
  --color-warning: #f59e0b;
  --color-info: #3b82f6;

  --color-text-primary: #f5f5f5;
  --color-text-secondary: #a3a3a3;

  --color-bg-primary: #111827;
  --color-bg-secondary: #1f2937;
}

/* Uso no CSS */
.alert-success {
  background-color: var(--color-success);
}

♿ Acessibilidade e Contraste de Cores

A acessibilidade de cores garante que todos os usuários possam perceber e distinguir as informações visuais. O padrão WCAG define níveis mínimos de contraste para texto e elementos interativos.

📋 Diretrizes WCAG 2.1

Nível AA (Mínimo)

• Texto normal: 4.5:1
• Texto grande (18px+): 3:1
• Elementos gráficos: 3:1

AAA

Nível AAA (Aprimorado)

• Texto normal: 7:1
• Texto grande (18px+): 4.5:1
• Recomendado para apps críticos

🔍 Exemplos de Contraste

Branco sobre Preto

Máximo contraste

21:1 ✓

Cinza claro sobre Cinza escuro

Comum em dark mode

7.5:1 ✓

Cinza médio sobre Cinza

Cuidado: pode falhar

3.2:1 ⚠

Azul claro sobre Azul

Problema comum

2.1:1 ✗

✓ Boas Práticas

• Nunca usar apenas cor para transmitir informação
• Adicionar ícones ou padrões junto com cores
• Testar com simuladores de daltonismo
• Usar ferramentas de verificação de contraste
• Manter texto legível em todos os fundos

🛠️ Ferramentas de Verificação

• WebAIM Contrast Checker
• Stark (plugin Figma)
• Color Contrast Analyzer
• axe DevTools (extensão Chrome)
• Lighthouse (auditoria automática)

👁️ Considerando o Daltonismo

Cerca de 8% dos homens e 0.5% das mulheres têm algum tipo de daltonismo. Evite depender apenas de vermelho/verde para diferenciar estados.

+ Ícone ✓

+ Ícone ✗

+ Forma diferente

🌓 Cores para Dark Mode e Light Mode

Implementar temas claro e escuro requer planejamento cuidadoso. Não basta inverter cores - cada modo precisa de sua própria paleta otimizada para legibilidade e conforto visual.

🔄 Mapeamento de Cores Entre Modos

Token	Dark Mode	Light Mode
bg-primary	#111827	#f8fafc
bg-card	#1f2937	#ffffff
text-primary	#f5f5f5	#1e293b
text-secondary	#a3a3a3	#475569
border	#4b5563	#e2e8f0

💻 Implementação com Tailwind Dark Mode

<!-- HTML com class-based dark mode -->
<html class="dark">

<!-- Componente com suporte a ambos modos -->
<div class="
  bg-white dark:bg-dark-800
  text-slate-800 dark:text-neutral-100
  border-slate-200 dark:border-dark-600
">
  Conteúdo do card
</div>

// JavaScript para toggle
document.documentElement.classList.toggle('dark');

🎨 Cores de Marca nos Modos

Cores de marca podem precisar de ajustes sutis para cada modo:

Primary (Dark)

500

Primary (Light)

600

⚡ Sombras e Elevação

Dark mode usa bordas ao invés de sombras:

Light: shadow-md

Dark: border

💡 Dica Profissional

Sempre projete primeiro para o modo que será mais usado (geralmente dark mode para dashboards). Depois adapte para o modo secundário, testando cuidadosamente o contraste e a legibilidade. Lembre-se: um bom design de cores funciona igualmente bem em ambos os modos.

📝 Resumo do Módulo

O que aprendemos:

✓ Teoria das cores e harmonias
✓ Design Tokens e sua hierarquia
✓ Criação de paletas com Tailwind
✓ Cores semânticas para dashboards
✓ Acessibilidade e contraste WCAG
✓ Implementação de Dark/Light mode

Próximo módulo:

No Módulo 1.6, você aprenderá sobre Navegação e Sidebar - criando sistemas de navegação intuitivos, menus responsivos e sidebars funcionais para dashboards profissionais.

Ir para Módulo 1.6 →

← Módulo Anterior Próximo Módulo →