Design for AIEstilo Neumorphism: prompt de diseño UI
Paleta, reglas tipográficas y un prompt pegable para neumorphism. También llamado soft UI, neomorfismo, UI extruida, UI de sombras suaves. 2019-2021 (concepto de Dribbble por Alexander Plyuto, finales de 2019).
Rasgos
- los elementos comparten exactamente el color del fondo y solo dos sombras les dan forma
- una sombra clara arriba a la izquierda, una sombra oscura abajo a la derecha, a la misma distancia
- estado elevado para tarjetas y botones, estado hundido para inputs y botones pulsados
- bajo contraste general; toda la página es un único gris suave o un tinte pálido
- radio de 16-24px, elementos robustos, pocos bordes
- color de acento usado con moderación en iconos, toggles y progreso
- casi sin textura; la superficie se lee como plástico mate
Paleta
#e0e5ec base, #ffffff sombra clara, #a3b1c6 sombra oscura, #4a5568 texto, #6c63ff acento, #48bb78 éxito
Tipografía
Nunito o Poppins (redondeadas, amigables); títulos 700 a 28-36px, cuerpo 500 a 16px; el color del texto debe ser al menos #4a5568 por contraste
Haz
- mantén cada superficie del mismo color que la página; la profundidad viene solo del par de sombras
- usa sombras inset para todo lo que el usuario escribe o ha pulsado
- pasa una comprobación de contraste al texto; el estilo falla en accesibilidad si te descuidas
Evita
- no añadas bordes ni sombras proyectadas en negro; deja de ser neumórfico
- no lo uses sobre fondos blancos o negros; la sombra clara desaparece
- no apiles muchos elementos elevados muy juntos; las sombras se pelean
Conocido por: Shots de concepto en Dribbble 2020, conceptos de rediseño de la app de Tesla, mockups fintech skeuomórficos ligeros
Semilla CSS
:root {
--bg: #e0e5ec;
--fg: #4a5568;
--accent: #6c63ff;
--light: #ffffff;
--dark: #a3b1c6;
--radius: 20px;
--shadow: 9px 9px 16px #a3b1c6,-9px -9px 16px #ffffff;
--font: 'Nunito',sans-serif
}
Prompt
Construye el sitio en estilo neumorphism (soft UI). La página y todos los elementos comparten el fondo #e0e5ec. Los elementos elevados (tarjetas, botones, nav) usan box-shadow 9px 9px 16px #a3b1c6, -9px -9px 16px #ffffff; los inputs y los estados pulsados usan inset 6px 6px 12px #a3b1c6, inset -6px -6px 12px #ffffff. Sin bordes en ningún sitio. Border-radius 20px en tarjetas, 14px en botones, 999px en toggles y avatares. Texto #4a5568, títulos #2d3748, acento #6c63ff para iconos, estados activos y barras de progreso. Fuente Nunito: títulos 700 a 36/28/22px, cuerpo 500 a 16px, line-height 1.6. Espaciado generoso: 32px entre elementos elevados para que las sombras nunca se solapen, padding de tarjeta 28px. Hover en botones: la distancia de la sombra baja de 9px a 5px en 150ms; active pasa a inset. Verifica que cada color de texto pase WCAG AA sobre #e0e5ec.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio en estilo neumorphism (soft UI). La página y todos los elementos comparten el fondo #e0e5ec. Los elementos elevados (tarjetas, botones, nav) usan box-shadow 9px 9px 16px #a3b1c6, -9px -9px 16px #ffffff; los inputs y los estados pulsados usan inset 6px 6px 12px #a3b1c6, inset -6px -6px 12px #ffffff. Sin bordes en ningún sitio. Border-radius 20px en tarjetas, 14px en botones, 999px en toggles y avatares. Texto #4a5568, títulos #2d3748, acento #6c63ff para iconos, estados activos y barras de progreso. Fuente Nunito: títulos 700 a 36/28/22px, cuerpo 500 a 16px, line-height 1.6. Espaciado generoso: 32px entre elementos elevados para que las sombras nunca se solapen, padding de tarjeta 28px. Hover en botones: la distancia de la sombra baja de 9px a 5px en 150ms; active pasa a inset. Verifica que cada color de texto pase WCAG AA sobre #e0e5ec.
## Tokens
:root { --bg:#e0e5ec; --fg:#4a5568; --accent:#6c63ff; --light:#ffffff; --dark:#a3b1c6; --radius:20px; --shadow:9px 9px 16px #a3b1c6,-9px -9px 16px #ffffff; --font:'Nunito',sans-serif }
Mantén estados hover y focus-visible en cada elemento interactivo. No añadas un framework CSS.