Klarna — design system & UI screens

Fintech · 1 screen · 12 sections · klarna.com

Klarna's landing leads with a full-bleed photographic hero (a phone clipped to jeans showing the Klarna app) overlaid with a giant ultra-bold "Your money treated right" headline and a pink pill "Get the app" CTA. The signature element is the editorial typographic rhythm — a centered, oversized stacked product index (Payments, Cards, Memberships, Balance, Savings, Cashback, Shopping, Mobile) set in heavy black display type, capped by a colossal full-width "Klarna" wordmark in the dark footer. Soft baby-pink CTA blocks and a Trustpilot review carousel reinforce the playful, high-contrast fintech identity.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/klarna.

Decoded design system

Klarna's decoded design system: background #FFFFFF, text #0B051D, accent #FFA8CD, link #0B051D, primary #FFA8CD; type scale h1 84px / h2 84px / body 16px; 4px spacing base; 20px base radius. The single interactive/action color is #FFA8CD — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#FFFFFF`
surface	`#F0F0F1`
border	`#DAD9DD`
text	`#0B051D`
text_muted	`#676472`
primary	`#FFA8CD`
accent	`#FFA8CD`
link	`#0B051D`
secondary	`#373544`
button_bg	`#FFA8CD`
button_text	`#0B051D`

Using these colors

Action color #FFA8CD — the single interactive color; only on things you click or must notice, never large fills.
primary, accent, button_bg are all #FFA8CD — one role, not several (the action color).
accent #FFA8CD — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
link #0B051D — inline text links and link-styled controls.
secondary #373544 — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

Heading: Klarna Title
Body: Klarna Sans
h1: 84px
h2: 84px
body: 16px

Spacing

base unit: 4px
scale: 2px, 4px, 8px, 10px, 11px, 12px, 16px, 20px, 24px, 32px

Radii

base: 20px
button: 24px

Shadows (elevation)

card: rgba(0, 0, 0, 0.2) 0px 0px 18px 0px

Motion

Micro-interactions run at 200ms (dominant) with ease.

durations: 200ms · 300ms · 90ms
easings: ease · linear
animated properties: opacity, background-color, border-color, color

Native design tokens

Token	Value
`--colors-bg-page`	`#FFFFFF`
`--colors-bg-plain`	`#FFFFFF`
`--colors-bg-container`	`#F8F7FA`
`--colors-bg-subtle`	`#F3F3F5`
`--colors-bg-neutral`	`#E2E2E7`
`--colors-bg-inverse`	`#0B051D`
`--colors-bg-accent`	`#7039E2`
`--colors-bg-negative`	`#AE1D1D`
`--colors-bg-negative-subtle`	`#FFE6E6`
`--colors-bg-warning`	`#FBC64D`

…and 110 more measured on the page.

Button states (measured)

primary hover: background #FFD8EA
primary focus: box-shadow rgb(112, 57, 226) 0px 0px 0px 2px · background #FFD8EA · outline 2px solid rgb(11, 5, 29)

Layout (measured)

container max-width: 700px
nav: 72px
common grid: 2 columns

Motion choreography (measured)

Load order: div.pr-xma6ck → div.pr-1nmwv0e → div.pr-1nmwv0e → div.pr-1nmwv0e → div.pr-1nmwv0e → div.pr-1s8myht

Scroll reveal: 20 elements rest at opacity 0, translateY(20px), animate in over 300ms.

Stagger: span ×5 — 100ms apart.

Stagger: div ×6 — 100ms apart.

Responsive (measured)

mobile (390px): hero 52px · nav hamburger

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

Klarna fintech money-app landing with bold display type, pink accents, and product-category index