La nueva Plantilla Admin CoreUI Diseño Clean Tech B2B se aleja de los sistemas de diseño corporativos clásicos para construir algo más cálido: superficies color hueso, tarjetas blancas con bordes muy redondeados y un negro carbón como acento principal en lugar del azul de siempre.
Veamos en qué consiste este estilo, para qué proyectos conviene, qué trae la plantilla y cómo integrarla.
Qué es Clean Tech B2B
Clean Tech B2B no sigue un manual externo como Material Design; es un sistema propio pensado para reducir la fatiga visual en paneles que se usan muchas horas al día. La base es un lienzo warm bone (#F0F1EE) en lugar del blanco o gris frío habitual, sobre el que flotan tarjetas blancas puras (#FFFFFF) con radios de esquina pronunciados de 16px.
En vez de bordes duros para separar bloques, el sistema usa sombras difuminadas y muy sutiles, casi imperceptibles, que dan sensación de profundidad sin recargar la interfaz. A eso se suma un negro carbón (#111111) como color de acento para navegación activa y badges principales, y una paleta de pasteles de estado —menta, naranja, azul y lila— que sustituye a los colores saturados típicos de los dashboards.
La tipografía refuerza esa identidad: Plus Jakarta Sans para títulos e interfaz general, y JetBrains Mono para cifras, métricas y datos técnicos, marcando una diferencia clara entre contenido narrativo y contenido numérico.
Todo vive en una capa independiente, css/clean-tech.css, sin tocar los archivos base de CoreUI (style.css, examples.css, main.js), lo que facilita actualizar el framework sin perder la personalización.
Para qué tipo de proyectos funciona
- SaaS B2B y herramientas tech. El nombre lo dice: pensado para productos de software empresarial que quieren verse modernos sin caer en la frialdad típica del “enterprise gris”.
- Startups que buscan diferenciarse. Al no seguir un sistema tan reconocible como Material Design, deja más margen para que el producto tenga personalidad propia.
- Paneles con muchas horas de uso diario. El fondo cálido y las sombras suaves están pensados para bajar la fatiga visual en sesiones largas.
- Productos con foco en datos y métricas. La tipografía monoespaciada dedicada a valores numéricos favorece dashboards con muchas cifras, KPIs y gráficas.
- Equipos que valoran la coherencia de marca. Al centralizar toda la personalización en un solo archivo CSS, es más fácil mantener consistencia visual conforme crece el producto.
Conviene evitarlo si el objetivo es máxima familiaridad instantánea para el usuario (ahí un sistema como Material Design pesa más que una identidad distintiva) o si el proyecto ya tiene una guía de marca con una paleta muy distinta a los tonos hueso y pastel.
Características del estilo de diseño
- Lienzo: fondo warm bone/warm gray (
#F0F1EE) en body y contenedor principal. - Tarjetas: blanco puro (
#FFFFFF), radio de esquina de 16px, cabeceras compactas, elevación ultra suave. - Micro-interacciones: transiciones fluidas en botones, tarjetas y elementos interactivos.
- Acento primario: negro carbón (
#111111) para navegación activa y badges clave. - Paleta pastel de estado: verde menta/lima (
#D8F5A2/#B4F05C), naranja suave (#FFD8B8/#FF6B35), azul pastel (#D0E8FF/#3b82f6) y lila (#EEDCFF/#a855f7). - Tipografía:
Plus Jakarta Sanspara interfaz general,JetBrains Monopara datos técnicos y métricas. - Sidebar inteligente: modo mini colapsado a 4rem sin desbordes, íconos centrados, soporte nativo para
.sidebar-lighty.sidebar-dark. - Modo oscuro: compatible con la estructura de temas de CoreUI (
data-coreui-theme="dark").
Componentes de la plantilla
- Dashboard principal (
index.html), con la estética Clean Tech aplicada de punta a punta. - Galería de gráficas (
charts.html), con estilización para Line, Bar, Doughnut, Radar, Pie y Polar Area sobre Chart.js. - Widgets de métricas (
widgets.html). - Breadcrumbs estructurados, con jerarquía visual clara alineada al sistema.
- Vistas de componentes: alerts, cards, tablas y demás elementos de interfaz.
- Formularios, con inputs y seleccionables de diseño redondeado y enfoque suave.
- Catálogos de íconos de CoreUI.
- Vistas de autenticación (login, registro) y páginas de error (404, 500).
Descarga
Link: Plantilla Core UI diseño Clean Tech B2B (.zip)
La plantilla corre sobre CoreUI v5.5.0 / Bootstrap v5.3+, bajo licencia MIT (la misma que CoreUI), con la capa Clean Tech B2B liberada para personalización libre. Depende de Google Fonts (Plus Jakarta Sans y JetBrains Mono) y de las librerías pre-empaquetadas en vendors/.