Motion

Our motion identity reimagines familiar digital elements—and gives them a Curiously Bold twist.

Motion principles

Informed by Klarna’s three creative principles, these three pillars are our essential guides for creating cohesive, impactful motion design. They should all be used together when crafting animations. Find our presets on the resources pages.

SIMPLE

We make simple, well-crafted choices to tell straight up, engaging stories through motion. By avoiding clutter, we create a balanced look that delivers maximum impact.

0

purposeful

We stay strikingly relevant by creating a clear sense of purpose in movement. Using anticipation, continuity, pause and action to bring meaning and rhythm to the story we’re telling.

0

PLAYFUL

As offbeat optimists, we use motion to bring excitement and value to our audience’s experience. We think outside the box, with subtle, playful twists that flip expectations.

0

Motion formats

We use two different motion formats at Klarna.

  • 0

    Standard

    This is our most commonly used motion format. Length: 2” - 3”.

  • 0

    Basic

    We use this format when we have limited time and need to create short animations that still maintain Klarna’s look and feel. Length: 1” - 2”.

Badge animation

The motion badge is our main logo animation, ideal for most productions. Inspired by the dynamic push of a button, it’s used consistently at the start of each video to spark the narrative. It’s designed to be paired with the outro and final CTA for a unified, impactful ending.

Standard

  • 0

    Intro

  • 0

    Outro

BASIC

  • 0

    Intro

  • 0

    Outro

Wordmark animation

This is designed for situations where our badge animations might not be the best fit, for instance where we have a pink background with pink imagery.

  • 0

    Standard: Intro/Outro

  • 0

    Basic: Intro/Outro

Typography animation

Our handy collection of pre-made text animations is inspired by the dynamic actions within our app, like the push and scroll interactions. While custom typography animations can be created for specific projects, they should align with our motion principles.

Standard

  • 0

    Push by word

  • 0

    Scroll

Basic

  • 0

    Push by line

  • 0

    Scroll

Transitions

Transitions, which are inspired by the app's scroll and swipe, bring a lively and dynamic touch to videos. But avoid overusing them—simple cuts are still a valid and effective choice for a balanced, polished visual flow.

Standard

  • 0

    Swipe

    When using transitions in our grid: 1. Make sure the footage pushes objects and doesn't overlay them. 2. Position graphic elements under the footage, gradually revealing them for a stronger visual impact.

  • 0

    Push + Scroll

    A useful way to add dynamism and playfulness, but should be used sparingly.

UI animations

We use the Material 3 Standard easing set as the primary reference for UI animations. For more details, check out the Material 3 motion page.

  • 0

    Standard

  • 0

    Standard accelerate

  • 0

    Standard decelerate

Misuse

Here’s what to steer clear of when creating animations.

  • 0

    Do not use an animated gradient.

  • 0

    Do not stretch shapes or typography.

  • 0

    Do not use motion blur.