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 (#973BEB).

Primary
primary
semântico

CTA, links principais, destaques

Light

HSL 271 82% 58%

HEX #973CEC

Dark

HSL 271 82% 62%

HEX #A14FEE

Accent
accent
semântico

Hover states, chips, áreas suaves

Light

HSL 257 87% 97%

HEX #F4F1FE

Dark

HSL 271 40% 18%

HEX #2F1C40

Status Highlight
status-highlight
semântico

KPI premium, números em evidência

Light

HSL 271 82% 58%

HEX #973CEC

Dark

HSL 271 82% 62%

HEX #A14FEE

Surface

Bases neutras, containers e superfícies de leitura.

Background
background
semântico

Canvas base de toda a aplicação

Light

HSL 0 0% 100%

HEX #FFFFFF

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 220 14% 96%

HEX #F3F4F6

Dark

HSL 240 10% 14%

HEX #202027

Secondary
secondary
semântico

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

Light

HSL 220 14% 96%

HEX #F3F4F6

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 Warning
status-warning
semântico

Warnings, atenção operacional

Light

HSL 38 92% 50%

HEX #F59F0A

Dark

HSL 38 92% 56%

HEX #F6AA28

Status Critical
status-critical
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 271 82% 58%

HEX #973CEC

Dark

HSL 271 82% 62%

HEX #A14FEE

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