Design System
Analysis of Klarna

A warm, near-flat fintech system: one deep blue-black ink, a single candy-pink call-to-action that carries dark text (never white), soft mint and lavender feature panels, and pill-everything rounding that keeps a serious money app feeling friendly.

01 — Foundations

Colour Palette

02 — Foundations

Typography

Proprietary Klarna Title (display) and Klarna Text (body) are loaded over a system fallback; this showcase substitutes Hanken Grotesk — the nearest Google match. Hierarchy is built from size and weight alone, with tracking left neutral throughout.

03 — Components

Button Variants

button-primary
Klarna Pink #ffa8cd with dark #0b051d text — never white on pink. ~20px radius. The single brand action.
button-dark
Klarna Black #0b051d, white text, full pill. The dark companion to the pink CTA on light sections.
button-outline
Transparent on a 1px #e2e2e7 hairline, ink label, full pill. The quiet alternative.
button-pill
Sunken #f5f5f7 chip, full radius — used for tags, filters and feature labels.
04 — Components

Cards & Surfaces

Surfaces are pure white or warm off-white inside large rounded panels, often washed with mint or lavender. Klarna stays flat — a soft lift appears only on hover.

05 — Components

Form Elements

text-input
textarea
06 — Foundations

Spacing Scale

A 4px base on an 8px rhythm — 4 / 8 / 12 / 16 / 24 / 32 / 48 — visible in the 12×20px button padding and 24px heading padding.

07 — Foundations

Border Radius

The signature move: the scale skips small radii and jumps from a hairline 2px to 16–48px, with a full pill the most common rounding on the entire page.

08 — Foundations

Elevation & Depth

Level 0 — 1px hairline only. The default; Klarna is overwhelmingly flat and separates panels by fill colour, not shadow.
Level 1 — 0 2px 4px rgba(0,0,0,0.10). The one soft lift, used on raised and hovered cards.
Level 2 — 0 0 18px rgba(0,0,0,0.20). A rare ambient glow for floating or popover elements.
09 — Responsive

Responsive Behavior

NameWidthKey changes
Mobile< 768pxSingle-column stack; hero display drops to ~48px; full-width rounded panels.
Tablet768–1023pxTwo-column feature grids; hero ~64–88px; nav collapses to a menu.
Laptop1024–1279pxMulti-column grids return; hero ~100px; centered 1200px column.
Desktop≥ 1280pxHero scales up toward ~147px; generous vertical rhythm between sections.

Display type is fluid and scales hard with viewport width — the hero is the most responsive element on the page, while the neutral body stays a steady 16px.

Pricing Tiers

Klarna's site doesn't sell tiered plans, so these are brand-appropriate sample plans built entirely from the real tokens to demonstrate the card + pricing pattern.

Pay in 4
$0/ purchase
Split any purchase into four interest-free payments, automatically.
  • No interest, ever
  • No impact to credit score
  • Automatic payments
  • Manage in the app
Klarna Plus● Most popular
$7.99/ month
Lower service fees plus rewards for people who shop with Klarna often.
  • Reduced service fees
  • 2× rewards points
  • Exclusive store deals
  • Priority support
Financing
0%/ intro APR
Spread bigger purchases over 6–24 months with a clear monthly cost.
  • 6–24 month terms
  • Transparent monthly cost
  • Instant decision
  • No hidden fees

Data Table

A transactions table built from the tokens — hairline rows, pill status chips in mint, and a warm off-white header.

IDMerchantPlanStatusWhen
K-10482H&MPay in 4Paid2 days ago
K-10477IKEAFinancingOn track5 days ago
K-10461SephoraPay in 30Paid1 week ago
K-10455NikePay in 4On track2 weeks ago
K-10449WayfairFinancingPaid3 weeks ago
1–5 of 412
123

Auth Forms

Klarna signs in by app and one-time code, so these are a brand-styled sample of the input + button pattern rather than the live flow.

Sign in

Welcome back

OR
Create account

Create your Klarna

OR