Mejores prácticas para recursos de marca White Label

White Label Lite dispone de campos separados para logotipo claro, logotipo oscuro, favicon, color principal y color de acento. Esta guía te ayuda a preparar un kit de marca claro, utilizar los archivos admitidos por el formulario y probar el resultado antes de que lo vean los clientes.

Subir logotipos

Hay dos campos para logotipos: un logotipo claro para fondos claros y un logotipo oscuro para fondos oscuros. Sube ambos si los tienes y utiliza la vista previa de Branding para comprobar que cada uno sea legible en el tema correspondiente.

Tipos de archivo admitidos:

• PNG: la mejor opción para transparencias. Recomendado en la mayoría de los casos.
• JPG / JPEG: adecuado para logotipos con fondo sólido; no admite transparencia.
• SVG: no se admite actualmente, ya que estamos trabajando en una representación segura de los scripts incrustados.

Tamaño máximo: 1 MB por archivo. Si el archivo es mayor, comprímelo con TinyPNG o pngquant. Los logotipos suelen comprimirse por debajo de 50 KB sin pérdida visible de calidad.

Tamaño de origen recomendado: utiliza un original nítido con una resolución razonablemente alta, no un icono diminuto. Un logotipo cuadrado o casi cuadrado es un punto de partida seguro, aunque una marca denominativa más ancha también sirve si sigue siendo legible en la vista previa.

Fondos:

• Se recomienda encarecidamente un PNG transparente. El fondo del panel y la franja de cabecera de los emails de marca pueden no ser blancos puros, y un fondo de color con bordes marcados quedará mal.
• Si tu logotipo es un monograma o icono, la transparencia permite que se integre con cualquier fondo.
• Si lleva un fondo de color fijo, mantenlo coherente con el color principal o de acento elegido para el panel.

Favicon

El favicon tiene un campo independiente y no se genera automáticamente a partir del logotipo. Utiliza un icono cuadrado sencillo en formato PNG, JPG o ICO de hasta 1 MB. Un monograma o símbolo suele funcionar mejor que una marca denominativa completa al tamaño de una pestaña del navegador.

Mantén el favicon cuadrado. Utiliza los campos de logotipo claro y oscuro, no el favicon, para la marca denominativa completa.

Elegir los colores

Los dos campos de color son:

• Color principal: el color principal de botones, enlaces y estados activos.
• Color de acento: un color complementario para elementos destacados.

Introduce los valores como colores hexadecimales, por ejemplo #3b82f6. Utiliza la vista previa en directo para ver el resultado antes de guardar.

Elegir el color principal

El color principal es el que más ven los visitantes. Ten en cuenta tres aspectos:

• Pruébalo sobre fondos claros y oscuros. El panel admite ambos temas. Un color que destaca sobre blanco puede desaparecer sobre oscuro.
• Conserva reconocibles los colores de estado. Evita que el color principal de la marca se parezca demasiado al de las advertencias, acciones correctas o destructivas. Un azul, morado, verde azulado, gris carbón u otro color distintivo suele ser más legible.
• Los tonos sólidos de saturación media funcionan mejor que los casi blancos o negros. Haz la prueba del botón: ¿destacaría el color como botón sobre un fondo blanco? Si la respuesta es «apenas», resulta demasiado pálido.

Elegir el color de acento

El acento es el color complementario. Debe:

• Diferenciarse claramente del principal, sin utilizar dos tonos casi azules
• Complementar el principal sin competir con él
• Verse claramente al lado del principal

Un patrón eficaz es usar un color de marca intenso y saturado como principal y un tono complementario más claro como acento. Ejemplo: principal #2563eb (indigo-600) y acento #10b981 (emerald-500).

Contraste y accesibilidad

La interfaz puede colocar texto claro sobre el color principal. Elige un tono que mantenga legibles las etiquetas de los botones. Un pastel muy claro puede quedar atractivo en una muestra, pero perder contraste en un botón real.

Un comprobador de contraste como el de WebAIM resulta útil para revisar la combinación de texto y fondo. Utiliza la vista previa como comprobación final, porque el resto de la interfaz también influye en la percepción del color.

Colores que casi siempre funcionan: azul oscuro, morado oscuro, gris carbón, verde azulado oscuro y granate intenso. Colores que suelen fallar: pasteles claros, gris medio, amarillo medio y neón.

Nombre visible

El nombre visible aparece en el panel y webmail de marca, así como en las superficies de email compatibles. Tres patrones eficaces son:

• «Email de TuMarca»: indica claramente que es el servicio de email. Es profesional y adecuado para revendedores que venden email como servicio.
• «TuMarca»: solo el nombre de la marca. Es más limpio y adecuado si el email forma parte de un conjunto de productos más amplio.
• «Panel de TuMarca»: destaca la superficie. Es útil si tienes varios productos de marca y quieres etiquetarlos de forma diferenciada.

Mantenlo lo bastante corto como para reconocerlo de un vistazo. Revisa la vista previa en una pantalla estrecha y en ambos temas en lugar de basarte en un límite de caracteres.

El nombre visible aparece en:

• La navegación del panel y webmail
• El inicio de sesión de marca y los títulos del navegador
• Las superficies de emails transaccionales compatibles

Antes de guardar

Antes de hacer clic en Save changes, comprueba que los archivos pesen menos de 1 MB, que los logotipos claro y oscuro sean legibles en su vista previa, que el favicon sea un icono cuadrado sencillo, que el color principal tenga contraste legible y que el nombre visible resulte natural como nombre del remitente.

Después de guardar, abre el host de marca activo en una ventana privada. Así no confundirás una imagen o un favicon almacenados en caché con la versión actual.

Flujo sencillo para preparar recursos

1. Parte de los archivos originales del logotipo, no de una captura ni de un archivo copiado de un sitio web.
2. Exporta una versión legible sobre fondos claros y otra sobre fondos oscuros.
3. Crea un favicon cuadrado independiente con la parte más reconocible de la marca.
4. Añade el nombre y los colores en Branding y compara las vistas previas de email y webmail.
5. Guarda, prueba el host activo en un teléfono y un navegador de escritorio y conserva los archivos originales donde el equipo pueda actualizarlos.

Actualizar más adelante

Puedes actualizar los recursos de marca más adelante sin sustituir el registro DNS de un host de marca existente. Vuelve a comprobar siempre el host activo después de cualquier cambio visual.

Si subes un recurso incorrecto o eliges un color ilegible, corrígelo en Branding y vuelve a guardar. Ten en cuenta la caché habitual del navegador cuando compruebes la sustitución.

Automatizar con la API y MCP

Si tu integración tiene los permisos necesarios, la API REST o MCP pueden gestionar los ajustes y recursos de marca. Se aplican los mismos tipos de archivo y el límite de 1 MB. Utiliza el panel y la vista previa para la comprobación visual final.

Consulta la Guía de la API y MCP para Branding de White Label para conocer las operaciones compatibles.

Situaciones frecuentes

«Mi logotipo se ve bien en la barra lateral, pero borroso en el teléfono». Sube un original más nítido y de mayor resolución, guárdalo y prueba el host de marca activo en el teléfono. No confíes solo en la vista previa del navegador de escritorio.

«Mi color principal funciona en el panel, pero el texto del botón cuesta leerlo». Elige un tono más oscuro o saturado y revísalo en la vista previa y el host activo.

«Mi logotipo tiene un fondo de color que no coincide con el panel». Exporta una versión PNG transparente si el logotipo lo permite. Compara las versiones clara y oscura sobre los fondos correspondientes.

«¿Puedo utilizar un logotipo distinto en los emails y en el panel?» Utiliza las variantes clara y oscura que proporciona Branding. Prueba la vista previa de emails compatibles y las superficies activas de tus clientes antes de prometer un aspecto concreto.

«¿Qué ocurre con el modo oscuro?» El panel admite temas claro y oscuro y puedes subir un logotipo distinto para cada uno. El logotipo claro se muestra en fondos claros y el oscuro en fondos oscuros, por lo que puedes utilizar tinta oscura sobre claro y un logotipo blanco o claro sobre oscuro, ambos con buena legibilidad.

«¿Puedo subir un favicon distinto del logotipo?» Sí. El favicon tiene su propio campo (PNG, JPG o ICO, máximo 1 MB) y no se deriva del logotipo. Sube un icono sencillo y distintivo para la pestaña del navegador.

Próximos pasos

• Configurar White Label Lite: activación y configuración DNS.
• Qué elementos conservan la marca TrekMail: qué elementos de TrekMail podrían seguir viendo tus clientes.
• Preguntas frecuentes sobre precios de White Label Lite: preguntas de facturación y moneda.
• Guía de la API y MCP para Branding de White Label: sube logotipos y configura la marca mediante REST o MCP.