Cor, Superfícies & Tokens

Paleta, superfícies, bordas, texturas e tokens semânticos // 2026

Paleta Completa · Dark Side EditionSistema Canônico // 2026

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 AAA Normal

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

01Superfícies BaseNíveis de Elevação

#050208

--mg-dark

Base da página. Fundo principal.

#0a0514

--mg-surface

Superfície elevada. Painéis, cards, cabeçalhos.

#120820

--mg-surface-alt

Elevação secundária. Painéis aninhados.

#0d0812

--mg-surface-deep

Áreas aprofundadas. Blocos de código.

rgba(10,5,20,0.92)

--mg-surface-overlay

Sobreposição transparente para modais.

#150a22

--mg-surface-panel

Painéis laterais e gavetas (drawers).

#0b0710

--mg-surface-console

Fundos de terminal / console.

#250c39

--mg-surface-hover

Estado de hover forte para áreas interativas.

Texturas e Padrões Profundidade Tátil // Novo

--tex-noise-subtle

Ruído tátil sobre fundos sólidos para dar acabamento premium tipo filme (grain).

--tex-grid-blueprint

Padrão de grade arquitetônica. Utilizado atrás de dados esquemáticos ou código.

--tex-dot-matrix

Matriz pontilhada. Serve de âncora visual para mockups de produtos tech e I.A.

Bordas Tokens Semânticos

--mg-border

rgba(242,242,242,0.08)

Borda sutil padrão. Utilizada em divisores e grids genéricos.

--mg-border-soft

= --mg-border

Alias semântico para especificar suavidade.

--mg-border-strong

rgba(242,242,242,0.2)

Borda de alto contraste. Para seções ativas ou delimitadores importantes.

--mg-border-hover

rgba(212,101,29,0.3)

Estado de hover (Acento / Cobre). Elementos interativos selecionáveis.

--mg-border-input

rgba(184,168,200,0.15)

Borda focada em campos de formulário e inputs textuais.

Raios de Borda Escala de Arredondamento

--radius-sm

4px

--radius

8px (Base)

--radius-md

12px

--radius-lg

16px

--radius-xl

24px

--radius-2xl

32px

--radius-full

Pilular

Glass & Blur Filtros Backdrop

--glass-blur

backdrop-filter: blur(10px)

Efeito glass guiado pelo padrão V2. Utilizado primordialmente nas barras de navegação e sobreposições do menu.

--glass-blur-soft

backdrop-filter: blur(4px)

Vidro sutil. Muito útil atrás de cartões, tooltips textuais, e para proteger a legibilidade sem ofuscar completamente o fundo.

01Tokens SemânticosAliases · Brilho · Estados · Pesos · Shadcn

--color-bg-void#000000Preto absoluto. Overlays, blackout.

--color-bg-base#050208Fundo da página. Canvas principal.

--color-bg-surface#0a0514Superfície elevada. Cards e painéis.

--color-bg-surface-alt#120820Superfície secundária. Cards aninhados.

--color-bg-elevated#120820Alias para surface-alt. Contexto elevado.

--color-bg-overlayrgba(10,5,20,0.5)Escurecimento de fundo para backdrop de modais.

Texto SemânticoAliases de Cor de Texto

--color-text-base#f2f2f2Texto primário. Branco quente.

--color-text-secondaryrgba(242,242,242,0.7)Texto secundário. Descrições.

--color-text-tertiaryrgba(242,242,242,0.55)Texto terciário. Metadados.

--color-text-mutedrgba(184,168,200,0.4)Texto discreto. Rótulos apagados.

Brilho & CobreTokens de Luminância da Marca

--copper

#d4651d

Acento da marca. = --mg-accent.

--copper-dim

rgba(212,101,29,0.15)

Tinta sutil. Fundos com toque de cobre.

--copper-glow

rgba(212,101,29,0.4)

Brilho forte. Foco ativo.

--copper-glow-box

rgba(212,101,29,0.25)

Brilho para box-shadow. Botões CTA.

--copper-glow-soft

rgba(212,101,29,0.1)

Brilho suave. Estados de hover.

Estados InterativosFoco, Seleção, Aviso

--focus-brand

#d4651d

Anel de foco nos elementos da marca.

--focus-neutral

#b8a8c8

Anel de foco nos elementos neutros.

--selection-bg

#050208

Fundo da seleção de texto.

--selection-fg

#d4651d

Cor frontal da seleção de texto.

--warning-bg

#c9922e

Tinta de fundo para avisos.

--warning-border

rgba(201,146,46,0.18)

Tinta de borda para avisos.