Klarna Mobile — design system & UI screens

Fintech · 2 screens · klarna.com

Buy now or later payment options for checkout. Four selectable payment plan cards are stacked vertically—pay in full, pay in 4 installments, pay in 30 days, or pay over time—each with an icon, title, placeholder details, and a radio button. A prominent call-to-action button at the bottom offers payment via Klarna.

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-mobile.

Decoded design system

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

Color roles

Role	Value
bg	`#0B061E`
surface	`#19142B`
border	`#2F2B3F`
text	`#FFFFFF`
text_muted	`#A2A0A9`
primary	`#0B061E`
accent	`#0B061E`
link	`#0B061E`
button_bg	`#0B061E`
button_text	`#0B061E`

Using these colors

Action color #0B061E — the single interactive color; only on things you click or must notice, never large fills.
primary, accent, link, button_bg are all #0B061E — one role, not several (the action color).
accent #0B061E — 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.

Typography

h1: 34px
h2: 22px
body: 17px

Spacing

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

Radii

base: 12px
button: 12px

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×2 → div.pr-1nmwv0e → div.pr-1nmwv0e → div.pr-1nmwv0e → div.pr-1nmwv0e → div.pr-1s8myht

Scroll reveal: 19 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 →