Design Y2K

"O futuro otimista e brilhante como imaginado em 1999. Cromo, formas orgânicas e tecnologia alienígena."

Quando Usar

Use este subestilo quando o pedido 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. Efeitos Metálicos e Cromados: Uso extensivo de gradientes prateados, cromados e metálicos brilhantes.
2. Formas Orgânicas e Amórficas: Arquitetura em "blob", linhas curvas que se intersectam e formas semelhantes a líquidos.
3. Otimismo Tecnológico: Motivos de placa de circuito, miras de alvo e fundos de grade digital.

DNA Visual

• Cores: Prata/cromo, ciano brilhante, rosa choque, verde limão. Industrial Chic misturado com toques neon funciona bem.
• Tipografia: Fontes sans-serif estendidas (largas), fontes pixeladas ou fontes de exibição futuristas/alienígenas (por exemplo, Orbitron, Syncopate).
• Estilização: Brilhos externos, chanfros metálicos e cintilâncias estelares (faíscas).

Implementação Web

• Confie muito em gradientes lineares e radiais complexos para simular metal brilhante.
• Exemplo de CSS:

body {
  background-color: #000000;
  /* Digital grid background */
  background-image: linear-gradient(#333 1px, transparent 1px),
                    linear-gradient(90deg, #333 1px, transparent 1px);
  background-size: 20px 20px;
  color: #ffffff;
  font-family: 'Syncopate', sans-serif;
}

.y2k-chrome-text {
  font-size: 4rem;
  font-weight: 900;
  text-transform: uppercase;
  
  /* Chrome gradient effect */
  background: linear-gradient(
    to bottom, 
    #ffffff 0%, 
    #999999 45%, 
    #222222 50%, 
    #cccccc 55%, 
    #ffffff 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* Outer glow */
  filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.5));
}

.y2k-blob-btn {
  background: linear-gradient(135deg, #00FFFF, #FF00FF);
  border: none;
  border-radius: 50% 20% / 10% 40%; /* Amorphous blob shape */
  padding: 20px 40px;
  color: #fff;
  font-weight: bold;
  text-shadow: 1px 1px 2px #000;
  box-shadow: 0 0 15px #FF00FF;
}

Implementação de Aplicativo

SwiftUI

struct Y2KDesignView: View {
    // Chrome Gradient
    let chromeGradient = LinearGradient(
        colors: [Color.white, Color(white: 0.6), Color(white: 0.2), Color(white: 0.8), Color.white],
        startPoint: .top,
        endPoint: .bottom
    )
    
    var body: some View {
        ZStack {
            Color.black.ignoresSafeArea()
            
            VStack(spacing: 40) {
                // Chrome Text
                Text("Y2K FUTURE")
                    .font(.custom("Syncopate-Bold", size: 48))
                    .foregroundStyle(chromeGradient)
                    // Cyan glow
                    .shadow(color: Color(hex: "00FFFF"), radius: 10, x: 0, y: 0)
                
                // Blob Button (Faked with Capsule in standard SwiftUI, requires Path for true blob)
                Button(action: {}) {
                    Text("ENTER CORE")
                        .font(.custom("Orbitron-Bold", size: 20))
                        .foregroundColor(.white)
                        .padding(.vertical, 20)
                        .padding(.horizontal, 40)
                        .background(LinearGradient(colors: [Color(hex: "00FFFF"), Color(hex: "FF00FF")], startPoint: .topLeading, endPoint: .bottomTrailing))
                        .clipShape(Capsule())
                        // Glow
                        .shadow(color: Color(hex: "FF00FF").opacity(0.8), radius: 15, x: 0, y: 0)
                }
            }
        }
    }
}

• O .foregroundStyle() do SwiftUI torna a aplicação de um LinearGradient complexo com múltiplos pontos em texto algo trivial, que é exatamente como você constrói o efeito de Texto Cromado.
• Adicione um .shadow() sem deslocamento com uma cor neon para criar o brilho externo Y2K.

Flutter

class Y2KDesignScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Texto Cromado via ShaderMask
            ShaderMask(
              shaderCallback: (bounds) => const LinearGradient(
                begin: Alignment.topCenter, end: Alignment.bottomCenter,
                colors: [Colors.white, Color(0xFF999999), Color(0xFF222222), Color(0xFFCCCCCC), Colors.white],
                stops: [0.0, 0.45, 0.5, 0.55, 1.0],

…