---
version: alpha
name: Klarna
description: A clean off-white fintech canvas where a custom Klarna Title display face sets oversized rounded headlines, soft signature pink warms the chrome, and the workhorse CTA is a fully-rounded black pill — payments software that feels friendly, candy-soft, and confidently consumer.

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f5f4f0"           # warm off-white section bands, card fills
  surface-pink: "#ffe8f0"      # soft pink promo bands and testimonial tints
  surface-dark: "#0b051d"      # dark hero/phone-mockup surface, inverted sections

  # Ink / text
  ink: "#0b051d"               # near-black ink, headlines, body, pill button fill
  ink-secondary: "#373544"     # supporting copy on light surfaces
  ink-muted: "#9198a1"         # captions, metadata, secondary links
  ink-disabled: "#96959f"      # disabled text
  on-dark: "#ffffff"           # text on dark surfaces and the black pill

  # Brand accent — the signature Klarna pink
  primary: "#ffb3c7"           # the iconic Klarna pink — bands, chips, accents
  primary-strong: "#ffa8cd"    # slightly saturated pink for fills
  primary-soft: "#ffe8f0"      # palest pink tint for backgrounds
  on-primary: "#0b051d"        # near-black text on pink (pink is light)

  # Secondary brand — the violet ramp
  brand-violet: "#7039e2"      # mid violet brand accent
  brand-violet-strong: "#5c32b8" # deeper violet
  brand-violet-soft: "#d9c2fb"  # pale violet tint
  link: "#582fb4"              # link text violet

  # Semantic
  success: "#06884a"           # positive heading green (Trustpilot-adjacent)
  warning: "#664600"           # warning text
  error: "#931414"             # negative text

  # Borders
  border: "#e4e3df"            # warm hairline dividers, card edges
  border-strong: "#0e0e0f"     # full near-black outline on emphasized cards

  # Shadow tints (opaque approximations for the elevation table)
  shadow-soft: "#e2e2e7"       # was rgb(226,226,231) — soft card lift
  shadow-ambient: "#000000"    # was rgba(0,0,0,0.1) — ambient drop

typography:
  display-hero:
    fontFamily: "Klarna Title, Klarna Display, -apple-system, BlinkMacSystemFont, system-ui, sans-serif"
    fontSize: 110px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: 0px
  display:
    fontFamily: "Klarna Title, Klarna Display, -apple-system, system-ui, sans-serif"
    fontSize: 66px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: 0px
  heading:
    fontFamily: "Klarna Title, Klarna Display, -apple-system, system-ui, sans-serif"
    fontSize: 52px
    fontWeight: 500
    lineHeight: 1.06
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Klarna Title, Klarna Display, -apple-system, system-ui, sans-serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: 0px
  title-bold:
    fontFamily: "Klarna Text, -apple-system, BlinkMacSystemFont, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.05px
  heading-card:
    fontFamily: "Klarna Text, -apple-system, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: -0.2px
  body-large:
    fontFamily: "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  label-bold:
    fontFamily: "Klarna Text, -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: -0.2px
  button:
    fontFamily: "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.14px
  caption:
    fontFamily: "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
  link:
    fontFamily: "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.54
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 64px
  5xl: 80px
  6xl: 120px

rounded:
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.ink-secondary}"
    textColor: "{colors.on-dark}"

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  button-pink:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-pink-hover:
    backgroundColor: "{colors.primary-strong}"
    textColor: "{colors.on-primary}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.2xl}"
    padding: 32px
  card-pink:
    backgroundColor: "{colors.surface-pink}"
    textColor: "{colors.ink}"
    rounded: "{rounded.2xl}"
    padding: 32px
  card-violet:
    backgroundColor: "{colors.brand-violet-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.2xl}"
    padding: 32px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label-bold}"
    padding: 16px 24px

  link:
    textColor: "{colors.link}"
    typography: "{typography.link}"
    padding: 0px

  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  badge-violet:
    backgroundColor: "{colors.brand-violet-soft}"
    textColor: "{colors.brand-violet-strong}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
---

# Klarna Design System

## Overview

Klarna's site is what a payments company looks like when it decides to be liked rather than trusted-at-arm's-length. The canvas is mostly clean white with warm off-white section bands (`{colors.surface}`), but the whole thing is warmed by one unmistakable move: the Klarna pink (`{colors.primary}`). It is soft, candy-light, almost cosmetic — not a fintech blue, not a banking navy — and it shows up in promo bands, testimonial cards, chips, and the smiley logo itself. The signal is emotional: buy-now-pay-later as something playful and human, not a credit instrument with fine print.

The typographic signature is the custom **Klarna Title** display face. Headlines run enormous — the marquee hits `{typography.display-hero}` at 110px, weight 700, with a soft, rounded, almost humanist letterform that reads friendly at scale rather than corporate. Beneath it, body and UI copy fall back to a clean system sans (`-apple-system`/Segoe stack) so the page stays fast and neutral where it needs to, while **Klarna Text** carries bolded labels and small headings. The contrast — oversized soft display over crisp system body — is the brand's whole personality compressed into type: warm headline, efficient mechanics.

Then there's the shape language, which is the other half of the brand. Klarna rounds everything. The dominant radius is 32px (`{rounded.2xl}`) on cards and the iconic fully-rounded **pill** (`{rounded.pill}`) on every button. The primary CTA is a confident black pill (`{colors.ink}` fill, white text) — the same inversion premium consumer brands use, where black does the heavy lifting and the pink does the signaling. Cards come in pink (`{colors.surface-pink}`) and violet (`{colors.brand-violet-soft}`) tints, stacked like soft tiles, with hairline borders (`{colors.border}`) or a single bold near-black outline on the emphasized one. The overall impression is approachable, modern, and a little toy-like — finance that wants to feel like a lifestyle app.

**Key Characteristics:**
- Clean white canvas with warm off-white bands (`{colors.surface}`) — light-first, never a dark marketing default
- The signature Klarna pink (`{colors.primary}`) — soft, candy-light, used for warmth and brand signaling, not as a button workhorse
- Custom **Klarna Title** display face at huge sizes (`{typography.display-hero}` at 110px / 700) — soft, rounded, friendly headlines
- System-sans body (`-apple-system` stack) for crisp, fast UI copy beneath the expressive display type
- Everything rounded: 32px (`{rounded.2xl}`) cards and fully-rounded **pill** buttons are the default shape vocabulary
- Primary CTA is a **black pill** (`{colors.ink}`), not pink — the brand inverts the expected hierarchy
- Secondary violet ramp (`{colors.brand-violet}`, `{colors.link}`) for data, links, and accent tiles
- Soft tinted tile cards (pink and violet) stacked like a friendly grid, hairline (`{colors.border}`) separation
- Restrained, soft shadows (`{colors.shadow-soft}`) — the page reads flat-and-friendly, not glassy
- Generous vertical rhythm (`{spacing.5xl}`–`{spacing.6xl}`) between marketing sections
- Trustpilot green (`{colors.success}`) reserved for social-proof and positive states only

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The dominant canvas and the fill behind most content.
- **Warm Off-White** (`{colors.surface}`): Section bands and neutral card fills — a soft, slightly warm gray-cream.
- **Soft Pink Band** (`{colors.surface-pink}`): The palest pink, used for promo bands and testimonial tints.
- **Dark Surface** (`{colors.surface-dark}`): The near-black `#0b051d` used for hero phone mockups and the occasional inverted section.

### Ink / Text
- **Near-Black** (`{colors.ink}`): Headlines, body copy, and the primary pill button fill. A deep violet-black, not pure black.
- **Slate** (`{colors.ink-secondary}`): Supporting copy on light surfaces.
- **Muted Slate** (`{colors.ink-muted}`): Captions, metadata, and secondary links.
- **On-Dark** (`{colors.on-dark}`): White text on dark surfaces and on the black pill CTA.

### Brand Accent
- **Klarna Pink** (`{colors.primary}`): The iconic brand color. Promo bands, chips, badges, and accents — light enough that near-black text sits on it.
- **Pink Strong / Soft** (`{colors.primary-strong}`, `{colors.primary-soft}`): Saturated and palest pink variants for fills and tints.
- **Violet Ramp** (`{colors.brand-violet}`, `{colors.brand-violet-strong}`, `{colors.brand-violet-soft}`): The secondary accent family for data, accent tiles, and badges.
- **Link Violet** (`{colors.link}`): The text-link color.

### Semantic & Borders
- **Success Green** (`{colors.success}`): Positive headings and social-proof (Trustpilot) moments.
- **Warning / Error** (`{colors.warning}`, `{colors.error}`): Reserved status colors.
- **Hairline** (`{colors.border}`): Warm card edges and dividers — the primary structural device.
- **Strong Outline** (`{colors.border-strong}`): A single near-black outline used to emphasize one card.
- **Shadow Tints** (`{colors.shadow-soft}`, `{colors.shadow-ambient}`): Opaque stand-ins for the soft card lift (originals were rgb/rgba — flattened for the Google spec).

## Typography

### Font Family
- **Display**: `Klarna Title` (with `Klarna Display` and system fallbacks) — a custom, soft, rounded humanist display face for oversized headlines.
- **Text / Labels**: `Klarna Text`, for bolded labels and small headings.
- **Body**: the native system stack (`-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif`) — crisp, neutral, fast-loading body and UI copy.
- **OpenType / tracking**: display sizes run near-zero tracking; bold labels pull slightly negative (-0.2px); the all-caps button label uses a hint of positive tracking (0.14px).

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 110px / 700 — the marquee headline in Klarna Title |
| `display` | 66px / 500 — large section openers |
| `heading` | 52px / 500 — section titles |
| `heading-sub` | 40px / 500 — sub-section headings |
| `title-bold` | 24px / 700 — Klarna Text bold titles |
| `heading-card` | 20px / 700 — card titles |
| `body-large` | 20px / 400 — lead paragraphs (system sans) |
| `body` | 16px / 400 — standard body and inputs |
| `label-bold` | 16px / 700 — Klarna Text UI labels and nav |
| `button` | 14px / 700 — pill button text, slight positive tracking |
| `caption` | 14px / 400 — metadata and helper text |
| `link` | 13px / 500 — secondary links |

### Principles
- **Big soft display, crisp small body**: the Klarna Title face is the personality; the system sans is the workhorse. Don't blur the roles.
- **Headlines go large and rounded**: lean into oversized display (66–110px) for emotional impact.
- **Weight does the hierarchy**: 700 for headlines and labels, 500 for section titles, 400 for body.
- **Keep tracking quiet**: near-zero on display, a touch negative on bold labels, a touch positive only on the button.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px, with heavy reliance on 16px and 32px. Generous vertical rhythm (`{spacing.5xl}` = 80px, up to `{spacing.6xl}` = 120px) separates major marketing sections; card internals stay at a comfortable `{spacing.2xl}` (32px).

### Grid & Container
- Max content width: ~1200px, centered
- Common pattern: soft tinted tile cards arranged in a friendly multi-column grid, often paired with a phone-mockup image
- Testimonials sit in pink and violet rounded cards within a horizontal scroller

### Whitespace Philosophy
- **Airy and friendly**: generous padding inside cards and between sections; nothing feels cramped
- **Tinted tiles over hard boxes**: separation comes from soft color blocks (pink, violet, off-white) more than borders
- **The phone is the hero**: product mockups (the Klarna app) carry the most visual weight in each section

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow; tinted fill or hairline `{colors.border}` only | Section bands, most tile cards |
| Hairline ring (Level 1) | `0 0 0 1px` at warm hairline | Subtle card containment |
| Soft (Level 2) | `0 2px 6px` (`{colors.shadow-soft}`) | Resting elevated cards, dropdowns |
| Lifted (Level 3) | `0 2px 4px` ambient (`{colors.shadow-ambient}`) | Floating product mockups, hovered tiles |

**Shadow Philosophy**: Klarna's shadows are soft and sparing. The page mostly reads flat — separation is carried by tinted tile fills (pink, violet, off-white) and warm hairline borders. When elevation does appear it is a gentle, low-spread lift (`{colors.shadow-soft}`), never a glassy or dramatic drop. The brand prefers color blocking to shadow stacking.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `sm` | 8px | Small chips, inner elements |
| `md` | 12px | Inputs, small containers |
| `lg` | 16px | Mid containers |
| `xl` | 24px | Larger cards |
| `2xl` | 32px | The dominant card radius — soft tile cards |
| `pill` | 9999px | Every button, badges, avatars |

Klarna is aggressively rounded. The dominant radius is a soft 32px (`{rounded.2xl}`) on cards, and **all buttons are full pills** (`{rounded.pill}`). There are no sharp corners anywhere — the roundness is core to the friendly, toy-like brand feel.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-primary`** — Black pill (`{colors.ink}` fill, white text), fully rounded. The main CTA (e.g. "Sign in", "Get the app"). Hover lifts to `{colors.ink-secondary}`.
- **`button-secondary`** — White pill, near-black text, hairline edge. Hover fills `{colors.surface}`.
- **`button-pink`** — Klarna pink (`{colors.primary}`) fill, near-black text — a soft, friendly accent CTA. Hover deepens to `{colors.primary-strong}`.

### Cards
- **`card`** / **`card-pink`** / **`card-violet`** — Soft tile cards at `{rounded.2xl}` (32px). The neutral one fills warm off-white; the pink and violet variants carry the brand-tint personality used in testimonials and promo tiles.

### Inputs
- **`input`** — White fill, hairline edge, 12px radius. **`input-focus`** keeps the fill and crisps the border — no loud focus ring.

### Navigation
- **`nav-bar`** — White, bold Klarna Text labels, generous padding, a black pill sign-in on the right.

### Badges
- **`badge`** — Pink pill with near-black text. **`badge-violet`** is the soft-violet pill alternative for the secondary accent family.

## Do's and Don'ts

### Do
- Keep the canvas white with warm off-white bands (`{colors.surface}`) — light, airy, friendly
- Use the Klarna pink (`{colors.primary}`) for warmth and brand signaling — bands, chips, accent tiles, badges
- Set headlines in the big soft **Klarna Title** display face (`{typography.display-hero}`) — go large, 66–110px
- Make the primary CTA a **black pill** (`{colors.ink}`) — pink is an accent, not the button workhorse
- Round everything: 32px (`{rounded.2xl}`) cards and full **pill** buttons are the default
- Block sections with soft tinted tiles (pink, violet, off-white) rather than hard-bordered boxes
- Reserve the violet ramp (`{colors.brand-violet}`) for data, links, and accent tiles
- Use Trustpilot green (`{colors.success}`) only for positive states and social proof

### Don't
- Don't reach for fintech blue or banking navy — Klarna's warmth comes from pink, not corporate blue
- Don't make pink the primary button — the workhorse CTA is the black pill
- Don't introduce sharp corners or small radii on buttons — buttons are always full pills
- Don't set headlines in the system sans — the Klarna Title display face is the brand's voice
- Don't stack heavy/glassy shadows — separation is tinted tiles plus soft, low-spread lift
- Don't crowd the layout — keep generous section rhythm (`{spacing.5xl}`–`{spacing.6xl}`)
- Don't default to a dark marketing theme — Klarna's site is committedly light

---

## Responsive Behavior

### Breakpoints
*(No explicit breakpoints surfaced in extraction; the values below are the standard stops the site behaves to.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single column; display headline scales 110px → ~40px; nav collapses to a menu; tinted tiles stack full-width |
| Tablet | 640–1023px | Two-column tile grids begin; phone mockup sits beside copy at reduced size |
| Desktop | 1024–1279px | Full multi-column tile layout; copy-left / mockup-right hero |
| Large | ≥1280px | Max ~1200px container, centered; generous section padding (`{spacing.6xl}`) |

### Touch Targets
- Pill buttons run ~44px tall with `14px 28px` padding — large, thumb-friendly
- Tinted tile cards carry generous internal padding (`{spacing.2xl}`) for comfortable taps

### Collapsing Strategy
- **Navigation**: full horizontal nav → menu toggle on mobile; the black sign-in pill persists
- **Hero**: copy and phone mockup go from side-by-side to stacked, mockup full-width
- **Type**: display drops from 110px toward ~40px while staying in the rounded display face
- **Spacing**: section padding compresses from ~120px toward ~64px

### Image Behavior
- Product mockups (the Klarna app on a phone) reflow as flex/grid children; tinted tile cards reorder into a single column

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White (`{colors.background}`)
- Text: Near-Black (`{colors.ink}`)
- Brand accent: Klarna Pink (`{colors.primary}`)
- Secondary accent: Violet (`{colors.brand-violet}`)
- Border: Warm Hairline (`{colors.border}`)
- Primary CTA: **Black pill** (`{colors.ink}`) — not pink

### Example Component Prompts

- "Create a hero on white (`{colors.background}`) with a huge 110px near-black (`{colors.ink}`) headline in the soft rounded Klarna Title display face (`{typography.display-hero}`), a system-sans lead paragraph below, and a black **pill** primary button (`{colors.ink}` fill, white text, `{rounded.pill}` radius, `14px 28px` padding)"
- "Build a soft testimonial tile: pink (`{colors.surface-pink}`) fill, `{rounded.2xl}` (32px) radius, `{spacing.2xl}` padding, near-black (`{colors.ink}`) quote in body type, no heavy shadow"
- "Render a pink accent CTA: Klarna pink (`{colors.primary}`) fill, near-black (`{colors.on-primary}`) text, full **pill** radius (`{rounded.pill}`), `14px 28px` padding"
- "Create a violet data card: soft-violet (`{colors.brand-violet-soft}`) fill, `{rounded.2xl}` radius, violet-strong (`{colors.brand-violet-strong}`) label, near-black body"
- "Design an input: white fill, warm hairline (`{colors.border}`) edge, `{rounded.md}` (12px) radius, `12px 16px` padding; on focus just crisp the border — no loud ring"
- "Build a pink pill badge: Klarna pink (`{colors.primary}`) fill, near-black text, `{rounded.pill}` radius, `4px 12px` padding"

### Iteration Guide

1. Start on white (`{colors.background}`) with warm off-white bands (`{colors.surface}`). If you reached for blue or navy, stop — Klarna's warmth is pink.
2. The pink (`{colors.primary}`) is an accent for warmth and signaling. If it's filling your primary button, recolor that button to the black pill (`{colors.ink}`).
3. Headlines belong in the big soft Klarna Title display face (`{typography.display-hero}`) — go large (66–110px), near-zero tracking.
4. Round everything: cards at `{rounded.2xl}` (32px), buttons at `{rounded.pill}`. No sharp corners.
5. Block sections with soft tinted tiles (pink, violet, off-white) before reaching for borders or shadows.
6. Keep shadows soft and sparing (`{colors.shadow-soft}`) — color blocking does most of the separation.
7. Reserve the violet ramp (`{colors.brand-violet}`) and success green (`{colors.success}`) for data/links and social proof respectively.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Klarna. Brand names and trademarks belong to their respective owners.