Finance / iOS / Android / Web

Klarna

Klarna keeps the page warm white and near-black and lets its pink do the branding, with tight condensed headlines and a pill for every control.

Download
  • #FFA8CD
  • #0B051D
  • #F9F8F5
  • #F3F3F5
  • #7039E2
  • #E6FFA9

Color

Every color token in the file, grouped by role.

Brand

  • primary#0B051D
  • on primary#F9F8F5
  • brand#FFA8CD
  • on brand#0B051D
  • secondary#F3F3F5
  • accent#7039E2
  • accent text#582FB4
  • accent subtle#EFECFF

Surfaces

  • canvas#FFFFFF
  • container#F8F7FA

Text

  • ink#0B051D
  • ink body#282636
  • ink subtle#504F5F
  • ink placeholder#615F6D
  • ink disabled#94939E

Lines

  • border#E2E2E7
  • border neutral#C4C3CA

Status

  • positive#046234
  • positive subtle#E6FCEB
  • negative#AE1D1D
  • negative subtle#FFE6E6
  • warning#FBC64D

More

  • neutral#E2E2E7
  • off white#F9F8F5
  • eggplant#2C2242
  • sticky note#E6FFA9

Typography

Each style is set with the file's own family, size, weight and spacing.

  • Klarna TitleKlarna Title is private and not available in open fonts. Shown in Barlow Condensed, the closest open match.
  • Klarna TextKlarna Text is private and not available in open fonts. Shown in DM Sans, the closest open match.
  • -apple-systemNot served by an open font library, so it falls back through the file's own stack.
  • display64px / 700 / 62px

    Klarna

  • headline44px / 700 / 48px

    Klarna

  • title32px / 700 / 32px

    Klarna

  • lead20px / 400 / 28px

    Pack my box with five dozen liquor jugs

  • body16px / 400 / 24px

    The quick brown fox jumps over the lazy dog

  • button16px / 500 / 20px

    Continue to checkout

  • chip14px / 500 / 16px

    Continue to checkout

Shape

Corner radius tokens.

  • radius 44px
  • radius 88px
  • radius 1616px
  • radius 2424px
  • radius 3232px
  • round99999px

Spacing

The spacing scale, drawn to size.

  • space 44px
  • space 88px
  • space 1616px
  • space 2424px
  • space 3232px
  • space 4848px
  • space 8080px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • button brand
    button-brand
  • button secondary
    button-secondary
  • filter chip
    filter-chip
  • badge pop
    badge-pop
  • inverse panel
    inverse-panel
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 134 lines
version: alpha
name: Klarna-design-analysis
description: "A payments and shopping app drawn from a role-named token set: Klarna pink (#ffa8cd) for brand moments, near-black ink (#0b051d) for text and the main button, warm off-white, condensed Klarna Title headlines set tight, Klarna Text for reading and full pills for every control."
status: Draft
appVersion: "measured in a browser and read from the design tokens the live site ships, 2026-10-15"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#0b051d"
  on-primary: "#f9f8f5"
  brand: "#ffa8cd"
  on-brand: "#0b051d"
  secondary: "#f3f3f5"
  ink: "#0b051d"
  ink-body: "#282636"
  ink-subtle: "#504f5f"
  ink-placeholder: "#615f6d"
  ink-disabled: "#94939e"
  canvas: "#ffffff"
  container: "#f8f7fa"
  neutral: "#e2e2e7"
  border: "#e2e2e7"
  border-neutral: "#c4c3ca"
  off-white: "#f9f8f5"
  eggplant: "#2c2242"
  accent: "#7039e2"
  accent-text: "#582fb4"
  accent-subtle: "#efecff"
  positive: "#046234"
  positive-subtle: "#e6fceb"
  negative: "#ae1d1d"
  negative-subtle: "#ffe6e6"
  warning: "#fbc64d"
  sticky-note: "#e6ffa9"

typography:
  # Font note: "Klarna Title" is a private font and is not available in open fonts. Closest open alternative: "Barlow Condensed".
  # Font note: "Klarna Text" is a private font and is not available in open fonts. Closest open alternative: "DM Sans".
  display:
    fontFamily: "'Klarna Title', -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 62px
  headline:
    fontFamily: "'Klarna Title', -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 44px
    fontWeight: 700
    lineHeight: 48px
  title:
    fontFamily: "'Klarna Title', -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 32px
  lead:
    fontFamily: "'Klarna Text', -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 28px
  body:
    fontFamily: "'Klarna Text', -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  button:
    fontFamily: "'Klarna Text', -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 20px
  chip:
    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 16px

rounded:
  radius-4: 4px
  radius-8: 8px
  radius-16: 16px
  radius-24: 24px
  radius-32: 32px
  round: 99999px

spacing:
  space-4: 4px
  space-8: 8px
  space-16: 16px
  space-24: 24px
  space-32: 32px
  space-48: 48px
  space-80: 80px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.round}"
    height: 52px
    padding: 15px 20px
  button-brand:
    backgroundColor: "{colors.brand}"
    textColor: "{colors.on-brand}"
    typography: "{typography.button}"
    rounded: "{rounded.round}"
    height: 52px
    padding: 15px 20px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.round}"
    height: 52px
    padding: 15px 20px
  filter-chip:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.chip}"
    rounded: "{rounded.round}"
    height: 38px
    padding: 8px 20px
  badge-pop:
    backgroundColor: "{colors.sticky-note}"
    textColor: "{colors.ink}"
    typography: "{typography.chip}"
    rounded: "{rounded.round}"
    padding: 4px 8px
  inverse-panel:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.display}"
    rounded: "{rounded.radius-32}"
    padding: 48px

Overview

Klarna lets people pay later, pay in parts and shop across many stores, in its app and at checkout. Its site is drawn from a token set that ships with the live pages, named by role for backgrounds, text, borders, buttons, badges, overlays and charts. The look is warm white and near-black, with Klarna pink for brand moments, tight condensed headlines and full pills everywhere. [Measured]

What defines the look:

  1. Near-black, not black. #0b051d is the default text, the main button and the inverse panel color, with warm off-white #f9f8f5 for text on top of it. [Measured]
  2. Klarna pink for brand. #ffa8cd is its own token family (background brand, button brand, badge brand) and fills Learn more and Get the app on the home page. [Measured]
  3. Condensed, tight headlines. Klarna Title at 700 with a line height below the size (64 on 62). [Measured]
  4. Pills for every control. Buttons, chips and the language picker use a round radius of 99999. Buttons are 52 high. [Measured]
  5. A full status set. Accent violet, positive green, warning amber and negative red each have a strong value, a subtle wash, a text value and a heading value. [Measured]

Source for this file: the United States home page, the store directory and the customer service page, measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass, plus the role-named tokens the live site declares on its root element. Klarna's brand guidelines site loaded with very little content and was not used. The app and checkout sit behind an account. No app captures were used. See Known Gaps.

Core

Colors

RoleValueToken name in the shipped set
Main button and ink#0b051dbtn primary, text default, bg inverse, klarna black [Measured]
Text on dark#f9f8f5text inverse, klarna off-white [Measured]
Brand pink#ffa8cdbg brand, btn brand, klarna pink [Measured]
Second button#f3f3f5btn secondary, bg subtle [Measured]
Body and subtle text#282636, #504f5ftext body, text subtle [Measured]
Placeholder and disabled#615f6d, #94939etext placeholder, disabled [Measured]
Surfaces#ffffff, #f8f7fa, #e2e2e7bg page, container, neutral [Measured]
Borders#e2e2e7, #c4c3ca, active #0b051dborder default, neutral, active [Measured]
Accent#7039e2, text #582fb4, wash #efecffbg accent, text accent and link [Measured]
Positive#046234, wash #e6fcebbg positive [Measured]
Negative#ae1d1d, wash #ffe6e6bg negative, btn danger [Measured]
Warning#fbc64d, wash #fff5e4bg warning [Measured]
Brand extraseggplant #2c2242, balloon #b798be, herring #e4e3df, sticky note #e6ffa9klarna brand colors [Measured]
Badge pop#cff066badge pop [Measured]

Overlays are black at 4 percent for hover, 8 for press and 16 for dialogs, and white at 12 and 16 percent on dark. Charts use twelve named data colors. [Measured]

Typography

RoleDesktopMobileFace and weight
Display64 on 6252 on 50Klarna Title 700 [Measured]
Headline44 on 4832 on 32Klarna Title 700 [Measured]
Directory title52 on 5640 on 40Klarna Title 700 [Measured]
Big product word100 on 4052 on 32Klarna Title 700 [Measured]
Lead20 on 2818 on 28Klarna Text 400 [Measured]
Body16 on 24sameKlarna Text or system 400 [Measured]
Button16 on 20sameKlarna Text 500 [Measured]
Directory chip16 on 2014 on 16system font 500 [Measured]

A Klarna Mono face is named for monospace text. [Measured]

Shape and spacing

Radius tokens are 2, 4, 8, 12, 16, 24 and 32 plus round. In use: buttons and chips round, cards 16 and 32, large panels 48. [Measured] Space tokens are 4, 8, 12, 16, 20, 24, 32, 40, 48, 64 and 80. Buttons carry 15 by 20 padding. [Measured]

Iconography and motion

Not measured. [Inferred]

Themes

Light on the web. The token set carries inverse values for dark panels, and the dark color scheme pass changed nothing. [Measured]

Platform: iOS

How the Klarna iOS app looks and behaves was not captured. The token set ships on the web, but its documentation is not public, so it cannot be shown that the apps use the same set. Every item below is inferred. No device capture was done.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Not measured. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

A bottom tab bar for shopping, payments, the card and the profile is expected. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

A near-black pill for paying or a pink brand pill for shopping. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The app is expected to share the near-black, the pink, the pills and Klarna Title with the web. [Inferred]

Platform: Android

How the Klarna Android app looks and behaves was not captured. The token set ships on the web, but its documentation is not public, so it cannot be shown that the apps use the same set. Every item below is inferred. No device capture was done.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

Not measured. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A bottom navigation bar for shopping, payments, the card and the profile is expected. [Inferred]

Main action

Expected on Android: Floating action button.

A near-black pill for paying or a pink brand pill for shopping. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The app is expected to share the near-black, the pink, the pills and Klarna Title with the web. [Inferred]

Platform: Web

The home page, store directory and customer service page, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A top bar with menus, a 44 high outlined language pill with a 1px #e2e2e7 border, and sign-in. Feature tabs on the home page are 64 high text rows on desktop and 44 on mobile. [Measured]

Main action

Expected on Web: Page-level button.

A near-black #0b051d pill with off-white 16px medium text, 52 high with 15 by 20 padding ("Sign in to chat"). On the home page, the same pill in Klarna pink with dark text. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Dialogs sit over black at 16 percent, per the tokens. [Measured]

Controls

Expected on Web: Native or custom.

Store directory filters are white pills with a 1px #e2e2e7 border, 38 high on desktop and 34 on mobile. Second actions are #f3f3f5 pills, 52 high. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values that step down at the mobile width. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Buttons are 52 high, the language pill 44, filter chips 34 to 38. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

Customer chat requires signing in. Sign-in options were not checked. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

A responsive site that keeps pills and tight headlines at every width. The directory sets chips in the system font rather than Klarna Text. [Measured]

Cross-platform consistency

Consistent across platforms: near-black and pink, round pills and Klarna Title. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Use near-black for text and the main button, and off-white for text on near-black.
  • Spend Klarna pink on brand moments, not on status.
  • Set headlines condensed, bold and tight (line height under the size).
  • Make every button and chip a full pill.

Don't

  • Don't use pure black or pure white text on dark. Use the near-black and off-white pair.
  • Don't use pink for errors or warnings. Status colors have their own tokens.
  • Don't use square corners on controls.

Known Gaps

  • The app, checkout and the signed-in account were not measured.
  • The iOS and Android apps were not captured. The token set ships on the web, but its documentation is not public, so every mobile topic is inferred.
  • Icons, motion and dialogs themselves were not measured.
  • Klarna Title and Klarna Text are private. Barlow Condensed (about 3 percent narrower at 64px, similar condensed bold forms) and DM Sans (within 1 percent at 20px) were chosen by comparing the same line side by side. Fjalla One matched Title width more closely but its shapes are heavier.
  • Account deletion and store policy rules were not verified.