# Skeuomorfismo

También llamado: diseño skeuomórfico, UI realista, estilo iOS 6, UI de cuero y lino, revival skeuomorfo  
Época: 2007-2013 (del iPhone a iOS 6); interés renovado de 2023 en adelante  
Página: https://designforai.dev/es/style/skeuomorphism

## Rasgos

- las interfaces imitan materiales físicos: cuero, lino, metal cepillado, madera, cristal, papel
- iluminación realista: gradientes que modelan una luz desde arriba, realces y sombras proyectadas
- bordes cosidos, texto en relieve, botones biselados, mandos e interruptores que parecen mecánicos
- texturas mediante imágenes repetidas o ruido SVG; nada es plano
- los objetos se comportan físicamente: las páginas se curvan, los interruptores deslizan, los diales giran
- orden de profundidad fuerte con varias capas de sombra
- color cálido y táctil: canela, marrón oscuro, gris acero, verde fieltro

Paleta: #3b2a1e marrón cuero, #d9c8a9 costura, #b8b8b8 metal cepillado, #f4efe4 papel, #1f1f1f texto, #2f6b3a verde fieltro

Tipografía: Tipo Helvetica (Arimo, Work Sans) para la UI, el estilo Marker Felt es comercial; usa Lora o Georgia para el contenido "en papel"; tamaños 15-17px en UI, 20px en papel; el texto suele ir en relieve con un text-shadow blanco de 1px por debajo

## Haz

- modela una sola fuente de luz arriba a la izquierda y mantén cada gradiente, realce y sombra coherente con ella
- usa texturas de ruido SVG o pequeñas imágenes en mosaico; que cada una pese menos de 20KB
- haz que los controles se parezcan a su equivalente físico (un interruptor real, un dial real) y anímalos de forma física

## Evita

- no mezcles metáforas de material en un mismo panel; una nav de cuero con botones de metal está bien, botones de cuero sobre metal no
- no uses iconos planos; los iconos necesitan la misma iluminación que las superficies
- no lo uses en todo el sitio para contenido de lectura; resérvalo para controles y chrome, y deja el texto sobre papel liso

Conocido por: iOS 6 (Notas, Game Center, Buscar a mis amigos), Apple Podcasts 2012, Things 2, Garageband

## Semilla 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

Construye el sitio en estilo skeuomórfico. Nav y pie son cuero oscuro: background #3b2a1e con una textura de ruido SVG (feTurbulence baseFrequency 0.8, opacity 0.15), una línea cosida discontinua de 1px #d9c8a9 a 6px del borde, e inset 0 1px 0 rgba(255,255,255,0.15) como realce superior. Los paneles de contenido son papel #f4efe4 con una textura tenue de líneas horizontales y box-shadow 0 3px 8px rgba(0,0,0,0.45). Los botones son metal cepillado: linear-gradient(#ececec,#a8a8a8), borde 1px #6b6b6b, border-radius 10px, inset 0 1px 0 rgba(255,255,255,0.7), texto #1f1f1f en relieve con text-shadow 0 1px 0 rgba(255,255,255,0.6); el estado active pasa a sombra inset. Los toggles parecen interruptores reales con un mando deslizante (200ms ease-out). Fuente Work Sans a 16px para la UI, Lora a 19px para el contenido en papel. Una sola fuente de luz arriba a la izquierda en cada gradiente. Sin iconos planos; los iconos reciben un relleno en gradiente y un realce inferior de 1px.