Retro Futurismo

"O futuro como imaginado nas décadas de 1950 e 1960. Foguetes, átomos e cromo elegante e aerodinâmico."

Quando Usar

Use este subestilo quando a solicitação 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. Formas Aerodinâmicas: Muitas curvas suaves, formas de gota e linhas fluidas. Nada é um quadrado perfeito.
2. Motivos da Era Espacial: Estrelas, átomos, órbitas e aletas (como um Cadillac dos anos 1950).
3. Cores de Meados do Século misturadas com Cromo: Pastéis clássicos dos anos 50 combinados com metais brilhantes e reflexivos.

DNA Visual

• Cores: Turquesa (#40E0D0), Laranja Atômico (#FF9966), Verde Menta (#98FF98), combinados com Prata/Cromo e Preto Espacial profundo.
• Tipografia: Fontes de arquitetura Googie, scripts cursivos ousados ou fontes geométricas sans-serif limpas de meados do século (como Futura).
• Estilização: Bordas elegantes, sombras projetadas dramáticas e formas sobrepostas deslocadas.

Implementação Web

• Exemplo de CSS:

body {
  background-color: #FDF5E6; /* Old paper / cream */
  color: #2F4F4F;
  font-family: 'Futura', 'Trebuchet MS', sans-serif;
  overflow-x: hidden;
}

/* Googie-style sweeping background element */
.retro-future-swoop {
  position: absolute;
  top: 0; right: -10%;
  width: 120%; height: 300px;
  background-color: #40E0D0; /* Turquoise */
  border-radius: 0 0 50% 50%;
  transform: rotate(-5deg);
  z-index: -1;
  border-bottom: 8px solid #FF9966; /* Atomic tangerine stripe */
}

.atompunk-card {
  background-color: #fff;
  border: 4px solid #Silver;
  border-radius: 40px 10px 40px 10px; /* Sweeping, aerodynamic corners */
  padding: 32px;
  box-shadow: 15px 15px 0px rgba(0,0,0,0.1);
  position: relative;
}

/* Classic starburst motif */
.starburst {
  position: absolute;
  top: -20px; left: -20px;
  width: 40px; height: 40px;
  background-color: #FF9966;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

Implementação de Aplicativo

SwiftUI

struct AtompunkShape: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        // Sweeping aerodynamic curves (large radius top-left, bottom-right)
        path.addRoundedRect(
            in: rect,
            cornerSize: CGSize(width: 40, height: 40),
            style: .continuous
        )
        // To be perfectly authentic, use Path to draw teardrop curves
        return path
    }
}

struct RetroFutureCard: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 16) {
            Text("ATOMPUNK")
                .font(.custom("Futura", size: 28))
                .fontWeight(.bold)
                .foregroundColor(Color(red: 0.18, green: 0.31, blue: 0.31))
            
            Text("Sleek chrome and sweeping curves.")
                .font(.custom("Futura", size: 16))
        }
        .padding(32)
        .background(Color.white)
        // Asymmetric corners: large top-left/bottom-right, small top-right/bottom-left
        .cornerRadius(40, corners: [.topLeft, .bottomRight])
        .cornerRadius(10, corners: [.topRight, .bottomLeft])
        .overlay(
            // Chrome-like border
            RoundedRectangle(cornerRadius: 10) // Simplified overlay for demo
                .stroke(
                    LinearGradient(colors: [.gray, .white, .gray], startPoint: .top, endPoint: .bottom),
                    lineWidth: 4
                )
        )
        .shadow(color: .black.opacity(0.1), radius: 0, x: 15, y: 15)
    }
}
// Note: Asymmetric corners require a custom ViewModifier in SwiftUI.

• Confie em raios de canto assimétricos para criar a estética aerodinâmica e em forma de gota.
• Bordas metálicas/cromadas são simuladas usando uma LinearGradient de cinzas e brancos.

Flutter

class RetroFutureCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(32),
      decoration: BoxDecoration(
        color: Colors.white,
        // Forma "aerodinâmica" assimétrica
        borderRadius: const BorderRadius.only(
          topLeft: Radius.circular(40),
          bottomRight: Radius.circular(40),
          topRight: Radius.circular(10),
          bottomLeft: Radius.circular(10),
        ),
        // Simulação de borda cromada
        border: Border.all(
          width: 4,

…