Directrices del Login con Kobana
Cómo mostrar el botón Iniciar sesión con Kobana: temas, formatos, espaciados, tipografía y reglas de uso del símbolo K.
¿Implementando con ayuda de IA?
Copia el enlace del markdown de esta página y pégalo en tu asistente de código. Contiene la especificación completa, con todos los valores fijos y una implementación de referencia.
https://www.kobana.com.br/es/marca/login.md
Antes de publicar
Seguir estas directrices es obligatorio en cualquier integración que use autenticación de Kobana. Existen para que la persona reconozca al instante con qué cuenta está entrando — lo que reduce el abandono en el flujo y evita confusión sobre quién guarda las credenciales. Si tu caso no está cubierto aquí, habla con nosotros antes de publicar.
Tres formas de mostrar el botón
Elige en el orden de abajo: cuanto más arriba, menos posibilidad de que el botón se salga del estándar.
- 01
Activos preaprobados
Descarga el SVG del símbolo y monta el botón con las especificaciones de esta página. Es el camino más rápido y ya sale en conformidad.
Ver los activos - 02
Botón personalizado
Construye el botón en tu design system, respetando el color, el contorno, la altura, el radio, el padding y la tipografía especificados abajo.
Ver especificaciones - 03
Modo icono
Botón cuadrado de 40 × 40 px, solo con el símbolo. Úsalo únicamente cuando el espacio no permita el texto — y siempre con etiqueta accesible.
Ver modo icono
Activos preaprobados
Cuatro temas en dos formatos. Todos con 40 px de altura, tipografía Work Sans Medium 14/20 y símbolo de 18 px.
Tema Claro
Fondos claros y neutros. Es el tema estándar.
Rectangular — radio 4 px
Pill — radio 20 px
- Relleno
- #FFFFFF
- Contorno
- #747775
- Texto
- #1F1F1F
- Símbolo
- K en placa verde
Tema Oscuro
Interfaces en dark mode y fondos oscuros.
Rectangular — radio 4 px
Pill — radio 20 px
- Relleno
- #131314
- Contorno
- #8E918F
- Texto
- #E3E3E3
- Símbolo
- K en placa verde
Tema Neutro
Fondos claros donde el contorno del tema claro sería ruido visual.
Rectangular — radio 4 px
Pill — radio 20 px
- Relleno
- #F2F2F2
- Contorno
- sin contorno
- Texto
- #1F1F1F
- Símbolo
- K en placa verde
Tema Kobana
Úsalo con moderación, cuando Kobana sea la integración destacada y el entorno no use verde lima.
Rectangular — radio 4 px
Pill — radio 20 px
- Relleno
- #D3FD54
- Contorno
- sin contorno
- Texto
- #000000
- Símbolo
- K negra
Especificaciones del botón
Si vas a construir el botón en tu propio design system, estos valores son fijos.
Colores por tema
| Tema | Relleno | Contorno | Texto |
|---|---|---|---|
| Claro | #FFFFFF | #747775 | #1F1F1F |
| Oscuro | #131314 | #8E918F | #E3E3E3 |
| Neutro | #F2F2F2 | — | #1F1F1F |
| Kobana | #D3FD54 | — | #000000 |
El contorno tiene 1 px y se dibuja por dentro del botón. Para mantener el área útil, usa 11 px de padding horizontal en los temas con contorno y 12 px en los temas sin contorno.
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 |
| Tipografía | Work Sans Medium 14/20 |
| Grosor del contorno | 1 px, interno |
Espaciados
Los espaciados son fijos y no escalan con el texto. Medidas 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 |
<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>.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;
}Texto del botón
Usa una de las tres llamadas aprobadas. El verbo debe describir la acción del flujo, y la palabra “Kobana” nunca cambia.
Flujo de login para quien ya tiene cuenta en tu producto.
Flujo de creación de cuenta.
Flujo único que sirve para login y registro, sin distinción en la interfaz.
Otros idiomas
Traduce el verbo y la preposición al idioma de la interfaz — "Sign in with Kobana", "Entrar com a Kobana" — pero mantén "Kobana" siempre igual, con K mayúscula. Si el texto traducido no cabe, reduce el ancho del contenedor antes de pasar al modo icono.
Modo icono y uso del símbolo
El símbolo K solo aparece solo dentro del límite de un botón de 40 × 40 px. Fuera de eso, necesita ir acompañado del texto.
Siempre con etiqueta accesible. En el modo icono el botón no tiene texto visible — usa aria-label="Iniciar sesión con Kobana" para que los lectores de pantalla anuncien la acción.
La placa verde es la estándar. En los temas claro, oscuro y neutro, usa la K negra sobre la placa verde lima. Es lo que garantiza el reconocimiento de la marca en cualquier fondo.
Excepción en el tema Kobana. Cuando el botón ya es verde lima, la placa desaparece en el fondo. En ese caso, usa la K negra sin placa.
Temas claro, oscuro y neutro
Tema Kobana
Hazlo y no lo hagas
Hazlo
- • Usa los activos preaprobados de esta página siempre que sea posible
- • Elige el tema que garantice contraste con el fondo de tu interfaz
- • Mantén la altura de 40 px, los paddings y el tamaño del símbolo
- • Usa uno de los tres textos aprobados, traducido cuando la interfaz esté en otro idioma
- • Deja el botón “Iniciar sesión con Kobana” al menos tan visible como los demás proveedores
- • Mantén el símbolo K siempre con la misma proporción y en los colores permitidos
No lo hagas
- • Usar el símbolo K suelto, sin el límite del botón y sin texto
- • Aplicar versiones monocromáticas del símbolo fuera del negro, blanco y verde lima
- • Colocar el símbolo en verde lima sobre un fondo verde lima
- • Crear un símbolo propio, rediseñar la K o usar logos antiguos de Kobana
- • Usar solo “Kobana” como texto del botón, sin el verbo de la acción
- • Alterar la altura, el padding, el radio, la tipografía o los colores de las especificaciones
- • Traducir o alterar la palabra “Kobana”
Prominencia en pantalla
El botón "Iniciar sesión con Kobana" debe aparecer con al menos el mismo protagonismo que los otros proveedores de login de tu pantalla.
Mismo peso visual
Misma altura, mismo ancho y mismo nivel en la jerarquía de los demás botones de proveedor.
Sin esconder la opción
No coloques Kobana detrás de un "más opciones", por debajo del pliegue ni en un tamaño menor que los demás proveedores.
Ejemplo de apilamiento
Todos los botones comparten altura, radio y tipografía. El orden puede variar, pero Kobana nunca queda en desventaja visual.
La parte técnica está en la documentación
Esta página cubre la marca. Para scopes, endpoints, tokens y entorno de pruebas de la autenticación, usa la documentación para desarrolladores.
¿Dudas sobre un caso específico?
Si tu interfaz no encaja en ninguno de los temas o formatos de esta página, habla con nosotros antes de publicar.