Tokens Semânticos
Aliases, Brilho, Estados, Pesos Tipográficos e Mapeamento Shadcn/UI // 2026
Design System6 Seções2026
01Tokens SemânticosAliases · Brilho · Estados · Pesos · Shadcn
Fundos Semânticos
--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.
Pesos TipográficosEscala de Peso Urbanist
--font-weight-light300Leve
--font-weight-regular400Regular
--font-weight-medium500Médio
--font-weight-semibold600Semibold
--font-weight-bold700Bold
--font-weight-extrabold800Extrabold
--font-weight-black900Black
Mapeamento Shadcn/UIPonte de Tokens para Biblioteca de Componentes
--background--mg-dark#050208
--foreground--mg-text#f2f2f2
--card / --popover--mg-surface#0a0514
--primary--mg-accent#d4651d
--primary-foreground--mg-dark#050208
--accent--mg-accent#d4651d
--accent-foreground--mg-dark#050208
--muted--mg-dim#7a6490
--muted-foreground--mg-muted#b8a8c8
--destructive--mg-error#EF4444
--ring--mg-accent#d4651d
--radius—0.5rem
