Maximalismo Vibrante

"Mais é mais. Uma explosão de cores, padrões e tipografia."

Quando Usar

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

Princípios Fundamentais

1. Sobrecarga Sensorial: Cada pixel está fazendo algo. Padrões sobre gradientes sobre fotos.
2. Cores Contrastantes: Esqueça as regras padrão de harmonia de cores. Combine verde neon com rosa choque, ou laranja brilhante com azul elétrico.
3. Múltiplas Fontes: Misture 3 ou 4 tipos de letra completamente diferentes no mesmo layout.

DNA Visual

• Cores: Todas elas. Tons altamente saturados e não abafados. Sem neutros calmos permitidos.
• Tipografia: Uma mistura caótica. Um título serifado enorme, um subtítulo em letras de bolha e um texto corrido em monoespaçado.
• Visuais: Adesivos, padrões repetidos, emojis, renderizações 3D e texto em rolagem de marquise.

Implementação Web

• Exemplo de CSS:

body {
  /* Complex clashing background */
  background: 
    radial-gradient(circle at 20% 30%, #FF00FF 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, #00FFFF 0%, transparent 40%),
    url('checkerboard-pattern.png') repeat;
  background-color: #FFFF00;
  color: #000;
  overflow-x: hidden;
}

.max-headline {
  font-family: 'Anton', sans-serif;
  font-size: 8rem;
  text-transform: uppercase;
  line-height: 0.8;
  color: #FF0000;
  /* Crazy shadow effect */
  text-shadow: 
    4px 4px 0px #000,
    8px 8px 0px #00FFFF,
    12px 12px 0px #FF00FF;
  transform: rotate(-3deg);
}

.max-sticker {
  position: absolute;
  background: #000;
  color: #00FF00;
  font-family: monospace;
  padding: 10px;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 4px dashed #FF00FF;
  animation: spin 10s linear infinite;
}

@keyframes spin { 100% { transform: rotate(360deg); } }

.max-card {
  background: rgba(255, 255, 255, 0.9);
  border: 5px solid #000;
  box-shadow: 10px 10px 0px #0000FF;
  padding: 40px;
  border-radius: 0 40px 0 40px; /* Weird asymmetrical corners */
}

Implementação de Aplicativo

SwiftUI

struct VibrantMaximalismView: View {
    var body: some View {
        ScrollView {
            ZStack {
                // Chaotic Layered Background
                Color(hex: "FFFF00").ignoresSafeArea() // Pure Yellow
                
                Circle()
                    .fill(RadialGradient(colors: [Color(hex: "FF00FF"), .clear], center: .center, startRadius: 0, endRadius: 200))
                    .frame(width: 400, height: 400)
                    .offset(x: -100, y: -200)
                
                Circle()
                    .fill(RadialGradient(colors: [Color(hex: "00FFFF"), .clear], center: .center, startRadius: 0, endRadius: 200))
                    .frame(width: 400, height: 400)
                    .offset(x: 150, y: 200)
                
                // Content
                VStack(spacing: 40) {
                    Text("OVERLOAD")
                        .font(.custom("Anton", size: 80))
                        .foregroundColor(Color(hex: "FF0000"))
                        .shadow(color: .black, radius: 0, x: 4, y: 4)
                        .shadow(color: Color(hex: "00FFFF"), radius: 0, x: 8, y: 8)
                        .rotationEffect(.degrees(-3))
                    
                    // Weird shaped card
                    VStack {
                        Text("More is more.")
                            .font(.system(size: 24, weight: .black, design: .monospaced))
                    }
                    .padding(40)
                    .background(Color.white.opacity(0.9))
                    .border(.black, width: 5)
                    .cornerRadius(40, corners: [.topRight, .bottomLeft]) // Custom corner radius extension needed
                    .shadow(color: Color(hex: "0000FF"), radius: 0, x: 10, y: 10)
                }
            }
        }
    }
}

• Sobreponha múltiplos RadialGradients em um ZStack atrás do conteúdo para criar as formas de cores complexas e contrastantes.
• Use múltiplas sombras duras (raio 0, mas com grandes deslocamentos X/Y) em cores contrastantes para construir o efeito de texto chamativo.

Flutter

class VibrantMaximalismScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [

…