kennedys0/taste-style-neo-brutalism

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 sin explicación, usa un selector de estilos como [estilo: seleccionar] en lugar de decidir el gusto del usuario aquí. La marca existente, la accesibilidad y las anulaciones del 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: Neo-brutalismo

ID: neo-brutalism
Firma: Colores llamativos y audaces, bordes negros de alto contraste, sombras duras sin desenfoque con desplazamiento, y retroalimentación mecánica táctil de presión.

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, la utilidad y las restricciones de marca. Las fuentes son sugerencias, no dependencias obligatorias. Una tarjeta plana con esquinas redondeadas y una sombra difusa suave no califica como Neo-brutalismo.

Buen ajuste / compensaciones

• Funciona bien para: Herramientas para creadores, B2B SaaS divertido, portales modernos para desarrolladores, plataformas de hackatones/eventos, sitios web de productos independientes y páginas de marketing que exigen una personalidad inconfundible.
• Ten cuidado con: Informes financieros formales o flujos de trabajo legales empresariales a menos que estén específicamente diseñados para una audiencia enérgica y no tradicional.
• Direcciones de referencia:
  • Lienzo Pop Claro: Base de papel crema crujiente o cálido (#FFFDF7 / #F4F0EA) con trazos negros de alto contraste (#121212), rellenos de acento eléctrico (amarillo vivo #FFDE59, cian vibrante #4DEEEA, coral #FF5E5B), y sombras nítidas sin desenfoque (5px 5px 0 #121212).
  • Contraste Pop Oscuro: Lienzo de tinta profunda (#18181B) con bordes blancos marcados (2.5px solid #FAFAFA), acentos de lima/violeta vivos, y sombras blancas/de acento con desplazamiento (4px 4px 0 #FAFAFA).

Puerta de fidelidad material Neo-brutalista — obligatoria

Antes de llamar completa a una página neo-brutalista, la ventana de visualización inicial debe leerse visiblemente como una composición neo-brutalista auténtica. Si un usuario eligió este estilo, una tarjeta genérica con un radio de borde sutil y una sombra difusa estándar es un FRACASO, incluso si las clases CSS contienen neo.

Una implementación neo-brutalista exitosa demuestra todos los siguientes elementos:

1. Contornos Sólidos de Alto Contraste: Los contenedores principales, botones accionables, entradas e insignias presentan bordes sólidos nítidos (2px–3px solid #121212). Sin trazos finos grises.
2. Sombras Duras sin Desenfoque con Desplazamiento: Las superficies proyectan sombras direccionales nítidas, sin desenfoque (4px 4px 0 #121212 para controles, 6px 6px 0 #121212 a 8px 8px 0 #121212 para tarjetas). Una sombra suave y difusa es un fracaso directo.
3. Colapso de Presión Mecánica: En :active o al hacer clic, los botones interactivos se presionan físicamente a lo largo del eje de la sombra (transform: translate(2px, 2px); box-shadow: 2px 2px 0 #121212;), proporcionando una retroalimentación mecánica táctil inconfundible.
4. Bloques de Color Vibrantes e Intencionales: Una paleta equilibrada de alto contraste: 1 base de lienzo + 1 color de tinta marcado + 1–2 acentos saturados con propósito utilizados para acciones principales y agrupación semántica.
5. Estructura Tipográfica Asimétrica y Audaz: Tipografía grotesca o geométrica segura con alturas de línea ajustadas y un contraste claro entre titulares masivos y texto legible.

Prueba de la primera ventana de visualización: En una captura de pantalla de escritorio, identifica los contornos negros gruesos, las sombras duras sin desenfoque y los estados táctiles de los botones sin leer el título de la página. Si parece un diseño SaaS plano estándar, revisa los tokens de borde y sombra antes de continuar.

Excepción explícita de sombra dura Neo-brutalista: las sombras pueden ser nítidas

Anulación específica del Neo-brutalismo: La precaución universal contra la suciedad estética contra la decoración excesiva o sombras que distraen NO DEBE interpretarse como una prohibición de sombras duras con desplazamiento o contornos negros aquí. Estas son propiedades que habilitan el material, esenciales para la física neo-brutalista y la claridad visual.

• Tratamientos de material permitidos: Sombras sólidas sin desenfoque con desplazamiento (4px 4px 0 #000), bordes negros de 2–3 px, rotaciones de insignias (entre -2° y +2° solo para insignias) y píldoras de color de alto contraste.
• Disciplina de contraste de color: Todo el texto colocado sobre fondos de acento vibrantes (amarillo, cian, lima, coral) debe probarse contra tinta negra (#121212) para superar WCAG AA (4.5:1). El texto blanco puro está estrictamente reservado para rellenos de tinta oscura.
• Interpretación anti-desorden: Evalúa los elementos neo-brutalistas por affordance, estructura de diseño y legibilidad, no contando sombras duras. Eliminar sombras duras con desplazamiento para satisfacer una heurística genérica de minimalismo es una regresión de diseño.

Tipografía y mecanografía

Sans-serif grotesca expresiva y segura: Space Grotesk, Archivo, Syne o sans-serif del sistema. Titulares 36–56 px escritorio / 28–40 px móvil; peso 700–800. Texto del cuerpo 15–17 px, peso 400–500; altura de línea 1.45–1.55. Los índices de sección y metadatos pueden usar seguimiento en mayúsculas (letter-spacing: 0.05em). Microcopia contundente y humana sin eslóganes vacíos.

Dirección de color

• Modo Claro (Pop Claro Contundente):
  • Base del Lienzo: Blanco roto / crema claro (#FFFDF7 o #F7F5F0).
  • Fondo de Tarjeta: Blanco puro (#FFFFFF) o bloque teñido claro.
  • Tinta / Trazo: Negro azabache (#121212).
  • Sombras con Desplazamiento: Negro sólido (4px 4px 0 #121212).
• Modo Oscuro (Contraste Pop Oscuro):
  • Base del Lienzo: Lienzo de tinta profunda (#18181B).
  • Fondo de Tarjeta: Carbón oscuro elevado (#222227) o pizarra profunda (#27272A).
  • Tinta / Trazo: Blanco marcado / crema (#FAFAFA).
  • Sombras con Desplazamiento: Blanco marcado o acento vivo (4px 4px 0 #FAFAFA o 4px 4px 0 var(--taste-neo-accent-primary)).
• Acento Primario: Color pop vivo (ej. Amarillo Eléctrico #FFE600, Coral Candente #FF5757, o Cobalto Real #3B5BFF).
• Acento Secundario: Contraste complementario (ej. Menta Nítida #00F0A8 o Lila Pop #D8B4FE).
• Regla de Acoplamiento de Tema y Anti-Colisión: En modo oscuro, los bordes y las sombras con desplazamiento DEBEN cambiarse a claros/blancos o acentos brillantes. Dejar bordes negros y sombras negras sobre un lienzo oscuro causa una pérdida total de profundidad y contraste (negro sobre negro). Todo el texto sobre fondos de acento vibrantes (amarillo, cian, lima, coral) debe probarse contra tinta negra (#121212) para superar WCAG AA (4.5:1). El texto blanco puro está estrictamente reservado para rellenos de tinta oscura.

Diseño y geometría

Esquinas cuadradas o sutilmente redondeadas (0px–8px máximo); relleno generoso (20px–32px en tarjetas); bordes sólidos de 2px–3px; sombras duras con desplazamiento de 4px–8px. El espaciado utiliza una cuadrícula firme de 8px. El diseño debe sentirse firme, contundente y seguro.

Superficies, profundidad, textura

Las superficies son limpias, opacas y sólidas:

• Botones (Elevados): background: var(--taste-neo-accent); border: 2.5px solid #121212; box-shadow: 4px 4px 0 #121212;
• Botones (Activos/Presionados): transform: translate(2px, 2px); box-shadow: 2px 2px 0 #121212;
• Tarjetas y Paneles: background: #FFFFFF; border: 2.5px solid #121212; box-shadow: 6px 6px 0 #121212;
• Campos de Entrada: background: #FFFFFF; border: 2.5px solid #121212; box-shadow: 3px 3px 0 #121212; (se ajusta al enfocar).

Anatomía e interacción de componentes

• Acción Principal (CTA): Píldora/rectángulo de color audaz con sombra dura con desplazamiento, trazo grueso y clic táctil con depresión.
• Acción Secundaria: Relleno blanco o transparente con borde negro, efecto hover invertido (background: #121212; color: #FFFFFF;).
• Controles de Formulario: Cuadro de entrada delineado con etiqueta nítida, estado de foco distinto con brillo de acento con desplazamiento o trazo profundizado.
• Insignias / Etiquetas de Estado: Píldora de alto contraste con trazo de 2px, sombra sutil con desplazamiento de 2px y etiqueta corta concreta.
• Tarjetas: Líneas divisorias nítidas (border-bottom: 2px solid #121212) que separan el encabezado, el cuerpo y el pie de acción de la tarjeta.

Animación

Transiciones nítidas lineales o de salida suave de 100–160 ms. Desplazamiento directo de 1–2 px al presionar. Nunca uses resortes largos y elásticos, bucles flotantes u oscilaciones de dibujos animados.

Receta opcional para Anime.js v4

• Decisión de animación: Cambio corto y directo de 1–2 px del botón con una respuesta de sombra dura coincidente; nunca animar sombras gigantes.
• Duración inicial: 130 ms (0 = inmediato); ajustar a la tarea y preferencia del usuario.
• Evitar: Rebotes y pegatinas que se mueven sin cesar.
• Dependencia: CSS/nativo por defecto. Usa Anime.js v4 solo si la interacción solicitada lo justifica. Sigue las references/motion-engine.md del Motor de Gusto cuando esté disponible; el skill independiente sigue los principios de movimiento reducido y sin bucle decorativo anteriores.

Redacción de UI y microcopia

Enérgica, directa y sencilla. Ejemplos: “Start building”, “Get code”, “Copied to clipboard”. Evita la jerga corporativa o el texto meme cursi en herramientas de producción.

Tokens iniciales (sugerencias, no un tema completo)

Token	Modo claro predeterminado	Modo oscuro predeterminado
--taste-neo-bg	#fffdf7	#18181b
--taste-neo-card-bg	#ffffff	#222227
--taste-neo-ink	#121212	#fafafa
--taste-neo-border	2.5px solid #121212	2.5px solid #fafafa
--taste-neo-shadow-sm	3px 3px 0 #121212	3px 3px 0 #fafafa
--taste-neo-shadow-md	5px 5px 0 #121212	5px 5px 0 #fafafa
--taste-neo-shadow-lg	8px 8px 0 #121212	8px 8px 0 #fafafa
--taste-neo-accent-primary	#ffe600	#ffe600
--taste-neo-accent-secondary	#ff5757	#ff5757
--taste-neo-radius	6px	6px
--taste-neo-font-body	Space Grotesk, Archivo, system-ui, sans-serif	Space Grotesk, Archivo, system-ui, sans-serif
--taste-neo-motion-duration	130ms	130ms

Los tokens representan una dirección y no se garantiza que sean copiables para cada paleta/plataforma. Define --taste-neo-* 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 (ventana de visualización completa)

Cuando un portafolio/landing/página de inicio orientada al público tiene un héroe: usa una composición de encabezado+héroe de una pantalla visible. La altura base debe ser min-height: 100svh con respaldo de 100vh, restando el encabezado real solo cuando está en flujo normal; permite que el héroe 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: Haz que la ventana de visualización completa sea enérgica mediante bloques asimétricos audaces, tipografía de visualización bien fundamentada y una acción principal de alto contraste. Los bordes gruesos y las sombras con desplazamiento siguen siendo intencionales; no apiles pegatinas, cuadros delineados adicionales o adornos giratorios para llenar la pantalla. 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

• Haz: Verifica las sombras duras sin desenfoque con desplazamiento; mantén bordes sólidos de 2–3 px; prueba el desplazamiento por presión táctil; verifica el contraste del texto contra acentos saturados (tinta negra sobre amarillo/cian/menta); verifica el cambio de modo oscuro/claro para que los bordes, las sombras con desplazamiento y la tinta se inviertan correctamente y nunca desaparezcan en fondos oscuros.
• No hagas: No agregues desenfoque o extensión a las sombras neo-brutalistas; evita pasteles apagados de bajo contraste; no coloques texto blanco puro sobre botones amarillos o menta; no dejes bordes/sombras negros sobre lienzo oscuro.
• 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 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 están visiblemente etiquetados.

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 autogeneradas, paneles de 4 estadísticas, afirmaciones falsas de héroe, gráficos sin propósito, spam de insignias/chips/iconos, arte decorativo no relacionado y bucles aleatorios solo para llenar la ventana de visualización. Prefiere agrupar con tipografía, espaciado, alineación y divisores. Los pares iguales necesitan un equilibrio visual intencional.

Redacción anti-desorden: sin afirmaciones genéricas como "Libera tu potencial", "Experimenta el futuro", "Acelera tu flujo de trabajo", "sin fisuras" o equivalentes traducidos. Los encabezados deben comunicar el contenido real, las CTA deben nombrar la acción y el texto de vacío/error/éxito debe describir estados reales y próximos pasos. Evita la urgencia falsa, los números inventados, la exageración vaga de IA, los emojis gratuitos y los 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 crea un selector 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 de bajo contraste ilegibles. Todos los estados deben cumplir con el contraste WCAG AA (mínimo 4.5:1 para texto normal/cuerpo, 3:1 para titulares grandes y límites interactivos).

Capacidad de respuesta y animación: compón móvil deliberadamente, verifica etiquetas largas, estados de foco y contraste accesible; sin recorte de texto para ajustarse a un diseño moderno. Estático por defecto; usa animación para interacciones significativas, respeta las preferencias de movimiento reducido, evita la decoración de rebote/flotación/pulso sin un estado real.

Finalización del bloque de hallazgos críticos/altos: estado/datos fabricados, acciones rotas, controles inaccesibles/recortados, copia engañosa, colisiones de contraste de tema o fallo móvil significativo deben solucionarse. Informa lo que realmente se verificó; no afirmes pruebas que no se ejecutaron.

No es un veto estético: colores expresivos, sombras, degradados, diseños de tarjetas o...