Klarna Design System

Overview

Klarna's homepage opens on Klarna Black "#0b051d" — a violet-tinted near-black at oklch hue 291, never pure black — and the very next section flips to a pure white "#ffffff" canvas with the same indigo doing every job that used to be inverted text. The token is genuinely bidirectional: 681 uses as text, 635 as border, 5 as background fill. The single saturated brand voltage, Klarna Pink "#ffa8cd" (--colors-bg-brand, --colors-btn-brand), appears exactly once on the page — the "Sign up" pill in the top navigation, paired with a dark "Sign in" pill on Klarna Black. Every other pink moment is the softer wash "#ffd0e2" (--cta40, --sale-background), reserved for tile backgrounds and the soft-pink badge atop the hero phone-mockup illustration. A lavender "#aa89f2" carries the testimonial card on the "People love Klarna" band; the brand's sticky-note lime "#e6ffa9" lives in --colors-klarna-sticky-note but doesn't appear on the home surface. The structural ramp runs "#c4c3ca" (frequency 254) for inputs, "#373544" for secondary text, "#615f6d" for tertiary, and "#e2e2e7" for hairlines.

Black-as-voltage inversion: Where most buy-now-pay-later competitors (Affirm, Afterpay, Sezzle) push a saturated pink or violet on every CTA and use a neutral text color underneath, Klarna inverts the assignment — the indigo-black IS the voltage, and the pink is rationed to a single sign-up pill per page. Klarna Black does the work of both text and border at the same time, which is the rare token assignment that genuinely earns "load-bearing." 32px pill as repeating geometry: The 32px radius appears 89 times on the captured surface — applied to a 40px-tall element it becomes a circular pill, applied to a 400px card it becomes the soft-cornered scene container, applied to the hero phone-mockup it becomes the wide brand frame. Klarna's house shape is the same value at every scale. Two-family economy with platform fallback: Klarna Title handles display 41–90px, Klarna Text handles brand UI 14–24px, and everything else falls through to -apple-system, system-ui, Segoe UI, Roboto, Arial at 14–16px / weight 400 — three layers of typography with no overlap.

Key Characteristics:

• Bidirectional ink token — Klarna Black "#0b051d" carries 1321 uses split between text (681), border (635), and background (5), the rare token that does all three jobs.
• Single pink pill per page — Klarna Pink "#ffa8cd" appears exactly once (the "Sign up" nav CTA), with "#ffd0e2" doing the soft-wash work everywhere else.
• 32px pill geometry — 89 occurrences of the same radius across CTAs, scene cards, the hero phone-mockup, merchant tiles, and product feature cards.
• Klarna Title at 90px / weight 700 — the hero "Pay your way with Klarna" headline is the most-confident voice in the system, with body holding at weight 400 underneath.
• Dark hero, light page — the marketing surface inverts: hero is Klarna Black with "#ffffff" text, the rest of the page is "#ffffff" with "#0b051d" text.
• Lavender testimonial card — the "People love Klarna" band swaps in "#aa89f2" as a chromatic interlude, but only on the testimonial tile, never on a button.
• Storefront-merchandising variable layer — the CSS layer declares 11 --ribbon-* chip tokens (sale, popular, trending, watched, rank, in-stock, out-of-stock) reused from the Klarna shopping product, an unusual residue on a marketing home page.

Colors

Source pages: home (/us/), top nav and dark "Pay your way with Klarna" hero, the white-canvas "Use Klarna anywhere you shop" tile strip, the four-card product feature grid, the "People love Klarna" testimonial band, the "Pay with Klarna at your favorite brands" merchant grid.

Brand & Accent

• Klarna Pink ({colors.primary} — "#ffa8cd") — frequency 1 (bg). Used as --colors-bg-brand, --colors-badge-brand, --colors-btn-brand, --cta30, --cta60, --colors-klarna-pink. Reserved for the single "Sign up" pill in the top nav — Klarna's rationed voltage, never as a body fill, never as a hairline.
• Klarna Pink Wash ({colors.primary-wash} — "#ffd0e2") — frequency 1 (bg). --cta40, --sale-background, --ribbon-sale-background. The softer pink that carries tile-background and badge-fill duties when the brand needs a pink mood without spending the voltage.
• Accent Eggplant ({colors.accent-eggplant} — "#2c2242") — frequency 1 (bg). --brand90, --support-primary90, --colors-text-body. A deep purple-violet two stops up from Klarna Black, used as a body text color on the rare dark-canvas card.
• Accent Lavender ({colors.accent-lavender} — "#aa89f2") — frequency 1 (bg). --brand40, --support-primary40, --info40. The chromatic moment on the "People love Klarna" testimonial card — Klarna's only saturated purple on the home surface.
• Accent Stickynote ({colors.accent-stickynote} — "#e6ffa9") — frequency 1 (bg). --colors-klarna-sticky-note, --stickynote10, --ribbon-watched-background. A pastel lime tied to the Klarna shopping merchandising layer; appears in the CSS layer but not on the captured home band.

Surface

• Canvas ({colors.canvas} — "#ffffff") — frequency 153 (text 44, bg 63, border 44). --background-page, --background-primary, --colors-bg-page. The page surface below the hero — every product band, every merchant tile sits on white.
• Canvas Inverse ({colors.canvas-inverse} — "#0b051d") — frequency 5 as bg. --colors-bg-inverse, --background-inverse, --footer-background, --illustration-background. The dark hero, the footer, and the hero phone-mockup frame all run on this single token.
• Canvas Elevated ({colors.canvas-elevated} — "#1d192a") — frequency 7 (bg). --border95. A near-black with a touch more violet than the canvas inverse, used on the rare elevated panel above the hero.
• Surface Subtle ({colors.surface-subtle} — "#f3f3f5") — frequency 0 (declared in --colors-bg-subtle, --background-secondary, --background-loading1, --ribbon-foreign-store-background). The off-white tile fill for the four product feature cards and the merchant grid wash.
• Surface Tertiary ({colors.surface-tertiary} — "#c4c3ca") — frequency 254 (text 129, border 125). --input-decoration, --colors-border-neutral, --grayscale30. The chrome of the email input and the secondary tile dividers.

Text

• Ink ({colors.ink} — "#0b051d") — frequency 1321 (text 681, border 635, bg 5). --colors-text-default, --brand, --colors-klarna-black, --text-content-primary, --primary-action-base. Carries every line of body copy on the white canvas and every primary CTA fill in the same token.
• Ink Secondary ({colors.ink-secondary} — "#373544") — frequency 13. --text-secondary, --text-content-secondary, --input-placeholder, --grayscale80. The slightly-lifted ink for secondary captions and the email-input placeholder.
• Ink Tertiary ({colors.ink-tertiary} — "#615f6d") — frequency 14. --text-tertiary, --grayscale60, --border60. The footer link color and the captions under merchant tile names.
• Ink Disabled ({colors.ink-disabled} — "#96959f") — frequency 0 (declared in --text-disabled, --colors-text-placeholder, --grayscale40). Mid-gray neutral reserved for unavailable controls and disabled labels.

Hairlines

• Hairline ({colors.hairline} — "#e2e2e7") — frequency 12 (border 8, bg 2, shadow 2). --border, --colors-border-default, --header-border, --colors-klarna-herring. The 1px divider on tiles, the input-secondary border, the header-border separating nav from content.
• Hairline Strong ({colors.hairline-strong} — "#0b051d") — same ink token doubling as a strong-border color on the "Sign in" pill and any element needing a 1px Klarna-Black outline.

Semantic

• Focus ({colors.focus} — "#7b57d8") — --focus, --brand50, --colors-badge-accent-inverse. A violet-leaning indigo used on focus rings — chromatic enough to be visible against the page but tied to the brand's violet-axis palette.
• Positive ({colors.positive} — "#046234") — --colors-text-positive, --colors-bg-positive. A forest green for in-stock badges and success state.
• Negative ({colors.negative} — "#931414") — --colors-text-negative. A dark wine red for validation errors.
• Warning ({colors.warning} — "#664600") — --colors-text-warning. A muted ochre for non-blocking warnings.

Typography

Font Family

Klarna runs two proprietary families: Klarna Title for display (hero, h2, h3) and Klarna Text for the brand-tinted UI register (the 24px / 700 spans, the 20px / 700 h4 cards, the 16px / 500 brand label with -0.048px letter-spacing). Everything else — buttons, body paragraphs, nav links, footer copy — falls through to the platform stack -apple-system, system-ui, Segoe UI, Roboto, Arial, sans-serif. The economy is a deliberate three-layer arrangement: Klarna Title carries the most-confident voice, Klarna Text carries the brand UI accents, and the platform stack carries everything that should look native on each operating system.

When the Klarna families are unavailable, fall back to Inter Display at weight 700 with -0.2px letter-spacing for the title role, and Inter Variable at weight 400 for the platform-stack body. Avoid Helvetica, Roboto Slab, and SF Pro Display — they each carry too much geometric stiffness for the slight humanist softening Klarna Title brings to its 90px hero.

Hierarchy

Principles

• Title for display, Text for brand UI, platform for body. The three layers don't overlap — never set body paragraphs in Klarna Title, never set a nav link in Klarna Text. The platform stack is the largest territory.
• Negative tracking only on Klarna Text. The -0.048px and -0.2px tracking values are scoped to the Klarna Text family. Klarna Title runs at 0 tracking; platform-stack body runs at 0 tracking. Don't paint negative letter-spacing across all three layers.
• Weight 700 on display. The hero 90px and the 49px h3 hit weight 700; the secondary display tiers (52px, 41px) drop to weight 500. The brand specifically uses 700 as the loudest voice and never goes higher.
• Body holds at 400. Every paragraph, every footer line, every nav link runs at weight 400 / 14–16px. Bumping body to 500 reads as the wrong category — Klarna's body register stays restrained underneath the loud display.

Note on Font Substitutes

Klarna Title and Klarna Text are proprietary and not licensed for redistribution. Inter Display at weight 700 with -0.2px tracking is the closest open-source approximation for the title role; Inter Variable at weight 400 with 0 tracking is canonical for the platform-stack body. For the Klarna Text brand UI, Inter Variable at weight 500 / 700 with -0.048px tracking is the closest match.

Layout

Spacing System

• Base unit: 4px, with 8px / 16px / 32px doing most of the mid-range work and 48px / 80px carrying the vertical section rhythm.
• Tokens: {spacing.xxs} 2px · {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.base} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.2xl} 48px · {spacing.3xl} 80px.
• Section padding: 80px vertical on marketing bands (the observed 80px 0px spacing repeats 8 times); 48px between the product card and its description; 32px inside the testimonial card.
• Card internal padding: 32px on testimonial cards; 16–24px on product feature cards and merchant tiles; 48px on the hero phone-mockup frame.
• Nav padding: 8px 16px per nav link; the top-nav bar itself sits at 60px tall with a 16px horizontal gutter.

Grid & Container

• The home surface runs a centered max-width with 32px–80px outer gutters on desktop; the hero phone-mockup card spans the full 1440px wide-breakpoint width.
• The "Use Klarna anywhere you shop" tile strip runs a 4-up grid that collapses to 2-up at tablet and 1-up at mobile.
• The merchant grid runs a 6-up grid (Amazon, Macy's, Walmart, Target, eBay, Wayfair, plus several more) at desktop, collapsing to 3-up then 2-up at narrower breakpoints.

Whitespace Philosophy

Klarna runs vertical air at an 80px section rhythm — most marketing bands sit with 80px of vertical padding above and below the content, and the hero phone-mockup card receives a 48px internal pad. The dark hero does heavy contrast work against the light bands below it, so the section breaks rely on canvas-color change rather than added whitespace. Inside cards, the rhythm tightens to 16–24px.

Elevation & Depth

Decorative Depth

Klarna's depth system is largely flat — the hero is a single dark band with a phone illustration sitting flat against it, and the bands below alternate between a white "#ffffff" canvas and a subtle "#f3f3f5" tile fill. There are no atmospheric gradients on the home surface, and box-shadows are scoped to the rare hovering testimonial card (extracted as a low-alpha black at 6 shadow uses). The deep canvas-vs-tile contrast does the work of elevation: a 32px-radius "#f3f3f5" tile against the "#ffffff" page reads as one step up without a shadow.

Shapes

Border Radius Scale

Geometry Notes

The 32px pill is Klarna's repeating signature — the same radius appears 89 times on the home surface, applied at every scale: on a 40px-tall pill it produces a fully circular pill (the "Sign in" CTA), on a 400px-wide card it produces a soft-cornered scene-card (the testimonial), on a 600px hero illustration it produces the wide brand frame around the phone-mockup. The 2px hairline radius is the second-most-frequent shape (42 uses), used on hairline strokes and the email-input border. The brand deliberately skips 12px, 20px, and 40px — those values don't appear in the system.

Components

Buttons

button-primary — the dark "Sign in" pill on Klarna Black, used as the primary auth CTA in the top nav.

• Background {colors.ink} ("#0b051d"), text {colors.on-inverse} ("#ffffff"), type {typography.body-md} (16px / 400, platform stack), padding 10px 20px, height 40px, rounded {rounded.full} 9999px.

button-brand — the pink "Sign up" pill, Klarna's rationed voltage, exactly one per page.

• Background {colors.primary} ("#ffa8cd"), text {colors.on-primary} ("#0b051d") — the ink reads against pink rather than the inverse, padding 10px 20px, height 40px, rounded {rounded.full}.

button-secondary — the white-with-black-outline alternative.

• Background {colors.canvas} ("#ffffff"), text {colors.ink}, 1px {colors.hairline-strong} border, same pill geometry as primary. Used on the "Learn more" CTA below the hero.

button-ghost — the unbordered text-only CTA, used inside the merchant grid tile.

• Background {colors.canvas}, text {colors.ink}, no border, same pill geometry.

Inputs & Forms

text-input — standard form field.

• Background {colors.canvas}, text {colors.ink}, 1px {colors.surface-tertiary} border, padding 8px 12px, height 40px, rounded {rounded.md} 16px.
• Focus state text-input-focused: border swaps to a 2px {colors.ink} outline rather than a colored focus ring.

Navigation

top-nav — full-width nav at the top of every page, white-canvas with a 1px hairline below.

• Background {colors.canvas} ("#ffffff"), text {colors.ink}, padding 8px 16px, height 60px, with a 1px {colors.hairline} bottom border. Logo wordmark on the left, primary nav (Pay later, Pay in 4, Business, Klarna Card, Sign in, Sign up) on the right.

nav-link — individual nav cell.

• Type {typography.body-md} (16px / 400, platform stack), padding 0 16px, height 26px. Hover state lifts to a subtle "#f3f3f5" pill background but holds the same 16px / 400 text size.

Cards & Containers

card-hero-mockup — the phone-mockup card occupying the right half of the hero band.

• Background {colors.canvas-inverse} ("#0b051d"), text {colors.on-inverse} ("#ffffff"), padding 48px, rounded {rounded.pill} 32px. Composites a phone screen showing the Klarna checkout flow with a soft-pink badge ("#ffd0e2") over the screenshot.

card-product — the four "Why use Klarna" product feature cards.

• Background {colors.canvas} ("#ffffff"), text {colors.ink}, padding 16px, rounded {rounded.pill} 32px, 1px {colors.hairline} border.

card-merchant-tile — the cells in the "Pay with Klarna at your favorite brands" grid.

• Background {colors.surface-subtle} ("#f3f3f5"), text {colors.ink}, type {typography.label-md} (16px / 500, Klarna Text, -0.048px), padding 16px, rounded {rounded.pill}. Each tile holds a merchant logo at center and an optional product photo.

card-testimonial-light — the off-white testimonial tile in the "People love Klarna" band.

• Background {colors.surface-subtle}, text {colors.ink}, padding 32px, rounded {rounded.pill}. Holds a quote, attribution, and a 5-star rating.

card-testimonial-lavender — the lavender testimonial tile, Klarna's only saturated-purple band on the home surface.

• Background {colors.accent-lavender} ("#aa89f2"), text {colors.ink}, padding 32px, rounded {rounded.pill}. Sits adjacent to the off-white testimonial card to break up the white repetition.

Pills, Tags, and Chips

badge-soft-pink — the soft-wash pink badge overlaid on the hero phone-mockup.

• Background {colors.primary-wash} ("#ffd0e2"), text {colors.ink}, type {typography.caption}, padding 4px 8px, rounded {rounded.full}. Carries the "Pay in 4 interest-free installments" callout.

pill-stickynote — the sticky-note lime pill, declared in --colors-klarna-sticky-note but absent from the home capture.

• Background {colors.accent-stickynote} ("#e6ffa9"), text {colors.ink}, type {typography.caption}, padding 4px 8px, rounded {rounded.full}. The token exists in the CSS layer for the Klarna shopping merchandising chips.

Signature Components

section-header-light — section opener band on the white canvas.

• Background {colors.surface-subtle} or {colors.canvas}, text {colors.ink}, type {typography.display-sm} (41px / 500, Klarna Title), padding 80px 0px.

footer — site-wide footer on Klarna Black.

• Background {colors.canvas-inverse} ("#0b051d"), text {colors.on-inverse} ("#ffffff"), type {typography.body-sm} (14px / 400), padding 80px 0px. Holds the Pay later / Business / Resources / About columns plus regional links and the Klarna app QR.

hairline-divider — the 1px line separating bands and the inside-tile dividers.

• Background {colors.hairline} ("#e2e2e7"), height 1px, no padding. Carries 635 of the 1321 Klarna Black uses when it switches to a strong dark divider on the dark canvas instead.

Do's and Don'ts

Do

• Reserve {colors.primary} ("#ffa8cd") for one CTA per page — the "Sign up" pill in the top nav. The voltage is what it is because the rest of the chrome is monochrome.
• Use {colors.ink} ("#0b051d") for both text and border on the light canvas — the token's frequency split (681 text, 635 border) is the brand's bidirectional ink assignment.
• Apply the 32px pill radius ({rounded.pill}) at every card scale — buttons at 40px height become circular pills, product cards at 200px+ become soft-cornered scene-cards, the hero phone-mockup card carries the same value.
• Set display tiers in Klarna Title at weight 700 for the hero and weight 500 for secondary display headings — the brand uses 700 as its loudest voice and never goes higher.
• Hold body copy at 14–16px / weight 400 in the platform stack — Klarna Title and Klarna Text are the brand registers, but the body workhorse is the OS font.
• Pair the dark "Sign in" pill with the pink "Sign up" pill side by side in the nav — two CTAs, two voltages, one auth pair.
• Render the testimonial band with one lavender "#aa89f2" tile and one off-white "#f3f3f5" tile — the lavender is the only saturated purple permitted on the home surface.

Don't

• Don't use Klarna Pink "#ffa8cd" on more than one CTA per page — the moment a second pink pill appears, the voltage flattens and the brand reads as a generic BNPL competitor.
• Don't use pure black anywhere as text or fill — Klarna's "black" is "#0b051d" (violet-tinted, oklch hue 291). A pure-black hex breaks the violet-axis palette and reads as the wrong category.
• Don't paint body copy in Klarna Title or Klarna Text — those families are display and brand UI only. Body and nav fall through to the platform stack -apple-system, system-ui, Segoe UI, Roboto, Arial.
• Don't set Klarna Title at weight 400 or 600 — the brand specifically uses 500 (secondary display) and 700 (hero). Snapping to 600 reads as Inter at Inter-default settings and removes the typographic tell.
• Don't apply the -0.048px or -0.2px letter-spacing globally — those negative-tracking values are scoped to Klarna Text only. Platform-stack body and nav run at 0 tracking.
• Don't use a 12px or 20px corner radius on a card — the brand's scale collapses to 2 / 8 / 16 / 24 / 32 / 9999, and the 32px pill is the dominant geometry. Intermediate radii read as a different system.
• Don't fill {colors.accent-stickynote} ("#e6ffa9") on a CTA — it's reserved for the Klarna shopping merchandising chips (--ribbon-watched-background) and reads wrong on a marketing surface as a button color.

Responsive Behavior

Breakpoints

Touch Targets

• Pill buttons at 40px height clear the 40×40px minimum on desktop; on mobile the buttons stay at 40px since the pill height is already at the floor of the WCAG target spec.
• Form fields hold at 40px minimum height across all breakpoints.

Collapsing Strategy

• Display tiers stair-step 90 → 72 → 52 → 41px through the breakpoints.
• Product feature grid stair-steps 4-up → 2-up → 1-up.
• Merchant tile grid stair-steps 6-up → 5-up → 3-up → 2-up.
• Top-nav inline links collapse into a hamburger drawer at <768px; the "Sign in" and "Sign up" pills stay visible in the collapsed header.

Known Gaps

• Checkout widget palette: the merchant-side iframe with the Pay-in-4, Pay-in-30, and Financing tabs uses a different sub-palette (and a different button geometry) than the home marketing surface, and is not captured here.
• Klarna Card product mockup: the physical card-front and card-back illustrations appear on different breakpoints and during different campaign cycles; only the phone-mockup hero is captured in this snapshot.
• Dashboard product UI: the authenticated dashboard behind the "Sign in" pill carries a separate dark-canvas theme with the same Klarna Black "#0b051d" but a different component vocabulary, and is not part of this marketing-system spec.
• Klarna shopping app surface: the shopping product reuses the same CSS variable layer (notice the --ribbon-* chip tokens declared on the marketing home) but renders a different storefront-merchandising chrome on top. The shopping-app palette would need its own DESIGN.md.
• Motion specs: the hero phone-mockup hover-lift, the pink-pill press-state, and the testimonial-card auto-rotation use a transition system that was not extractable from the captured marketing surfaces.
• Hover and pressed states: only the primary button geometry is captured. Card hover, nav-link hover, and merchant-tile hover specs were not reliably extractable from the home snapshot.
• Regional sub-brand palettes: Klarna US, UK, EU, AU, and the local-currency sub-sites each carry small accent shifts on top of the core Klarna Black + Klarna Pink system; only the US homepage is captured here.