Saltar a contenido

Branding

Personaliza la apariencia de Nexus con la identidad visual de tu organización.

¿Qué puedes personalizar?

Elemento Descripción
Logo Imagen de la organización
Colores Esquema de colores principal
Favicon Icono en pestañas del navegador
Nombre Cómo aparece tu organización

Acceder a branding

  1. Ve a Configuración > Organización
  2. Pestaña Branding
┌─────────────────────────────────────────────────────────────────┐
│ Logo de la organización                                         │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│        ┌─────────────────────┐                                  │
│        │                     │                                  │
│        │   [Logo actual]     │                                  │
│        │                     │                                  │
│        └─────────────────────┘                                  │
│                                                                 │
│        [Subir nuevo] [Eliminar]                                 │
│                                                                 │
│ Requisitos:                                                     │
│ • Formato: PNG, JPG, SVG                                        │
│ • Tamaño máximo: 2 MB                                           │
│ • Dimensiones recomendadas: 200x50 px                           │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Logo claro y oscuro

Puedes subir versiones diferentes:

┌─────────────────────────────────────────────────────────────────┐
│ Variantes del logo                                              │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│ Tema claro              │ Tema oscuro                           │
│ ┌─────────────────────┐ │ ┌─────────────────────┐               │
│ │  [Logo negro]       │ │ │  [Logo blanco]      │               │
│ └─────────────────────┘ │ └─────────────────────┘               │
│ [Cambiar]               │ [Cambiar]                             │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Colores personalizados

Configura el esquema de colores:

┌─────────────────────────────────────────────────────────────────┐
│ Colores                                                         │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│ Color primario                                                  │
│ ┌─────┐ ┌─────────────────────────────────────────────────────┐│
│ │ 🔵  │ │ #3B82F6                                             ││
│ └─────┘ └─────────────────────────────────────────────────────┘│
│                                                                 │
│ Color secundario                                                │
│ ┌─────┐ ┌─────────────────────────────────────────────────────┐│
│ │ 🟢  │ │ #10B981                                             ││
│ └─────┘ └─────────────────────────────────────────────────────┘│
│                                                                 │
│ Color de acento                                                 │
│ ┌─────┐ ┌─────────────────────────────────────────────────────┐│
│ │ 🟣  │ │ #8B5CF6                                             ││
│ └─────┘ └─────────────────────────────────────────────────────┘│
│                                                                 │
│                    [Restablecer por defecto] [Guardar]          │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Dónde se aplican los colores

Color Uso
Primario Botones principales, enlaces, header
Secundario Elementos secundarios, badges
Acento Highlights, notificaciones

Favicon

El favicon aparece en la pestaña del navegador:

┌─────────────────────────────────────────────────────────────────┐
│ Favicon                                                         │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│        ┌─────┐                                                  │
│        │ 🔷  │ Favicon actual                                   │
│        └─────┘                                                  │
│                                                                 │
│        [Subir nuevo]                                            │
│                                                                 │
│ Requisitos:                                                     │
│ • Formato: ICO, PNG                                             │
│ • Tamaño: 32x32 px o 64x64 px                                   │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Vista previa

Antes de guardar, previsualiza los cambios:

┌─────────────────────────────────────────────────────────────────┐
│ Vista previa                                                    │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  ┌───────────────────────────────────────────────────────────┐ │
│  │ [Logo] Mi Empresa                        🔔  👤           │ │
│  ├───────────────────────────────────────────────────────────┤ │
│  │                                                           │ │
│  │  [■ Botón primario]  [□ Botón secundario]                │ │
│  │                                                           │ │
│  │  Enlace de ejemplo                                        │ │
│  │                                                           │ │
│  └───────────────────────────────────────────────────────────┘ │
│                                                                 │
│ Tema: [☀️ Claro] [🌙 Oscuro]                                    │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Dominio personalizado

Enterprise

Disponible en plan Enterprise.

Configura tu propio dominio:

  1. Contacta a soporte
  2. Configura DNS CNAME
  3. Se provisiona SSL automático
nexus.tuempresa.com → Nexus con tu branding

Email personalizado

Las notificaciones por email pueden usar tu dominio:

De: notificaciones@tuempresa.com
Asunto: [Nexus] Tarea completada

Restablecer branding

Para volver a los valores por defecto:

  1. En cada sección, haz clic en Restablecer
  2. O usa Restablecer todo para eliminar toda personalización

Consideraciones

Accesibilidad

Asegúrate de que los colores tienen suficiente contraste para ser legibles.

Consistencia

Usa los mismos colores que tu marca para mejor reconocimiento.

Tamaños de logo

Prueba cómo se ve el logo en diferentes tamaños de pantalla.


Siguiente: Plugins - Extensiones y plugins.