Klarna

Overview

Klarna is a fintech platform that transforms everyday payments into a delightful, human-centered experience. The design system embraces 'Playful Minimalism'—a Scandinavian-rooted aesthetic that combines clean, spacious layouts with vibrant, unexpected color moments. The brand serves consumers and merchants globally, making financial flexibility feel accessible and approachable rather than intimidating. The emotional response is one of calm confidence: users feel in control of their money, supported by a brand that speaks their language without jargon.

Klarna's voice is conversational, optimistic, and direct. The brand avoids corporate formality, instead using warm, human language that acknowledges the user's financial goals without condescension. Vocabulary patterns favor active verbs ('Get started,' 'Manage,' 'Discover') and concrete benefits over abstract promises. Example: 'Split your purchase into 4 interest-free payments—no hidden fees, no surprises.'

Colors

Klarna's color system is built on a foundation of Scandinavian neutrality (Deep Eggplant #0B051D as the primary text and inverse surface) paired with a signature Playful Pink (#FFA8CD) that appears on all primary CTAs, interactive states, and brand moments. This pink is the visual signature—it's warm, approachable, and distinctly Klarna. Secondary colors include a deep Purple (#7039E2) used for secondary actions, links, and accent text, and a vibrant Green (#046234) reserved for positive/success states. The surface stack uses a light, airy palette: pure white (#FFFFFF) for primary surfaces, soft grays (#F8F7FA, #F3F3F5) for containers, and neutral borders (#E2E2E7) that provide structure without visual weight. Error states use a muted red (#AE1D1D) on light backgrounds (#FFE6E6) to maintai

Typography

The typography system uses two proprietary Klarna typefaces: Klarna Title for display and headline scales (bold, confident, 700 weight), and Klarna Text for body and label scales (regular 400 weight for body copy, 600 weight for labels and interactive text). The display scale (84px, 92px line-height, -0.02em letter-spacing) commands attention on hero sections; headline-lg (44px, 52px line-height) anchors major sections; headline-md (32px, 40px line-height) breaks up content. Body text uses 16px–18px sizes with 24–28px line-heights to ensure comfortable reading on all devices. Labels (14px, 20px line-height) are used on buttons and form fields with 600 weight to signal interactivity. All text uses -apple-system fallback for system consistency. On small labels over busy backgrounds, apply te

Layout

Klarna uses a fluid 12-column grid with a maximum container width of 1440px, allowing content to breathe on large screens while remaining readable on mobile. The spacing scale is semantic: xs (4px) for micro-interactions, sm (12px) for tight groupings, md (24px) for standard section gutters, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. The gutter (24px) is applied consistently to left/right padding on all containers. White space is treated as a design element—sections are separated by lg spacing (40px) minimum, and card-based layouts use md spacing (24px) between items. The hero section uses 80px bottom padding to create visual separation from the next content block. Container padding follows the pattern: md (24px) on tablet/desktop, sm (12px) on m

Elevation & Depth

Depth in Klarna's system is achieved through subtle shadows and layering, not through color darkening. The shadow scale uses three levels: sm (0 2px 4px rgba(0, 0, 0, 0.1)) for cards and small components, md (0 6px 12px rgba(0, 0, 0, 0.1)) for elevated cards and modals, and lg (0 12px 24px rgba(0, 0, 0, 0.1)) for the deepest layers (e.g., full-page modals, sticky headers). Cards at rest use sm shadow; on hover, they elevate to md shadow with a 200ms ease-out transition. Modals and overlays use lg shadow with a semi-transparent dark overlay (rgba(0, 0, 0, 0.16)) behind them. Focus states use a

Shapes

Klarna embraces 'Soft-Technical' border-radius philosophy: sharp enough to feel modern and precise, soft enough to feel approachable. Buttons use full radius (9999px) to create a pill shape that feels friendly and clickable. Cards and containers use lg radius (12px) for a subtle roundness that softens the grid without appearing playful. Input fields and smaller components use DEFAULT radius (4px) for a more technical, form-like appearance. The radius scale progresses: sm (2px) for minimal rounding on borders and dividers, DEFAULT (4px) for inputs and small UI elements, md (8px) for medium cont

Components

Action Elements Buttons are the primary interaction pattern. The primary button uses the signature pink (#FFA8CD) background with deep eggplant text (#0B051D), full radius (9999px), and 12px vertical / 32px horizontal padding for a 48px total height. On hover, the background shifts to #FF8FB8 (approximately 5% darker) with a 200ms ease-out transition. The secondary button uses the inverse (deep eggplant #0B051D background, white text) with DEFAULT radius (4px) and the same padding/height. Ghost buttons are transparent with a 1px border in the outline color (#C4C3CA) and secondary text color (#7039E2); on hover, they fill with surface-container (#F3F3F5). All buttons use label-md typography (14px, 600 weight) and apply focus-visible outline: 2px solid #7039E2 with 2px offset.

Conta

Do's and Don'ts

**Do**

• Do use the pink (#FFA8CD) exclusively on primary CTAs and interactive affordances—it's the visual signature that makes Klarna recognizable.
• Do apply lg spacing (40px) between major content sections to create breathing room and visual hierarchy.
• Do use Klarna Title for all display and headline scales to reinforce brand voice; fallback to system fonts only when custom fonts fail to load.
• Do apply 200ms ease-out transitions on all interactive state changes (hover, focus, active) to create a sense of responsiveness.
• Do use the full radius (9999px) on all buttons and badges to signal 'tap here' and lower cognitive load.
• Do maintain the light, airy aesthetic by using white and soft grays as primary surfaces; reserve darker colors for text and accents.

**Don't**

• Don't use the pink (#FFA8CD) on secondary or tertiary actions—reserve it exclusively for primary CTAs to maintain visual hierarchy.
• Don't apply shadows larger than lg (0 12px 24px rgba(0, 0, 0, 0.1)) as this breaks the light, minimalist aesthetic.
• Don't use border-radius smaller than DEFAULT (4px) on interactive elements; this reduces affordance and feels technical.
• Don't mix Klarna Title and system fonts in the same headline—choose one and stick with it for visual consistency.
• Don't apply more than one state change (e.g., color + shadow + scale) on hover; this creates visual noise and confusion.
• Don't use the secondary purple (#7039E2) on primary CTAs or hero elements; it's reserved for secondary actions and accent text.