Design system do redesenho do painel

Os valores desta página vêm de tokens/tokens.css, o mesmo arquivo usado pelo painel e pela landing. A paleta parte das cores da marca (azul #0038E5, azul de apoio #006FF0, verde #91C651, vermelho #B02A37 e neutros). Onde uma cor original não alcança contraste suficiente para texto, o token de texto usa um tom mais escuro derivado dela, e a cor original fica para gráficos e preenchimentos.

Simulação: os valores de exemplo (R$, nomes, datas, taxas) usados nos componentes são fictícios e não representam dados reais.

Esta página é gerada por scripts/gerar-design-system.mjs. Os contrastes são calculados na geração, pela fórmula do WCAG 2.2.

Cores

Cada token tem valor no modo claro e no escuro. Use o botão do topo para alternar.

Superfícies e bordas

--color-bg-ground#F0F2F5#121417fundo da página

--color-bg-surface#FFFFFF#1D2125cards e painéis

--color-bg-subtle#F8F9FA#262B30linhas e blocos

--color-bg-sunken#EEEEEE#2B3136campos e áreas rebaixadas

--color-border#E3E6EA#323940divisores

--color-border-strong#CDCDCD#4A535Cbordas de campo

--color-card-border#E9ECEF#2B3136borda de card

Texto

--color-text-primary#1D2125#F5F5F5texto

--color-text-secondary#37474F#C1C1C1texto de apoio

--color-text-muted#5F6B7A#A3ADB8legendas

Marca e ação

--color-brand-primary#0038E5#1F5BF0marca, seleção e CTA no escuro

--color-brand-support#006FF0#006FF0gráficos e foco

--color-brand-tint#E6EDFE#13254Ffundo de item selecionado

--color-brand-text#0030C8#8DB4FFlink e marca em texto

--color-action-cta#1D2125#1F5BF0botão principal

--color-action-on-cta#FFFFFF#FFFFFFtexto do botão principal

Menu lateral

--color-nav-bg#0038E5#0A2A9Emenu lateral

--color-nav-muted#C9D6FF#C9D6FFtexto secundário do menu

--color-nav-active-bg#FFFFFF#FFFFFFitem ativo do menu

--color-nav-active-text#0030C8#0030C8texto do item ativo

Status

--color-success-text#3F7A12#A6D86Erecebida (texto)

--color-success-bg#EEF7E4#22341Arecebida (fundo)

--color-success-fill#91C651#91C651gráficos

--color-warning-text#8A5300#F2B65Achargeback (texto)

--color-warning-bg#FFF2DC#3A2A10chargeback (fundo)

--color-danger#B02A37#FF8A95vencida e erro (texto)

--color-danger-bg#FBE9EB#3D1A1Fvencida e erro (fundo)

--color-info-text#0058C4#7FB2FFaguardando (texto)

--color-info-bg#E5F0FE#14294Aaguardando (fundo)

Foco e sobreposição

--color-focus#006FF0#006FF0anel de foco

--color-overlayrgba(29, 33, 37, 0.45)rgba(0, 0, 0, 0.6)fundo de modal e drawer

Contraste de texto

Razão calculada para cada par de texto e fundo usado na interface. O critério 1.4.3 do WCAG (nível AA) pede 4,5:1 para texto normal.

Modo claro

Uso	Amostra	Cores	Razão	Resultado
Texto principal	Aa 123	`#1D2125` sobre `#FFFFFF`	16,2:1	passa AA (4,5:1)
Texto principal no fundo	Aa 123	`#1D2125` sobre `#F0F2F5`	14,4:1	passa AA (4,5:1)
Texto de apoio	Aa 123	`#37474F` sobre `#FFFFFF`	9,6:1	passa AA (4,5:1)
Texto de legenda	Aa 123	`#5F6B7A` sobre `#FFFFFF`	5,4:1	passa AA (4,5:1)
Link e marca em texto	Aa 123	`#0030C8` sobre `#FFFFFF`	9,3:1	passa AA (4,5:1)
Item selecionado	Aa 123	`#0030C8` sobre `#E6EDFE`	7,9:1	passa AA (4,5:1)
Botão principal	Aa 123	`#FFFFFF` sobre `#1D2125`	16,2:1	passa AA (4,5:1)
Status recebida	Aa 123	`#3F7A12` sobre `#EEF7E4`	4,8:1	passa AA (4,5:1)
Status vencida e erro	Aa 123	`#B02A37` sobre `#FBE9EB`	5,6:1	passa AA (4,5:1)
Status chargeback	Aa 123	`#8A5300` sobre `#FFF2DC`	5,7:1	passa AA (4,5:1)
Status aguardando	Aa 123	`#0058C4` sobre `#E5F0FE`	5,7:1	passa AA (4,5:1)
Menu lateral: texto branco	Aa 123	`#FFFFFF` sobre `#0038E5`	7,8:1	passa AA (4,5:1)
Menu lateral: item ativo	Aa 123	`#0030C8` sobre `#FFFFFF`	9,3:1	passa AA (4,5:1)

Modo escuro

Uso	Amostra	Cores	Razão	Resultado
Texto principal	Aa 123	`#F5F5F5` sobre `#1D2125`	14,9:1	passa AA (4,5:1)
Texto principal no fundo	Aa 123	`#F5F5F5` sobre `#121417`	16,9:1	passa AA (4,5:1)
Texto de apoio	Aa 123	`#C1C1C1` sobre `#1D2125`	9,0:1	passa AA (4,5:1)
Texto de legenda	Aa 123	`#A3ADB8` sobre `#1D2125`	7,1:1	passa AA (4,5:1)
Link e marca em texto	Aa 123	`#8DB4FF` sobre `#1D2125`	7,8:1	passa AA (4,5:1)
Item selecionado	Aa 123	`#8DB4FF` sobre `#13254F`	7,2:1	passa AA (4,5:1)
Botão principal	Aa 123	`#FFFFFF` sobre `#1F5BF0`	5,5:1	passa AA (4,5:1)
Status recebida	Aa 123	`#A6D86E` sobre `#22341A`	8,0:1	passa AA (4,5:1)
Status vencida e erro	Aa 123	`#FF8A95` sobre `#3D1A1F`	6,8:1	passa AA (4,5:1)
Status chargeback	Aa 123	`#F2B65A` sobre `#3A2A10`	7,6:1	passa AA (4,5:1)
Status aguardando	Aa 123	`#7FB2FF` sobre `#14294A`	6,7:1	passa AA (4,5:1)
Menu lateral: texto branco	Aa 123	`#FFFFFF` sobre `#0A2A9E`	11,4:1	passa AA (4,5:1)
Menu lateral: item ativo	Aa 123	`#0030C8` sobre `#FFFFFF`	9,3:1	passa AA (4,5:1)

Tipografia

Plus Jakarta Sans, pesos de 400 a 800. A escala tem sete níveis, todos definidos por token.

text-display
40/48 · 800

Olá, Paulo!

text-metric
24/30 · 800

R$ 12.480,35

text-body
15/22 · 400

Crie, acompanhe e resolva pendências.

text-label
13/18 · 700

Vencimento

text-caption
12/16 · 500

2 cobranças em aberto

Espaço, raio e sombra

Espaçamento em base 4. Raios maiores nos cartões e painéis, menores nos controles.

Espaçamento

space-14px

space-28px

space-312px

space-416px

space-624px

space-832px

space-1248px

space-1664px

Raios

radius-sm10px

radius-md14px

radius-lg18px

radius-card24px

radius-panel28px

radius-pill999px

Sombras

shadow-card

shadow-overlay

shadow-toast

shadow-card

shadow-overlay

Componentes e estados

Os mesmos componentes do painel. O status nunca depende só da cor: cada um tem ponto, texto e cor.

Botões

Foco: anel de 3 px (--color-focus) com afastamento de 2 px, visível só pelo teclado.

Status

AguardandoVencidaRecebidaChargebackCancelada

Campos

Valor

Valor (foco)

Valor (erro)O valor mínimo é R$ 5,00.

Card de métrica

Saldo disponívelR$ 12.480,35Atualizado às 09:42

VencidasR$ 1.340,003 cobranças · ação necessária

Banner dispensável, modal de confirmação e toast

Link copiado

No modal de ação irreversível, o foco começa em "Voltar" e Esc fecha.

Acessibilidade

Regras aplicadas em todas as telas.

44 px

Alvos de toque com 44 × 44 px ou mais (--touch-min). Esse tamanho corresponde ao critério 2.5.5 do WCAG, que está no nível AAA.

Elementos nativos (button, a, input, select, table, label), rótulo em todos os campos, aria-invalid nos erros, aria-label nos botões só com ícone, distintivos com texto acessível, modais com role="dialog" ou alertdialog, foco devolvido ao gatilho e animações desligadas quando a pessoa pede movimento reduzido.