kennedys0/taste-style-brutalism

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 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 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.

Pack de estilo: Brutalismo

ID: brutalism Firma: Honestidad estructural cruda, andamiaje de diseño expuesto, contraste monocromático sin concesiones y cero camuflaje decorativo.

Este es un pack 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 opciones individuales. Preserva la accesibilidad, la utilidad y las restricciones de marca. Las fuentes son sugerencias, no dependencias requeridas. Un diseño caótico y roto con tamaños de fuente arbitrarios no califica como Brutalismo arquitectónico.

Buen ajuste / compensaciones

• Funciona bien para: Portafolios vanguardistas, plataformas activistas, archivos arquitectónicos, publicaciones independientes, instituciones de arte/cultura y herramientas para desarrolladores que buscan autenticidad estructural sin concesiones.
• Ten cuidado con: Aplicaciones de consumo convencionales para el mercado masivo donde la familiaridad decorativa y la estética suave reducen la hesitación inicial del usuario.
• Direcciones de referencia:
  • Béton Brut arquitectónico: Gris hormigón crudo (#E8E8E8 a #DCDCDC), líneas negras puras y marcadas (#000000), divisiones de cuadrícula estructural expuesta y metadatos arquitectónicos monoespaciados.
  • Andamiaje monocromático marcado: Fondo blanco puro (#FFFFFF) con bordes negros pesados (2.5px solid #000000), acciones de bloque negro marcadas y cero ornamentación cosmética.

Compuerta de fidelidad material brutalista — obligatoria

Antes de llamar completa a una página brutalista, el viewport de apertura debe leerse visiblemente como una composición estructural cruda y honesta. Si un usuario eligió este estilo, un sitio genérico que simplemente aplica valores predeterminados sin estilo o texto superpuesto caótico es un FRACASO.

Una implementación brutalista exitosa demuestra todos los siguientes puntos:

1. Andamiaje estructural expuesto: Las líneas de cuadrícula, los divisores de sección y los contenedores de contenido están formados por bordes negros sólidos visibles (2px–3px solid #000000), celebrando el esqueleto estructural de la página web.
2. Cero camuflaje cosmético: Absolutamente nada de sombras paralelas suaves difuminadas, ni reflejos brillantes, ni esquinas redondeadas con burbujas, ni desenfoques de vidrio translúcido. Las superficies son planas, opacas y sin rodeos.
3. Alineación hiperdisciplinada: A pesar de su honestidad material cruda, la alineación es precisa como una navaja. Las columnas, los bordes y las filas se bloquean juntos sin problemas, sin vagabundeos erráticos.
4. Paleta de alto contraste marcada: Contraste monocromático negro-sobre-blanco o negro-sobre-hormigón sin concesiones que cumple con WCAG AAA (7:1+). El color se usa solo como señal de alerta operativa (rojo puro #FF0000 o amarillo de advertencia crudo #FFD700).
5. Transiciones de estado interactivas inmediatas: Los botones y elementos interactivos cambian instantáneamente en :hover y :active (por ejemplo, inversión de color inmediata de negro-sobre-blanco a blanco-sobre-negro) sin easing retardado ni física de resorte artificial.

Prueba del primer viewport: En una captura de pantalla de escritorio, identifica la cuadrícula de borde estructural expuesta, los planos planos sin ornamentos y la autoridad monocromática marcada sin leer el título de la página. Si contiene tarjetas redondeadas o sombras suaves, elimina el camuflaje decorativo de inmediato.

Excepción estructural brutalista explícita — se requieren bordes de cuadrícula expuestos

Anulación específica del brutalismo: La precaución universal anti-slop contra bordes excesivos o contraste duro NO DEBE interpretarse como una prohibición de líneas divisorias negras gruesas (2px–3px sólidas) o andamiaje estructural expuesto aquí. En el brutalismo arquitectónico, las juntas estructurales y los materiales honestos se celebran, no se esconden detrás de pintura cosmética.

• Tratamientos estructurales permitidos: Bordes estructurales visibles de 2px–3px, contenedores rectangulares crudos, metadatos monoespaciados de alto contraste y estados de inversión de color inmediatos.
• Límite anti-slop: No rompas deliberadamente la accesibilidad superponiendo párrafos del cuerpo, usando colores de neón ilegibles o haciendo que los botones sean imposibles de localizar. El brutalismo auténtico es hiperfuncional, no roto al azar.
• Interpretación anti-slop: Evalúa los diseños brutalistas por integridad estructural, utilidad funcional y legibilidad, no por intentar suavizar los bordes duros. Eliminar los bordes estructurales para satisfacer una heurística genérica suave es una regresión de diseño.

Tipografía y escritura a máquina

Grotesk sin gracias pesado e inquebrantable o monoespaciado técnico: Arial, Helvetica, IBM Plex Sans, IBM Plex Mono o sans del sistema. Titulares: 44–72 px escritorio / 30–44 px móvil (peso 800–900, interlineado ajustado 1.05–1.15). Cuerpo de texto: 16–18 px (peso 400, interlineado 1.5). Monoespaciado para metadatos, marcas de tiempo e índices de sección.

Dirección de color

• Modo claro (Papel marcado):
  • Base del lienzo: Blanco papel marcado (#FFFFFF) u hormigón arquitectónico (#E5E5E5).
  • Tinta estructural / Bordes: Negro puro (#000000).
  • Bloques de superficie: Rellenos sólidos de alto contraste (#000000 o #FFFFFF).
• Modo oscuro (Invertido de brea):
  • Base del lienzo: Negro brea marcado (#000000).
  • Tinta estructural / Bordes: Blanco puro marcado (#FFFFFF).
  • Bloques de superficie: Rellenos oscuros sólidos de alto contraste (#000000 o #121212).
• Acento de señal operativa (Un solo color solamente): Rojo de señal (#FF0000 / #FF3333) o Ámbar de advertencia (#FFCC00).
• Regla de inversión de tema: En el brutalismo, el modo oscuro/claro es un cambio de polaridad autoritario. En modo oscuro, el lienzo es #000000 y el texto/los bordes son #FFFFFF. Los botones se invierten limpiamente al pasar el ratón (claro: el botón blanco cambia a relleno negro + texto blanco; oscuro: el botón negro cambia a relleno blanco + texto negro). El texto negro sobre fondo negro o el texto blanco sobre fondo blanco están estrictamente prohibidos.

Diseño y geometría

Las esquinas son estrictamente cuadradas (border-radius: 0px). Bordes estructurales: 2px–3px solid #000000. Los bloques de contenido se bloquean juntos o mantienen espacios modulares firmes de 16px/24px.

Superficies, profundidad, textura

Las superficies son 100% planas, opacas y estructurales. Cero sombras. Cero degradados. La profundidad se establece puramente superponiendo bloques negros sobre marcos blancos e invirtiendo inmediatamente los colores de primer plano y fondo.

Anatomía del componente e interacción

• Botón brutalista: Borde negro pesado (2px solid #000000), fondo blanco, texto en negrita mayúscula; al pasar el ratón/activo, se invierte inmediatamente a fondo negro sólido y texto blanco.
• Panel estructural: Contenedor rectangular con bordes superior/inferior pesados; divisores entre secciones internas.
• Etiqueta de metadatos: Etiqueta monoespaciada encerrada entre corchetes: [DOC_REF: 4092].
• Controles de formulario: Campos de entrada sin adornos con borde negro grueso y anillo de enfoque negro sólido de alto contraste (outline: 3px solid #000000; outline-offset: 2px;).

Movimiento

Cambios de estado inmediatos por defecto (0 ms) o transiciones lineales muy breves (60–100 ms). Sin rebote, sin curvas de easing, sin paralaje, sin transiciones decorativas.

Receta opcional de Anime.js v4

• Decisión de movimiento: Cambios de estado inmediatos por defecto; Anime.js generalmente es innecesario para el brutalismo auténtico.
• Duración inicial: 0 ms (inmediato); ajusta solo si se solicita una persiana mecánica funcional específica.
• Evitar: resortes, revelaciones deslizantes, animaciones de desplazamiento teatrales.
• Dependencia: CSS/nativo por defecto. Sigue references/motion-engine.md del Taste Engine cuando esté disponible; la habilidad independiente sigue los principios de movimiento reducido y sin bucle decorativo anteriores.

Escritura de UI y microcopy

Directo, sin disculpas y fáctico. Ejemplos: “ÍNDICE”, “DESCARGAR ESPECIFICACIÓN”, “ERROR DE TERMINAL: CONEXIÓN PERDIDA”, “CONFIRMAR”. Evita texto conversacional charlatán o relleno de marketing persuasivo.

Tokens iniciales (sugerencias, no un tema completo)

Token	Valor predeterminado modo claro	Valor predeterminado modo oscuro
--taste-brutal-bg	#ffffff	#000000
--taste-brutal-ink	#000000	#ffffff
--taste-brutal-surface	#ffffff	#121212
--taste-brutal-border	2.5px solid #000000	2.5px solid #ffffff
--taste-brutal-radius	0px	0px
--taste-brutal-signal	#ff0000	#ff3333
--taste-brutal-font-heading	'Arial Black', Arial, Helvetica, sans-serif	'Arial Black', Arial, Helvetica, sans-serif
--taste-brutal-font-body	Arial, Helvetica, sans-serif	Arial, Helvetica, sans-serif
--taste-brutal-font-mono	'IBM Plex Mono', monospace	'IBM Plex Mono', monospace
--taste-brutal-motion-duration	0ms	0ms

Los tokens representan una dirección y no son una garantía de copiar y pegar para cada paleta/plataforma. Define --taste-brutal-* a nivel de proyecto, asegura el contraste de color y adapta mediante tokens de tema en lugar de dispersar valores literales.

Composición del héroe (primer viewport completo)

Cuando un portafolio/aterrizaje/página de inicio pública tiene un héroe: usa una composición de encabezado+héroe de una pantalla visible. La altura base en min-height: 100svh con respaldo de 100vh, restando el encabezado real solo cuando está en flujo normal; deja que el héroe se expanda para la accesibilidad y las 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: Construye el primer viewport como un monolito arquitectónico sin disculpas: título de visualización masivo encerrado dentro de un andamiaje estructural, bloques de llamada a la acción negros marcados y cero relleno cosmético. Consulta el enrutador references/hero-layout.md cuando esté presente. El uso independiente sigue los mismos principios de capacidad de respuesta y anti-slop.

Compuerta de calidad específica del estilo

• Haz: Verifica el contraste monocromático marcado; asegura que los bordes estructurales de 2–3px sean sólidos; verifica las esquinas cuadradas afiladas de 0px; verifica la inversión de polaridad del modo oscuro/claro para que el texto y el fondo nunca choquen (sin negro sobre negro o blanco sobre blanco); asegura que el acento de señal siga siendo estrictamente singular.
• No hagas: No agregues esquinas redondeadas, sombras paralelas suaves ni degradados de color suaves; evita las insignias de relleno decorativas o el texto de marketing charlatán; no dejes tinta negra o bordes al cambiar a un lienzo oscuro.
• Confirma la consistencia en escritorio y móvil; el enfoque del 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 del estilo en proyectos no relacionados. Al combinar estilos, nombra explícitamente el estilo principal y las características prestadas.

Compuerta universal anti-slop (autocontenida)

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 ni confirmaciones de éxito; usa estados honestos vacío/carga/error en su lugar. Los datos de demostración son aceptables solo si se solicitan y están etiquetados 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 un equilibrio visual intencional.

Redacción anti-slop: sin afirmaciones genéricas como "Desbloquea tu potencial", "Experimenta el futuro", "Acelera tu flujo de trabajo", "sin problemas" o equivalentes traducidos. Los encabezados deben comunicar el contenido real, las CTA deben nombrar la acción y el texto vacío/error/éxito debe describir estados reales y próximos pasos. Evita la urgencia falsa, los recuentos inventados, el bombo de IA vago, 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 del 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 invertirse 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 ni píldoras de estado ilegibles de bajo contraste. 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 movimiento: compón para móvil deliberadamente, verifica etiquetas largas, estados de enfoque y contraste accesible; sin recorte de texto para ajustarse a un diseño de moda. Estático por defecto; usa movimiento 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, texto engañoso, colisiones de contraste de tema o fallo móvil significativo deben corregirse. Reporta lo que realmente se verificó; no reclames pruebas que no se ejecutaron.

No es un veto estético: los colores expresivos, las sombras, los degradados, los diseños de tarjetas o los tratamientos decorativos son legítimos cuando son partes intencionales de la estética seleccionada y pasan las comprobaciones de usabilidad. No fuerces el minimalismo en silencio.

Anti-slop: específico del estilo

Honestidad estructural, no alegría estética.

• Rechaza: Formas de píldora redondeadas, acentos pastel, desenfoques de sombra decorativos, ilustraciones divertidas, tarjetas de plantilla genéricas y colisiones de tema (como texto negro que permanece en un lienzo brutalista oscuro).
• En su lugar: Expón las cuadrículas de diseño con bordes estructurales pesados, jerarquía tipográfica marcada, cambios de estado inmediatos y contraste inequívoco.
• Verificación de texto: La escritura de UI debe ser breve, directa y funcional sin jerga de marketing.
• Auditoría: Ejecuta las comprobaciones universales anti-slop de propósito, verdad, superficie anidada, redacción, capacidad de respuesta, accesibilidad y movimiento además de la compuerta de calidad de este estilo. No penalices lo deliberado y accesible