Núcleo común
Navy, Primary Blue, éxito/error, niveles de radio y espaciado y anillos de foco están coordinados y resultan reconocibles en el CRM y el sitio web.
Marca · Producto · Sitio web
Dos sistemas.
Dos sistemas.
Una marca.
Ultimate CRM Addon utiliza una base de marca común y dos sistemas de diseño construidos sobre ella: uno para la interfaz del complemento y otro para Ultimate CRM Addon.
¿Por qué dos sistemas de diseño?
El producto y el marketing cumplen funciones distintas. Una base común mantiene la marca reconocible; las capas de tokens separadas evitan que el CRM parezca una página de captación o que el sitio web parezca un panel de administración.
Funciones separadas
El complemento optimiza la densidad y el manejo. El sitio web optimiza la claridad, la conversión y la calidad visual con acentos medidos.
Escalable
Los nuevos módulos y páginas utilizan tokens y componentes documentados: menos excepciones visuales y una implementación más rápida.
Ultimate CRM Addon UI 1.0
Sistema de diseño del producto (complemento)
Para la interfaz de SuiteCRM: formularios, tablas, diálogos, asistentes y áreas de trabajo densas. Funcional, clara y apta para empresas.
| Área | Contenido |
|---|---|
| Colores | Navy (#001631), Primary (#165DCC), colores semánticos de estado, superficies para entornos de trabajo claros |
| Tipografía | Escala compacta de interfaz para etiquetas, tablas y textos de formulario: legibilidad con alta densidad informativa |
| Espaciado y radio | Base 4/8/12/16/24/32; radio sm–lg para campos, tarjetas y diálogos |
| Componentes | Botones, campos, selectores, diálogos, pestañas, tablas, pasos de asistente e indicadores de estado |
| Densidad | Presentación compacta opcional para vistas de administración y listas |
Dirigido a administradores y usuarios avanzados del CRM. Cada decisión responde a una pregunta: ¿ayuda a procesar los datos de forma más rápida y segura?
Ultimate CRM Addon Web 1.0
Sistema de diseño del sitio web (marketing)
Para Ultimate CRM Addon: cabecera principal, tarjetas de funciones, confianza, megamenú y modo oscuro. Calidad visual, carácter técnico y uso controlado del cian y el violeta.
Principios
Claridad antes que efectos : máximo 1–2 degradados por pantalla.
Un color dominante : el color primario guía; cian y violeta lo apoyan.
Las tarjetas comunican beneficios : sombras suaves, bordes finos y efecto discreto al pasar el cursor.
Elementos
Tipografía de titulares, etiquetas introductorias, tarjetas de funciones, barras de confianza, imágenes del producto, llamadas finales a la acción y megamenú. Modos claro y oscuro desde una única fuente de tokens.
| Familia de tokens | Ejemplos |
|---|---|
| Núcleo de marca | --su-navy, --su-primary, --su-ink |
| Acentos | --su-cyan, --su-violet (con moderación) |
| Superficies | Plana · Realzada · Elevada · Principal |
| Sombras | --su-shadow-sm a --su-shadow-lg, efecto al pasar el cursor sin anillo de neón |
| Movimiento | Transiciones breves que respetan prefers-reduced-motion |
--theme-header | Oscuro: #01012F |
--theme-bg | Oscuro: #0A0023 |
body · font-size | 16px |
Conexión con el producto
Qué se comparte y qué permanece separado de forma deliberada.
Compartido
Navy y Primary Blue · Success/Danger · Radio sm–lg · Base de espaciado · Anillo de foco primario · Nombre de marca y lenguaje de iconos
Solo sitio web
Acentos y degradados cian/violeta · Fondos aurora · Titulares grandes · Marquesina y sombras de marketing · Cristal con moderación (cabecera)
Para equipos e implementación
Cómo utilizar los sistemas en el día a día.
Desarrollar el producto
Ultimate CRM Addon UI 1.0 como referencia para nuevas pantallas del complemento. Priorice los componentes existentes antes de crear variantes.
Ampliar el sitio web
Ultimate CRM Addon Web 1.0 y los tokens de site.css. Oriente las nuevas secciones según los patrones: cabecera → confianza → funciones → llamada a la acción.
Asegurar la calidad
Compruebe el contraste, el manejo con teclado y el movimiento reducido. PageSpeed y accesibilidad siguen formando parte del estándar de entrega.
Explorar los sistemas de diseño en directo
El sistema de diseño web interactivo muestra tokens, componentes y modo oscuro. La interfaz del producto sigue siendo la referencia para el complemento de SuiteCRM.