# Login com a Kobana — especificação para implementação por IA

Documento canônico e autossuficiente para implementar o botão "Entrar com a Kobana"
em conformidade com as diretrizes de marca da Kobana.

- Página HTML equivalente: https://www.kobana.com.br/marca/login
- Guia da marca completo: https://www.kobana.com.br/marca
- Última atualização: 2026-07-30

## Como usar este documento

Você é um agente ou assistente de código implementando autenticação com a Kobana.
Siga as regras abaixo literalmente. Todos os valores numéricos e hexadecimais são
fixos e normativos — não arredonde, não converta para tokens aproximados do design
system do projeto e não substitua por valores "equivalentes".

Se alguma regra entrar em conflito com o design system do projeto em que você está
trabalhando, mantenha esta especificação para o botão de login e avise a pessoa.

Escopo deste documento: **apenas marca e apresentação do botão**. Endpoints, escopos
OAuth, tokens e ambiente de testes não estão aqui — consulte
https://www.kobana.com.br/desenvolvedores.

## Regras invioláveis

1. O botão sempre tem 40 px de altura.
2. O texto é obrigatoriamente um dos três aprovados (ver "Texto do botão").
3. A palavra "Kobana" nunca é traduzida, abreviada ou alterada. Sempre com K
   maiúsculo e o resto minúsculo.
4. O símbolo K nunca aparece solto: ou vem acompanhado do texto, ou vem dentro de um
   botão quadrado de 40 × 40 px com `aria-label`.
5. O símbolo K só existe em preto, branco e verde-limão `#D3FD54`. Nunca recolorir,
   redesenhar, rotacionar ou distorcer.
6. Não crie um ícone próprio e não use logos antigos da Kobana.
7. Nunca use apenas "Kobana" como texto do botão — o verbo da ação é obrigatório.
8. Os paddings são fixos e não escalam com o tamanho do texto.
9. O botão deve ter no mínimo o mesmo destaque visual dos outros provedores de login
   na mesma tela. Não esconda atrás de "mais opções", abaixo da dobra, nem em tamanho
   menor que os demais.

## Ativos oficiais

Use estas URLs diretamente ou baixe e sirva localmente. Não gere o símbolo K por
conta própria.

| Ativo | URL |
|---|---|
| Símbolo K, placa verde-limão (padrão) | https://www.kobana.com.br/brand/icon/kobana-icon-k-fundo-verde.svg |
| Símbolo K, placa preta | https://www.kobana.com.br/brand/icon/kobana-icon-k-fundo-preto.svg |
| Símbolo K preto, sem placa | https://www.kobana.com.br/brand/icon/kobana-icon-k-preto.svg |
| Símbolo K branco, sem placa | https://www.kobana.com.br/brand/icon/kobana-icon-k-branco.svg |
| Símbolo K verde-limão, sem placa | https://www.kobana.com.br/brand/icon/kobana-icon-k-verde.svg |
| Pack completo da marca (ZIP) | https://www.kobana.com.br/brand/kobana-brand-pack.zip |

## 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 |
| Fonte | Work Sans Medium (500), 14 px, line-height 20 px |
| Espessura do contorno | 1 px, desenhado por dentro do botão |

## Temas

Escolha o tema pelo contraste com o fundo da interface.

| Tema | Preenchimento | Contorno | Cor do texto | Símbolo K | Padding horizontal |
|---|---|---|---|---|---|
| `claro` | `#FFFFFF` | `#747775` | `#1F1F1F` | placa verde-limão | 11 px |
| `escuro` | `#131314` | `#8E918F` | `#E3E3E3` | placa verde-limão | 11 px |
| `neutro` | `#F2F2F2` | nenhum | `#1F1F1F` | placa verde-limão | 12 px |
| `kobana` | `#D3FD54` | nenhum | `#000000` | K preto, sem placa | 12 px |

Quando usar cada um:

- `claro` — fundos claros e neutros. É o tema padrão; use este se estiver em dúvida.
- `escuro` — interfaces em dark mode e fundos escuros.
- `neutro` — fundos claros em que o contorno do tema claro viraria ruído visual.
- `kobana` — apenas quando a Kobana for a integração em destaque e o entorno não usar
  verde-limão. Use com moderação.

Por que o padding muda: o contorno de 1 px é desenhado por dentro do botão. Nos temas
com contorno, 11 px de padding + 1 px de borda resultam nos mesmos 12 px de área útil
dos temas sem contorno.

Por que o símbolo muda no tema `kobana`: a placa verde-limão desapareceria sobre o
fundo verde-limão. Nesse caso — e somente nesse — use o K preto sem placa.

## Espaçamentos

Medidos 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 |

Na web, "12 px antes do símbolo" já considera a compensação do contorno descrita
acima: use `padding: 0 11px` nos temas com contorno e `padding: 0 12px` nos temas sem
contorno.

## Texto do botão

Use exatamente um destes três:

| Texto | Quando usar |
|---|---|
| `Entrar com a Kobana` | Login de quem já tem conta no seu produto. |
| `Cadastrar com a Kobana` | Criação de conta. |
| `Continuar com a Kobana` | Fluxo único que serve para login e cadastro. |

Localização: traduza o verbo e a preposição para o idioma da interface, mantendo
"Kobana" intacto.

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

Se o texto traduzido não couber, reduza a largura do container antes de trocar para o
modo ícone. Trocar para o modo ícone é o último recurso.

## Implementação de referência — 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>Entrar com a Kobana</span>
</button>
```

O `alt` da imagem é intencionalmente vazio: o texto do `<span>` já nomeia a ação, e um
`alt` preenchido faria o leitor de tela anunciar a marca duas vezes.

```css
.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 — símbolo K em preto, sem placa verde */
.kobana-signin--kobana {
  padding: 0 12px;
  background: #d3fd54;
  border: none;
  color: #000000;
}

/* Modo ícone: 40 × 40 px, sem texto */
.kobana-signin--icone {
  width: 40px;
  padding: 0;
  justify-content: center;
}
```

## Modo ícone

Use apenas quando o espaço não permitir o texto.

```html
<button
  class="kobana-signin kobana-signin--claro kobana-signin--icone"
  type="button"
  aria-label="Entrar com a Kobana"
>
  <img
    src="https://www.kobana.com.br/brand/icon/kobana-icon-k-fundo-verde.svg"
    alt=""
    width="18"
    height="18"
  />
</button>
```

O `aria-label` é obrigatório no modo ícone: sem ele, o botão não tem nome acessível.

## Implementação de referência — React

```tsx
type Theme = "claro" | "escuro" | "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",
  },
  escuro: {
    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 = "retangular",
  label = "Entrar com a Kobana",
  onClick,
}: {
  theme?: Theme;
  shape?: "retangular" | "pill";
  label?: "Entrar com a Kobana" | "Cadastrar com a Kobana" | "Continuar com a 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>
  );
}
```

Se o projeto tiver uma Content Security Policy sem `unsafe-inline` em `style-src`,
troque os objetos `style` por classes CSS — atributos `style` inline são bloqueados
nesse cenário.

## Checklist de verificação

Antes de considerar a implementação pronta, confirme cada item:

- [ ] Altura computada do botão é exatamente 40 px
- [ ] Símbolo K renderiza em 18 × 18 px, sem distorção
- [ ] Espaço entre símbolo e texto é 10 px (web/Android) ou 12 px (iOS)
- [ ] Padding horizontal é 11 px com contorno, 12 px sem contorno
- [ ] Fonte computada é 14 px / 20 px, peso 500
- [ ] Raio é 4 px (retangular) ou 20 px (pill)
- [ ] Preenchimento, contorno e cor do texto batem com a tabela de temas
- [ ] Texto é um dos três aprovados, com "Kobana" intacto
- [ ] No modo ícone, existe `aria-label` com o texto da ação
- [ ] O botão tem no mínimo o mesmo destaque dos outros provedores da tela
- [ ] Contraste do texto sobre o preenchimento passa em WCAG AA

## Erros comuns a evitar

| Erro | Correção |
|---|---|
| Usar o símbolo K solto como link de login | Envolva em botão com texto, ou use o modo ícone 40 × 40 com `aria-label` |
| Aplicar `height: 44px` para casar com outros botões | Mantenha 40 px; ajuste os outros botões |
| Recolorir o K para monocromático da marca do projeto | Use apenas as variantes oficiais |
| Escrever "Login Kobana" ou só "Kobana" | Use um dos três textos aprovados |
| Traduzir para "Entrar com a Cobana" ou "Kobana Login" | "Kobana" nunca muda |
| Colocar o K verde sobre fundo verde-limão | No tema `kobana`, use o K preto sem placa |
| Escalar o padding junto com o `font-size` | Paddings são fixos |
| Esconder a opção Kobana atrás de "mais opções" | Mesmo destaque dos demais provedores |

## Contato

Casos não cobertos por este documento: imprensa@kobana.com.br