Sign in with Kobana guidelines

How to display the Sign in with Kobana button: themes, shapes, spacing, typography and rules for using the K symbol.

Kobana K symbol in lime green on a black background

Implementing with help from AI?

Copy the markdown link for this page and paste it into your coding assistant. It holds the full specification, every fixed value and a reference implementation.

https://www.kobana.com.br/en/branding/login.md

Open markdown

Before you ship

Following these guidelines is mandatory for any integration that uses Kobana authentication. They exist so people immediately recognize which account they are signing in with — which cuts drop-off in the flow and avoids confusion about who holds the credentials. If your case is not covered here, talk to us before you ship.

Three ways to display the button

Choose in the order below: the higher up you go, the less chance the button ends up off-spec.

01
Pre-approved assets
Download the symbol SVG and assemble the button with the specifications on this page. It is the fastest route and it comes out compliant.
See the assets
02
Custom button
Build the button in your own design system, respecting the fill, stroke, height, radius, padding and typography specified below.
See specifications
03
Icon mode
A 40 × 40 px square button with the symbol only. Use it only when the space does not allow text — and always with an accessible label.
See icon mode

Pre-approved assets

Four themes in two shapes. All of them 40 px tall, set in Work Sans Medium 14/20, with an 18 px symbol.

Light theme

Light and neutral backgrounds. This is the default theme.

Rectangular — 4 px radius

Pill — 20 px radius

Fill: #FFFFFF
Stroke: #747775
Text: #1F1F1F
Symbol: K on lime plate

Dark theme

Dark mode interfaces and dark backgrounds.

Rectangular — 4 px radius

Pill — 20 px radius

Fill: #131314
Stroke: #8E918F
Text: #E3E3E3
Symbol: K on lime plate

Neutral theme

Light backgrounds where the light theme's stroke would be visual noise.

Rectangular — 4 px radius

Pill — 20 px radius

Fill: #F2F2F2
Stroke: no stroke
Text: #1F1F1F
Symbol: K on lime plate

Kobana theme

Use sparingly, when Kobana is the featured integration and the surroundings do not use lime green.

Rectangular — 4 px radius

Pill — 20 px radius

Fill: #D3FD54
Stroke: no stroke
Text: #000000
Symbol: black K

Download brand pack K symbol (SVG)

Button specifications

If you are going to build the button in your own design system, these values are fixed.

Colors per theme

Theme	Fill	Stroke	Text
Light	#FFFFFF	#747775	#1F1F1F
Dark	#131314	#8E918F	#E3E3E3
Neutral	#F2F2F2	—	#1F1F1F
Kobana	#D3FD54	—	#000000

The stroke is 1 px and is drawn inside the button. To preserve the usable area, use 11 px of horizontal padding on themes with a stroke and 12 px on themes without one.

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
Typography	Work Sans Medium 14/20
Stroke weight	1 px, inside

Spacing

Spacing is fixed and does not scale with the text. 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

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>

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 — use the black K symbol, with no lime plate */
.kobana-signin--kobana {
  padding: 0 12px;
  background: #d3fd54;
  border: none;
  color: #000000;
}

Button wording

Use one of the three approved calls to action. The verb must describe the action in the flow, and the word “Kobana” never changes.

Account creation flow.

A single flow that serves both login and sign-up, with no distinction in the interface.

Other languages

Translate the verb and the preposition into the interface language — "Entrar com a Kobana", "Iniciar sesión con Kobana" — but always keep "Kobana" exactly as it is, with a capital K. If the translated text does not fit, narrow the container before switching to icon mode.

Icon mode and symbol use

The K symbol only appears on its own inside the boundary of a 40 × 40 px button. Anywhere else, it must be accompanied by text.

Always with an accessible label. In icon mode the button has no visible text — use aria-label="Sign in with Kobana" so screen readers announce the action.

The lime plate is the default. On the light, dark and neutral themes, use the black K on the lime green plate. That is what guarantees brand recognition on any background.

Exception on the Kobana theme. When the button is already lime green, the plate disappears into the background. In that case, use the black K with no plate.

Light, dark and neutral themes

Kobana theme

Do and don't

Do

• Use the pre-approved assets on this page whenever possible
• Pick the theme that guarantees contrast with your interface background
• Keep the 40 px height, the paddings and the symbol size
• Use one of the three approved texts, translated when the interface is in another language
• Keep the “Sign in with Kobana” button at least as visible as the other providers
• Always keep the K symbol at the same proportions and in the permitted colors

Don't

• Using the K symbol on its own, without the button boundary and without text
• Applying monochrome versions of the symbol outside black, white and lime green
• Placing the lime green symbol on a lime green background
• Creating your own symbol, redrawing the K or using old Kobana logos
• Using only “Kobana” as the button text, without the action verb
• Changing the height, padding, radius, typography or colors in the specifications
• Translating or altering the word “Kobana”

Prominence on screen

The "Sign in with Kobana" button must appear at least as prominently as the other sign-in providers on your screen.

Same visual weight

Same height, same width and the same level in the hierarchy as the other provider buttons.

Do not hide the option

Do not place Kobana behind a "more options" link, below the fold, or at a smaller size than the other providers.

Stacking example

Every button shares the same height, radius and typography. The order can vary, but Kobana is never at a visual disadvantage.

The technical part lives in the docs

This page covers the brand. For scopes, endpoints, tokens and the test environment for authentication, head to the developer documentation.

See documentation Brand guidelines

Have a question about a specific case?

If your interface does not fit any of the themes or shapes on this page, talk to us before you ship.

Talk to us Download the assets

Sign in with Kobana guidelines

Implementing with help from AI?

Before you ship

Three ways to display the button

Pre-approved assets

Custom button

Icon mode

Pre-approved assets

Light theme

Dark theme

Neutral theme

Kobana theme

Button specifications

Colors per theme

Fixed measurements

Spacing

Button wording

Other languages

Icon mode and symbol use

Do and don't

Do

Don't

Prominence on screen

Same visual weight

Do not hide the option

The technical part lives in the docs

Have a question about a specific case?