Design System: Brutal Elegance v2.0

1. Princípios Estéticos — Brutal Elegance

O Design System Brutal Elegance combina o brutalismo cibernético com o refinamento do glassmorphic moderno. É baseado em fundos escuros absolutos, linhas afiadas, contrastes nítidos e acentos neon de alta intensidade.

• Void Black Base (#000000 / #050508): Preto absoluto que domina o fundo do sistema, destacando componentes e poupando energia em telas OLED.
• Surgical Purple & Yellow Accent Glows: Acentos neon e amarelos vibrantes usados como luz guia para botões primários, badges ativas e estados de foco.
• Liquid Glassmorphism: Cartões translúcidos com bordas metálicas de baixa opacidade e desfoque de fundo (`backdrop-filter: blur(16px)`).

2. Tokens Visuais de Cores (Color Palette)

A árvore de variáveis de cores oficiais mapeadas no CSS do ecossistema:

3. Especificação & Exemplos de Botões (Button Specs)

Estilos visuais de botões utilizados nas landing pages e nos sistemas de controle:

{`
/* Estilos de Botão Brutal Elegance */
.btn-purple {
  background: linear-gradient(135deg, #8a2be2 0%, #a855f7 100%);
  color: #ffffff;
  border: 1px solid rgba(168, 85, 247, 0.5);
  box-shadow: 0 4px 20px rgba(138, 43, 226, 0.35);
  font-weight: 700;
  text-transform: uppercase;
}

.btn-yellow {
  background: #FFD60A;
  color: #000000;
  border: none;
  box-shadow: 0 0 20px rgba(255, 214, 10, 0.4);
  font-weight: 800;
}
          `}

4. Badges, Selos & Indicadores de Status

Exemplos visuais de selos de verificação e badges de estado:

5. Tipografia & Hierarquia de Fontes