Personalización de Marca e Identidad Visual

import { Badge } from ‘@astrojs/starlight/components’;

Axol Systems ofrece una sección centralizada de Identidad de Marca (Branding). Esta herramienta permite a las empresas personalizar la identidad visual de la plataforma con sus propios logotipos, ajustar las dimensiones de visualización y configurar un fondo corporativo para la pantalla de inicio de sesión (Login).

Acceso al Módulo de Identidad

Para acceder al editor de marca:

Dirígete a la barra de navegación lateral y selecciona Configuración (icono de engranaje).
En el menú de opciones de configuración, haz clic en Identidad (icono de imagen).

Configuración de Logotipos

Axol Systems adapta su interfaz automáticamente según el tema del usuario (Modo Claro o Modo Oscuro). Para asegurar la máxima legibilidad, el módulo permite registrar variantes específicas de tu logotipo:

flowchart TD
    A[Gestión de Logotipos] --> B[Logo Predeterminado: Se usa si no hay variantes específicas]
    A --> C[Logo Tema Claro: Optimizado para fondos blancos y claros]
    A --> D[Logo Tema Oscuro: Optimizado para fondos oscuros de alto contraste]

1. Ranuras de Logotipo Disponibles

Logo Predeterminado: Imagen principal de la marca. Si no configuras variantes para temas específicos, este logotipo se utilizará en toda la plataforma.
Logo para Tema Claro: Variante con colores oscuros o contrastados para desplegarse sobre fondos claros.
Logo para Tema Oscuro: Variante en tonos claros o blanco puro diseñada para resaltar sobre fondos grises oscuros o negros.

Cada ranura permite:

Cargar una nueva imagen desde tu equipo o ingresar una URL pública.
Reemplazar la imagen existente con un solo clic.
Eliminar el logotipo para restablecer el icono por defecto de Axol.

2. Control de Proporciones y Dimensiones

Debajo de las ranuras de logotipos encontrarás un control deslizante interactivo:

Tamaño del Logo: Permite regular de forma proporcional las dimensiones del logotipo para que se adapte adecuadamente al espacio de la barra superior.

3. Previsualizador en Vivo de la Barra Superior

En la misma pantalla verás dos simuladores en tiempo real que te muestran exactamente cómo se adaptará tu logo en:

La Barra Superior en Tema Oscuro.
La Barra Superior en Tema Claro.

Cualquier cambio en los controles de tamaño o en las imágenes se refleja de inmediato en estos simuladores.

La pantalla de inicio de sesión es el primer punto de contacto de tus colaboradores con la plataforma. La sección inferior te permite personalizarla por completo:

1. Nombre Comercial de la Empresa

Define el nombre corporativo que aparecerá en el encabezado de la tarjeta de bienvenida. Si se deja en blanco, no será sustituido por ningún valor; simplemente aparecerá el espacio en blanco.

2. Fondo de Pantalla (Wallpaper)

Permite elegir la apariencia del fondo en el portal de acceso:

Fondo Oscuro (Sólido Axol): Fondo liso y sobrio predeterminado.
Fondos de Muestra: Variedad de diseños visuales predeterminados provistos como muestra para estilizar el portal.
URL Personalizada: Puedes ingresar el enlace directo a una imagen institucional propia de tu empresa (por ejemplo, una fotografía de instalaciones o diseño corporativo en alta resolución).

A la derecha de los controles se encuentra un visor interactivo que simula la pantalla completa de inicio de sesión:

Muestra el logotipo seleccionado.
Presenta el nombre configurado para la empresa.
Refleja el fondo de pantalla o wallpaper activo en tiempo real.

Recomendaciones para Imágenes de Marca

[!TIP]

Formato recomendado: Utiliza archivos en formato PNG o WebP con fondo transparente para que el logo se integre de forma limpia sobre cualquier color de barra superior.

Resolución para Wallpapers: Si utilizas una URL de imagen para el fondo de pantalla de login, se recomienda una resolución mínima de 1920 × 1080 píxeles (Full HD) y una relación de aspecto 16:9 con compresión optimizada para carga rápida.