Paleta

Cores semânticas em light e dark

Cada cor nasce como variável HSL e se propaga por tokens semânticos, garantindo consistência visual no manual, no código e em qualquer entrega fora da plataforma.

HSL first

Brand

Assinatura visual principal do ecossistema uMode.

Primary
primary
semântico

CTA, links principais, destaques

Light

HSL 263 70% 58%

HEX #8249DF

Dark

HSL 263 70% 62%

HEX #8E5AE2

Accent
accent
semântico

Hover states, chips, áreas suaves

Light

HSL 263 60% 94%

HEX #EEE7F9

Dark

HSL 263 40% 18%

HEX #2A1C40

Status Destaque
status-destaque
semântico

KPI premium, números em evidência

Light

HSL 263 70% 58%

HEX #8249DF

Dark

HSL 263 70% 62%

HEX #8E5AE2

Surface

Bases, containers e superfícies de leitura.

Background
background
semântico

Canvas base de toda a aplicação

Light

HSL 260 30% 98%

HEX #F9F8FB

Dark

HSL 240 10% 6%

HEX #0E0E11

Card
card
semântico

Cards, painéis, blocos modulares

Light

HSL 0 0% 100%

HEX #FFFFFF

Dark

HSL 240 10% 9%

HEX #151519

Muted
muted
semântico

Áreas neutras, skeletons, painéis de apoio

Light

HSL 260 20% 95%

HEX #F1F0F5

Dark

HSL 240 10% 14%

HEX #202027

Secondary
secondary
semântico

Botões secundários e superfícies de suporte

Light

HSL 260 30% 96%

HEX #F4F2F8

Dark

HSL 240 10% 14%

HEX #202027

Status

Feedback operacional, alertas e destaques de sistema.

Status OK
status-ok
semântico

Estados positivos, sucesso, estável

Light

HSL 160 84% 39%

HEX #10B77F

Dark

HSL 160 72% 44%

HEX #1FC18B

Status Atenção
status-atencao
semântico

Warnings, atenção operacional

Light

HSL 38 92% 50%

HEX #F59F0A

Dark

HSL 38 92% 56%

HEX #F6AA28

Status Crítico
status-critico
semântico

Erros, falhas críticas, bloqueios

Light

HSL 0 84% 60%

HEX #EF4343

Dark

HSL 0 84% 66%

HEX #F15F5F

Charts

Escala cromática para gráficos e indicadores visuais.

Chart 1
chart-1
semântico

Série principal

Light

HSL 263 70% 58%

HEX #8249DF

Dark

HSL 263 70% 62%

HEX #8E5AE2

Chart 2
chart-2
semântico

Série positiva

Light

HSL 160 84% 39%

HEX #10B77F

Dark

HSL 160 72% 44%

HEX #1FC18B

Chart 3
chart-3
semântico

Série de atenção

Light

HSL 38 92% 50%

HEX #F59F0A

Dark

HSL 38 92% 56%

HEX #F6AA28

Chart 4
chart-4
semântico

Série crítica

Light

HSL 0 84% 60%

HEX #EF4343

Dark

HSL 0 84% 66%

HEX #F15F5F

Chart 5
chart-5
semântico

Série complementar

Light

HSL 210 60% 50%

HEX #3380CC

Dark

HSL 210 60% 58%

HEX #5494D4