# Sign in with Kobana — implementation specification for AI

Canonical, self-contained document for implementing the "Sign in with Kobana"
button in compliance with Kobana's brand guidelines.

- Equivalent HTML page: https://www.kobana.com.br/en/branding/login
- Full brand guidelines: https://www.kobana.com.br/en/branding
- Last updated: 2026-07-30

## How to use this document

You are an agent or coding assistant implementing authentication with Kobana.
Follow the rules below literally. Every numeric and hexadecimal value is fixed
and normative — do not round them, do not convert them to approximate tokens
from the project's design system, and do not substitute "equivalent" values.

If any rule conflicts with the design system of the project you are working in,
keep this specification for the sign-in button and tell the person.

Scope of this document: **brand and button presentation only**. Endpoints, OAuth
scopes, tokens and the test environment are not covered here — see
https://www.kobana.com.br/en/developers.

## Non-negotiable rules

1. The button is always 40 px tall.
2. The text must be one of the three approved options (see "Button wording").
3. The word "Kobana" is never translated, abbreviated or altered. Always a
   capital K with the rest lowercase.
4. The K symbol never appears on its own: it either comes with text, or it sits
   inside a 40 × 40 px square button with an `aria-label`.
5. The K symbol only exists in black, white and lime green `#D3FD54`. Never
   recolor, redraw, rotate or distort it.
6. Do not create your own icon and do not use old Kobana logos.
7. Never use only "Kobana" as the button text — the action verb is mandatory.
8. Padding is fixed and does not scale with the text size.
9. The button must be at least as visually prominent as the other sign-in
   providers on the same screen. Do not hide it behind "more options", below the
   fold, or at a smaller size than the others.

## Official assets

Use these URLs directly, or download and serve them locally. Do not generate the
K symbol yourself.

| Asset | URL |
|---|---|
| K symbol, lime green plate (default) | https://www.kobana.com.br/brand/icon/kobana-icon-k-fundo-verde.svg |
| K symbol, black plate | https://www.kobana.com.br/brand/icon/kobana-icon-k-fundo-preto.svg |
| Black K symbol, no plate | https://www.kobana.com.br/brand/icon/kobana-icon-k-preto.svg |
| White K symbol, no plate | https://www.kobana.com.br/brand/icon/kobana-icon-k-branco.svg |
| Lime green K symbol, no plate | https://www.kobana.com.br/brand/icon/kobana-icon-k-verde.svg |
| Full brand pack (ZIP) | https://www.kobana.com.br/brand/kobana-brand-pack.zip |

## Fixed measurements

| Property | Value |
|---|---|
| Button height | 40 px |
| Radius — rectangular shape | 4 px |
| Radius — pill shape | 20 px |
| K symbol size | 18 × 18 px |
| Button in icon mode | 40 × 40 px |
| Font | Work Sans Medium (500), 14 px, line-height 20 px |
| Stroke weight | 1 px, drawn inside the button |

## Themes

Pick the theme based on contrast with the interface background.

| Theme | Fill | Stroke | Text color | K symbol | Horizontal padding |
|---|---|---|---|---|---|
| `light` | `#FFFFFF` | `#747775` | `#1F1F1F` | lime green plate | 11 px |
| `dark` | `#131314` | `#8E918F` | `#E3E3E3` | lime green plate | 11 px |
| `neutral` | `#F2F2F2` | none | `#1F1F1F` | lime green plate | 12 px |
| `kobana` | `#D3FD54` | none | `#000000` | black K, no plate | 12 px |

When to use each:

- `light` — light and neutral backgrounds. This is the default; use it if unsure.
- `dark` — dark mode interfaces and dark backgrounds.
- `neutral` — light backgrounds where the light theme's stroke would be noise.
- `kobana` — only when Kobana is the featured integration and the surroundings do
  not use lime green. Use sparingly.

Why the padding changes: the 1 px stroke is drawn inside the button. On themes
with a stroke, 11 px of padding plus 1 px of border give the same 12 px of usable
area as the themes without a stroke.

Why the symbol changes on the `kobana` theme: the lime green plate would vanish
against a lime green background. In that case — and only that case — use the
black K with no plate.

## Spacing

Measured from the edge to the symbol, from the symbol to the text and from the
text to the opposite edge.

| Platform | Before the symbol | Symbol → text | After the text |
|---|---|---|---|
| Web and Android | 12 px | 10 px | 12 px |
| iOS | 16 px | 12 px | 16 px |

On the web, "12 px before the symbol" already accounts for the stroke
compensation described above: use `padding: 0 11px` on themes with a stroke and
`padding: 0 12px` on themes without one.

## Button wording

Use exactly one of these three:

| Text | When to use it |
|---|---|
| `Sign in with Kobana` | Login for people who already have an account in your product. |
| `Sign up with Kobana` | Account creation. |
| `Continue with Kobana` | A single flow serving both login and sign-up. |

Localization: translate the verb and the preposition into the interface
language, keeping "Kobana" untouched.

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

If the translated text does not fit, narrow the container before switching to
icon mode. Switching to icon mode is a last resort.

## Reference implementation — HTML + CSS

```html
<button class="kobana-signin kobana-signin--light" type="button">
  <img
    src="https://www.kobana.com.br/brand/icon/kobana-icon-k-fundo-verde.svg"
    alt=""
    width="18"
    height="18"
  />
  <span>Sign in with Kobana</span>
</button>
```

The image `alt` is intentionally empty: the `<span>` text already names the
action, and a filled `alt` would make screen readers announce the brand twice.

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

/* 10px between the symbol and the text */
.kobana-signin > span {
  margin-left: 10px;
  white-space: nowrap;
}

/* Light theme — 11px of padding offsets the 1px stroke */
.kobana-signin--light {
  padding: 0 11px;
  background: #ffffff;
  border: 1px solid #747775;
  color: #1f1f1f;
}

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

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

/* Kobana theme — black K symbol, no lime plate */
.kobana-signin--kobana {
  padding: 0 12px;
  background: #d3fd54;
  border: none;
  color: #000000;
}

/* Icon mode: 40 × 40 px, no text */
.kobana-signin--icon {
  width: 40px;
  padding: 0;
  justify-content: center;
}
```

## Icon mode

Use only when the space does not allow text.

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

The `aria-label` is mandatory in icon mode: without it the button has no
accessible name.

## Reference implementation — React

```tsx
type Theme = "light" | "dark" | "neutral" | "kobana";

const THEMES: Record<Theme, { style: React.CSSProperties; icon: string }> = {
  light: {
    style: { background: "#FFFFFF", border: "1px solid #747775", color: "#1F1F1F", padding: "0 11px" },
    icon: "kobana-icon-k-fundo-verde",
  },
  dark: {
    style: { background: "#131314", border: "1px solid #8E918F", color: "#E3E3E3", padding: "0 11px" },
    icon: "kobana-icon-k-fundo-verde",
  },
  neutral: {
    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 = "light",
  shape = "rectangular",
  label = "Sign in with Kobana",
  onClick,
}: {
  theme?: Theme;
  shape?: "rectangular" | "pill";
  label?: "Sign in with Kobana" | "Sign up with Kobana" | "Continue with 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>
  );
}
```

If the project has a Content Security Policy without `unsafe-inline` in
`style-src`, swap the `style` objects for CSS classes — inline `style`
attributes are blocked in that scenario.

## Verification checklist

Before considering the implementation done, confirm each item:

- [ ] Computed button height is exactly 40 px
- [ ] K symbol renders at 18 × 18 px, undistorted
- [ ] Gap between symbol and text is 10 px (web/Android) or 12 px (iOS)
- [ ] Horizontal padding is 11 px with a stroke, 12 px without
- [ ] Computed font is 14 px / 20 px, weight 500
- [ ] Radius is 4 px (rectangular) or 20 px (pill)
- [ ] Fill, stroke and text color match the theme table
- [ ] Text is one of the three approved options, with "Kobana" untouched
- [ ] In icon mode, an `aria-label` carries the action text
- [ ] The button is at least as prominent as the other providers on the screen
- [ ] Text contrast against the fill passes WCAG AA

## Common mistakes to avoid

| Mistake | Fix |
|---|---|
| Using the K symbol alone as a sign-in link | Wrap it in a button with text, or use 40 × 40 icon mode with `aria-label` |
| Setting `height: 44px` to match other buttons | Keep 40 px; adjust the other buttons instead |
| Recoloring the K to the project's monochrome brand | Use only the official variants |
| Writing "Kobana Login" or just "Kobana" | Use one of the three approved texts |
| Translating to "Sign in with Cobana" or "Kobana Login" | "Kobana" never changes |
| Placing the lime green K on a lime green background | On the `kobana` theme, use the black K with no plate |
| Scaling padding along with `font-size` | Padding is fixed |
| Hiding the Kobana option behind "more options" | Same prominence as the other providers |

## Contact

Cases not covered by this document: imprensa@kobana.com.br