Themes / White labeling

Configuración del tema

En la página de configuración del tema puedes personalizar el aspecto visual de tu entorno SaaS. Cambia imágenes de fondo, sube tu logo y ajusta elementos de branding como colores y tipografía para adaptar la plataforma al estilo de tu organización. Personaliza la interfaz para reflejar la identidad de tu empresa y garantizar una experiencia coherente a todos los usuarios. La configuración del tema se divide en 3 secciones principales: Branding, Colores Generales y Colores de Modelo.

• Branding: Personaliza elementos visuales clave como el fondo de cabeceras, logos y miniaturas. Así logras una identidad de marca consistente en toda la plataforma.
• Colores Generales: Ajusta todos los colores de la app tanto en modo Claro como Oscuro, obteniendo dos configuraciones completas para cada entorno.
• Colores de Modelo: Personaliza los colores de los atributos de modelado. Útil si quieres que los modelos tengan colores distintos al resto de la app.
• Colores de Dataset: Personaliza los colores de los atributos de dataset; ideal si necesitas distinguir visualmente diferentes datasets en tus modelos.
• Colores de Charts: Personaliza los colores usados en los charts, permitiendo esquemas de color distintos al resto de la plataforma.

Define tu entorno

Aquí puedes personalizar elementos visuales clave de tu entorno, incluidos fondos de cabecera, logos y miniaturas. Esto te permite crear una identidad de marca consistente en la plataforma. Ya sea actualizando el logo de tu empresa o estableciendo un fondo personalizado, estas herramientas te ayudan a refinar la apariencia de tu aplicación.

Colores generales de la app

Personaliza los colores de la aplicación para ambos modos, Claro y Oscuro, dándote efectivamente dos configuraciones completas de tema para cada entorno. Asegúrate de probar cuidadosamente tus cambios para garantizar un buen contraste entre texto y fondos para una óptima legibilidad y experiencia de usuario. Con esta flexibilidad, puedes adaptar completamente la apariencia de tu plataforma para coincidir con la identidad de tu marca en diferentes modos.

Colores del Process Model

Personaliza los colores de los objetos de modelado y el canvas, en los modos Claro y Oscuro para cada entorno. Asegúrate de revisar tus cambios para mantener buen contraste entre textos y fondos y garantizar la mejor experiencia de usuario. Esta flexibilidad permite que adaptes el diseño a la identidad de tu marca en todos los modos.

Colores de dataset

Personaliza los colores del objeto Dataset y del canvas en modo Claro y Oscuro. Si añades varios dataset a tus modelos, podrás diferenciarlos fácilmente. Los colores de dataset se usan para atributos con data asociada y facilitan distinguir atributos con enlaces activos. Los colores indicados arriba serán los colores por defecto para atributos sin data asociada. También puedes adaptar los nombres según la terminología de tu empresa.

Colores de charts

Personaliza los colores de los objetos Chart para ambos modos, Claro y Oscuro. Por ejemplo, esto se usa en los Gauge charts para señalar zonas de óptimo, precaución o alerta. Además, puedes cambiar los nombres para ajustarlos a la terminología de tu organización.

Ayudas visuales

Si realizaste cambios en el tema, el fondo del color indicará que se han realizado cambios en ese atributo específico.

Para cambiar un color, haz clic en un círculo de color para el tema elegido (Claro u Oscuro). Aparecerá un selector de color que te permite elegir un tono o introducir un valor HEX / RGB / HSL. Si no estás seguro de los valores de color, usa el “PipetIcon” para seleccionar un color de cualquier parte de la pantalla. Las actualizaciones ocurren de inmediato.

Ejemplo de un tema

Explora diferentes formas de transformar el tema de tu aplicación. Aquí, el tema original ha sido personalizado para mostrar variaciones azules y verdes.

Desde Original

A Azul

Los cambios realizados fueron Color de Texto, Color del Cuerpo, Color del Panel (claro), Imagen del Logo, Texto del Logo y BG de Cabecera.

A Verde Matrix

”La elección. El problema es la elección” – Neo (The Matrix Reloaded)

Colores del Modelo de Proceso

Ajusta los colores de los atributos de modelado para que difieran del resto de la aplicación. Esto asegura una apariencia distintiva para tus modelos.