Paleta de
Cores

A paleta de cores da SYSLED foi construida sobre uma base de azuis que transmitem confianca, tecnologia e profissionalismo. O azul e universalmente associado a estabilidade e seguranca — atributos essenciais para uma marca de tecnologia em iluminacao LED.

A variacao de tonalidades — do azul profundo ao celeste — cria uma hierarquia visual clara, permitindo distinguir elementos primarios, secundarios e de destaque. O ciano complementar adiciona vitalidade e modernidade, enquanto os neutros garantem legibilidade e respiro visual.

Espectro Completo

Do escuro profundo ao branco puro — toda a gama da identidade SYSLED.

As quatro tonalidades primarias formam o nucleo da identidade visual. Use-as como protagonistas em superficies, botoes, headers e elementos de destaque.

Cores complementares que adicionam variedade e suportam a paleta primaria. Use-as para acentos, ilustracoes e elementos decorativos.

Fundos Alternados para Secoes

Quatro opcoes de fundo para criar ritmo visual entre secoes. Nunca usar duas secoes consecutivas com o mesmo fundo.

Os neutros fornecem estrutura, hierarquia e legibilidade. Eles formam a base sobre a qual as cores primarias e secundarias ganham destaque.

A proporcao expandida garante equilibrio visual com mais variedade cromatica. Neutros dominam para manter clareza, azuis primarios criam identidade, fundos quentes adicionam ritmo e as cores de acento trazem energia nos pontos certos.

Detalhamento por Contexto

Regra de Fundos Alternados

O site alterna fundos de secao para criar ritmo visual. Nunca usar mais de 2 secoes consecutivas com o mesmo fundo.

Todas as combinacoes de cores devem atender no minimo o nivel AA das diretrizes WCAG 2.1. Textos menores exigem contraste mais alto. Abaixo, as principais combinacoes testadas.

Tabela Resumo WCAG

Cores com significado funcional fixo. Nunca use uma cor semantica fora de seu proposito — por exemplo, vermelho deve indicar erro ou perigo, nunca um estado positivo.

Tokens Semanticos (CSS)

/* Cores Semanticas — Tokens */
:root {
  /* Sucesso */
  --success-bg: #ECFDF5;
  --success-text: #065F46;
  --success-border: #34D399;

  /* Erro */
  --error-bg: #FEF2F2;
  --error-text: #991B1B;
  --error-border: #F87171;

  /* Alerta */
  --warning-bg: #FFFBEB;
  --warning-text: #92400E;
  --warning-border: #FBBF24;

  /* Informacao */
  --info-bg: #EFF6FF;
  --info-text: #1E40AF;
  --info-border: #3B82F6;
}

Como as cores se traduzem em componentes de UI reais. Cada elemento tem uma cor designada que deve ser respeitada para manter consistencia.

Mapeamento Cor-Componente

Variaveis CSS Completas

/* SYSLED — Design Tokens de Cor */
:root {
  /* Primarias */
  --blue-primary: #2B6CB0;
  --blue-medium: #3A8FD6;
  --blue-light: #5BB8F5;

  /* Secundarias */
  --cyan-light: #48C9B0;
  --blue-pale: #A8E0F8;

  /* Neutras */
  --dark-primary: #0F172A;
  --dark-text: #1E293B;
  --gray-600: #475569;
  --gray-200: #E2E8F0;
  --gray-100: #F8FAFC;
  --white: #FFFFFF;
}