At a glance
24tokens
8type steps
2radius steps
20pxspacing base
Klarna, in one page
Klarna's iOS app is a soft, friendly shopping-and-payments space whose whole personality is *smooth*. The canvas is clean white (#FFFFFF) with a barely-there pink-tinted surface (#FFF2F5) that warms grouped content without shouting. The brand's signature soft pink (#FFB3C7) — the "Klarna Pink" — is the action color, and it always carries near-black text (#0B051D), never white. The pairing reads as approachable and modern: this is buy-now-pay-later as something light and reassuring, not a stern bank.
The accent system is a pink/black duet. Klarna Pink (#FFB3C7) is the primary CTA, the active state, and the highlight; near-black ink (#0B051D) is the structural color for headings, amounts, and the dark hero moments. There is no blue, no gradient, no second accent — the restraint, plus the unusually *soft* corner radii and slow, gliding transitions, is what makes the experience feel unmistakably Klarna.
Typography is Klarna Text, a clean, slightly rounded humanist sans (Inter is the closest free substitute). It's calm and legible — amounts at weight 700, body relaxed at 400. The most expressive moment is the Pay-in-4 schedule timeline: four dated dots connected by a track, the first filled pink ("paid"), the rest outlined, each with a date and an amount — a literal picture of "split into 4, nothing scary."
Key Characteristics:
- Bright white canvas (
#FFFFFF) with a soft pink-tinted surface (#FFF2F5) - Klarna Pink (
#FFB3C7) as the single action color — always with near-black text, never white - Near-black ink (
#0B051D) for structure: headings, amounts, dark hero panels - Pay-in-4 schedule timeline — 4 dated dots, the signature payment-plan device
- In-app shopping browser card — Klarna wraps any store in its own chrome
- Smooth pink CTA with generous radius — soft, pill-like, calm
- Order list rows — clean, scannable purchase history with plan status
- Klarna Text (proprietary humanist sans), weights 400 / 600 / 700
- Bottom tabs: Shop, Payments, Rewards, Profile
- Smooth slide transitions — screens glide, nothing snaps
Do's and don'ts
Do
- Use
#FFFFFFas the canvas with#FFF2F5for soft grouped wells; keep one dark anchor (the black hero) - Use near-black
#0B051Dfor structure — headings, amounts, the dark hero - Reserve Klarna Pink
#FFB3C7for the primary action and key highlights - Always put near-black text (
#0B051D) on Klarna Pink — never white - Make amounts the heaviest element — 22–36pt weight 700, tabular
- Use tabular numerals for the schedule, order totals, and plan lines
- Render the Pay-in-4 plan as the 4-dot connected timeline — calm and literal
- Keep radii soft (28pt CTA, 20–24pt cards) and transitions slow/gliding
- Wrap merchant stores in Klarna's chrome with the persistent pink "Pay with Klarna" footer
Don't
- Don't put white text on Klarna Pink — it fails contrast and breaks the brand
- Don't introduce blue, gradients, or a second accent — pink + near-black is the whole story
- Don't use pure black for text — the structural ink is
#0B051D(violet-cast near-black) - Don't hide the Pay-in-4 schedule behind a summary — the 4-dot timeline *is* the product
- Don't use proportional figures for money — always tabular, decimal-aligned
- Don't use sharp/small corner radii — Klarna's softness (28pt CTA) is intentional
- Don't make more than one panel dark — the black hero is the single anchor
- Don't snap transitions — motion is unhurried (300–360ms glide)
- Don't use light/thin weights — Klarna Text amounts run 700
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Klarna design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Klarna Pink: #ffb3c7
- Klarna Pink Pressed: #f49cb4
- Klarna Pink Tint: #fff2f5
- Black: #0b051d
- Black Hover: #1a1330
- Canvas White: #ffffff
- Surface Pink: #fff2f5
- Surface Neutral: #f6f4f8
- Divider: #f0dde3
- Border Strong: #e2d2d8
Type:
- families: Klarna Text, Klarna Display, Display, Fallback Stack
- scale: 11, 13, 15, 16, 18, 22, 28, 36
- weights: 400, 600, 700
Shape:
- radius: 24, 28
Spacing: 20, 24
Rules:
- Use `#FFFFFF` as the canvas with `#FFF2F5` for soft grouped wells; keep one dark anchor (the black hero)
- Use near-black `#0B051D` for structure — headings, amounts, the dark hero
- Reserve Klarna Pink `#FFB3C7` for the primary action and key highlights
- Always put near-black text (`#0B051D`) on Klarna Pink — never white
- Make amounts the heaviest element — 22–36pt weight 700, tabular
- Use tabular numerals for the schedule, order totals, and plan lines
Avoid:
- Don't put white text on Klarna Pink — it fails contrast and breaks the brand
- Don't introduce blue, gradients, or a second accent — pink + near-black is the whole story
- Don't use pure black for text — the structural ink is `#0B051D` (violet-cast near-black)
- Don't hide the Pay-in-4 schedule behind a summary — the 4-dot timeline *is* the product
- Don't use proportional figures for money — always tabular, decimal-aligned
- Don't use sharp/small corner radii — Klarna's softness (28pt CTA) is intentional
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary
- Klarna Pink (
#FFB3C7): Primary CTA ("Pay now", "Continue"), active tab, highlight chip, selected state, the paid dot on the schedule. Always paired with near-black text. - Klarna Pink Pressed (
#F49CB4): Pressed/active state for the pink CTA and the pressed pink chip. - Klarna Pink Tint (
#FFF2F5): Soft surface — grouped wells, selected-row wash, subtle highlight bands. - Black (
#0B051D): Structural near-black — headings, amounts, dark hero panels, primary ink. - Black Hover (
#1A1330): Pressed state on dark/black surfaces and dark buttons.
Canvas & Surfaces
- Canvas White (
#FFFFFF): Primary page background, card fill. - Surface Pink (
#FFF2F5): Soft pink-tinted well — section backgrounds, grouped containers, the area behind plan modules. - Surface Neutral (
#F6F4F8): Neutral input fill, skeleton placeholders. - Divider (
#F0DDE3): Hairline rules between rows and around cards (a warm, pink-leaning grey). - Border Strong (
#E2D2D8): Input outline at rest, segmented-control border. - Black Surface (
#0B051D): The dark hero / card-back panel background.
Text
- Text Primary (
#0B051D): Body text, primary amounts, row titles (a deep near-black with a violet cast). - Text on Pink (
#0B051D): Text on Klarna Pink fills — always the near-black, never white. - Text on Black (
#FFFFFF): Text on the dark hero panel. - Text Secondary (
#6E6878): Metadata, helper text, plan sub-labels. - Text Tertiary (
#9B96A3): Disabled labels, placeholders, low-emphasis captions.
Semantic
- Success Green (
#0E8A4F): "Paid", completed plan, order delivered. - Upcoming Amber (
#A9700E): "Due in 5 days", upcoming-payment reminder. - Error Red (
#C8102E): Failed payment, declined, form errors. - Info Black (
#0B051D): Informational emphasis inside plan breakdowns. - Schedule Track (
#F0DDE3): The connecting line behind the Pay-in-4 dots when not yet paid.
Dark Mode (Limited Use)
Klarna's iOS app is light-first; the dark hero/card-back already supplies a dark moment within the soft layout. A full dark variant exists for system dark mode but the canonical experience is bright with pink accents.
- Dark Canvas (
#0B051D) - Dark Surface (
#171127) - Dark Text (
#F4F2F7) - Klarna Pink (unchanged) (
#FFB3C7) — reads well on dark, still near-black text on fills
Type scaleRead the full spec
Font Family
- Primary:
Klarna Text(proprietary humanist sans, Regular / Medium / Bold) - Display:
Klarna Displayused for the largest hero numbers (optional optical variant) - Fallback Stack:
'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - Numerals: Tabular figures mandatory in amounts, the Pay-in-4 schedule, and order totals
- CJK/Non-Latin: Falls to system stack — Klarna ships across EU/US with broad localization
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Amount (Hero) | Klarna Display | 36pt | 700 | 1.05 | -0.5pt | Total due / order total on hero, tabular |
| Screen Title (Large) | Klarna Text | 28pt | 700 | 1.15 | -0.4pt | "Payments", "Shop" nav title |
| Section Header | Klarna Text | 22pt | 700 | 1.2 | -0.3pt | "Upcoming payments", "Your orders" |
| Plan Amount | Klarna Text | 22pt | 700 | 1.1 | -0.2pt | Per-installment amount, tabular |
| Subsection | Klarna Text | 18pt | 600 | 1.3 | -0.1pt | Merchant / group titles |
| Amount (Row) | Klarna Text | 16pt | 600 | 1.2 | 0pt | Order amount on a row, tabular |
| Body / Title | Klarna Text | 16pt | 600 | 1.3 | 0pt | Order title, row title |
| Body | Klarna Text | 15pt | 400 | 1.5 | 0pt | Descriptions, plan explanations |
| Button (Primary) | Klarna Text | 16pt | 700 | 1.0 | 0pt | Pink CTA label |
| Meta / Subtitle | Klarna Text | 13pt | 400 | 1.3 | 0pt | "Due 14 Jun", "4 payments · biweekly" |
| Label (UPPER) | Klarna Text | 11pt | 700 | 1.2 | 0.5pt | "TOTAL", section labels |
| Tab Label | Klarna Text | 11pt | 600 | 1.0 | 0.1pt | Bottom tab bar labels |
| Caption | Klarna Text | 11pt | 400 | 1.3 | 0pt | Legal, "No interest if paid on time" |
Principles
- Calm hierarchy: Big where it matters (amounts, titles at 700), relaxed body at 400 — nothing aggressive
- Tabular figures everywhere money appears: Schedule amounts, order totals, plan lines align to the decimal
- Near-black is the structural ink: Headings and amounts use
#0B051D, not pure black - Pink is never type: Klarna Pink is a fill/highlight; it always sits *behind* near-black text
- Soft tracking: Negative tracking only on large numbers/titles (-0.3 to -0.5pt); body sits at 0pt with relaxed 1.5 line-height
- Dynamic Type respected on titles, body, amounts; tab labels and uppercase labels fixed
Components and layoutRead the full spec
Buttons
Primary CTA ("Pay now" / "Continue")
- Background:
#FFB3C7 - Text:
#0B051D(near-black — never white on pink) - Height: 56pt, full-width; corner radius 28pt (full, very soft pill)
- Pressed: background
#F49CB4, scale 0.98, soft haptic - Disabled: background
#F6F4F8, text#9B96A3
Black Button (secondary primary, e.g. "Add card")
- Background:
#0B051D - Text:
#FFFFFF - Height: 56pt, radius 28pt
- Pressed:
#1A1330
Outline Button ("See details")
- Background: transparent
- Text:
#0B051D, 1.5pt border#0B051D - Height: 56pt, radius 28pt
- Pressed: background
#FFF2F5
Text Link
- Klarna Text 15pt weight 600, color
#0B051D, underline on press - Pressed:
#1A1330
Icon Button (settings, share, help)
- 24pt glyph, 44pt hit area
- Default
#6E6878; active#0B051D
Quick Action (Shop: Browse, Pay, Rewards, Card)
- 56pt circle, background
#FFF2F5, glyph 22pt#0B051D - The primary action circle uses
#FFB3C7fill with a near-black glyph - Label below 13pt
#6E6878
Cards & Containers
Black Hero / Payment Summary (signature dark moment)
- Full-width panel, background
#0B051D, corner radius 24pt, padding 24pt - "TOTAL DUE" label 11pt
#FFB3C7uppercase, amount 36pt w700 white tabular - A pink "Pay now" affordance and "Next payment 14 Jun" subtitle in
#9B96A3
Pay-in-4 Schedule Card (signature)
- Card
#FFFFFF(or on#FFF2F5well), 1pt#F0DDE3, radius 20pt, padding 20pt - A horizontal timeline: 4 dots connected by a 2pt track
- Dot states: paid = filled
#FFB3C7with a near-black check; next/due =#FFFFFFwith a 2pt#0B051Dring; upcoming =#FFFFFFwith a 2pt#F0DDE3ring - Under each dot: date (13pt
#6E6878) and amount (15pt w700#0B051D, tabular) - The track between paid dots is
#FFB3C7; ahead of "now" it's#F0DDE3 - This is Klarna's centerpiece — "split in 4" made literal and calm
Order Row
- Height ~72pt
- Leading: 44pt rounded-square merchant logo (radius 12pt) on
#FFF2F5 - Center: merchant 16pt w600
#0B051D+ meta "2 items · Pay in 4" 13pt#6E6878 - Trailing: amount 16pt w600
#0B051Dtabular + a small status pill ("Paid"#0E8A4F, "Due 14 Jun"#A9700E) - Pressed:
#FFF2F5; divider#F0DDE3
In-App Shopping Browser Card (signature)
- Klarna wraps a merchant site in its own chrome: a rounded top bar with the merchant URL pill, a Klarna pink "Pay with Klarna" footer bar, and a draggable card sheet (radius 24pt top corners) over a dimmed page
- The footer "Pay with Klarna" bar is
#FFB3C7with near-black text and a smooth slide-up entrance
Plan Detail Sheet
- Bottom sheet
#FFFFFF, top grabber, radius 24pt top corners - The Pay-in-4 schedule at top, then itemized lines (label ←→ value, tabular), then a pink "Pay now" CTA
Navigation
Bottom Tab Bar
- Height: 56pt + safe area
- Background:
#FFFFFF, 0.5pt top border#F0DDE3(opaque — calm and clear) - Tabs: Shop, Payments, Rewards, Profile
- Icon size: 24pt
- Active: icon + label
#0B051D(filled icon); a soft#FFB3C7pill/dot can mark the active tab - Inactive:
#9B96A3 - Labels: Klarna Text 11pt weight 600, always shown
Top Bar (Shop / Payments)
- Title large left; right: search + notifications (24pt)
- The black hero or shop search sits directly below
Segmented Control (Upcoming / Paid, plan types)
- Track
#FFF2F5, height 40pt, radius 20pt - Selected segment: white pill with soft shadow, near-black text weight 600 (or
#FFB3C7fill for emphasis) - Unselected:
#6E6878 - Smooth sliding thumb 260ms ease (slightly slower — the Klarna glide)
Input Fields
Search Bar (Shop)
- Background
#FFF2F5, height 48pt, radius 24pt - Leading
magnifyingglass18pt#6E6878; placeholder "Search stores & products" 16pt#6E6878 - Focus: 1.5pt
#0B051Dring
Text Field (card / address)
- Filled style, background
#F6F4F8, height 56pt, radius 16pt - Rest: 1pt
#E2D2D8; focus: 2pt#0B051D, floating label tints near-black - Error: 2pt
#C8102E, helper#C8102E
Amount / Card Entry
- Large field, value in Klarna Display 30pt w700
#0B051Dtabular - Below: helper 13pt
#6E6878
Distinctive Components
Pay-in-4 Schedule Timeline
- The signature object: four dated dots on a connecting track that visualizes the payment plan — first paid (filled pink + check), the rest outlined, each labeled with a date and a tabular amount. The entire BNPL proposition rendered as one calm, legible picture.
In-App Shopping Browser
- Klarna's in-app web wrapper: any merchant store opens inside Klarna's chrome with a URL pill, a persistent pink "Pay with Klarna" footer, and a smooth slide-up checkout sheet — shopping never leaves the soft Klarna frame.
Smooth Pink CTA
- The very soft (28pt radius) pink button with the slow, gliding press/scale and slide transitions — the tactile signature of "smooth".
Order List Rows
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Hero amount caps ~30pt, schedule dots tighten, 16pt margins |
| iPhone 13/14/15 | 390pt | Standard hero, amount ~36pt, 20pt margins, 4 quick actions |
| iPhone 15/16 Pro | 393pt | Dynamic Island clears the top bar |
| iPhone 15/16 Pro Max | 430pt | Larger hero, more order rows above the fold |
| iPad | 768pt+ | Two-pane (orders list + plan detail), centered checkout sheet |
Dynamic Type
- Titles, body, names, amounts: full scale
- Hero amount: scales but caps to protect the single-line layout
- Tab labels, uppercase labels: fixed
- Schedule amounts/dates: fixed tabular size for alignment under dots
Orientation
- All primary tabs and the checkout flow: portrait-locked on iPhone
- iPad: landscape supported with split layout
Touch Targets
- Pink CTA: 56pt height — unmissable, very soft pill
- Quick-action circles: 56pt
- Order rows: 72pt, full-row tappable
- Tab icons: 24pt glyph, 44pt effective hit
- Schedule dots: 44pt hit area each
Safe Area Handling
- Top: top bar + hero respect safe area / Dynamic Island
- Bottom: tab bar opaque, respects home indicator; the checkout sheet and pink footer float above it
- Sides: 20pt content insets throughout
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-klarna {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #0b051d;
--heading-color: #0b051d;
--link-color: #c8102e;
--link-hover-color: #990c23;
--border-color: #d3d2d6;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(11,5,29,0.06);
--card-hover-shadow: 0 6px 18px rgba(11,5,29,0.12);
--header-bg: #0b051d;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #605d6c;
--button-bg: #c8102e;
--button-text-color: #ffffff;
--button-hover-bg: #990c23;
--button-border: none;
--button-border-radius: 28px;
--button-secondary-bg: #f0f0f1;
--button-secondary-text-color: #0b051d;
--button-secondary-hover-bg: #e2e1e4;
--button-secondary-border: 1px solid #d3d2d6;
--prompt-bg: #f3f3f4;
--prompt-text-color: #0b051d;
--base-font: var(--font-sans);
--heading-font: var(--font-sans);
--card-border-radius: 28px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
Where this came from
- Source document
ios/design-md/finance/klarna/DESIGN.md· 20.4 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.