Saltar al contenido principal

Branding

Personaliza la identidad visual de tu escuela para mantener una imagen consistente en todos los puntos de contacto con tus estudiantes y clientes.

Proposito​

La configuracion de branding te permite definir los colores, tipografia y estilos visuales de tu escuela. Estos se aplican automaticamente en el portal del estudiante, los correos electronicos, los certificados y el sitio web publico.

Colores​

Color Primario​

El color principal de tu marca. Se utiliza en:

  • Botones principales
  • Encabezados y titulos
  • Enlaces
  • Elementos de navegacion

Color Secundario​

Color complementario que acompana al primario. Se utiliza en:

  • Botones secundarios
  • Fondos de secciones
  • Elementos de soporte visual

Color de Acento​

Color para resaltar elementos importantes. Se utiliza en:

  • Insignias y etiquetas
  • Indicadores de estado
  • Elementos que requieren atencion

Escalas Automaticas​

Al seleccionar cada color, el sistema genera automaticamente una escala completa de tonos (del 50 al 950). Esto garantiza que tengas variaciones claras y oscuras disponibles sin necesidad de definir cada tono manualmente.

50  → Tono mas claro (fondos sutiles)
100 → Claro
200 → Claro medio
...
500 → Tono base (el color que seleccionaste)
...
800 → Oscuro
900 → Muy oscuro
950 → Tono mas oscuro

Tipografia​

Fuente de Encabezados​

La fuente utilizada para titulos, subtitulos y elementos destacados. Selecciona entre las fuentes disponibles en el sistema.

Fuente de Cuerpo​

La fuente utilizada para parrafos, descripciones y texto general. Se recomienda una fuente legible y neutral.

Tamanos y Pesos​

  • Tamanos: Configura el tamano base del texto y la escala de tamanos para cada nivel de encabezado
  • Pesos: Selecciona los pesos disponibles (regular, medio, seminegrita, negrita)

Diseno​

Bordes Redondeados​

Controla el radio de las esquinas redondeadas en botones, tarjetas y otros elementos:

  • Ninguno: Esquinas rectas
  • Pequeno: Redondeo sutil
  • Medio: Redondeo moderado
  • Grande: Esquinas muy redondeadas

Espaciado​

Define la densidad visual de la interfaz:

  • Compacto: Menos espacio entre elementos, mas informacion visible
  • Normal: Espaciado estandar equilibrado
  • Relajado: Mas espacio entre elementos, diseno mas abierto

Efectos​

Sombras​

Controla las sombras de tarjetas, modales y elementos elevados:

  • Ninguna: Sin sombras, diseno plano
  • Sutil: Sombras ligeras, casi imperceptibles
  • Media: Sombras moderadas que dan profundidad
  • Prominente: Sombras marcadas para mayor contraste visual

Animaciones​

  • Activadas: Transiciones suaves entre estados (hover, apertura de modales, etc.)
  • Desactivadas: Sin animaciones, cambios instantaneos

Vista Previa​

Antes de guardar los cambios, puedes ver en tiempo real como se veran los ajustes:

  1. Modifica cualquier configuracion de branding
  2. La vista previa se actualiza automaticamente en el panel derecho
  3. Revisa los diferentes componentes (botones, tarjetas, texto, formularios)
  4. Si estas conforme, haz clic en Guardar Cambios

Restablecer Valores por Defecto​

Si deseas volver a la configuracion original:

  1. Haz clic en Restablecer
  2. Confirma la accion
  3. Se revertiran todos los cambios a los valores predeterminados del sistema

Acceder a Branding​

Puedes acceder a la configuracion de branding desde dos ubicaciones:

  • Configuracion > Branding
  • Sitio Web > Temas (acceso directo)

Donde se Aplica​

Tu branding se refleja de manera consistente en:

CanalQue se aplica
Sitio web publicoColores, tipografia, diseno completo
Portal del estudianteColores primarios, logo, tipografia
Correos electronicosLogo, color primario, tipografia
CertificadosLogo, colores, tipografia de encabezados

Tip: Selecciona colores que se vean bien tanto en fondos claros como oscuros. Usa la vista previa para verificar la legibilidad del texto sobre cada color.