Creating a custom button
If the system-provided button doesn’t provide you with enough flexibility, you can create a custom button. This option requires you to keep the button up to date with Klarna’s branding guidelines.
Below we’ve outlined the essential considerations for designing a custom Sign in with Klarna button, including consistent use of Klarna's logo and color scheme, ensuring recognizability, and adhering to best practices for user interaction design.
Centered around the iconic Klarna pink, our primary palette runs the show in our visual world. Friendly Klarna off white and bold Klarna black help create a balanced, approachable look. More details here.
The three colors that are key to Klarna's branding: Klarna pink (#FFA8CD), Klarna off white (#F9F8F5), and Klarna black (#0B051D).
We strongly advise to only use Klarna Black (hex value #0B051D), white (hex value #FFFFFF) or Klarna off white (hex value #F9F8F5) for the button's background color.
Don't use Klarna Pink and colors from your own brand as the background color.
Use Klarna black, white, or Klarna off white as the button's background color.
Avoid using Klarna pink, your own brand colors, and gradients as background colors.
Including Klarna’s trademark is essential to the success of the button as it creates instant recognizability.
You can read more about the Klarna trademark and Klarna icon on the Klarna brand guidelines website.
We suggest using the Klarna badge whenever possible.
If you're using the Klarna badge in your custom button, make sure to leave clear space that corresponds to at least the height of our wordmark.
The minimum clear space for the badge is defined by the height of our wordmark.
Download the Klarna badge in your preferred format and color by clicking one of the thumbnails in the gallery below:
Limited space? Need the button to align with other sign in methods? Use the Klarna icon.
Download the Klarna icon in your preferred format and color by clicking one of the thumbnails in the gallery below:
