Cores

Paleta de cores da IARA com tokens para tema claro e escuro. Cada cor foi cuidadosamente selecionada para transmitir a identidade da marca.

Cores Principais

A paleta core da marca IARA.

Verde Base

--verde-base

#003314

hsl(141, 100%, 10%)

Cor principal da marca. Representa confiança e tecnologia.

Verde Accent

--verde-accent

#CCFF00

hsl(67, 100%, 50%)

Cor de destaque. Usada para CTAs e elementos interativos.

Branco IARA

--branco

#F4F5F0

hsl(80, 10%, 95%)

Branco off-white para fundos claros e textos em fundo escuro.

Verde Escuro

--verde-escuro

#003314

hsl(141, 100%, 10%)

Variação mais escura para gradientes e profundidade.

Accent Escuro

--verde-accent-escuro

#8FB300

hsl(67, 100%, 35%)

Variação escura do accent para hover states.

Contraste

Exemplos de combinações de cores com contraste adequado.

Texto Claro em Fundo Escuro

Este é um exemplo de texto claro sobre fundo verde escuro.

Texto Escuro em Fundo Claro

Este é um exemplo de texto escuro sobre fundo claro.

Cores Semânticas

Tokens de cor que se adaptam ao tema atual (Claro).

Tema Atual:☀️ Claro

Background

--background

Foreground

--foreground

Muted

--muted

Muted Foreground

--muted-foreground

Gradientes

Gradientes utilizados em elementos especiais.

Hero Gradient

Gradiente principal para heróis e headers

linear-gradient(135deg, var(--verde-base) 0%, var(--verde-escuro) 100%)

Button Glow

Efeito de brilho para botões

linear-gradient(180deg, var(--btn-gloss-opaque) 0%, var(--btn-gloss-zero) 50%)

Accent Fade

Transição suave do accent

linear-gradient(90deg, var(--verde-accent) 0%, var(--verde-accent-escuro) 100%)

Tokens CSS

Variáveis CSS para implementação.

:root {
  /* Core Colors */
  --branco: hsl(80, 10%, 95%);
  --verde-base: hsl(141, 100%, 10%);
  --verde-escuro: hsl(141, 100%, 10%);
  --verde-accent: hsl(67, 100%, 50%);
  --verde-accent-escuro: hsl(67, 100%, 35%);
  --texto: hsl(141, 100%, 10%, 0.75);

  /* Button Gradient Colors */
  --btn-gloss-opaque: hsl(141, 100%, 18%);
  --btn-gloss-zero: hsl(141, 100%, 18%, 0);
  --btn-base-90: hsl(141, 100%, 10%, 0.9);

  /* Semantic - Light Mode */
  --background: var(--branco);
  --foreground: var(--verde-base);
  --muted: hsl(80, 5%, 90%);
  --muted-foreground: hsl(141, 50%, 30%);
}

.dark {
  /* Semantic - Dark Mode */
  --background: var(--verde-base);
  --foreground: var(--branco);
  --muted: hsl(141, 80%, 8%);
  --muted-foreground: hsl(80, 10%, 70%);
}

Acessibilidade

Diretrizes de contraste e acessibilidade.

✓

WCAG AA

Todas as combinações principais atendem ao padrão AA (4.5:1 para texto normal).

👁️

Alto Contraste

Verde base + Branco IARA oferece excelente legibilidade.

🎨

Modo Escuro

Sistema de cores adapta automaticamente para ambos os temas.