# LINE Login button design guidelines
Add a LINE Login button to let your users log in to your application using LINE Login.
The LINE Login button is made up of the following components: the LINE icon, the LINE icon speech bubble, and the LINE Login button text.
Before using the LINE Login button, make sure you read and agree to the Usage Guidelines for the LINE Login Button (opens new window). By downloading the images, you are deemed to have agreed to the guidelines.
The file includes multiple sets of images in many resolutions that can be used with web, iOS, or Android applications. Use the PSD file to add customized login text in different languages.
# Design guidelines
Use these design guidelines when adding the LINE Login button to your app.
You can increase or decrease the size of the LINE Login button according to the device it will be displayed on as long as the image complies with the following conditions.
- The aspect ratio of the LINE icon does not change.
- The LINE icon remains clearly visible.
Only the following colors can be used for the LINE Login button.
- Basic color: #00C300
- Hover: #00E000
- Press: #00B300
- Disabled: #C6C6C6
- Font color: #FFFFFF
The recommended LINE login button text is "Log in with LINE". A list of recommended phrases for various languages can be found in the table below.
If you decide to use your own customized button text, make sure to follow these guidelines:
- No line breaks
- Text clearly indicates to the user that the button is for logging into the app with LINE
You can also use the LINE icon on its own without any button text as the LINE Login button.
|Language||Login button text (long)||Login button text (short)|
|en||Log in with LINE||Log in|
|de||Mit LINE anmelden||Anmelden|
|es||Iniciar sesión con LINE||Iniciar sesión|
|fr||Connexion avec LINE||Se connecter|
|id||Masuk dengan LINE||Masuk|
|it||Login con LINE||Login|
|ms||Log masuk dengan LINE||Log Masuk|
|pt-BR||Login com o LINE||Login|
|pt-PT||Iniciar sessão com o LINE||Iniciar sessão|
|ru||Войти в LINE||Войти|
|tr||LINE ile oturum açın||Oturum Aç|
|ar||تسجيل دخول باستخدام LINE||تسجيل دخول|
|vi||Đăng nhập với LINE||Đăng nhập|
The font of the button text must be readable. Recommended font sizes for each image size are included in the PSD files.
The width of the right and left padding for the login button text must be equal to or greater than the width of the LINE icon speech bubble. This width is defined as X in the image below.
The recommended height of the top and bottom padding for the login button text is X/2. Make sure you use a font size that allows for this padding to be maintained.
# Isolation zone
The isolation zone is the space surrounding the LINE Login button which cannot contain any elements. The width of the isolation zone must be equal to or greater than the left padding of the LINE icon speech bubble. The width is defined as "A" in the image below. In addition to maintaining the isolation zone, avoid placing text or graphics near the isolation zone as that could compromise the effectiveness of the LINE Login button.
# Common mistakes to avoid
- Using a non-designated color
- Using an outdated LINE icon
- Using a different or modified icon instead of using the LINE icon