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.
AgenticUltimate 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 AgenticUltimate.
¿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.
AgenticUltimate 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?
AgenticUltimate Web 1.0
Sistema de diseño del sitio web (marketing)
Para AgenticUltimate: 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 |
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
AgenticUltimate UI 1.0 como referencia para nuevas pantallas del complemento. Priorice los componentes existentes antes de crear variantes.
Ampliar el sitio web
AgenticUltimate 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.