# Botones y marca

El botón «Iniciar sesión con UTILIA» listo para copiar, con los logotipos, los iconos, los colores y la tipografía oficiales de UTILIA OS.

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`):

**Del botón a la sesión iniciada**

1. **La persona pulsa el botón** (Tu web): El enlace lleva a /auth/utilia, en tu aplicación.
2. **Tu ruta prepara la petición** (/auth/utilia): Genera el code_verifier, el code_challenge y el state, los guarda y redirige.
3. [**La persona autoriza**](https://os.utilia.ai/docs/developers/oauth/consent-screen) (UTILIA OS): Inicia sesión y decide qué concede.
4. [**Tu aplicación canjea el código**](https://os.utilia.ai/docs/developers/oauth/token-revoke-introspect) (Tu redirect_uri): Comprueba el state, canjea el código y abre la sesión.

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](https://os.utilia.ai/docs/developers/oauth/sign-in-nextjs)
- [Iniciar sesión con UTILIA en Flask](https://os.utilia.ai/docs/developers/oauth/sign-in-flask)
- [Con el SDK JavaScript](https://os.utilia.ai/docs/developers/oauth/sign-in-sdk-js) o [con el SDK Python](https://os.utilia.ai/docs/developers/oauth/sign-in-sdk-python)

## El botón

### Claro

```html
<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>
```

### Oscuro

```html
<a href="/auth/utilia"
   style="display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 20px;background:#0066CC;color:#fff;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>
```

### Solo icono

```html
<a href="/auth/utilia" aria-label="Iniciar sesión con UTILIA"
   style="display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:#fff;border:1.5px solid #0066CC;border-radius:12px">
  <img src="https://os.utilia.ai/icons/icon-192x192.png" alt="" width="24" height="24" style="border-radius:4px">
</a>
```

### Con CSS

```html
<style>
.utilia-signin {
  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;
  transition: background-color 150ms ease-out;
}
.utilia-signin:hover { background: #E5F2FF; }
.utilia-signin:focus-visible { outline: 2px solid #0066CC; outline-offset: 2px; }
.utilia-signin img { width: 20px; height: 20px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  .utilia-signin { transition: none; }
}
</style>

<a href="/auth/utilia" class="utilia-signin">
  <img src="https://os.utilia.ai/icons/icon-192x192.png" alt="">
  <span>Iniciar sesión con UTILIA</span>
</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")`.

```tsx
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

| Archivo | Tamaño | Uso |
| - | - | - |
| `/UTILIA-OS-logo-claro.png` | 3634 x 781 | Logotipo completo sobre fondo claro |
| `/UTILIA-OS-logo-oscuro.png` | 3634 x 781 | Logotipo completo sobre fondo oscuro |
| `/utilia-logo-azul.png` | 2242 x 854 | Logotipo en azul, para documentos e impresión |
| `/utilia-logo-white.png` | 415 x 158 | Logotipo en blanco, sobre fondos de color |

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/`:

| Archivo | Uso recomendado |
| - | - |
| `favicon-16x16.png`, `favicon-32x32.png` | Icono de pestaña |
| `icon-48x48.png`, `icon-72x72.png`, `icon-96x96.png` | Iconos pequeños |
| `icon-128x128.png`, `icon-144x144.png`, `icon-152x152.png` | Iconos medianos |
| `icon-192x192.png` | **Botones (recomendado)** |
| `icon-384x384.png`, `icon-512x512.png` | Pantallas de carga y fichas de tienda |

## Colores

Son los colores de la interfaz de UTILIA OS:

| Color | Modo claro | Modo oscuro | Uso |
| - | - | - | - |
| Azul principal | `#0066CC` | `#1A8CFF` | Botón y enlaces |
| Fondo | `#FFFFFF` | `#151A1E` | Fondo de página |
| Texto | `#212930` | `#FAFAFA` | Texto principal |
| Resalte | `#E5F2FF` | -- | Fondo al pasar por encima |
| Borde | `#E0E6EB` | `#2E3942` | Bordes y separadores |

## Tipografía

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

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

```css
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.