kennedys0/taste-style-skeuomorphism

Usa esta habilidad solo después de que un usuario elija explícitamente o una configuración de proyecto confirmada lo especifique. Para solicitudes de UI nuevas no explicadas, usa un selector de estilo como [selector] en lugar de decidir el gusto del usuario aquí. Las anulaciones de marca, accesibilidad y usuario existentes tienen prioridad sobre todos los ejemplos a continuación. La siguiente guía de estilo no es un permiso para comenzar a codificar UI antes de la selección de estilo.

Paquete de estilo: Esqueuomorfismo

ID: skeuomorphism
Firma: Los controles digitales toman prestadas señales táctiles de objetos físicos, maquinaria industrial y hardware analógico.

Este es un paquete de estilo, no un valor predeterminado obligatorio. Cárgalo solo después de una selección explícita o de un estilo de proyecto confirmado aplicable. Las instrucciones del proyecto pueden anular decisiones individuales. Preserva la accesibilidad, utilidad y restricciones de marca. Las fuentes son sugerencias, no dependencias requeridas. Una tarjeta plana con un gradiente sutil no califica como esqueuomorfismo.

Buen ajuste / compensaciones

• Funciona bien para: Software de producción musical y sintetizadores, herramientas de equipo de audio, simuladores especializados, widgets de panel de control táctiles, instrumentos digitales creativos y experiencias táctiles lúdicas.
• Ten cuidado con: Tablas de datos transaccionales densas o formularios empresariales móviles donde las texturas ornamentadas de hardware físico crean desorden visual.
• Direcciones de referencia:
  • Aluminio Industrial Cepillado / Hardware de Estudio: Chasis de plata o gunmetal maquinado con reflejos metálicos radiales, perillas moleteadas, pozos de indicador empotrados e interruptores de palanca mecánicos nítidos.
  • Instrumento de Precisión Mate: Base compuesta de grafito profundo / mate con tipografía de lectura blanca grabada, indicadores de estado LED joya e interruptores basculantes físicos.

Puerta de fidelidad material esqueuomórfica — obligatoria

Antes de dar por completo una página esqueuomórfica, el viewport de apertura debe leerse visiblemente como un instrumento o interfaz de hardware físico y táctil. Si un usuario eligió este estilo, una tarjeta plana con esquinas redondeadas estándar y un solo gradiente es un FRACASO, incluso si las clases CSS contienen skeuo.

Una implementación esqueuomórfica exitosa demuestra todos los siguientes:

1. Dirección del Modelo de Luz y Destellos Especulares: Las superficies se adhieren a una única fuente de luz consistente (típicamente de arriba hacia abajo): los bordes superiores capturan un destello de luz especular nítido de 1px (box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35)), mientras que los bordes inferiores proyectan sombras paralelas físicas.
2. Superficies de Material Reflectante Multi-Parada: Perillas, placas frontales e interruptores basculantes usan gradientes lineales o radiales de múltiples paradas que simulan aluminio cepillado, plástico mate o metal anodizado. Los rellenos de un solo color plano fallan.
3. Polaridad Grabada o Empotrada: Las pantallas de texto, controles deslizantes y pozos de medidor están visualmente hundidos en el chasis usando sombras interiores profundas (box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6)), distinguiendo claramente los controles que se mueven de los contenedores que los alojan.
4. Recorrido Mecánico en la Interacción: Los botones se hunden físicamente en el chasis al hacer clic (transform: translateY(1.5px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7);), imitando mecanismos de interruptor con resorte reales.
5. Señales Analógicas Legibles: Los diales físicos y controles deslizantes incluyen lecturas digitales claras o marcas de graduación numérica etiquetadas, asegurando accesibilidad por teclado e ingreso de datos exacto.

Prueba del primer viewport: En una captura de pantalla de escritorio, identifica el chasis físico, los destellos de bisel especulares, los pozos empotrados y los controles de hardware táctiles sin leer el título de la página. Si parece puramente digital y plano, refuerza los reflejos de gradiente y los destellos de bisel.

Excepción explícita de material esqueuomórfico — se permiten reflejos de hardware

Anulación específica de esqueuomorfismo: La precaución universal anti-desorden contra gradientes decorativos, texturas o sombras NO DEBE interpretarse como una prohibición de gradientes de material de múltiples paradas, reflejos metálicos, bordes biselados o recorrido físico aquí. Estas son propiedades habilitadoras de material, esenciales para comunicar la señal táctil mecánica.

• Tratamientos de material permitidos: Gradientes metálicos lineales/radiales de múltiples paradas, biseles de destello de 1px, canales de pozo empotrados, bordes de perilla moleteados y luces de estado LED joya.
• Límite anti-desorden: Cada metáfora mecánica debe corresponder a una acción real y funcional. No decores pantallas con tornillos falsos, perillas ornamentales que no giran o medidores estáticos que muestren mediciones inventadas.
• Interpretación anti-desorden: Evalúa los detalles esqueuomórficos por señal táctil, utilidad funcional y legibilidad, no contando paradas de color de gradiente. Eliminar biseles físicos para satisfacer una heurística genérica plana es una regresión de diseño.

Tipografía y escritura a máquina

Sans técnica utilitaria o mono de pantalla: IBM Plex Sans, DIN Next, Roboto Mono o sans del sistema. Etiquetas de control: 11–13px mayúsculas con tracking (letter-spacing: 0.08em); medidores de pantalla: mono LCD/LED de alto contraste (16–24px). Alto contraste contra placas frontales oscuras (al menos 4.5:1).

Dirección de color

• Modo Oscuro (Chasis Oscuro Gunmetal Anodizado):
  • Base del Chasis: Pizarra maquinada / gradiente gunmetal anodizado (linear-gradient(180deg, #323741 0%, #262A32 100%)).
  • Destellos de Superficie: Línea fina blanca especular (rgba(255, 255, 255, 0.40)).
  • Pozos Empotrados: Cavidad negra profunda (#141619 a #181A1E).
  • Etiquetas de Control: Tipografía blanca/plateada grabada nítida (#F3F4F6).
• Modo Claro (Chasis de Aluminio Cepillado / Plata):
  • Base del Chasis: Aluminio maquinado / gradiente plateado (linear-gradient(180deg, #F5F7FA 0%, #E4E7EB 100%)).
  • Destellos de Superficie: Línea fina blanca especular (rgba(255, 255, 255, 0.85)).
  • Pozos Empotrados: Cavidad de pizarra suave empotrada (#D1D5DB con sombra interior).
  • Etiquetas de Control: Tinta carbón grabada profunda (#1F2937 o #111827).
• Acentos Físicos: Ámbar de señal (#FFAE00), verde de aviación (#10B981) o cobalto de estudio (#2563EB).
• Indicadores LED: Colores joya nítidos con brillo activo distinto vs estado inactivo oscuro.
• Regla de Acoplamiento de Tema y Anti-Colisión: En modo de chasis esqueuomórfico claro, las etiquetas grabadas y el texto de control DEBEN cambiar a carbón profundo (#1F2937). Dejar etiquetas blancas en un chasis de aluminio/plateado cepillado produce texto invisible y está estrictamente prohibido.

Diseño y geometría

Las formas de los componentes se asignan estrictamente a sus metáforas físicas: diales rotativos, botones pulsadores táctiles, interruptores basculantes y medidores segmentados. Radios de esquina de 4–12px en paneles; radios circulares para perillas. Evita aplicar pieles de hardware a párrafos de texto genéricos.

Superficies, profundidad, textura

• Panel del Chasis: Gradiente lineal de múltiples paradas (linear-gradient(180deg, #323741 0%, #262A32 100%)) con destello superior de 1px y sombra paralela inferior.
• Botón Pulsador Físico: Borde biselado con destello superior, superficie de botón radial y depresión activa nítida.
• Pozo / Pantalla Empotrada: box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 255, 255, 0.15);

Anatomía de componentes e interacción

• Botón Pulsador Táctil: Acabado de aluminio maquinado, etiqueta grabada blanca, retroceso mecánico al soltar.
• Interruptor Basculante / de Palanca: Palanca física de dos estados con sombra proyectada visible en el lado activo.
• LCD / Lectura de Datos Empotrada: Pantalla hundida con valor monoespaciado, cuadrícula de raster sutil y alto contraste.
• Dial Rotativo / Control Deslizante: Indicador de posición táctil con semántica ARIA slider y soporte de teclas de flecha del teclado.
• Luz de Estado LED: Lente joya circular pequeña con brillo radiante cuando está activo (box-shadow: 0 0 8px currentColor).

Animación

Respuesta mecánica de 140–200 ms. Depresión física directa de 1–2px al hacer clic. Sin exceso de rebote caricaturesco; el movimiento debe sentirse ponderado y amortiguado.

Receta opcional Anime.js v4

• Decisión de animación: Resorte amortiguado o depresión mecánica lineal al presionar; rotación precisa para diales.
• Duración inicial: 160ms (0 = inmediato); ajustar a la tarea y preferencia del usuario.
• Evitar: oscilación perpetua, agitación de aguja no solicitada, elementos flotantes.
• Dependencia: CSS/nativo por defecto. Usa Anime.js v4 solo si la interacción solicitada lo justifica. Sigue references/motion-engine.md del Taste Engine cuando esté disponible; el uso independiente sigue los principios de movimiento reducido y sin bucle decorativo anteriores.

Redacción de UI y microcopy

Técnico, preciso y conciso. Ejemplos: "Master Output", "Bypass", "Channel 01", "Gain: +3.5 dB". Evita el relleno de marketing conversacional en paneles de instrumentos.

Fichas iniciales (sugerencias, no un tema completo)

Ficha	Valor predeterminado chasis oscuro	Valor predeterminado chasis claro
--taste-skeuo-chassis-bg	linear-gradient(180deg, #323741 0%, #262a32 100%)	linear-gradient(180deg, #f5f7fa 0%, #e4e7eb 100%)
--taste-skeuo-chassis-border	1px solid rgba(0, 0, 0, 0.8)	1px solid rgba(0, 0, 0, 0.15)
--taste-skeuo-chassis-highlight	inset 0 1px 0 rgba(255, 255, 255, 0.25)	inset 0 1px 0 rgba(255, 255, 255, 0.90)
--taste-skeuo-text	#f3f4f6	#1f2937
--taste-skeuo-btn-bg	linear-gradient(180deg, #3c424f 0%, #2a2e37 100%)	linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%)
--taste-skeuo-btn-bevel	inset 0 1px 0 rgba(255, 255, 255, 0.40), inset 0 -1px 0 rgba(0, 0, 0, 0.50)	inset 0 1px 0 rgba(255, 255, 255, 0.80), inset 0 -1px 0 rgba(0, 0, 0, 0.20)
--taste-skeuo-btn-shadow	0 4px 8px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.40)	0 4px 8px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08)
--taste-skeuo-well-inset	inset 0 3px 6px rgba(0, 0, 0, 0.70), 0 1px 0 rgba(255, 255, 255, 0.12)	inset 0 3px 6px rgba(0, 0, 0, 0.18), 0 1px 0 rgba(255, 255, 255, 0.80)
--taste-skeuo-led-active	#10b981	#059669
--taste-skeuo-led-glow	0 0 10px rgba(16, 185, 129, 0.75)	0 0 8px rgba(5, 150, 105, 0.45)
--taste-skeuo-radius-panel	12px	12px
--taste-skeuo-font-mono	IBM Plex Mono, ui-monospace, monospace	IBM Plex Mono, ui-monospace, monospace
--taste-skeuo-motion-duration	160ms	160ms

Las fichas representan una dirección y no están garantizadas como copiar y pegar para cada paleta/plataforma. Define --taste-skeuo-* a nivel de proyecto, asegura el contraste de color y adapta mediante fichas de tema en lugar de dispersar valores literales.

Composición Hero (primer viewport completo)

Cuando un portafolio/landing/página de inicio pública tiene un hero: usa una composición de encabezado+hero de una pantalla visible. Altura base en min-height: 100svh con respaldo 100vh, restando el encabezado real solo cuando está en flujo normal; deja que el hero se expanda para accesibilidad y pantallas móviles cortas. No apliques esto a paneles privados u otras pantallas de tarea; las anulaciones directas del usuario ganan. Dirección específica del estilo: Trata el primer viewport como una consola de control maestro auténtica o placa frontal de instrumento característico; proporciona controles funcionales y un CTA principal inequívoco. No llenes el lienzo con tornillos no funcionales, cables decorativos o medidores analógicos desconectados. Consulta el enrutador references/hero-layout.md cuando esté presente. El uso independiente sigue los mismos principios de capacidad de respuesta y anti-desorden.

Puerta de calidad específica del estilo

• Hacer: Verificar el destello especular consistente de arriba hacia abajo en todos los controles; asegurar que los estados de presión mecánica se hundan suavemente; proporcionar lecturas numéricas junto a diales/controles deslizantes; probar el foco del teclado; verificar el cambio de modo oscuro/claro para que el chasis, destellos de bisel, pozos y tipografía de etiquetas se adapten en pares acoplados.
• No hacer: No trates un tema oscuro simple como esqueuomórfico; no agregues tornillos decorativos no funcionales o agujas analógicas falsas que no se conecten a datos reales; evita texto ilegible de bajo contraste en placas frontales oscuras o etiquetas blancas en placas frontales claras plateadas.
• Confirma la consistencia en escritorio y móvil; foco de teclado visible (:focus-visible); estados de carga, vacío, deshabilitado, error y éxito; comportamiento de movimiento reducido (prefers-reduced-motion).
• No inyectes suposiciones específicas de estilo en proyectos no relacionados. Al combinar estilos, nombra explícitamente el estilo principal y las características tomadas prestadas.

Puerta universal anti-desorden (autónoma)

Cada elemento debe ganarse su lugar. Contenido antes que decoración. No decores la incertidumbre. No inventes balances, métricas, testimonios, usuarios, logotipos, aprobación, estado verificado/en vivo/en línea, actividad falsa o confirmaciones de éxito; usa estados honestos de vacío/carga/error en su lugar. Los datos de demostración son aceptables solo si se solicitan y etiquetan visiblemente.

No agregues capas decorativas de tarjeta-dentro-de-tarjeta: una superficie anidada debe representar un límite de interacción o información distinto. Evita cuadrículas de 3 características generadas automáticamente, paneles de 4 estadísticas, afirmaciones de héroe falsas, gráficos sin propósito, spam de insignias/chips/iconos, arte decorativo no relacionado y bucles aleatorios solo para llenar el viewport. Prefiere agrupar con tipografía, espaciado, alineación y divisores. Los pares iguales necesitan equilibrio visual intencional.

Redacción anti-desorden: sin afirmaciones genéricas como "Libera tu potencial", "Experimenta el futuro", "Acelera tu flujo de trabajo", "sin problemas" o equivalentes traducidos. Los encabezados deben comunicar el contenido real, los CTA deben nombrar la acción y el texto de vacío/error/éxito debe describir estados reales y próximos pasos. Evita urgencia falsa, conteos inventados, exageración vaga de IA, emojis gratuitos y muros de mayúsculas inaccesibles. Adapta la redacción a este estilo y al idioma del usuario sin cambiar la verdad.

Integridad de contraste de tema y modo: Cuando un usuario solicita modo oscuro o modo claro (o construye un conmutador de tema), los colores de fondo y primer plano DEBEN cambiarse en pares sincronizados en todas las superficies, texto, bordes, entradas e insignias semánticas. Nunca dejes texto negro sobre fondo oscuro, texto blanco sobre fondo blanco o píldoras de estado ilegibles de bajo contraste. Todos los estados deben cumplir con WCAG AA (mínimo 4.5:1 para texto normal/cuerpo, 3:1 para titulares grandes y límites interactivos).

Capacidad de respuesta y movimiento: compón deliberadamente para móvil, verifica etiquetas largas, enfócate...