This document provides the design guidelines for the Kakao Sync login button.
You must comply with the following design guidelines when adding the Kakao Sync login button to your service. You can use the Kakao Sync login button on signup pages, login pages, or integrated signup and login pages.
The standard label consists of "Start", which represents the action, and "with Kakao", which represents the tool. Depending on the environment and purpose of the button, you can use the simple version, "Start".
Kakao provides the standard Kakao Sync login buttons with the recommended size and aspect ratio. You can download the PNG and PSD files from [Tools] > [Resource Download] > [Kakao Sync] > [Login]. If you need to customize the button for your service environment, select [Download all(.zip)] to download and edit the original PSD files.
The Kakao Sync login button consists of a chat bubble-shaped symbol representing Kakao, a label that describes the button action, and a container that wraps the symbol and label.
It is recommended to use the [standard buttons] (#kakaosync-button-standard). However, if you need to adjust the Kakao Sync login button for your service UI or UX, you may customize the button as long as you follow the rules below. Please note that using colors or formats that do not comply with these guidelines can harm the Kakao Sync identity and cause confusion.
| Component | Color |
|---|---|
| Container | #FEE500 |
| Symbol | #000000, 90% |
| Label | #191919 |
- Do not use undesignated colors other than the designated colors above.
- Do not highlight another company's login button by leaving the Kakao Sync login button uncolored.
- 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 other symbols or Kakao CI 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 direction of the symbol.
- The symbol must have the same visual weight as symbols in other login buttons.
- Use the default system font 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 labels other than the designated labels above.
- Set the corner radius to 6 dp (12 pixels) for the container box.
- Do not highlight another company's login button by using a different size for the Kakao Sync login button.
If you need to increase the width of the container:
- Extend the container equally to the left and right while maintaining the vertical ratio in the fixed area.
- Left-align or center-align the symbol with the label.
- Do not change the kerning and size of the label.
If you need to increase the overall size of the container:
- Scale up the symbol and label in proportion to the container size.
- 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 are resources needed to create a marketing tool that encourages Kakao Sync signup. Each component must not be modified arbitrarily, and you must create a marketing tool by following the guidelines below. See Kakao Sync marketing tools, provided in Korean only.