# Login con Kobana — especificación para implementación por IA

Documento canónico y autosuficiente para implementar el botón "Iniciar sesión con
Kobana" en conformidad con las directrices de marca de Kobana.

- Página HTML equivalente: https://www.kobana.com.br/es/marca/login
- Guía de marca completa: https://www.kobana.com.br/es/marca
- Última actualización: 2026-07-30

## Cómo usar este documento

Eres un agente o asistente de código implementando autenticación con Kobana.
Sigue las reglas de abajo literalmente. Todos los valores numéricos y
hexadecimales son fijos y normativos — no los redondees, no los conviertas a
tokens aproximados del design system del proyecto y no los sustituyas por valores
"equivalentes".

Si alguna regla entra en conflicto con el design system del proyecto en el que
estás trabajando, mantén esta especificación para el botón de login y avisa a la
persona.

Alcance de este documento: **solo marca y presentación del botón**. Endpoints,
scopes OAuth, tokens y entorno de pruebas no están aquí — consulta
https://www.kobana.com.br/es/desarrolladores.

## Reglas inviolables

1. El botón siempre tiene 40 px de altura.
2. El texto es obligatoriamente uno de los tres aprobados (ver "Texto del botón").
3. La palabra "Kobana" nunca se traduce, se abrevia ni se altera. Siempre con K
   mayúscula y el resto en minúsculas.
4. El símbolo K nunca aparece suelto: o va acompañado del texto, o va dentro de un
   botón cuadrado de 40 × 40 px con `aria-label`.
5. El símbolo K solo existe en negro, blanco y verde lima `#D3FD54`. Nunca lo
   recolorees, rediseñes, rotes ni distorsiones.
6. No crees un icono propio y no uses logos antiguos de Kobana.
7. Nunca uses solo "Kobana" como texto del botón — el verbo de la acción es
   obligatorio.
8. Los paddings son fijos y no escalan con el tamaño del texto.
9. El botón debe tener como mínimo el mismo protagonismo visual que los otros
   proveedores de login de la misma pantalla. No lo escondas detrás de "más
   opciones", por debajo del pliegue ni en un tamaño menor que los demás.

## Activos oficiales

Usa estas URLs directamente o descárgalas y sírvelas localmente. No generes el
símbolo K por tu cuenta.

| Activo | URL |
|---|---|
| Símbolo K, placa verde lima (estándar) | https://www.kobana.com.br/brand/icon/kobana-icon-k-fundo-verde.svg |
| Símbolo K, placa negra | https://www.kobana.com.br/brand/icon/kobana-icon-k-fundo-preto.svg |
| Símbolo K negro, sin placa | https://www.kobana.com.br/brand/icon/kobana-icon-k-preto.svg |
| Símbolo K blanco, sin placa | https://www.kobana.com.br/brand/icon/kobana-icon-k-branco.svg |
| Símbolo K verde lima, sin placa | https://www.kobana.com.br/brand/icon/kobana-icon-k-verde.svg |
| Pack completo de marca (ZIP) | https://www.kobana.com.br/brand/kobana-brand-pack.zip |

## Medidas fijas

| Propiedad | Valor |
|---|---|
| Altura del botón | 40 px |
| Radio — formato rectangular | 4 px |
| Radio — formato pill | 20 px |
| Tamaño del símbolo K | 18 × 18 px |
| Botón en modo icono | 40 × 40 px |
| Fuente | Work Sans Medium (500), 14 px, line-height 20 px |
| Grosor del contorno | 1 px, dibujado por dentro del botón |

## Temas

Elige el tema según el contraste con el fondo de la interfaz.

| Tema | Relleno | Contorno | Color del texto | Símbolo K | Padding horizontal |
|---|---|---|---|---|---|
| `claro` | `#FFFFFF` | `#747775` | `#1F1F1F` | placa verde lima | 11 px |
| `oscuro` | `#131314` | `#8E918F` | `#E3E3E3` | placa verde lima | 11 px |
| `neutro` | `#F2F2F2` | ninguno | `#1F1F1F` | placa verde lima | 12 px |
| `kobana` | `#D3FD54` | ninguno | `#000000` | K negra, sin placa | 12 px |

Cuándo usar cada uno:

- `claro` — fondos claros y neutros. Es el tema estándar; úsalo si tienes dudas.
- `oscuro` — interfaces en dark mode y fondos oscuros.
- `neutro` — fondos claros donde el contorno del tema claro sería ruido visual.
- `kobana` — solo cuando Kobana sea la integración destacada y el entorno no use
  verde lima. Úsalo con moderación.

Por qué cambia el padding: el contorno de 1 px se dibuja por dentro del botón. En
los temas con contorno, 11 px de padding más 1 px de borde dan los mismos 12 px
de área útil que los temas sin contorno.

Por qué cambia el símbolo en el tema `kobana`: la placa verde lima desaparecería
sobre un fondo verde lima. En ese caso — y solo en ese — usa la K negra sin placa.

## Espaciados

Medidos del borde al símbolo, del símbolo al texto y del texto al borde opuesto.

| Plataforma | Antes del símbolo | Símbolo → texto | Después del texto |
|---|---|---|---|
| Web y Android | 12 px | 10 px | 12 px |
| iOS | 16 px | 12 px | 16 px |

En la web, "12 px antes del símbolo" ya considera la compensación del contorno
descrita arriba: usa `padding: 0 11px` en los temas con contorno y
`padding: 0 12px` en los temas sin contorno.

## Texto del botón

Usa exactamente uno de estos tres:

| Texto | Cuándo usarlo |
|---|---|
| `Iniciar sesión con Kobana` | Login de quien ya tiene cuenta en tu producto. |
| `Registrarse con Kobana` | Creación de cuenta. |
| `Continuar con Kobana` | Flujo único que sirve para login y registro. |

Localización: traduce el verbo y la preposición al idioma de la interfaz,
manteniendo "Kobana" intacto.

- es: `Iniciar sesión con Kobana`
- pt-BR: `Entrar com a Kobana`
- en: `Sign in with Kobana`

Si el texto traducido no cabe, reduce el ancho del contenedor antes de pasar al
modo icono. Pasar al modo icono es el último recurso.

## Implementación de referencia — HTML + CSS

```html
<button class="kobana-signin kobana-signin--claro" type="button">
  <img
    src="https://www.kobana.com.br/brand/icon/kobana-icon-k-fundo-verde.svg"
    alt=""
    width="18"
    height="18"
  />
  <span>Iniciar sesión con Kobana</span>
</button>
```

El `alt` de la imagen está vacío a propósito: el texto del `<span>` ya nombra la
acción, y un `alt` con contenido haría que el lector de pantalla anunciara la
marca dos veces.

```css
.kobana-signin {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  height: 40px;
  border-radius: 4px; /* 20px en el formato pill */
  font-family: "Work Sans", system-ui, sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  cursor: pointer;
}

/* 10px entre el símbolo y el texto */
.kobana-signin > span {
  margin-left: 10px;
  white-space: nowrap;
}

/* Tema claro — 11px de padding compensan el contorno de 1px */
.kobana-signin--claro {
  padding: 0 11px;
  background: #ffffff;
  border: 1px solid #747775;
  color: #1f1f1f;
}

/* Tema oscuro */
.kobana-signin--oscuro {
  padding: 0 11px;
  background: #131314;
  border: 1px solid #8e918f;
  color: #e3e3e3;
}

/* Tema neutro */
.kobana-signin--neutro {
  padding: 0 12px;
  background: #f2f2f2;
  border: none;
  color: #1f1f1f;
}

/* Tema Kobana — usa el símbolo K en negro, sin placa verde */
.kobana-signin--kobana {
  padding: 0 12px;
  background: #d3fd54;
  border: none;
  color: #000000;
}

/* Modo icono: 40 × 40 px, sin texto */
.kobana-signin--icono {
  width: 40px;
  padding: 0;
  justify-content: center;
}
```

## Modo icono

Úsalo solo cuando el espacio no permita el texto.

```html
<button
  class="kobana-signin kobana-signin--claro kobana-signin--icono"
  type="button"
  aria-label="Iniciar sesión con Kobana"
>
  <img
    src="https://www.kobana.com.br/brand/icon/kobana-icon-k-fundo-verde.svg"
    alt=""
    width="18"
    height="18"
  />
</button>
```

El `aria-label` es obligatorio en el modo icono: sin él, el botón no tiene nombre
accesible.

## Implementación de referencia — React

```tsx
type Theme = "claro" | "oscuro" | "neutro" | "kobana";

const THEMES: Record<Theme, { style: React.CSSProperties; icon: string }> = {
  claro: {
    style: { background: "#FFFFFF", border: "1px solid #747775", color: "#1F1F1F", padding: "0 11px" },
    icon: "kobana-icon-k-fundo-verde",
  },
  oscuro: {
    style: { background: "#131314", border: "1px solid #8E918F", color: "#E3E3E3", padding: "0 11px" },
    icon: "kobana-icon-k-fundo-verde",
  },
  neutro: {
    style: { background: "#F2F2F2", border: "none", color: "#1F1F1F", padding: "0 12px" },
    icon: "kobana-icon-k-fundo-verde",
  },
  kobana: {
    style: { background: "#D3FD54", border: "none", color: "#000000", padding: "0 12px" },
    icon: "kobana-icon-k-preto",
  },
};

export function KobanaSignInButton({
  theme = "claro",
  shape = "rectangular",
  label = "Iniciar sesión con Kobana",
  onClick,
}: {
  theme?: Theme;
  shape?: "rectangular" | "pill";
  label?: "Iniciar sesión con Kobana" | "Registrarse con Kobana" | "Continuar con Kobana";
  onClick?: () => void;
}) {
  const t = THEMES[theme];
  return (
    <button
      type="button"
      onClick={onClick}
      style={{
        boxSizing: "border-box",
        display: "inline-flex",
        alignItems: "center",
        height: 40,
        borderRadius: shape === "pill" ? 20 : 4,
        fontFamily: '"Work Sans", system-ui, sans-serif',
        fontSize: 14,
        lineHeight: "20px",
        fontWeight: 500,
        cursor: "pointer",
        ...t.style,
      }}
    >
      <img
        src={`https://www.kobana.com.br/brand/icon/${t.icon}.svg`}
        alt=""
        width={18}
        height={18}
      />
      <span style={{ marginLeft: 10, whiteSpace: "nowrap" }}>{label}</span>
    </button>
  );
}
```

Si el proyecto tiene una Content Security Policy sin `unsafe-inline` en
`style-src`, cambia los objetos `style` por clases CSS — los atributos `style`
inline se bloquean en ese escenario.

## Checklist de verificación

Antes de considerar la implementación lista, confirma cada punto:

- [ ] La altura computada del botón es exactamente 40 px
- [ ] El símbolo K se renderiza en 18 × 18 px, sin distorsión
- [ ] El espacio entre símbolo y texto es 10 px (web/Android) o 12 px (iOS)
- [ ] El padding horizontal es 11 px con contorno, 12 px sin contorno
- [ ] La fuente computada es 14 px / 20 px, peso 500
- [ ] El radio es 4 px (rectangular) o 20 px (pill)
- [ ] Relleno, contorno y color del texto coinciden con la tabla de temas
- [ ] El texto es uno de los tres aprobados, con "Kobana" intacto
- [ ] En el modo icono existe `aria-label` con el texto de la acción
- [ ] El botón tiene como mínimo el mismo protagonismo que los demás proveedores
- [ ] El contraste del texto sobre el relleno pasa WCAG AA

## Errores comunes que evitar

| Error | Corrección |
|---|---|
| Usar el símbolo K suelto como enlace de login | Envuélvelo en un botón con texto, o usa el modo icono 40 × 40 con `aria-label` |
| Aplicar `height: 44px` para igualar otros botones | Mantén 40 px; ajusta los otros botones |
| Recolorear la K al monocromático de la marca del proyecto | Usa solo las variantes oficiales |
| Escribir "Login Kobana" o solo "Kobana" | Usa uno de los tres textos aprobados |
| Traducir a "Iniciar sesión con Cobana" o "Kobana Login" | "Kobana" nunca cambia |
| Poner la K verde sobre fondo verde lima | En el tema `kobana`, usa la K negra sin placa |
| Escalar el padding junto con el `font-size` | Los paddings son fijos |
| Esconder la opción Kobana detrás de "más opciones" | Mismo protagonismo que los demás proveedores |

## Contacto

Casos no cubiertos por este documento: imprensa@kobana.com.br