Esqueumorfismo

¿Qué hace Esqueumorfismo?

Un control de pantalla es más fácil de aprender cuando se ve y se comporta como un objeto físico que el usuario ya conoce.

Interfaces que copian objetos reales: cuero, lino, madera, fieltro, vidrio y metal cepillado, iluminados desde arriba con degradados y sombras en capas. Tiene sus raíces en los iconos de escritorio de los años 80 y alcanzó su punto máximo en iOS 1 a 6, hasta que iOS 7 lo reemplazó en 2013.

Período: 2007–2013 · Época: Pantalla táctil · Dominio: Diseño Gráfico y de UI · También llamado: UI esqueuomórfica, estilo iOS 6, interfaz de objeto real

Cuándo cargar este skill

Cárgalo cuando el usuario pida: "esqueuomórfico", "esqueumorfismo", "ios 6", "texturas del mundo real", "textura de cuero", "interfaz táctil", "botones realistas", "botones brillantes", "madera y lino", "ios retro", "curva de página", "cuero cosido".

Ideal para: aplicaciones de música y audio, aplicaciones de notas y diarios, juegos con mesa o tablero, sitios de novedad y nostalgia, incorporación para usuarios primerizos de smartphones.

No lo uses cuando:

• El producto tiene muchos datos y cada píxel de adorno cuesta espacio de lectura.
• La marca debe sentirse abstracta, minimalista o nativa del software.
• El diseño debe escalar a través de muchas densidades y ejecutarse en dispositivos de bajo consumo donde 5 capas de sombra cuestan velocidad de fotogramas.

Directivas del sistema

Al generar diseños de UI o gráficos en Esqueumorfismo, DEBES:

1. Modelar cada control como un objeto real con un uso conocido, como un interruptor de palanca, un bloc de notas, una estantería o un dial, y mantener sus proporciones dentro del 10% del original.
2. Iluminar cada superficie desde arriba con una sola fuente de luz a 90 grados, de modo que los reflejos estén en el borde superior y las sombras caigan hacia abajo.
3. Construir profundidad de 3 a 5 capas apiladas: un reflejo superior claro de 1px, un cuerpo degradado de 2 a 4px, un borde inferior oscuro de 1px, una sombra interior y una sombra exterior.
4. Texturizar superficies grandes con un mapa de bits repetitivo de 128 a 256px con 4 a 12% de opacidad: lino, cuero, papel, veta de madera o fieltro.
5. Dar a cada botón un degradado con una diferencia de luminosidad del 8 al 15% de arriba a abajo, e invertir ese degradado mientras el botón está presionado.
6. Agregar un detalle cosido, en relieve o en bajorrelieve en cada panel de material, con un reflejo interior de 1px y una sombra exterior de 1px.
7. Reflejar el mundo real en el movimiento: curvas de página, transiciones de giro e interruptores con muelle siguen la física del objeto que imitan.

Barreras de seguridad

Cada línea a continuación rompe el estilo. Verifica tu salida contra la lista antes de devolverla.

• NUNCA: Rellenos sólidos planos sin degradado o sombra en los controles.
• NUNCA: Una fuente de luz que cambie de dirección entre componentes.
• NUNCA: Texturas que se repiten con una costura visible o un período de repetición inferior a 64px.
• NUNCA: Metáforas de material que no coincidan con la función, como una calculadora de madera.
• NUNCA: Iconos de contorno delgado de 1px sin relleno.
• NUNCA: Sombras con un radio de desenfoque de 0px y sin propagación.
• NUNCA: Fondos blancos puros sin textura de superficie.

Perfil vectorial

Eje	Puntuación	1 significa	5 significa
Ornamentación	■■■■□ 4/5	puro minimalista	maximalista
Dimensionalidad	■■■■□ 4/5	estrictamente 2D	3D / espacial completo
Rigidez de cuadrícula	■■■□□ 3/5	caótico / orgánico	cuadrícula matemática estricta
Realismo esqueuomórfico	■■■■■ 5/5	abstracto digital	material fotorrealista
Expresividad tipográfica	■■■□□ 3/5	neutral / invisible	experimental / ilustrativo

Mantén estas puntuaciones. Si una solicitud mueve un eje en 2 puntos o más, has salido del estilo: ve a "Alternativas de linaje".

Lógica espacial y de cuadrícula

• Mecánica de cuadrícula: Un lienzo de 320 por 480pt en iPhone, luego 320 por 568pt, con un objetivo táctil mínimo de 44pt; el contenido se ubica en filas agrupadas de ancho completo o en estantes con un margen de 10 a 20pt.
• Proporción de espacio en blanco: 20–35% de la superficie permanece vacía porque las texturas y los marcos llenan el resto; la escala de espaciado es 4, 10, 20, 44pt.
• Reglas de alineación: Los controles se ubican dentro del marco de su metáfora de objeto, como filas en una mesa, libros en un estante o páginas en un cuaderno; el texto está centrado en los botones y alineado a la izquierda en las filas.
• Geometría del contenedor: Rectángulos redondeados con un radio de 5 a 10px, celdas de tabla agrupadas con un radio de 10px en las esquinas exteriores y barras de 44px de alto con un bisel de 1px.

Tipografía

• Clasificaciones: sans serif humanista · slab serif · script
• Tracking: Los tamaños de visualización están en 0em a 0.01em; el cuerpo se mantiene en 0; las etiquetas de botones toman +0.02em.
• Interlineado: Visualización 1.1; cuerpo 1.3 a 1.4; las filas de tabla mantienen una altura de 44px con una sola línea de 17px.
• Reglas de jerarquía:
  • Usa negrita (700) para etiquetas de botones y títulos, y regular (400) para el cuerpo del texto.
  • Establece 17px para títulos y filas, 14px para etiquetas secundarias y 12px para leyendas.
  • Agrega una sombra de texto de 1px, blanca con 60% de opacidad debajo del texto oscuro o negra con 60% de opacidad sobre el texto claro, para que el texto parezca estampado en la superficie.
  • Establece el texto del título en una tipografía diferente en pantallas vinculadas a objetos, como una slab en una estantería o una script en un bloc de notas.

Combinaciones de fuentes

Visualización	Cuerpo	Nota
Roboto Slab	Open Sans	Una slab para etiquetas de objetos con una cara de texto humanista, cercana a la mezcla de Marker Felt y Helvetica de las notas de iOS 6.
Arvo	Lato	Una slab para paneles de cuero y madera con una sans redondeada para controles legibles.
Caveat	Source Sans 3	Una cara de escritura a mano para metáforas de bloc de notas y diarios, con una sans neutral para texto de UI.

Color e iluminación

• Estructura de paleta: Tres a cinco colores de material con 60% de la superficie en el material dominante, más un acento azul brillante para controles primarios en 10 a 15% de la superficie.
• Reglas de contraste: El texto sobre superficies de material mantiene al menos 4.5:1; el texto claro sobre cuero marrón y fieltro verde alcanza aproximadamente 8:1, y el texto sobre azul brillante alcanza 4.5:1.
• Tratamiento de superficie: Texturas fotográficas, degradados lineales con una división dura del 50% para el brillo y ruido al 3 a 6% de opacidad; el vidrio usa un reflejo blanco del 30% sobre la mitad superior.
• Luz y sombra: Una fuente de luz desde arriba; los reflejos son blancos con 40 a 70% de opacidad en los bordes superiores, las sombras son negras con 25 a 50% de opacidad apuntando hacia abajo con un desplazamiento de 1 a 3px.

Paleta

Nombre	Hex	Rol
Lino	#D8D4CC	base de textura de fondo
Cuero marrón	#6B4A2F	superficie del panel
Vidrio azul	#2F7BE0	degradado de control primario
Cromo	#C9CDD3	barra y bisel metálicos
Fieltro verde	#1E5B3A	superficie de mesa
Tinta de sello	#2B2118	texto sobre material claro

Materialidad y textura

• Simulación de superficie: Materiales reales: cuero con costuras, lino, papel, madera, fieltro, aluminio cepillado, vidrio y cromo.
• Reglas de borde: Un borde exterior oscuro de 1px con 40 a 60% de negro, un reflejo interior blanco de 1px con 40 a 60% de opacidad, y costuras punteadas de 1px insertadas a 4px del borde en cuero.
• Desenfoque y elevación: Sombras exteriores con 0 1px 2px al 40% de negro para botones y 0 4px 10px al 50% de negro para paneles; sombras interiores de inset 0 1px 3px al 50% de negro para huecos; la elevación usa 3 niveles.

Ornamentación e iconografía

• Iconografía: Iconos rellenos brillantes de 57 por 57px con un radio de 12px, un reflejo de brillo superior sobre el 50% de la altura, un bisel de 1px y una sombra reflejada debajo.
• Ilustración: Ilustraciones de objetos renderizados con iluminación, como estanterías, micrófonos, carretes de película y platillos, dibujados desde una vista superior de 3/4.
• Elementos decorativos: costuras · curva de página · estante de madera · borde de papel rasgado · reflejo brillante · bisel cromado · reflejo debajo del icono

Movimiento e interactividad

• Nacido en pantalla: sí
• Física de transición: Física de objetos: las páginas se curvan y voltean en 400 a 600ms, los interruptores se deslizan con un ajuste de muelle de 20ms y los estantes se desplazan con inercia y 8px de rebote en el borde.
• Easing: cubic-bezier(0.42, 0, 0.58, 1)
• Duración (ms): 350
• Hover y activo: El estado presionado invierte el degradado del botón y elimina la sombra exterior, por lo que el botón parece presionado 1 a 2px en la superficie; los dispositivos táctiles no tienen hover.

Código y token de inicio

Establece data-style="skeuomorphism" en el elemento raíz y pega los tokens. El archivo tokens.css tiene los mismos tokens y un conjunto de reglas de referencia.

[data-style="skeuomorphism"] {
  --color-bg: #D8D4CC;
  --color-surface: #6B4A2F;
  --color-text: #2B2118;
  --color-muted: #6E6659;
  --color-primary: #2F7BE0;
  --color-accent: #C9A24B;
  --color-border: rgba(0, 0, 0, 0.5);
  --font-sans: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Roboto Slab", Georgia, "Times New Roman", serif;
  --border-radius: 8px;
  --border-width: 1px;
  --shadow-elevation: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 3px rgba(0, 0, 0, 0.35);
  --backdrop-filter: none;
  --space-unit: 4px;
  --ease: cubic-bezier(0.42, 0, 0.58, 1);
  --duration: 350ms;
  --gradient-control: linear-gradient(to bottom, #6FA8F5 0%, #2F7BE0 50%, #1F5FC0 50%, #2C78DC 100%);
  --gradient-bar: linear-gradient(to bottom, #E2E5EA 0%, #C9CDD3 50%, #B6BBC3 100%);
  --text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  --touch-target: 44px;
  --color-on-bg: #2B2118;
  --color-on-surface: #D8D4CC;
  --color-on-primary: #000000;
  --color-on-accent: #2B2118;
  --color-muted-on-bg: #5F574E;
  --color-muted-on-surface: #CDC6BC;
  --color-link: #2B2118;
  --color-link-on-surface: #D8D4CC;
  --display-weight: 700;
  --subhead-weight: 700;
  --body-weight: 400;
  --strong-weight: 700;
  --label-weight: 700;
  --display-tracking: 0em;
  --display-leading: 1.1;
  --display-case: none;
  --body-leading: 1.55;
  --body-size: 16px;
  --icon-stroke: 2;
}

Patrones de Tailwind:

Elemento	Clases
página	min-h-screen bg-[#D8D4CC] bg-[url('/textures/linen.png')] font-sans text-[#2B2118] [text-shadow:0_1px_0_rgba(255,255,255,0.6)]
encabezado	font-serif text-[17px] font-bold leading-tight [text-shadow:0_1px_0_rgba(255,255,255,0.6)]
panel	rounded-lg border border-black/50 bg-[#6B4A2F] bg-[url('/textures/leather.png')] p-5 shadow-[0_4px_10px_rgba(0,0,0,0.5),inset_0_1px_0_rgba(255,255,255,0.3)]
botón	h-11 rounded-lg border border-[#1B4F9E] bg-gradient-to-b from-[#6FA8F5] via-[#2F7BE0] to-[#1F5FC0] px-5 text-sm font-bold text-white shadow-[0_1px_2px_rgba(0,0,0,0.4),inset_0_1px_0_rgba(255,255,255,0.5)] active:from-[#1F5FC0] active:to-[#6FA8F5] [text-shadow:0_-1px_0_rgba(0,0,0,0.5)]
entrada	h-11 rounded-md border border-black/40 bg-white px-3 text-[17px] shadow-[inset_0_1px_3px_rgba(0,0,0,0.35)]

Paquete visual

Las imágenes e iconos de este estilo son archivos. Úsalos tal cual, o léelos como una especificación y dibuja los tuyos en el mismo lenguaje.

Archivo	Contenido
pack/hero.svg	Placa hero, 800 por 600. Una imagen abstracta en el lenguaje visual del estilo.
pack/pattern.svg	Mosaico de patrón, 80 por 80. Se repite en ambas direcciones.
pack/icons.svg	Sprite de iconos: home, search, heart, star, bell, user, mail, calendar, image, bolt, play, check, close, sliders.

• Iconos: sólidos, stroke 2 en un campo de 24px, extremos redondeados, uniones redondeadas, contenedor: redondeado. Uso: <svg class="icon"><use href="pack/icons.svg#home"/></svg>. Un icono toma currentColor.
• Familia de iconos: el sprite está cortado de Phosphor (Fill) de Phosphor Icons, licencia MIT. Razón: Siluetas sólidas completas de objetos reales. El contenedor proporciona el material y la luz. Es un sustituto de código abierto para una demostración. Para un producto, usa la biblioteca de iconos de la marca y elige la familia según las reglas a continuación.
• Tipo de visualización: weight 700, tracking 0em, leading 1.1, case: none.
• Pesos: visualización 700, subtítulo 700, cuerpo 400, negrita en texto 700, etiquetas y botones 700. El estilo usa 2 pesos (400, 700) y ningún otro. La visualización es 300 más pesada que el cuerpo. El acento es el peso: una palabra más pesada es el acento, por lo que los pasos entre los pesos son claros.
• Tipo de cuerpo: 16px, leading 1.55.
• Página: hero dividido, alineado a la izquierda, densidad regular, inclinación del acento 0°.
• Color de texto: --color-text es solo para el campo de lectura principal. En cada campo, usa su token: --color-on-bg, --color-on-surface, --color-on-primary, --color-on-accent.

Cómo elegir un paquete de iconos

Un paquete de iconos es una tipografía para imágenes. Elígelo con el mismo cuidado que la cara de texto. Estas reglas son válidas tanto para un conjunto de código abierto como para una biblioteca con licencia.

1. El trazo coincide con el asta. Coloca un icono junto al texto del cuerpo en el tamaño del texto. La línea del icono y el asta de una letra tienen el mismo peso.
2. Los terminales y las esquinas siguen el token de radio. Los extremos rectos y las uniones en inglete van con un radio de cero. Los extremos redondeados y las uniones redondeadas van con un radio suave.
3. El modo de relleno sigue la tecnología de la época. Las épocas de impresión cortan formas sólidas. Las épocas de pantalla con profundidad rellenan y sombrean la forma. Las interfaces de productos actuales dibujan un contorno.
4. Las metáforas no son más jóvenes que el estilo. Cada imagen es un objeto que la época conocía. Un icono con una metáfora posterior rompe el período.
5. Una familia, una cuadrícula. Todos los iconos provienen de una familia y una variante, dibujados en un campo. No mezcles familias en una superficie.
6. La familia cubre el producto. Enumera cada concepto que el producto necesita antes de comprometerte. Una familia que no tiene un icono para uno de ellos es la familia equivocada.
7. El color es un token. Un icono toma currentColor. Un segundo tono proviene de un token, no del archivo.
8. La licencia permite el uso. Lee la licencia del conjunto. Da crédito donde la licencia lo solicite. Un producto con una marca utiliza su biblioteca con licencia y aplica las mismas reglas para elegir la familia.

Alternativas de linaje

Cuando el usuario pida una variación, no improvises. Mezcla hacia el vecino nombrado aquí y carga su skill.

• Si el usuario pide más plano: dirígete hacia flat-design (Diseño Plano). Elimina todos los degradados, texturas y sombras, establece rellenos sólidos y mantén los colores y 5 líneas. Añade espacio en blanco. Retira las arrugas de lino de bordes y quita la luz especular.
• Si el usuario pide más suave: dirígete hacia neumorphism (Neumorfismo). Mantén las sombras de borde y la superficie con textura, cambia la fuente de luz a la parte superior izquierda con un ángulo de 135°, duplica el radio de las esquinas, usa el mismo color para el fondo y el panel, y deja caer los iconos sólidos.
• Si el usuario pide más vidrio: dirígete hacia glassmorphism (Vidrio Esmerilado). Reemplaza las superficies sólidas con un desenfoque de fondo de 12 a 20px, mantén la fuente de luz superior, reduce las texturas a un patrón de ruido del 2%, eleva los paneles sobre un fondo de color degradado abstracto y cambia los iconos a outline con un ancho de 1.5 a 2px.
• Si el usuario pide más audaz: dirígete hacia y2k (Y2K / Cyber). Exagera todos los biseles, sombras y reflejos especulares al 150% del valor original, duplica la saturación de color, agrega un borde de vidrio de 2px, apila 3 niveles de borde y empuja la fuente a una sans geométrica con pesos ultra (900).