Personalice sus páginas de inicio de sesión

La personalización cambia el aspecto del inicio de sesión alojado, del portal de la cuenta y de los correos electrónicos. La configuración se hereda en este orden: valor predeterminado de la plataforma, entorno, aplicación y organización. Cada token toma el valor del nivel más específico que lo defina.

Qué puede configurar

• Colores: color.primary, color.primary_contrast, color.background, color.surface, color.text, color.text_muted, color.border, color.link, color.focus_ring, color.error y color.success, como valores hexadecimales sRGB. El modo claro y el oscuro tienen valores independientes, y mode puede ser light, dark o system.
• Fuentes: font.body y font.heading de la lista de fuentes permitidas, o una fuente cargada; font.size_base de 14 a 18 px.
• Forma: radius.card de 0 a 24 px y radius.control de 0 a 16 px.
• Diseño: center, split_left o split_right.
• Imágenes: logo, logo_height (de 24 a 80 px), favicon y background_image (solo con un diseño split_*).

Las organizaciones solo pueden reemplazar los tokens logo y color.primary. La personalización de una organización se muestra únicamente cuando se verifica el contexto de la organización, por ejemplo mediante una invitación válida o después del selector de organización. Un parámetro organization sin más no cambia el aspecto de la página.

Protección del contraste

Al guardar, KeenAuth comprueba estos pares, por separado para el modo claro y el oscuro:

La API de administración rechaza un par que no alcanza su mínimo con 422 brand_contrast_insufficient (RFC 9457). El cuerpo del error indica el campo y sugiere el color más cercano que sí cumple; la sugerencia mantiene el tono y la saturación, y solo modifica la luminosidad. El panel ofrece la misma sugerencia con un solo clic. Un valor que no cumple no puede publicarse. Consulte Publicar la personalización para ver el formato del error.

El CSS personalizado (plan Startup) puede reducir el contraste, y KeenAuth no lo corrige. Un análisis de vista previa informa de los problemas como advertencias en el panel, y la conformidad de los cambios realizados con CSS personalizado es responsabilidad suya.

Recursos

Suba imágenes y fuentes con POST /v1/branding/assets. Las imágenes pueden pesar como máximo 1 MB y las fuentes como máximo 300 KB. Se aceptan PNG, JPEG y WebP; ICO solo para favicons y WOFF2 solo para fuentes. SVG se rechaza. Las imágenes se recodifican como PNG, se reducen a un máximo de 1024×1024 px y se eliminan sus metadatos. Un entorno puede contener 200 archivos y 50 MB.

CSS personalizado y plantillas

En el plan Startup y superiores puede añadir CSS personalizado y una plantilla de página. Las partes de una página críticas para la seguridad se dibujan en una capa protegida que su CSS no puede ocultar ni cubrir: el nombre de la aplicación y el origen verificado en las pantallas de consentimiento, la lista de permisos solicitados, los botones de permitir y denegar, las advertencias de seguridad, el banner del entorno y los enlaces legales. El JavaScript del cliente no se ejecuta en ningún plan.

Use propiedades CSS lógicas (margin-inline-start, no margin-left); las propiedades físicas se rechazan para que sus estilos funcionen también en idiomas de derecha a izquierda. Consulte Idiomas y escritura de derecha a izquierda.

Marca de KeenAuth

El inicio de sesión alojado, el portal de la cuenta y los correos electrónicos muestran una pequeña línea "Protegido por KeenAuth" en la capa protegida. En los planes Business y Enterprise, y en los entornos development, no se muestra. El plan se comprueba cada vez que se dibuja una página o un correo, de modo que la línea vuelve a aparecer si cambia el plan. El CSS personalizado y las sustituciones de texto no pueden ocultarla ni modificarla.

Publicar

Los cambios se guardan como borrador y entran en vigor al publicarlos. Las versiones anteriores pueden listarse y revertirse. Las páginas de la API están bajo /docs/api/management/branding/, empezando por Publicar la personalización.