Superfícies & Bordas

Elevação, Texturas, Tokens de Borda, Escala de Raio e Efeitos Glass // 2026

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.