Diretrizes do Login com a Kobana
Como exibir o botão Entrar com a Kobana: temas, formatos, espaçamentos, tipografia e regras de uso do símbolo K.
Implementando com ajuda de IA?
Copie o link do markdown desta página e cole no seu assistente de código. Ele contém a especificação completa, com todos os valores fixos e uma implementação de referência.
https://www.kobana.com.br/marca/login.md
Antes de publicar
Seguir estas diretrizes é obrigatório em qualquer integração que use autenticação da Kobana. Elas existem para que a pessoa reconheça na hora com qual conta está entrando — o que reduz abandono no fluxo e evita confusão sobre quem guarda as credenciais. Se o seu caso não estiver coberto aqui, fale com a gente antes de publicar.
Três formas de exibir o botão
Escolha na ordem abaixo: quanto mais acima, menos chance de o botão sair fora do padrão.
- 01
Ativos pré-aprovados
Baixe o SVG do símbolo e monte o botão com as especificações desta página. É o caminho mais rápido e já sai em conformidade.
Ver os ativos - 02
Botão customizado
Construa o botão no seu design system, respeitando cor, contorno, altura, raio, padding e tipografia especificados abaixo.
Ver especificações - 03
Modo ícone
Botão quadrado de 40 × 40 px, só com o símbolo. Use apenas quando o espaço não permitir o texto — e sempre com rótulo acessível.
Ver modo ícone
Ativos pré-aprovados
Quatro temas em dois formatos. Todos com altura de 40 px, tipografia Work Sans Medium 14/20 e símbolo de 18 px.
Tema Claro
Fundos claros e neutros. É o tema padrão.
Retangular — raio 4 px
Pill — raio 20 px
- Preenchimento
- #FFFFFF
- Contorno
- #747775
- Texto
- #1F1F1F
- Símbolo
- K em placa verde
Tema Escuro
Interfaces em dark mode e fundos escuros.
Retangular — raio 4 px
Pill — raio 20 px
- Preenchimento
- #131314
- Contorno
- #8E918F
- Texto
- #E3E3E3
- Símbolo
- K em placa verde
Tema Neutro
Fundos claros em que o contorno do tema claro seria ruído visual.
Retangular — raio 4 px
Pill — raio 20 px
- Preenchimento
- #F2F2F2
- Contorno
- sem contorno
- Texto
- #1F1F1F
- Símbolo
- K em placa verde
Tema Kobana
Use com moderação, quando a Kobana for a integração em destaque e o entorno não usar verde-limão.
Retangular — raio 4 px
Pill — raio 20 px
- Preenchimento
- #D3FD54
- Contorno
- sem contorno
- Texto
- #000000
- Símbolo
- K preto
Especificações do botão
Se você for construir o botão no seu próprio design system, estes valores são fixos.
Cores por tema
| Tema | Preenchimento | Contorno | Texto |
|---|---|---|---|
| Claro | #FFFFFF | #747775 | #1F1F1F |
| Escuro | #131314 | #8E918F | #E3E3E3 |
| Neutro | #F2F2F2 | — | #1F1F1F |
| Kobana | #D3FD54 | — | #000000 |
O contorno tem 1 px e é desenhado por dentro do botão. Para manter a área útil, use 11 px de padding horizontal nos temas com contorno e 12 px nos temas sem contorno.
Medidas fixas
| Propriedade | Valor |
|---|---|
| Altura do botão | 40 px |
| Raio — formato retangular | 4 px |
| Raio — formato pill | 20 px |
| Tamanho do símbolo K | 18 × 18 px |
| Botão no modo ícone | 40 × 40 px |
| Tipografia | Work Sans Medium 14/20 |
| Espessura do contorno | 1 px, interno |
Espaçamentos
Os espaçamentos são fixos e não escalam com o texto. Medidas da borda até o símbolo, do símbolo até o texto e do texto até a borda oposta.
| Plataforma | Antes do símbolo | Símbolo → texto | Depois do texto |
|---|---|---|---|
| Web e 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>Entrar com a Kobana</span>
</button>.kobana-signin {
box-sizing: border-box;
display: inline-flex;
align-items: center;
height: 40px;
border-radius: 4px; /* 20px no formato pill */
font-family: "Work Sans", system-ui, sans-serif;
font-size: 14px;
line-height: 20px;
font-weight: 500;
cursor: pointer;
}
/* 10px entre o símbolo e o texto */
.kobana-signin > span {
margin-left: 10px;
white-space: nowrap;
}
/* Tema claro — 11px de padding compensam o contorno de 1px */
.kobana-signin--claro {
padding: 0 11px;
background: #ffffff;
border: 1px solid #747775;
color: #1f1f1f;
}
/* Tema escuro */
.kobana-signin--escuro {
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 — use o símbolo K em preto, sem placa verde */
.kobana-signin--kobana {
padding: 0 12px;
background: #d3fd54;
border: none;
color: #000000;
}Texto do botão
Use uma das três chamadas aprovadas. O verbo deve descrever a ação do fluxo, e a palavra “Kobana” nunca muda.
Fluxo de login para quem já tem conta no seu produto.
Fluxo de criação de conta.
Fluxo único que serve para login e cadastro, sem distinção na interface.
Outros idiomas
Traduza o verbo e a preposição para o idioma da interface — "Sign in with Kobana", "Iniciar sesión con Kobana" — mas mantenha "Kobana" sempre igual, com K maiúsculo. Se o texto traduzido não couber, prefira reduzir a largura do container antes de trocar para o modo ícone.
Modo ícone e uso do símbolo
O símbolo K só aparece sozinho dentro do limite de um botão de 40 × 40 px. Fora disso, ele precisa vir acompanhado do texto.
Sempre com rótulo acessível. No modo ícone, o botão não tem texto visível — use aria-label="Entrar com a Kobana" para que leitores de tela anunciem a ação.
A placa verde é padrão. Nos temas claro, escuro e neutro, use o K preto sobre a placa verde-limão. É o que garante o reconhecimento da marca em qualquer fundo.
Exceção no tema Kobana. Quando o botão já é verde-limão, a placa desaparece no fundo. Nesse caso, use o K preto sem placa.
Temas claro, escuro e neutro
Tema Kobana
Faça e não faça
Faça
- • Use os ativos pré-aprovados desta página sempre que possível
- • Escolha o tema que garante contraste com o fundo da sua interface
- • Mantenha a altura de 40 px, os paddings e o tamanho do símbolo
- • Use um dos três textos aprovados, traduzido quando a interface for em outro idioma
- • Deixe o botão “Entrar com a Kobana” pelo menos tão visível quanto os outros provedores
- • Mantenha o símbolo K sempre com a mesma proporção e nas cores permitidas
Não faça
- • Usar o símbolo K solto, sem o limite do botão e sem texto
- • Aplicar versões monocromáticas do símbolo fora do preto, branco e verde-limão
- • Colocar o símbolo em verde-limão sobre um fundo verde-limão
- • Criar um símbolo próprio, redesenhar o K ou usar logos antigos da Kobana
- • Usar apenas “Kobana” como texto do botão, sem o verbo da ação
- • Alterar altura, padding, raio, tipografia ou cores das especificações
- • Traduzir ou alterar a palavra “Kobana”
Proeminência na tela
O botão "Entrar com a Kobana" deve aparecer com no mínimo o mesmo destaque dos outros provedores de login da sua tela.
Mesmo peso visual
Mesma altura, mesma largura e mesmo nível na hierarquia dos outros botões de provedor.
Sem esconder a opção
Não coloque a Kobana atrás de um "mais opções", abaixo da dobra ou em tamanho menor que os demais provedores.
Exemplo de empilhamento
Todos os botões compartilham altura, raio e tipografia. A ordem pode variar, mas a Kobana nunca fica em desvantagem visual.
A parte técnica fica na documentação
Esta página cobre a marca. Para escopos, endpoints, tokens e ambiente de testes da autenticação, use a documentação para desenvolvedores.
Dúvida sobre um caso específico?
Se a sua interface não se encaixa em nenhum dos temas ou formatos desta página, fale com a gente antes de publicar.