Usa este skill 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 style-selector en lugar de decidir el gusto del usuario aquí. Las anulaciones existentes de marca, accesibilidad y usuario tienen prioridad sobre todos los ejemplos siguientes. 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: Claymorphism
ID: claymorphism
Firma: Superficies moldeadas, táctiles, esculpidas con profundidad volumétrica de sombra interior dual, sombras exteriores suaves ambientales y presencia física amigable.
Este es un paquete de estilo, no un valor predeterminado obligatorio. Cárgalo solo después de una selección explícita o un estilo de proyecto confirmado aplicable. Las instrucciones del proyecto pueden anular elecciones individuales. Preserva la accesibilidad, utilidad y restricciones de marca. Las fuentes son sugerencias, no dependencias requeridas. Una tarjeta plana con esquinas redondeadas y un borde de 1px no califica como Claymorphism.
Buen ajuste / compensaciones
- Funciona bien para: Experiencias de consumo lúdicas, herramientas creativas, paneles personales, widgets interactivos, aplicaciones web táctiles y plataformas educativas o de diseño modernas.
- Ten cuidado con: Datos tabulares extremadamente densos, lectura legal extensa o dispositivos de baja potencia si los cálculos excesivos de sombra obstruyen el rendimiento.
- Direcciones de referencia:
- Arcilla Saturada Primaria: Superficies moldeadas ricas en violeta/púrpura vibrante (
#813FFC) con iluminaciones interiores blancas brillantes en la parte superior izquierda, sombras de forma profundas teñidas en la parte inferior derecha y tipografía nítida. - Arcilla de Porcelana Claro: Superficies moldeadas en blanco suave (
#ECEBF5) con iluminaciones interiores blancas puras en la parte superior izquierda, sombras de forma gris-lavanda suaves en la parte inferior derecha y tipografía pizarra-púrpura oscura. - Pozos Hundidos: Campos de formulario en relieve con un borde de relieve blanco nítido (
3px solid rgba(255, 255, 255, 0.85)), sombras interiores invertidas y etiquetas de marcador de posición accesibles.
- Arcilla Saturada Primaria: Superficies moldeadas ricas en violeta/púrpura vibrante (
Puerta de calidad de fidelidad del material de arcilla — obligatoria
Antes de dar por completa una página de claymorphism, el viewport de apertura debe leerse visiblemente como una composición de arcilla esculpida. Si un usuario eligió este estilo, una tarjeta plana con esquinas redondeadas y un borde de 1px es un FALLO, incluso si las variables CSS se llaman clay.
Una implementación exitosa de claymorphism demuestra todos los siguientes:
- Sombras Interiores Duales Volumétricas (Iluminación + Sombra): Una superficie de arcilla DEBE tener sombras interiores duales opuestas: una iluminación interior superior izquierda que simule luz incidente (
inset 3px 4px 6px rgba(255,255,255,...)) y una sombra interior inferior derecha que simule grosor volumétrico (inset -4px -6px 8px rgba(tinte-oscuro,...)). Una sola línea de iluminación plana o un bisel genérico falla. - Sombras Exteriores Ambientales Suaves Teñidas: Las superficies proyectan sombras exteriores suaves, direccionales y teñidas (
8px 16px 24px rgba(..., 0.20–0.35)), creando la sensación de material maleable flotando o descansando sobre un lienzo teñido, en lugar de sombras exteriores negras duras. - Geometría Generosa de Squircle y Píldora: Curvatura generosa (
24px–32pxtarjetas,20px–26pxbotones,9999pxpíldoras o círculos,14pxsquircle casillas de verificación). Las esquinas afiladas de 90 grados fallan. - Polaridad Hundida vs Elevada: Los componentes accionables (botones, insignias, pulgares de alternancia, tarjetas) están elevados hacia afuera; los pozos de contención (campos de entrada, canales de interruptor inactivos) están hundidos hacia adentro con sombras interiores invertidas y un borde de relieve blanco opcional.
- Compresión Táctil en la Interacción: Al pasar el ratón, al enfocar y al hacer clic, los controles responden físicamente con una reducción de escala sutil (
scale(0.97–0.98)otranslateY(1–2px)) y sombras ajustadas, sintiéndose como arcilla real y maleable presionada por un dedo.
Prueba del primer viewport: En una captura de pantalla de escritorio, identifica los botones esculpidos elevados, las iluminaciones/sombras interiores duales y los pozos de entrada hundidos sin leer el título de la página. Si parecen planos o simplemente redondeados, revisa los tokens de sombra antes de agregar más contenido.
No es una regla de conteo de tarjetas: Una exhibición centrada en componentes (por ejemplo, píldora primaria "Enviar", píldora secundaria "Volver", botón de acción circular, interruptor de alternancia táctil, casilla de verificación y campo de entrada hundido) es suficiente para establecer una fidelidad de material auténtica sin cubrir toda la pantalla con tarjetas globo anidadas.
Excepción explícita de profundidad de arcilla — la arcilla puede tener profundidad volumétrica
Anulación específica de Claymorphism: La precaución universal contra el desorden de sombras excesivas, efectos brillantes o desenfoque neumórfico NO DEBE interpretarse como una prohibición de sombras interiores duales, sombras exteriores ambientales suaves o contornos de relieve blanco aquí. Estas son propiedades habilitadoras del material, esenciales para una presencia física táctil.
- Tratamientos de material permitidos: Sombras interiores duales (claro/oscuro opuestos), sombras exteriores ambientales suaves teñidas de múltiples paradas, bordes de relieve blanco (
3px solid rgba(255,255,255,0.85)) y transformaciones de presión táctil (scale(0.97)). Estos crean profundidad táctil esencial y presencia física. CSS estático ofrece fidelidad de material completa con cero sobrecarga de biblioteca de animación. - Disciplina de contraste de color: Los botones de arcilla primaria saturados requieren texto blanco puro (
#FFFFFF) con al menos 4.5:1 de contraste. Las superficies de arcilla de porcelana claro requieren texto oscuro profundo (#28233Do#1D1735). Los pozos hundidos requieren texto de marcador de posición claro y accesible (#7C739Eo más oscuro). - Interpretación contra el desorden: Evalúa la profundidad de arcilla por propósito del material, coherencia física y legibilidad, no contando declaraciones de sombra CSS. Eliminar sombras interiores duales para satisfacer una heurística mínima genérica es una regresión de diseño.
Ver examples/claymorphism/sculpted-surfaces.css para una implementación inicial y tests/claymorphism-visual.md para criterios de aceptación visual.
Tipografía y escritura a máquina
Sans amigable humanista o geométrica: Manrope, Nunito Sans o system sans. Pesos 500/600/700 para etiquetas, 700/800 para encabezados. Escala 14/16/20/26/34 px; altura de línea 1.45–1.6. Prefiere mayúscula inicial y etiquetas humanas concisas. Evita fuentes de visualización delgadas que se vean frágiles sobre superficies volumétricas.
Dirección de color
Elige una paleta cohesiva pastel y saturada:
- Modo Claro (Arcilla de Porcelana Claro):
- Base del Lienzo: Lila / lavanda pastel suave (
#D7D1F1o--taste-clay-bg: #d7d1f1). - Arcilla Saturada Primaria: Violeta/púrpura vibrante (
#813FFC) con texto blanco (#FFFFFF), iluminación interior blanca brillante en la parte superior izquierda y sombra de forma púrpura profunda en la parte inferior derecha. - Arcilla Claro Secundaria: Porcelana blanca suave (
#ECEBF5/#F0EFF7) con tinta oscura (#28233D), iluminación superior izquierda brillante y sombra de forma lavanda suave en la parte inferior derecha. - Pozos de Entrada Hundidos: Pozo teñido del lienzo (
#D7D1F1) enmarcado por un borde de relieve blanco nítido (3px solid rgba(255, 255, 255, 0.85)), sombra interior hundida y marcador de posición legible (#8F87B0).
- Base del Lienzo: Lila / lavanda pastel suave (
- Modo Oscuro (Arcilla Esculpida Nocturna Profunda):
- Base del Lienzo: Índigo obsidiana de mal humor (
#161326). - Arcilla Saturada Primaria: Violeta/púrpura vibrante (
#813FFC) con texto blanco puro (#FFFFFF), iluminación superior izquierda y sombra de forma violeta oscura. - Superficie de Arcilla Secundaria: Ciruela/pizarra esculpida rica (
#26203D) con texto de porcelana pálido nítido (#F3F0FA), iluminación superior izquierda translúcida suave (rgba(255, 255, 255, 0.15)) y sombra de forma inferior derecha negra profunda (rgba(10, 5, 25, 0.60)). - Pozos de Entrada Hundidos: Pozo hundido profundo (
#1E1A33) enmarcado por un borde de relieve sutil (3px solid rgba(255, 255, 255, 0.20)), sombra interior hundida y marcador de posición legible (#A49BBF).
- Base del Lienzo: Índigo obsidiana de mal humor (
- Acoplamiento de Contraste de Tema: Al cambiar al modo oscuro, el texto en superficies de arcilla secundaria DEBE cambiar de tinta oscura (
#28233D) a porcelana pálida (#F3F0FA). Dejar tinta oscura sobre arcilla oscura crea un fallo de contraste inmediato. Los botones primarios saturados retienen texto blanco puro (#FFFFFF) con contraste 4.5:1+ en ambos modos.
Maquetación y geometría
Radio 24–32 px tarjetas, 20–26 px botones, 9999px píldoras completas o círculos, 14–16 px squircle insignias y casillas de verificación. Mantén un ritmo constante de 8 px y márgenes cómodos. Evita círculos aleatorios que no tengan interacción semántica.
Superficies, profundidad, textura
Las superficies deben sentirse moldeadas de arcilla mate física:
- Arcilla Primaria (Elevada):
box-shadow: inset 3px 4px 6px rgba(255, 255, 255, 0.45), inset -4px -6px 8px rgba(40, 10, 110, 0.40), 8px 16px 24px rgba(100, 45, 210, 0.35), 2px 4px 8px rgba(70, 20, 150, 0.20); - Arcilla de Porcelana Claro (Elevada):
box-shadow: inset 3px 4px 6px rgba(255, 255, 255, 0.95), inset -4px -6px 8px rgba(145, 135, 180, 0.35), 8px 16px 24px rgba(110, 95, 160, 0.20), 2px 4px 8px rgba(110, 95, 160, 0.12); - Pozos Hundidos (Rehundidos):
box-shadow: inset 3px 4px 8px rgba(110, 95, 165, 0.25), inset -2px -2px 6px rgba(255, 255, 255, 0.70);Enmarcado conborder: 3px solid rgba(255, 255, 255, 0.85);
Anatomía de componentes e interacción
- Botón Primario ("Enviar >"): Píldora púrpura saturada, texto blanco en negrita, cheurón direccional, compresión táctil al hacer clic.
- Botón Secundario ("Volver ↶"): Píldora de porcelana claro, texto de tinta oscura, icono de flecha de retorno, compresión táctil al hacer clic.
- Botón de Acción Circular: Botón redondo con 50% de radio de borde (por ejemplo, pausa
❚❚), arcilla saturada, icono centrado. - Interruptor de Alternancia: Pista con forma de píldora con esfera de pulgar de arcilla suave; alterna entre pista clara/pulgar púrpura y pista púrpura/pulgar blanco.
- Casilla de Verificación: Contenedor Squircle con sombra interior dual y marca de verificación púrpura vibrante (
✓). - Campo de Entrada: Pozo hundido con icono izquierdo, marcador de posición legible y borde de relieve blanco.
Animación
140–200 ms de ease-out suave. Compresión táctil (scale(0.97) o translateY(2px)) con ajuste de sombra al presionar. Nunca rebotes, sobrepases o ejecutes bucles flotantes continuos.
Receta opcional de Anime.js v4
- Decisión de animación: Botón presionado con 1–2% de compresión y un breve retorno; mantén el sombreado esculpido existente.
- Duración inicial: 180ms (0 = inmediato); ajusta según la tarea y preferencia del usuario.
- Evita: rebote, sobrepaso, bucles flotantes.
- Dependencia: CSS/nativo por defecto. Usa Anime.js v4 solo si la interacción solicitada lo justifica. Sigue
references/motion-engine.mddel Taste Engine cuando esté disponible; el skill independiente sigue los principios de movimiento reducido y sin bucle decorativo anteriores.
Redacción de UI y microcopia
Cálida y concreta. Ejemplos: "Enviar", "Volver", "Ingresa tu Nombre de Usuario", "Guardado en borradores". Evita lemas de IA azucarados o exageraciones de marketing falsas.
Tokens iniciales (sugerencias, no un tema completo)
| Token | Modo claro por defecto | Modo oscuro por defecto |
|---|---|---|
--taste-clay-bg | #d7d1f1 | #161326 |
--taste-clay-primary | #813ffc | #813ffc |
--taste-clay-light | #ecebf5 | #26203d |
--taste-clay-text | #28233d | #f3f0fa |
--taste-clay-muted | #7c739e | #a49bbf |
--taste-clay-shadow-primary | 8px 16px 24px rgba(100, 45, 210, 0.35), 2px 4px 8px rgba(70, 20, 150, 0.20) | 8px 16px 24px rgba(10, 5, 25, 0.50), 2px 4px 8px rgba(10, 5, 25, 0.30) |
--taste-clay-inner-primary | inset 3px 4px 6px rgba(255, 255, 255, 0.45), inset -4px -6px 8px rgba(40, 10, 110, 0.40) | inset 3px 4px 6px rgba(255, 255, 255, 0.45), inset -4px -6px 8px rgba(40, 10, 110, 0.50) |
--taste-clay-shadow-light | 8px 16px 24px rgba(110, 95, 160, 0.20), 2px 4px 8px rgba(110, 95, 160, 0.12) | 8px 16px 24px rgba(0, 0, 0, 0.45), 2px 4px 8px rgba(0, 0, 0, 0.25) |
--taste-clay-inner-light | inset 3px 4px 6px rgba(255, 255, 255, 0.95), inset -4px -6px 8px rgba(145, 135, 180, 0.35) | inset 3px 4px 6px rgba(255, 255, 255, 0.15), inset -4px -6px 8px rgba(10, 5, 25, 0.60) |
--taste-clay-inner-well | inset 3px 4px 8px rgba(110, 95, 165, 0.25), inset -2px -2px 6px rgba(255, 255, 255, 0.70) | inset 3px 4px 8px rgba(0, 0, 0, 0.50), inset -2px -2px 6px rgba(255, 255, 255, 0.15) |
--taste-clay-well-rim | 3px solid rgba(255, 255, 255, 0.85) | 3px solid rgba(255, 255, 255, 0.20) |
--taste-clay-radius-pill | 9999px | 9999px |
--taste-clay-radius-btn | 24px | 24px |
--taste-clay-radius-card | 28px | 28px |
--taste-clay-radius-squircle | 14px | 14px |
--taste-font-body | Manrope, system-ui, sans-serif | Manrope, system-ui, sans-serif |
--taste-motion-duration | 180ms | 180ms |
Los tokens representan una dirección y no están garantizados como copiar y pegar para cada paleta/plataforma. Define --taste-clay-* a nivel de proyecto, asegura el contraste de color y adapta mediante tokens de tema en lugar de dispersar valores literales.
Composición de héroe (primer viewport completo)
Cuando un portafolio/página de inicio/landing pública tiene un héroe: usa una composición de encabezado+héroe de una pantalla visible. Altura base en min-height: 100svh con respaldo 100vh, restando el real encabezado solo cuando está en flujo normal; deja que el héroe se expanda para accesibilidad y pantallas móviles cortas. No apliques esto a paneles privados u otras pantallas de tareas; las anulaciones directas del usuario ganan. Dirección específica del estilo: Usa una superficie de héroe esculpida o un entorno de material blando cuidadosamente equilibrado; coloca la introducción real del portafolio y la CTA en la composición de la primera pantalla. No anides tarjetas hinchadas para llenar 100svh. La profundidad de arcilla debe permanecer sutil y direccional, con espacio plano sustancial. Consulta references/hero-layout.md del enrutador cuando esté presente. El uso independiente sigue los mismos principios de capacidad de respuesta y contra el desorden.
Puerta de calidad específica del estilo
- Sí: Asegúrate de que las sombras interiores duales táctiles sean visibles; mantén una dirección de luz consistente (superior izquierda a inferior derecha); proporciona estados activos/de presión táctiles; verifica el contraste WCAG AA tanto en arcilla primaria como clara; verifica el cambio de modo oscuro/claro para que el texto y los colores de superficie se adapten en pares acoplados (por ejemplo, texto de porcelana pálida sobre arcilla oscura, texto de tinta oscura sobre arcilla clara).
- No hagas: No trates esquinas redondeadas simples como arcilla; evita sombras globo, halos brillantes excesivos, etiquetas ilegibles claro sobre claro, insignias ornamentales y colisiones de modo oscuro/claro donde el texto oscuro permanezca sobre arcilla oscura.
- Confirma la consistencia en escritorio y móvil; verifica que el primer viewport demuestre fidelidad material (sombras interiores duales, sombras exteriores suaves, geometría generosa); si el proyecto tiene un proveedor de tokens, usa variables de tema en lugar de valores codificados; proporciona ejemplos visuales de claymorphism auténtico vs. imitación plana si se solicita aclaración.