--- 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 | Role | Value | Token name in the shipped set | |------|-------|-------------------------------| | Main button and ink | `#0b051d` | btn primary, text default, bg inverse, klarna black [Measured] | | Text on dark | `#f9f8f5` | text inverse, klarna off-white [Measured] | | Brand pink | `#ffa8cd` | bg brand, btn brand, klarna pink [Measured] | | Second button | `#f3f3f5` | btn secondary, bg subtle [Measured] | | Body and subtle text | `#282636`, `#504f5f` | text body, text subtle [Measured] | | Placeholder and disabled | `#615f6d`, `#94939e` | text placeholder, disabled [Measured] | | Surfaces | `#ffffff`, `#f8f7fa`, `#e2e2e7` | bg page, container, neutral [Measured] | | Borders | `#e2e2e7`, `#c4c3ca`, active `#0b051d` | border default, neutral, active [Measured] | | Accent | `#7039e2`, text `#582fb4`, wash `#efecff` | bg accent, text accent and link [Measured] | | Positive | `#046234`, wash `#e6fceb` | bg positive [Measured] | | Negative | `#ae1d1d`, wash `#ffe6e6` | bg negative, btn danger [Measured] | | Warning | `#fbc64d`, wash `#fff5e4` | bg warning [Measured] | | Brand extras | eggplant `#2c2242`, balloon `#b798be`, herring `#e4e3df`, sticky note `#e6ffa9` | klarna brand colors [Measured] | | Badge pop | `#cff066` | badge 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 | Role | Desktop | Mobile | Face and weight | |------|---------|--------|-----------------| | Display | 64 on 62 | 52 on 50 | Klarna Title 700 [Measured] | | Headline | 44 on 48 | 32 on 32 | Klarna Title 700 [Measured] | | Directory title | 52 on 56 | 40 on 40 | Klarna Title 700 [Measured] | | Big product word | 100 on 40 | 52 on 32 | Klarna Title 700 [Measured] | | Lead | 20 on 28 | 18 on 28 | Klarna Text 400 [Measured] | | Body | 16 on 24 | same | Klarna Text or system 400 [Measured] | | Button | 16 on 20 | same | Klarna Text 500 [Measured] | | Directory chip | 16 on 20 | 14 on 16 | system 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.