# Esqueumorfismo

Também chamado de: design esqueumórfico, UI realista, estilo iOS 6, UI de couro e linho, revival esqueumórfico  
Era: 2007-2013 (do iPhone ao iOS 6); interesse em revival de 2023 em diante  
Página: https://designforai.dev/pt/style/skeuomorphism

## Traços

- interfaces imitam materiais físicos: couro, linho, metal escovado, madeira, vidro, papel
- iluminação realista: gradientes que modelam uma luz vinda de cima, reflexos e sombras projetadas
- bordas costuradas, texto em relevo, botões biselados, botões giratórios e toggles com cara mecânica
- texturas via imagens repetidas ou ruído SVG; nada é chapado
- objetos se comportam fisicamente: páginas se curvam, chaves deslizam, dials giram
- ordem de profundidade forte com várias camadas de sombra
- cor quente e tátil: bege, marrom escuro, cinza aço, verde feltro

Paleta: #3b2a1e marrom couro, #d9c8a9 costura, #b8b8b8 metal escovado, #f4efe4 papel, #1f1f1f texto, #2f6b3a verde feltro

Tipografia: À la Helvetica (Arimo, Work Sans) para UI, o estilo Marker Felt é comercial; use Lora ou Georgia para o conteúdo em "papel"; tamanhos 15-17px na UI, 20px no papel; texto muitas vezes em relevo com um text-shadow branco de 1px abaixo

## Faça

- modele uma única fonte de luz no canto superior esquerdo e mantenha cada gradiente, reflexo e sombra consistente com ela
- use texturas de ruído SVG ou pequenas imagens repetidas; mantenha cada uma abaixo de 20KB
- faça os controles parecerem sua contraparte física (um toggle de verdade, um dial de verdade) e anime-os fisicamente

## Evite

- não misture metáforas de material num painel; nav de couro com botões de metal é ok, botões de couro sobre metal não
- não use ícones flat; os ícones precisam da mesma iluminação das superfícies
- não use em todo o site para conteúdo de leitura; reserve para controles e chrome, mantenha o texto em papel simples

Conhecido por: iOS 6 (Notas, Game Center, Buscar Amigos), Apple Podcasts 2012, Things 2, Garageband

## Semente CSS

```css
:root{--bg:#3b2a1e; --paper:#f4efe4; --fg:#1f1f1f; --metal:linear-gradient(#e6e6e6,#a8a8a8); --stitch:#d9c8a9; --radius:10px; --shadow:0 2px 4px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.4); --font:'Work Sans',sans-serif}
```

## Prompt

Construa o site em estilo esqueumórfico. Nav e rodapé são couro escuro: background #3b2a1e com uma textura de ruído SVG (feTurbulence baseFrequency 0.8, opacity 0.15), uma linha costurada tracejada de 1px #d9c8a9 recuada 6px da borda, e inset 0 1px 0 rgba(255,255,255,0.15) como reflexo superior. Os painéis de conteúdo são papel #f4efe4 com uma leve textura de linhas horizontais e box-shadow 0 3px 8px rgba(0,0,0,0.45). Os botões são metal escovado: linear-gradient(#ececec,#a8a8a8), borda 1px #6b6b6b, border-radius 10px, inset 0 1px 0 rgba(255,255,255,0.7), texto #1f1f1f em relevo com text-shadow 0 1px 0 rgba(255,255,255,0.6); o estado active vira sombra inset. Os toggles parecem chaves de verdade com um botão deslizante (200ms ease-out). Fonte Work Sans a 16px para a UI, Lora a 19px para o conteúdo em papel. Uma fonte de luz no canto superior esquerdo em cada gradiente. Sem ícones flat; os ícones recebem preenchimento em gradiente e um reflexo inferior de 1px.