Esqueumorfismo

"Interfaces digitais que se parecem e se comportam como suas contrapartes físicas."

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 Realistas: Couro, metal escovado, grão de madeira, papel. A interface deve parecer um objeto físico que você pode tocar.
2. Iluminação e Profundidade Físicas: Atenção intensa a realces especulares, sombras projetadas, sombras internas, chanfros e oclusão de ambiente.
3. Metáforas do Mundo Real: Interruptores que parecem botões de hardware, mostradores com entalhes físicos, blocos de notas com anéis de encadernação.

DNA Visual

• Cores: Altamente dependente do material que está sendo simulado. Para um esqueumorfismo rico e clássico, use as paletas Industrial Chic (para metal/hardware) ou Marrom Monocromático (para madeira/couro).
• Tipografia: Fontes que combinam com o objeto físico (por exemplo, fontes de máquina de escrever para papel, fontes LCD para telas digitais, sans-serifs em relevo para botões de hardware).
• Detalhes: Parafusos, costuras, brilho e gradientes são suas ferramentas principais.

Implementação Web

• Uso intensivo de imagens de fundo em camadas (texturas), gradientes complexos e múltiplas sombras de caixa.
• Exemplo de CSS:

.skeuo-button {
  /* Brushed metal effect */
  background: linear-gradient(180deg, #e0e0e0 0%, #a0a0a0 100%),
              url('brushed-metal-texture.png');
  background-blend-mode: overlay;
  
  border: 1px solid #7a7a7a;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  
  /* Bevel, inner highlight, and drop shadow */
  box-shadow: 
    inset 0 2px 4px rgba(255,255,255,0.8), /* Top highlight */
    inset 0 -2px 4px rgba(0,0,0,0.4),      /* Bottom shading */
    0 4px 6px rgba(0,0,0,0.5),             /* Drop shadow */
    0 1px 1px rgba(0,0,0,0.2);
}

.skeuo-button:active {
  /* Pressing the physical button */
  box-shadow: 
    inset 0 4px 8px rgba(0,0,0,0.6),
    inset 0 -1px 2px rgba(255,255,255,0.4),
    0 1px 1px rgba(0,0,0,0.2);
  transform: translateY(2px);
}

Implementação de Aplicativos

SwiftUI

struct SkeuoButton: View {
    @State private var isPressed = false
    
    var body: some View {
        Button(action: {}) {
            Text("POWER")
                .font(.system(size: 14, weight: .bold))
                .foregroundColor(.white)
                .textCase(.uppercase)
        }
        .frame(width: 80, height: 80)
        .background(
            ZStack {
                // Brushed metal base
                Circle()
                    .fill(
                        LinearGradient(
                            colors: [Color(white: 0.88), Color(white: 0.63)],
                            startPoint: .top,
                            endPoint: .bottom
                        )
                    )
                // Inner highlight (top bevel)
                Circle()
                    .stroke(
                        LinearGradient(
                            colors: [.white.opacity(0.8), .clear],
                            startPoint: .top,
                            endPoint: .center
                        ),
                        lineWidth: 2
                    )
                    .padding(1)
            }
        )
        .clipShape(Circle())
        // Outer bezel ring
        .overlay(Circle().stroke(Color(white: 0.5), lineWidth: 1))
        // Physical drop shadow
        .shadow(color: .black.opacity(isPressed ? 0.2 : 0.5), radius: isPressed ? 2 : 6,
                x: 0, y: isPressed ? 1 : 4)
        .scaleEffect(isPressed ? 0.96 : 1.0)
        .animation(.easeOut(duration: 0.1), value: isPressed)
        .simultaneousGesture(
            DragGesture(minimumDistance: 0)
                .onChanged { _ in isPressed = true }
                .onEnded { _ in isPressed = false }
        )
    }
}

• Empilhe várias formas (Circle, RoundedRectangle) com gradientes diferentes para construir profundidade realista.
• Use .overlay() com formas contornadas para molduras de destaque nas bordas.
• O estado pressionado deve reduzir a sombra E a escala — simulando um aperto físico.

Flutter

class SkeuoButton extends StatefulWidget {
  @override
  State<SkeuoButton> createState() => _SkeuoButtonState();
}

class _SkeuoButtonState extends State<SkeuoButton> {
  bool _isPressed = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(

…