Frutiger Aero

"A estética do otimismo de meados dos anos 2000. Plástico brilhante, água cristalina, céus azuis e tecnologia ecologicamente correta."

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. Texturas Hiperbrilhantes: Botões parecem vidro polido ou plástico molhado. Uso extensivo de gradientes convexos e realces especulares.
2. Natureza Esqueumórfica: Motivos de grama verde, céus azuis, gotas d'água e bolhas se intersectando com tecnologia de vidro elegante (pense no Windows Aero ou no início do iOS).
3. Translucidez: Efeitos de vidro fosco, mas muito mais saturados e reflexivos do que o glassmorphism moderno.

DNA Visual

• Cores: Ciano, azul celeste, verde limão e branco puro. Evite temas escuros completamente.
• Tipografia: Fontes sans-serif humanistas limpas e altamente legíveis (como a fonte Frutiger, Segoe UI, ou Myriad Pro).
• Estilização: Sombras projetadas são profundas. Realces são linhas brancas brilhantes e nítidas na parte superior dos botões.

Implementação Web

• Use múltiplas box-shadows (inset para o brilho, outset para profundidade) e linear-gradients.
• Exemplo de CSS:

body {
  /* Classic blue sky / green grass gradient */
  background: linear-gradient(to bottom, #87CEEB 0%, #E0F6FF 60%, #98FB98 100%);
  font-family: 'Segoe UI', Tahoma, sans-serif;
}

.aero-btn {
  background: linear-gradient(to bottom, #73c8f8 0%, #1583d7 50%, #0361a3 50%, #299eef 100%);
  color: white;
  border: 1px solid #024b7f;
  border-radius: 20px;
  padding: 12px 32px;
  font-weight: 600;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.5);
  
  /* The Glossy Highlight and Depth */
  box-shadow: 
    inset 0 1px 1px rgba(255,255,255,0.8), /* Top edge highlight */
    inset 0 15px 15px rgba(255,255,255,0.3), /* Convex plastic shine */
    0 4px 6px rgba(0,0,0,0.2); /* Drop shadow */
}

.aero-panel {
  /* Windows Vista/7 Aero Glass */
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-top-color: #ffffff; /* Brighter top edge */
  border-radius: 8px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

Implementação de Aplicativos

SwiftUI

struct FrutigerAeroView: View {
    var body: some View {
        ZStack {
            // Classic sky to grass gradient
            LinearGradient(
                colors: [Color(hex: "87CEEB"), Color(hex: "E0F6FF"), Color(hex: "98FB98")],
                startPoint: .top, endPoint: .bottom
            ).ignoresSafeArea()
            
            // Glossy Button
            Button(action: {}) {
                Text("Windows Vista")
                    .font(.headline)
                    .foregroundColor(.white)
                    .shadow(color: .black.opacity(0.5), radius: 1, y: -1) // Inset text shadow effect
                    .padding(.horizontal, 40)
                    .padding(.vertical, 16)
                    .background(
                        // Base gradient
                        LinearGradient(
                            stops: [
                                .init(color: Color(hex: "73c8f8"), location: 0.0),
                                .init(color: Color(hex: "1583d7"), location: 0.5),
                                .init(color: Color(hex: "0361a3"), location: 0.5), // Sharp color stop
                                .init(color: Color(hex: "299eef"), location: 1.0)
                            ],
                            startPoint: .top, endPoint: .bottom
                        )
                    )
                    .cornerRadius(25)
                    .overlay(
                        // Top white specular highlight
                        RoundedRectangle(cornerRadius: 25)
                            .stroke(
                                LinearGradient(colors: [.white, .clear], startPoint: .top, endPoint: .bottom),
                                lineWidth: 1.5
                            )
                    )
                    .shadow(color: .black.opacity(0.3), radius: 5, y: 4)
            }
        }
    }
}
// Note: Color(hex:) requires a custom extension in SwiftUI.

• O visual característico "gel" do Frutiger Aero requer uma transição de cor nítida bem no meio. Defina duas paradas de gradiente em 0.5 com cores diferentes.
• Um .overlay com um traço de gradiente de branco para transparente de cima para baixo cria a borda de realce de vidro.

Flutter

…