Maggium — Tokens de Cor · Design System

Edição do Tema

Tema Cobre

Dark Side Edition

Sistema Maggium original de alto contraste. Base em preto absoluto com undertone roxo, acento industrial em cobre e tipografia off-white quente. Projetado para foco prolongado e alta legibilidade.

Acento

--accent

Canvas

--bg

Superfície

--s1

Texto

--text

Acento & SinaisAcento Primário, Info, Flare, Erro

AAHEX #D4651D

--accent

var(--accent) / #D4651D

Acento primário. CTAs, estados ativos, ênfase, destaques cinéticos.

AAHEX #3B82F6

--info

var(--info) / #3B82F6

Acento informativo. Feedback secundário e dicas utilitárias.

AAHEX #B36F3E

--flare

var(--copper) / #B36F3E

Contra-acento quente. Calor editorial e alertas.

AAHEX #EF4444

--error

var(--error) / #EF4444

Estado destrutivo/erro. Validação e sinais de perigo.

Pilha de SuperfíciesCanvas, Shells, Painéis, Console

AAHEX #050208

--bg

var(--bg) / #050208

Canvas do documento. Fundo principal da rota.

AAHEX #08040D

--s0

var(--s0) / #08040D

Shell escuro. Painéis hero, densidade editorial.

AAHEX #120820

--s1

var(--s1) / #120820

Superfície elevada primária. Cards, barras superiores.

AAHEX #1A0C2E

--s1-alt

var(--s1-alt) / #1A0C2E

Superfície secundária. Blocos aninhados.

AAHEX #250C39

--s2

var(--s2) / #250C39

Shell de painel. Sidebars, drawers, utilitários.

AAHEX #2E1145

--s3

var(--s3) / #2E1145

Zona console. Previews de saída utilitária.

AAHEX #371651

--s-hover

var(--s-hover) / #371651

Estado hover pesado. Shells selecionados.

Texto & Camada de LeituraHierarquia de Texto e Neutros Claros

AAHEX #F2F2F2

--text

var(--text) / #F2F2F2

Cor de leitura primária. Títulos e corpo.

AAHEX #E8E8E8

--text-alt

var(--text-alt) / #E8E8E8

Off-white alternativo suave. Variantes de UI.

AAHEX #FFFFFF

--white

var(--white) / #FFFFFF

Luz mais pura. Marca/logo e contraste máximo.

AAHEX #B8A8C8

--muted

var(--muted) / #B8A8C8

Cópia silenciada. Labels, legendas, descrições.

AAHEX #7A6490

--dim

var(--dim) / #7A6490

Suporte neutro claro. Texto terciário.

AAHEX #5C4870

--meta

var(--meta) / #5C4870

Cor de metadata. Contadores, labels técnicos.

Escala NeutraCinzas Absolutos

AAHEX #262626

--gray-charcoal

#262626

Cinza profundo. Alternativa ao preto absoluto.

AAHEX #525252

--gray-dim

#525252

Cinza médio escuro. Estados desabilitados.

AAHEX #A3A3A3

--gray-muted

#A3A3A3

Cinza médio claro. Bordas sutis.

AAHEX #D4D4D4

--gray-silver

#D4D4D4

Prata claro. Fundos secundários.

AAHEX #737373

--muted-legacy

#737373

Neutro legado. Compatibilidade retroativa.

Sistema de BordasSeparadores Estruturais

--ALPHA 8%

--border

rgba(242,242,242,0.08)

Borda estrutural sutil padrão.

--ALPHA 4%

--border-soft

rgba(242,242,242,0.04)

Linha estrutural sussurro.

--ALPHA 15%

--border-strong

rgba(242,242,242,0.15)

Borda de ênfase. Validação de formulários.

--ALPHA 30%

--border-hover

rgba(212,101,29,0.3)

Estado hover da borda de acento.

--ALPHA 10%

--border-input

rgba(242,242,242,0.1)

Limite inativo de input de formulário.

Escada de OpacidadeInterpolações Acento · BG

12%

16%

24%

32%

48%

64%

76%

84%

92%

100

100%

Pares de ContrasteConformidade WCAG 2.1 AA

Acento / S0

11.4:1

Aprovado AA Visual

Texto / Canvas

14.2:1

Aprovado AAA Grande

Muted / Superfície

4.8:1

Aprovado AA Normal

Erro / Branco

3.6:1

Aprovado AA Grande

03Aliases Semânticos

Mapeamento de ComponentesEquivalentes Tailwind / Shadcn

Alias / Função do Componente	Mapa de Token	Valor / Descrição
background	var(--bg)	#050208 (Canvas Principal)
foreground	var(--text)	#F2F2F2 (Texto Primário)
card / popover	var(--s1)	#120820 (Núcleo Elevado)
card-foreground	var(--text)	#F2F2F2
primary	var(--accent)	#D4651D (Cobre da Marca)
primary-foreground	#0a0514	Contraste máximo sobre Cobre
secondary	var(--s2)	#250C39 (Preenchimento sutil)
muted	var(--s1-alt)	#1A0C2E (Fundos desabilitados)
muted-foreground	var(--muted)	#B8A8C8
border	var(--border)	rgba(242,242,242,0.08)
input	var(--border-input)	rgba(242,242,242,0.1)
ring	var(--ba) / var(--accent)	Destaques de estado de foco