Design Retrô

"Uma sensação quente e analógica. Nostalgia através de tons suaves, granulação e tipografia clássica."

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. Paletas de Cores Quentes e Analógicas: Cores que parecem desbotadas pelo sol ou impressas em papel envelhecido.
2. Textura e Ruído: Uma leve sobreposição de granulação para simular filme ou mídia impressa antiga.
3. Combinações de Tipografia Clássica: Fontes de exibição pesadas e "groove" combinadas com texto corrido em máquina de escrever ou serifas clássicas.

DNA Visual

• Cores: Marrom Monocromático ou paletas quentes e desbotadas (amarelo mostarda, laranja queimado, verde sálvia, off-white).
• Tipografia: Fontes de exibição como Cooper Black, Garamond ou Courier.
• Estilização: Selos, carimbos, bordas onduladas e padrões de retícula (halftone).

Implementação Web

• Use filtros CSS e imagens de ruído de fundo para criar textura.
• Exemplo CSS:

body {
  background-color: #F4E8D1; /* Aged paper */
  color: #3E2723; /* Deep brown ink */
  font-family: 'Georgia', serif;
  
  /* Apply a subtle noise overlay using a pseudo-element or background image */
  background-image: url('noise-texture.png');
  background-blend-mode: multiply;
}

.retro-header {
  font-family: 'Cooper Black', serif;
  font-size: 4rem;
  color: #D35400; /* Burnt orange */
  text-shadow: 2px 2px 0px #F1C40F; /* Mustard yellow drop shadow */
  letter-spacing: -1px;
}

.retro-card {
  background-color: #FFF3E0;
  border: 2px solid #3E2723;
  border-radius: 12px;
  padding: 24px;
  
  /* Vintage offset shadow */
  box-shadow: 8px 8px 0px #795548;
}

.retro-badge {
  display: inline-block;
  background-color: #E74C3C;
  color: #F4E8D1;
  font-family: monospace;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 50%; /* Make it look like a sticker */
  transform: rotate(-10deg);
}

Implementação em Aplicativos

SwiftUI

struct RetroCard: View {
    let paperColor = Color(red: 0.96, green: 0.91, blue: 0.82) // #F4E8D1
    let inkColor = Color(red: 0.24, green: 0.15, blue: 0.14) // #3E2723
    
    var body: some View {
        ZStack {
            paperColor.ignoresSafeArea()
            
            // Optional: Noise texture
            Image("film_grain")
                .resizable()
                .blendMode(.multiply)
                .opacity(0.3)
                .ignoresSafeArea()
            
            VStack(alignment: .leading, spacing: 24) {
                Text("RETRO DESIGN")
                    .font(.custom("Cooper Black", size: 36))
                    .foregroundColor(Color(red: 0.83, green: 0.33, blue: 0.0)) // #D35400
                    .shadow(color: Color(red: 0.95, green: 0.77, blue: 0.06), radius: 0, x: 2, y: 2)
                
                Text("Analog warmth and classic typography.")
                    .font(.custom("Georgia", size: 18))
                    .foregroundColor(inkColor)
            }
            .padding(32)
            .background(Color(red: 1.0, green: 0.95, blue: 0.88))
            .cornerRadius(12)
            .overlay(
                RoundedRectangle(cornerRadius: 12)
                    .stroke(inkColor, lineWidth: 2)
            )
            // Vintage solid offset shadow
            .shadow(color: Color(red: 0.47, green: 0.33, blue: 0.28), radius: 0, x: 8, y: 8)
        }
    }
}

• Uma imagem de textura de granulação pode ser sobreposta usando .blendMode(.multiply). Esteja ciente do uso de memória com texturas de tela cheia.
• Use .shadow(radius: 0) para criar as sombras de deslocamento nítidas típicas da mídia impressa dos anos 70.
• Fontes personalizadas como Cooper Black são absolutamente necessárias.

Flutter

class RetroCard extends StatelessWidget {
  final Color paperColor = const Color(0xFFF4E8D1);
  final Color inkColor = const Color(0xFF3E2723);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: paperColor,
      child: Stack(
        fit: StackFit.expand,
        children: [
          // Textura de ruído
          Opacity(
            opacity: 0.3,
            child: Image.asset('assets/film_grain.png', 
              fit: BoxFit.cover, 
              colorBlendMode: BlendMode.multiply),
          ),
          Center(
            child: Container(
              padding: const EdgeInsets.all(32),
              decoration: BoxDecoration(
                color: const Color(0xFFFFF3E0),
                borderRadius: BorderRadius.circular(12),

…