페이지 이동경로
  • Docs>
  • Reference Information>
  • Design Guide

Reference Information

Design guide

This document provides the standard guidelines to help you to create design elements required for Kakao services, such as the Kakao Login button, Kakao Sync login button, or Kakao Sync marketing tools.

Kakao Login button

We recommend complying with the following design guidelines when you add the Kakao Login button when integrating the Kakao Login function in your service.

Components

The Kakao Login button consists of a symbol that looks like a chat bubble, a label that guides what users can do with the button, and a container that wraps the two components.

Composition of Kakao Login button
Standard design

Kakao provides the standard Kakao Login buttons with the recommended size and aspect ratio. You can download the buttons with the PNG and PSD file extensions in [Tools] > [Resource Download]. If you need to customize the button according to your service environment, download the original PSD files by clicking [Download all(.zip)] and modify the files.

Standard Kakao Login buttons
Design guidelines

Kakao provides not only the standard buttons for you to apply them in your service more easily but also provides flexibility to customize the buttons according to the user interface or user experience in your service. However, you still must follow the design guidelines for the buttons so as not to damage Kakao's unique identity.

Color

Component Color
Container #FEE500
Symbol #000000
Label #000000 85%
  • Do not use undesignated colors other than the designated colors above.
  • The Kakao Login button must remain in color to avoid calling attention to other company’s buttons.
Bad example of buttons that use wrong colors

Label

  • You can use either a complete or simple version for the label as follows:
Korean English
Complete version 카카오 로그인 Login with Kakao
Simple version 로그인 Login
  • Use the system font set as a default for each OS with a font size of #30 points (Sp/Dp) for the label.

Symbol

  • Use the chat bubble-shaped symbol representing Kakao as the symbol.
  • Do not change the shape, ratio, and color of the symbol.
  • Do not use Kakao Talk icon as the symbol.
  • Do not use Kakao CI as the symbol.
  • Do not use other icons as the symbol.
  • Do not configure the Kakao Login button without the symbol.
Bad example of buttons that use wrong symbols

Container

  • Set the corner radius to 12 pixels for the container box.
Guideline for container usage

Change size

If you need to increase the width of the container:

  • Extend only the container in a horizontal direction except for the label and symbol area.
  • Left-align or center-align the symbol with the label.
  • Do not change the kerning and size of the label.
Guideline for button size change

If you need to increase the overall size of the container:

  • Scale up the container with the same aspect ratio of the Symple and label.
  • The height of the label should not exceed 1/3 of the height of the container.

If you need a button smaller than the standard button:

  • Use the simple version, the [Login] button, rather than adjusting the aspect ratio of the Kakao Login button forcefully.

Kakao Sync login button

You must comply with the following design guidelines when you add the Kakao Sync login button when applying the Kakao Sync function to your service. You can use the Kakao Sync login buttons for the signup page, the login page or any website with a combination of both of these.

Components

The Kakao Sync login button consists of a symbol that looks like a chat bubble, a label that guides what users can do with the button, and a container that wraps the two components.

Composition of Kakao Sync login button
Standard design

The Kakao Sync login button's label consists of 'Start' representing of a function and 'with Kakao' representing a tool. According to the environment and purpose of the button, you can use the simple version, 'Start'.

Standard Kakao Sync login buttons

Kakao provides the standard Kakao Sync login buttons with the recommended size and aspect ratio. You can download the buttons with the PNG and PSD file extensions in [Tools] > [Resource Download]. If you need to customize the button according to your service environment, download the original PSD files by clicking [Download all(.zip)] and modify the files.

Design guidelines

Kakao provides not only the standard buttons for you to apply them in your service more easily but also provides flexibility to customize the buttons according to the user interface or user experience in your service. However, you still must follow the design guidelines for the buttons. The buttons in different colors and formats from the guidelines disturb communication and damage Kakao Sync's unique identity.

Color

Component Color
Container #FEE500
Symbol #000000, 90%
Label #191919
  • Do not use undesignated colors other than the designated colors above.
  • Do not highlight other company’s buttons by using the uncolored Kakao Sync login button.
Bad example of buttons that use wrong colors

Symbol

  • Use the chat bubble-shaped icon representing Kakao as the symbol.
  • Do not change the shape, ratio, and color of the symbol.
  • Do not use Kakao Talk icon as the symbol.
  • Do not use Kakao CI as the symbol.
  • Do not use other icons as the symbol.
  • Do not configure the Kakao Sync login button without the symbol.
  • Do not omit the symbol.
  • Do not use the outline icon instead of the filled-in symbol.
  • Do not change the order of the label and the symbol.
  • The symbol must have the same visual impact as the other buttons's symbols.
Bad example of buttons that use wrong symbols

Label

  • Use the system font set as a default for each OS with a font size of #30 points (Sp/Dp) for the label.
  • You can use either a complete or simple version for the label as follows:
Korean English
Complete version 카카오로 시작하기 Start with Kakao
Simple version 시작하기 Start
  • Do not use undesignated labels other than the designated labels above.
Bad example of button that uses different label

Container

  • Set the corner radius to 6 dp (12 pixels) for the container box.
Guideline for container usage
  • Do not highlight other company’s buttons by using the Kakao Sync login button with a different size.
Bad example of container

Change size

If you need to increase the width of the container:

  • Extend only the container in a horizontal direction except for the label and symbol area.
  • Left-align or center-align the symbol with the label.
  • Do not change the kerning and size of the label.
Guideline for button size change

If you need to increase the overall size of the container:

  • Scale up the container with the same aspect ratio of the Symple and label.
  • The height of the label should not exceed 1/3 of the height of the container.

If you need a button smaller than the standard button:

  • Use the simple version, the [Start] button, rather than adjusting the aspect ratio of the Kakao Sync login button forcefully.

Kakao Sync marketing tools

NOTE

This documentation is available in Korean only. Refer to the original Korean documentation.