Plantilla Admin Core UI diseño Brutalismo

Esta es una plantilla gratuita para paneles de administración. Toma la base de CoreUI y le agrega un estilo brutalismo completo. Bordes gruesos, sombras duras, colores fuertes y una tipografía directa.

Qué es el brutalismo

El brutalismo web rompe con lo normal. Las interfaces suelen esconder su estructura con sombras suaves y esquinas redondeadas. El brutalismo hace lo contrario: deja todo a la vista.

Usa bordes gruesos y sólidos. Sombras duras, sin difuminado. Tipografía monoespaciada para lo técnico. Colores saturados, sin tonos intermedios.

La jerarquía visual no se sugiere, se declara. Los botones se mueven al hacer clic, como algo físico. Las cajas se apilan sin transiciones suaves. Nada finge ser más liviano de lo que es.

Es una respuesta al minimalismo plano que domina la mayoría de los dashboards. Su meta es la opuesta: que la interfaz se note y tenga personalidad.

Esta plantilla aplica esa idea sobre CoreUI v5.5 y Bootstrap 5. No toca ningún archivo original. Todo el estilo vive en dos archivos separados: css/brutalism.css y js/brutalism-charts.js. Así puedes actualizar CoreUI sin problemas.

Video Demostrativo

En el siguiente video puedes ver la plantilla y todas sus paginas.

Componentes de la plantilla

• Dashboard principal (index.html). Incluye tarjetas de métricas y una gráfica de tráfico brutalista.
• Sidebar adaptativo. Se colapsa a modo mini sin romper el diseño. Los iconos quedan centrados y el texto se oculta limpio. Tiene variante clara (sidebar-light) y oscura (sidebar-dark).
• Breadcrumbs en cajas. Cada elemento va en su propio recuadro, con borde y sombra. Blanco para los inactivos, azul para el activo. Separados por una flecha.
• Gráficas (charts.html, widgets.html). El archivo brutalism-charts.js reescribe Chart.js con líneas gruesas y puntos de borde grueso. Cubre Line, Bar, Doughnut, Radar, Pie y Polar Area. Cambia de tema solo, sin recargar la página.
• 28 vistas de componentes. Alerts, cards, tablas, modales, badges y el resto del catálogo de CoreUI, ya con el estilo aplicado.
• Formularios. Inputs, selects y validaciones, dentro de forms/.
• Autenticación. Login, registro y vistas relacionadas, en authentication/.
• Páginas de error. 404 y 500, con el mismo estilo visual.
• Modo oscuro completo. Fondo #0F1015, tarjetas #181A20, bordes y sombras en blanco. Inputs oscuros con foco azul marino #1F2C48.

Para qué tipo de proyectos funciona

• Herramientas técnicas y dashboards de desarrolladores. Paneles de monitoreo, herramientas internas, admin panels de SaaS para un público técnico.
• Startups y marcas que buscan destacar. Productos nuevos que quieren una identidad con carácter, no una imagen genérica.
• Portafolios y sitios creativos. Diseñadores y agencias que usan la interfaz como parte del mensaje.
• Proyectos personales, side projects y hackathons. Contextos sin reglas de marca corporativa, donde se puede experimentar.
• Productos para audiencias jóvenes o tech-savvy. Comunidades gamer, herramientas para creadores, apps de nicho.

Piénsalo dos veces en sitios institucionales, bancos o salud. Ahí la prioridad es transmitir formalidad y confianza. El alto contraste del brutalismo puede jugar en contra.

Características del estilo de diseño

• Bordes: de 2.5 a 3px. Negros en modo claro, blancos en modo oscuro.
• Sombras duras: sin difuminado, tipo 4px 4px 0px negro. Se usan en tarjetas, botones, modales y tablas.
• Micro-interacciones: los elementos se mueven al hacer clic o hover. La sombra se reduce y el bloque se desplaza 2px. Da sensación de botón real.
• Cero border-radius: solo esquinas rectas, nada redondeado.
• Color primario: azul eléctrico #0055FF. Acentos en cian ácido, verde menta, coral y ámbar.
• Fondo: marfil suave #F6F5F0, que resalta las tarjetas blancas.
• Inputs: blanco puro en reposo. Cambian a azul crema #DCE8FF solo al recibir foco.
• Tipografía: Space Grotesk para títulos e interfaz general. JetBrains Mono para código, badges y breadcrumbs.

Descarga

Link: Plantilla Core UI Diseño Brutalismo v1

Corre sobre CoreUI v5.5.0 y Bootstrap v5.3+. Depende de Google Fonts (Space Grotesk y JetBrains Mono) y de las librerías ya incluidas en vendors/.

Al descargarla obtienes todo: dashboard, componentes, formularios, iconos, autenticación, páginas de error y las dos capas de personalización (brutalism.css y brutalism-charts.js).

Te puede interesar: Inventio Max: Sistema de Inventario y Ventas Multi-Sucursal