Vaporwave

"Um sonho surreal e nostálgico de computação dos anos 90 e neon pastel."

Quando Usar

Use este subestilo quando a solicitação do usuário corresponder à estética descrita acima. Esta é uma referência secundária da habilidade design-it e não deve ser acionada diretamente.

Princípios Fundamentais

1. Motivos do Windows 95 / Mac OS 9: Elementos de interface projetados para se parecerem explicitamente com sistemas operacionais dos anos 90 (caixas cinzas, chanfros duros, barras de título azuis).
2. Pastéis Surreais e Neons: Uma mistura de rosas suaves, cianos e sobreposições de neon fortes.
3. Estética de Colagem: Mistura de arte clássica (bustos romanos), renderizações 3D iniciais (pisos quadriculados) e texto japonês (Kanji/Katakana).

DNA Visual

• Cores: Ciano (#00FFFF), Magenta (#FF00FF), Lavanda (#E6E6FA) e Cinza Clássico do Windows (#C0C0C0).
• Tipografia: MS Sans Serif, Tahoma ou fontes pixeladas. Caracteres de largura total (ＡＥＳＴＨＥＴＩＣ) são altamente encorajados para cabeçalhos.
• Estilização: Contornos duros de 1px para simular botões 3D dos anos 90.

Implementação Web

• Use bordas CSS padrão para criar o visual clássico de botões dos anos 90.
• Exemplo de CSS:

body {
  background: linear-gradient(180deg, #ff99cc 0%, #99ccff 100%);
  color: #000;
  font-family: 'Tahoma', sans-serif;
  min-height: 100vh;
}

/* Windows 95 Style Window */
.vapor-window {
  background-color: #C0C0C0;
  border: 2px outset #fff;
  border-right-color: #808080;
  border-bottom-color: #808080;
  width: 400px;
  padding: 2px;
}

.vapor-titlebar {
  background: linear-gradient(90deg, #000080, #1084d0);
  color: white;
  font-weight: bold;
  padding: 4px 8px;
  display: flex;
  justify-content: space-between;
}

.vapor-button {
  background-color: #C0C0C0;
  border: 2px outset #fff;
  border-right-color: #808080;
  border-bottom-color: #808080;
  padding: 4px 12px;
}
.vapor-button:active {
  border-style: inset;
}

/* The iconic vaporwave sun/grid */
.vapor-sun {
  width: 200px; height: 200px;
  background: linear-gradient(to bottom, #ff00ff, #ffff00);
  border-radius: 50%;
  box-shadow: 0 0 20px #ff00ff;
}

Implementação de Aplicativo

SwiftUI

struct VaporwaveView: View {
    var body: some View {
        ZStack {
            // Neon Gradient Background
            LinearGradient(colors: [Color(hex: "ff99cc"), Color(hex: "99ccff")], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()
            
            // Win95 Window
            VStack(spacing: 0) {
                // Title Bar
                HStack {
                    Text("ＡＥＳＴＨＥＴＩＣ.exe")
                        .font(.system(size: 14, weight: .bold, design: .monospaced))
                        .foregroundColor(.white)
                    Spacer()
                    Text("X")
                        .font(.system(size: 12, weight: .bold))
                        .padding(.horizontal, 6)
                        .background(Color(hex: "C0C0C0"))
                        .border(.white, width: 1) // Faux 3D
                }
                .padding(4)
                .background(LinearGradient(colors: [Color(hex: "000080"), Color(hex: "1084d0")], startPoint: .leading, endPoint: .trailing))
                
                // Content
                VStack {
                    Text("It's all in your head.")
                        .font(.custom("Tahoma", size: 16))
                        .padding()
                    
                    // Win95 Button
                    Button(action: {}) {
                        Text("ＯＫ")
                            .foregroundColor(.black)
                            .padding(.horizontal, 24)
                            .padding(.vertical, 8)
                    }
                    .background(Color(hex: "C0C0C0"))
                    // Complex borders to simulate Outset
                    .overlay(
                        Rectangle().stroke(Color.black, lineWidth: 1) // Outer bottom/right
                    )
                    .overlay(
                        Rectangle().stroke(Color.white, lineWidth: 1).padding(1) // Inner top/left
                    )
                }
                .frame(maxWidth: .infinity)
                .padding(16)
                .background(Color(hex: "C0C0C0"))
            }
            .frame(width: 300)
            // Outset border for window
            .border(Color(hex: "808080"), width: 2)
            .padding()
        }
    }
}

• Você não pode usar .cornerRadius() em nenhum lugar no design Vaporwave.

…