Botones y marca

Aquí tienes lo necesario para poner el botón «Iniciar sesión con UTILIA» en tu aplicación con la imagen oficial: el código del botón en varias variantes, los logotipos e iconos que sirve https://os.utilia.ai, los colores y la tipografía.

Cómo se conecta el botón

El botón no lleva la URL de autorización escrita: cada autorización necesita su propio code_challenge y su propio state, generados en el momento. Por eso apunta a una ruta de tu aplicación (en los ejemplos, /auth/utilia):

Si usas Auth.js, Authlib o los SDK de UTILIA OS, la ruta y la vuelta ya te las dan:

• Iniciar sesión con UTILIA en Next.js
• Iniciar sesión con UTILIA en Flask
• Con el SDK JavaScript o con el SDK Python

El botón

<a href="/auth/utilia"
   style="display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 20px;background:#fff;color:#0066CC;border:1.5px solid #0066CC;border-radius:8px;font-family:'Comfortaa',system-ui,sans-serif;font-size:14px;font-weight:600;text-decoration:none">
  <img src="https://os.utilia.ai/icons/icon-192x192.png" alt="" width="20" height="20" style="border-radius:4px">
  Iniciar sesión con UTILIA
</a>

Componente React

Un componente de presentación que lleva a tu ruta de inicio de sesión. Si usas Auth.js, cambia el enlace por un botón que llame a signIn("utilia").

type SignInWithUtiliaProps = {
  href?: string;
  variant?: "light" | "dark";
  iconOnly?: boolean;
};
 
export function SignInWithUtilia({
  href = "/auth/utilia",
  variant = "light",
  iconOnly = false,
}: SignInWithUtiliaProps) {
  const light = variant === "light";
 
  return (
    <a
      href={href}
      aria-label={iconOnly ? "Iniciar sesión con UTILIA" : undefined}
      style={{
        display: "inline-flex",
        alignItems: "center",
        justifyContent: "center",
        gap: iconOnly ? 0 : 10,
        minHeight: 44,
        minWidth: 44,
        padding: iconOnly ? 0 : "10px 20px",
        background: light ? "#fff" : "#0066CC",
        color: light ? "#0066CC" : "#fff",
        border: "1.5px solid #0066CC",
        borderRadius: iconOnly ? 12 : 8,
        fontFamily: "'Comfortaa', system-ui, sans-serif",
        fontSize: 14,
        fontWeight: 600,
        textDecoration: "none",
      }}
    >
      <img
        src="https://os.utilia.ai/icons/icon-192x192.png"
        alt=""
        width={20}
        height={20}
        style={{ borderRadius: 4 }}
      />
      {!iconOnly && <span>Iniciar sesión con UTILIA</span>}
    </a>
  );
}

Logotipos

Todas las rutas cuelgan de https://os.utilia.ai, por ejemplo https://os.utilia.ai/UTILIA-OS-logo-claro.png. Están en PNG. Los logotipos son rectangulares: para el botón usa el icono cuadrado.

Iconos

El icono cuadrado con el isotipo de UTILIA, en varios tamaños, bajo https://os.utilia.ai/icons/:

Colores

Son los colores de la interfaz de UTILIA OS:

Tipografía

UTILIA OS usa la fuente Comfortaa. Puedes cargarla desde Google Fonts:

<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;600;700&display=swap" rel="stylesheet">

font-family: 'Comfortaa', system-ui, -apple-system, sans-serif;

Uso correcto

• Escribe el texto completo, «Iniciar sesión con UTILIA», sin abreviarlo («Login UTILIA», «Entrar UTILIA»).
• Usa los colores tal cual y asegúrate de que el botón contrasta con el fondo de tu página.
• Usa el icono de 192 x 192 o mayor y no lo estires, comprimas ni gires.
• Deja al menos 8 px de aire alrededor del icono y no lo mezcles con otros logotipos dentro del mismo botón.
• Mantén el botón con al menos 44 px de alto, para que se pulse bien en el móvil.

Si necesitas una variante que no está aquí, consúltala con el equipo de UTILIA OS antes de publicarla.