DESIGN.md inspired by Klarna

---
name: Klarna
tagline: 'Klarna PINK `#ffa8cd` on white, near-black navy `#0b051d` ink, Klarna Title at billboard scale.'
updated_at: 2026-05-28T22:15:33.398Z
published_at: 2026-05-28T22:15:33.398Z
author: webdesignhot
source_url: https://www.klarna.com
spec: webdesignhot/0.2
profile: catalog
quality: curated
featured: false
categories: [saas]
tags: [light, playful, sans, fintech, pink]
preview_swatch: ['#ffffff', '#ffa8cd', '#0b051d']
related: []
description: 'Klarna''s site is a bright white canvas carrying one unmistakable signature: Klarna PINK — a candy bubblegum (`#ffa8cd`, the brand''s softer audited cut of the famous `#ffb3c7`) that turns a Swedish buy-now-pay-later fintech into something closer to a confectionery brand than a bank. The ink is a deep near-black navy (`#0b051d`) rather than true black, and it does the heavy lifting: it is the body color, the headline color, AND the primary CTA fill — a dark pill (radius 999px) that anchors every page. Pink is the secondary, the highlight, the splash; navy is the structure. Over all of it sits Klarna Title, a custom display typeface set at genuinely enormous sizes — an h1 can run ~147px, headlines that read as billboards rather than marketing copy. The register is playful, bold, oversized-type editorial: generous whitespace, a single rounded radius family (cards at ~24px, buttons as full pills), and a confident lowercase-friendly voice that talks about money the way a lifestyle brand talks about shopping. Where Stripe whispers in developer-grey and PayPal reassures in two blues, Klarna grins in pink — the most consumer-fashion-forward identity in the entire BNPL category.'


# Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger).
# Maps role names to this entry's actual token names so role-aware
# downstream tools resolve `theme.background` → entry's `bg`, etc.
# Auto-generated by scripts/add-aliases.mjs — do not edit manually;
# regenerate after changing color token names.
aliases:
  background: bg
  foreground: text
  primary: brand
  primary-foreground: on-brand
  muted: text-muted
  border: border
  ring: focus-ring
colors:
  bg: '#ffffff'
  bg-soft: '#f7f7f8'
  bg-pink-wash: '#fff0f6'
  surface: '#0b051d'
  surface-card: '#0b051d'
  surface-light: '#ffffff'
  text: '#0b051d'
  text-on-dark: '#ffffff'
  text-muted: '#4a4458'
  text-subtle: '#76707f'
  brand: '#ffa8cd'
  brand-strong: '#ffb3c7'
  brand-deep: '#eb6f9e'
  brand-soft: '#ffe2ee'
  on-brand: '#0b051d'
  cta-dark: '#0b051d'
  cta-dark-hover: '#1c1430'
  on-cta-dark: '#ffffff'
  link: '#0b051d'
  link-hover: '#eb6f9e'
  border: '#e4e2e8'
  border-strong: '#0b051d'
  border-pink: '#ffa8cd'
  semantic-success: '#1f8a4c'
  semantic-warning: '#b8740f'
  semantic-danger: '#d23c3c'
  semantic-info: '#0b051d'
  focus-ring: '#0b051d'
  shadow-ambient: 'rgba(11, 5, 29, 0.06)'
  shadow-soft: 'rgba(11, 5, 29, 0.10)'
  shadow-strong: 'rgba(11, 5, 29, 0.16)'

typography:
  display:
    family: '"Klarna Title", system-ui, -apple-system, sans-serif'
    weights: [500, 600, 700]
    opentype-features: ['kern', 'liga']
  body:
    family: '-apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
    weights: [400, 500, 600]
  mono:
    family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'
    weights: [400, 500]
  scale:
    display-mega:    { size: 147, weight: 700, lineHeight: 0.95, tracking: '-0.035em', family: display }
    display-hero:    { size: 96,  weight: 700, lineHeight: 0.98, tracking: '-0.03em',  family: display }
    display-lg:      { size: 72,  weight: 700, lineHeight: 1.0,  tracking: '-0.025em', family: display }
    h1:              { size: 56,  weight: 700, lineHeight: 1.05, tracking: '-0.02em',  family: display }
    h2:              { size: 40,  weight: 700, lineHeight: 1.1,  tracking: '-0.018em', family: display }
    h3:              { size: 32,  weight: 600, lineHeight: 1.2,  tracking: '-0.012em', family: display }
    h4:              { size: 24,  weight: 600, lineHeight: 1.25, tracking: '-0.005em', family: display }
    title-md:        { size: 20,  weight: 600, lineHeight: 1.3,  tracking: '0',        family: body }
    body-lg:         { size: 18,  weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body:            { size: 16,  weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body-strong:     { size: 16,  weight: 600, lineHeight: 1.55, tracking: '0',        family: body }
    body-sm:         { size: 14,  weight: 400, lineHeight: 1.5,  tracking: '0',        family: body }
    label:           { size: 13,  weight: 500, lineHeight: 1.4,  tracking: '0',        family: body }
    caption:         { size: 12,  weight: 500, lineHeight: 1.4,  tracking: '0.02em',   family: body }
    eyebrow:         { size: 13,  weight: 600, lineHeight: 1.3,  tracking: '0.04em',   family: body }
    button:          { size: 16,  weight: 600, lineHeight: 1.2,  tracking: '0',        family: body }
    nav-link:        { size: 15,  weight: 500, lineHeight: 1.4,  tracking: '0',        family: body }

radius:
  none: 0
  micro: 2
  sm: 4
  md: 8
  lg: 12
  xl: 16
  card: 24
  pill: 9999

spacing:
  base: 4
  scale: { xxs: 4, xs: 8, sm: 12, base: 16, md: 24, lg: 32, xl: 48, xxl: 64, section: 96, hero: 128 }

layout:
  page-width: 1280
  prose-width: 720
  header-height: 64

components:
  button-primary:      { bg: cta-dark, text: on-cta-dark, padding: '14px 28px', height: 48, radius: pill, font: button }
  button-primary-hero: { bg: cta-dark, text: on-cta-dark, padding: '18px 36px', height: 56, radius: pill, font: button }
  button-pink:         { bg: brand, text: on-brand, padding: '14px 28px', height: 48, radius: pill, font: button }
  button-ghost:        { bg: transparent, text: text, border: '1.5px solid border-strong', padding: '12.5px 26.5px', height: 48, radius: pill, font: button }
  button-text:         { bg: transparent, text: text, font: button }
  card:                { bg: surface-card, text: text-on-dark, border: 'none', radius: card, padding: 32 }
  card-light:          { bg: bg, text: text, border: '1px solid border', radius: card, padding: 32 }
  card-pink:           { bg: brand, text: on-brand, radius: card, padding: 32 }
  input:               { bg: bg, border: '1.5px solid border', text: text, radius: md, padding: '12px 16px', height: 48 }
  badge-pink:          { bg: brand-soft, text: brand-deep, radius: pill, padding: '4px 12px', font: caption }
  top-nav:             { bg: bg, text: text, height: 64, font: nav-link }
  footer:              { bg: surface, text: text-on-dark, padding: '64px 0', font: body-sm }

motion:
  ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
  ease-entrance: 'cubic-bezier(0, 0, 0.2, 1)'
  duration-fast: 150
  duration-standard: 240
  duration-slow: 320
  reduced-motion: 'respects prefers-reduced-motion: reduce — pink-blob parallax, oversized-headline reveal, and card-lift hovers collapse to static states'

breakpoints:
  mobile: 640
  tablet: 1024
  desktop: 1280
  wide: 1536

shadows:
  ambient: 'rgba(11, 5, 29, 0.06) 0 1px 2px'
  soft: 'rgba(11, 5, 29, 0.10) 0 8px 24px'
  strong: 'rgba(11, 5, 29, 0.16) 0 24px 48px -8px'
  focus: '0 0 0 3px rgba(11, 5, 29, 0.35)'

accessibility:
  contrast-text-on-bg: 18.1
  contrast-on-brand-on-brand: 12.9
  contrast-white-on-cta-dark: 18.1
  contrast-muted-on-bg: 8.2
  focus-ring: '3px solid #0b051d with 2px offset (light); white ring on dark surfaces'
  reduced-motion-honored: true
  min-target: 44

dark-mode: light-only
---

## 1. Visual Theme & Atmosphere

Klarna's marketing surface is a **bright white canvas carrying one unmistakable signature**: Klarna PINK. The pink is a candy-bubblegum hue — `#ffa8cd` in this entry's audited sampling, the softer cut of the brand's famous `#ffb3c7` — and it is the single move that makes a Swedish buy-now-pay-later fintech read more like a confectionery or fashion brand than a financial institution. Where every competitor in the BNPL category defaults to corporate-trust blues and greys, Klarna grins in pink. It is the most consumer-fashion-forward identity in the entire category, and the pink is the reason.

But the pink does not carry the page alone, and reading it as "the Klarna color" misunderstands the system. The **structural** color is a deep near-black navy, **`#0b051d`** — not true black, a hair warmer and bluer, a color that reads as ink rather than void. Navy does the heavy lifting: it is the body text color, the headline color, AND the primary CTA fill. Klarna's main call-to-action is a **dark navy pill** at full radius (999px), not a pink one. Pink is the secondary, the highlight, the splash-block behind an oversized headline, the fill of a feature card, the wash behind a product shot. The relationship is deliberate: **navy is the skeleton, pink is the skin**. Designers who flood a layout with pink and set CTAs in pink have inverted the system.

Over all of it sits **Klarna Title**, the brand's custom display typeface, set at genuinely enormous sizes. An h1 on the production site can run roughly **147px** — these are not headlines so much as billboards, type used as architecture. The display face is rounded, friendly, and confident; at 147px it fills the viewport and becomes the layout's primary visual element, often with a single pink block or product image as its only companion. This oversized-type editorial register is the brand's loudest typographic statement: Klarna talks about money the way a lifestyle magazine talks about shopping — big, breezy, and unintimidated.

The page rhythm alternates **white breathing-room sections** with **navy or pink full-bleed bands**. A white hero with a 147px navy headline gives way to a navy `#0b051d` band carrying white type and pink accent shapes; that gives way to a row of cards (some navy, some white-bordered, some pink); then back to white. The generous whitespace and the single rounded-radius family (cards at ~24px, buttons as full pills, inputs at 8px) keep the whole thing feeling soft and premium rather than loud-and-cheap — the pink is bold, but the geometry is gentle.

The overall posture is **playful, bold, oversized-type editorial**. Klarna is confident about money without being solemn about it. It is the BNPL brand that feels like it belongs in a fashion campaign — pink, rounded, billboard-typed, and entirely comfortable being the most colorful name in fintech.

**Key Characteristics:**
- White-by-default canvas (`#ffffff`) — bright, airy, generous whitespace
- Signature Klarna PINK `#ffa8cd` (audited; brand `#ffb3c7`) — the splash, never the structure
- Near-black navy `#0b051d` ink — body, headlines, AND the primary CTA fill
- Primary CTA is a **dark navy pill** (radius 999px), not pink — pink is the secondary
- Klarna Title custom display face at billboard scale — h1 up to ~147px
- Single rounded-radius family: ~24px cards, 8px inputs, full-pill buttons
- Oversized-type editorial layout — headline as architecture
- Navy and pink full-bleed bands punctuating white sections
- Soft geometry + bold color — premium-playful, never garish
- Lowercase-friendly, breezy voice — money treated as lifestyle, not paperwork

## 2. Color Palette & Roles

### Canvas
- **Background** (`#ffffff`) [→ `bg`]: The default white canvas — bright, airy, the brand's ground state.
- **Background Soft** (`#f7f7f8`) [→ `bg-soft`]: Faint cool-grey section break for alternating bands.
- **Background Pink Wash** (`#fff0f6`) [→ `bg-pink-wash`]: Lightest pink tint behind product shots and soft feature blocks.

### Text
- **Ink** (`#0b051d`) [→ `text`]: Near-black navy — primary headline and body color on white.
- **On Dark** (`#ffffff`) [→ `text-on-dark`]: White type on navy and pink surfaces.
- **Muted** (`#4a4458`) [→ `text-muted`]: Secondary text, captions, supporting copy on white.
- **Subtle** (`#76707f`) [→ `text-subtle`]: Lowest hierarchy — metadata, legal, disabled labels.

### Brand
- **Klarna PINK** (`#ffa8cd`) [→ `brand`]: The signature — audited cut. Splash blocks, feature-card fills, accent shapes, pink CTAs.
- **Brand Strong** (`#ffb3c7`) [→ `brand-strong`]: The canonical guideline pink — slightly more saturated, large fills.
- **Brand Deep** (`#eb6f9e`) [→ `brand-deep`]: Deeper rose for pink-on-white text/links where contrast matters.
- **Brand Soft** (`#ffe2ee`) [→ `brand-soft`]: Pale pink — badge backgrounds, hover washes.
- **On Brand** (`#0b051d`) [→ `on-brand`]: Navy ink on pink — pink is light, so text on it is dark, not white.

### CTA / Dark
- **CTA Dark** (`#0b051d`) [→ `cta-dark`]: The primary button fill — a navy pill. The brand's main action color.
- **CTA Dark Hover** (`#1c1430`) [→ `cta-dark-hover`]: Slightly lifted navy on hover.
- **On CTA Dark** (`#ffffff`) [→ `on-cta-dark`]: White label on the navy pill.

### Interactive
- **Link** (`#0b051d`) [→ `link`]: Navy, underlined-on-hover at rest.
- **Link Hover** (`#eb6f9e`) [→ `link-hover`]: Deep-rose on hover, with underline.
- **Focus Ring** (`#0b051d`) [→ `focus-ring`]: Navy ring on light surfaces; white ring on navy/pink surfaces.

### Borders
- **Border** (`#e4e2e8`) [→ `border`]: Default hairline on white — input borders, card dividers.
- **Border Strong** (`#0b051d`) [→ `border-strong`]: Navy outline for ghost buttons and emphasized cards.
- **Border Pink** (`#ffa8cd`) [→ `border-pink`]: Pink outline for accent chips and selected states.

### Surface
- **Surface** (`#0b051d`) [→ `surface`]: Navy full-bleed band — footer, dark feature sections.
- **Surface Card** (`#0b051d`) [→ `surface-card`]: Default navy card fill (white type).
- **Surface Light** (`#ffffff`) [→ `surface-light`]: White card on white canvas (uses border for definition).

### Shadow
- **Ambient** (`rgba(11, 5, 29, 0.06)`) [→ `shadow-ambient`]: Faint resting lift on cards.
- **Soft** (`rgba(11, 5, 29, 0.10)`) [→ `shadow-soft`]: Hover lift on interactive cards.
- **Strong** (`rgba(11, 5, 29, 0.16)`) [→ `shadow-strong`]: Modals, dropdowns, floating panels.

Shadows are **navy-tinted, not pure-black** — `rgba(11,5,29,…)` — so they sit warm against the white canvas and never read as a hard grey drop.

### Semantic
- **Success** (`#1f8a4c`) [→ `semantic-success`]: Confirmation green — approved, paid, on track.
- **Warning** (`#b8740f`) [→ `semantic-warning`]: Caution amber — payment due soon.
- **Danger** (`#d23c3c`) [→ `semantic-danger`]: Error red — declined, missed payment.
- **Info** (`#0b051d`) [→ `semantic-info`]: Informational — uses navy, the brand's neutral authority.

## 3. Typography Rules

### Font Family

**Display: Klarna Title** — the brand's custom display typeface, rounded and friendly, built for scale. This is the face that runs at billboard sizes (h1 up to ~147px). Weights deployed: 500, 600, 700. The display tier carries hard negative tracking (-0.018em to -0.035em) so that enormous headlines stay tight and architectural rather than sprawling. Fallback chain: `"Klarna Title", system-ui, -apple-system, sans-serif` — hands off to the platform UI sans if the custom face hasn't loaded.

**Body: System sans** — Klarna sets running copy in the native platform UI stack: `-apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`. Body type is plain, legible, and deliberately unshowy — all the personality lives in the display tier and the color. Weights: 400, 500, 600.

**Mono: System mono** — `ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace`, used sparingly for reference codes, payment IDs, and tabular figures. Weights: 400, 500.

**OpenType features**: `kern` and `liga` on the display face for clean billboard headlines.

### Hierarchy

| Role          | Font         | Size | Weight | Line Height | Tracking  | Notes                                          |
|---------------|--------------|------|--------|-------------|-----------|------------------------------------------------|
| display-mega  | Klarna Title | 147  | 700    | 0.95        | -0.035em  | Top-of-page billboard headline                 |
| display-hero  | Klarna Title | 96   | 700    | 0.98        | -0.03em   | Standard hero headline                         |
| display-lg    | Klarna Title | 72   | 700    | 1.0         | -0.025em  | Large section opener                           |
| h1            | Klarna Title | 56   | 700    | 1.05        | -0.02em   | Page title                                     |
| h2            | Klarna Title | 40   | 700    | 1.1         | -0.018em  | Section heading                                |
| h3            | Klarna Title | 32   | 600    | 1.2         | -0.012em  | Subsection heading                             |
| h4            | Klarna Title | 24   | 600    | 1.25        | -0.005em  | Card / feature title                           |
| title-md      | System sans  | 20   | 600    | 1.3         | 0         | List heading, small card title                 |
| body-lg       | System sans  | 18   | 400    | 1.55        | 0         | Lead paragraph                                 |
| body          | System sans  | 16   | 400    | 1.55        | 0         | Default body                                   |
| body-strong   | System sans  | 16   | 600    | 1.55        | 0         | Inline emphasis                                |
| body-sm       | System sans  | 14   | 400    | 1.5         | 0         | Secondary body                                 |
| label         | System sans  | 13   | 500    | 1.4         | 0         | Form labels, chips                             |
| caption       | System sans  | 12   | 500    | 1.4         | 0.02em    | Metadata, fine print                           |
| eyebrow       | System sans  | 13   | 600    | 1.3         | 0.04em    | Section eyebrow / kicker (uppercase)           |
| button        | System sans  | 16   | 600    | 1.2         | 0         | All CTA labels                                 |
| nav-link      | System sans  | 15   | 500    | 1.4         | 0         | Top navigation                                 |

### Principles

- **Display is Klarna Title; everything else is system sans.** The brand personality is concentrated entirely in the display tier — body copy is deliberately neutral so the headlines and color do the talking.
- **Headlines are architecture, not copy.** The display-mega tier (up to 147px) is sized to fill a viewport. Treat the headline as the layout's primary visual element, not a label above content.
- **Hard negative tracking scales with size.** The bigger the type, the tighter the tracking: -0.035em at 147px, easing to near-zero at h4. This keeps billboard headlines tight and intentional.
- **Tight display line-height (0.95–1.1).** Big headlines stack with minimal leading so multi-line titles read as a single block.
- **Navy ink, never pure black.** Headlines and body are `#0b051d`, a near-black navy — warmer and softer than `#000000` against white.
- **Body stays at 400 weight, 1.55 line-height.** Comfortable, airy reading — the whitespace generosity extends into the type.
- **Eyebrows are small, spaced, and uppercase.** 13px / 600 / 0.04em tracking — a quiet kicker above the loud display headline.

## 4. Component Stylings

### Buttons

**Primary CTA** ("Sign up", "Get the app", "Shop now") — the signature dark pill
- Background: `#0b051d` (CTA Dark navy)
- Text: `#ffffff`, weight 600, 16px
- Padding: 14px / 28px
- Height: 48px
- Radius: pill (9999)
- Hover: bg `#1c1430`, optional ambient lift
- Use case: every primary action — this navy pill is the brand's main CTA, NOT pink

**Hero CTA** (large)
- Same as primary but 18px / 36px padding, 56px height
- Use case: hero sections, top-of-page conversion

**Pink CTA** (secondary emphasis)
- Background: `#ffa8cd` (Klarna PINK)
- Text: `#0b051d` (navy — pink is light, text is dark), weight 600
- Padding: 14px / 28px, height 48px, radius pill
- Hover: bg `#ffb3c7` (brand-strong)
- Use case: secondary action or a playful accent CTA on a white/navy section

**Ghost / Outline** ("Learn more")
- Background: transparent
- Text: `#0b051d`, weight 600
- Border: 1.5px solid `#0b051d`
- Padding: 12.5px / 26.5px, height 48px, radius pill
- Hover: bg `#0b051d`, text `#ffffff` (fills to solid)

**Text Button** ("See all")
- Background: transparent
- Text: `#0b051d`, weight 600, underline-on-hover; hover color `#eb6f9e`

### Cards

**Dark Card** (the default Klarna feature card)
- Background: `#0b051d` (navy)
- Text: `#ffffff`
- Radius: 24px
- Padding: 32px
- No border; ambient shadow `rgba(11,5,29,0.06) 0 1px 2px`
- Hover: lift to soft shadow `rgba(11,5,29,0.10) 0 8px 24px`
- Use case: 3-up feature grid, product highlight

**Light Card**
- Background: `#ffffff`
- Text: `#0b051d`
- Border: 1px solid `#e4e2e8` (definition comes from the border, not a shadow)
- Radius: 24px, padding 32px
- Use case: white-on-white content, comparison cards

**Pink Card**
- Background: `#ffa8cd` (Klarna PINK)
- Text: `#0b051d` (navy)
- Radius: 24px, padding 32px
- Use case: the splash card — one per section, the chromatic punctuation

### Badges, Tags, Pills

**Pink Badge**
- Background: `#ffe2ee` (brand-soft)
- Text: `#eb6f9e` (brand-deep), weight 500/600, 12px
- Padding: 4px / 12px, radius pill
- Use case: "New", "0% interest", "Popular"

**Navy Chip**
- Background: `#0b051d`, text `#ffffff`, radius pill, 4px / 12px
- Use case: filter chips, category tags

### Inputs / Forms

**Text Input**
- Background: `#ffffff`
- Border: 1.5px solid `#e4e2e8`
- Radius: 8px
- Height: 48px, padding 12px / 16px
- Text: `#0b051d`; placeholder `#76707f`
- Focus: border `#0b051d` 1.5px, ring `0 0 0 3px rgba(11,5,29,0.35)`
- Use case: email, search, checkout fields

**Select / Dropdown**
- Same shell as text input, navy chevron, 8px radius
- Open menu: white surface, 24px-ish radius, strong shadow

### Navigation

**Top Nav**
- Height: 64px
- Background: `#ffffff`
- Subtle bottom hairline `#e4e2e8` on scroll
- Logo left (Klarna wordmark / "K" mark), nav links center, "Log in" (ghost) + "Sign up" (navy pill) right
- Nav link: 15px / 500, color `#0b051d`; hover: color `#eb6f9e` or underline

**Footer**
- Background: `#0b051d` (navy full-bleed)
- Text: `#ffffff` for headers, `rgba(255,255,255,0.7)` for links
- Padding: 64px vertical
- Klarna wordmark + pink accent detail

## 5. Layout Principles

### Spacing System
Base 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128. Section spacer 96px; hero 128px. Klarna's spacing is **generous** — the whitespace is part of the premium-playful feel. Big headlines need big margins.

### Grid & Container
- Page max-width 1280px
- Prose width 720px
- 12-col grid with 24px–32px gutters
- Hero: full-bleed white or navy/pink band, content max 1280px
- Cards typically arranged 3-up on desktop with 24px–32px gaps

### Whitespace Philosophy
Klarna treats whitespace as luxury. The 147px headlines are loud, but they sit in **acres of white** — the contrast between the billboard type and the empty space is the whole effect. Never crowd a Klarna headline. The negative space IS the design.

### Section Cadence
White section → navy full-bleed band → white section with pink splash card → white → navy footer. White is the default ground; navy and pink bands are the punctuation. Roughly every second or third section breaks to a colored band so the page never goes flat.

## 6. Shapes & Radius Scale

| Tier        | Value | Use                                              |
|-------------|-------|--------------------------------------------------|
| None        | 0     | Full-bleed band edges, dividers                  |
| Micro       | 2     | Status dots, tiny indicators                     |
| SM          | 4     | Small tags, inline chips                         |
| MD          | 8     | Inputs, selects, dropdowns                       |
| LG          | 12    | Small cards, image thumbnails                    |
| XL          | 16    | Mid cards, media containers                      |
| Card        | 24    | Default feature cards — the signature radius     |
| Pill        | 9999  | All buttons, badges, chips                       |

Klarna's signature shape pairing is **24px cards + full-pill buttons**. The rounded radius family is gentle and consistent — soft geometry is what keeps the bold pink from tipping into garish. Note the live audit caught the pink accent shapes at **24px radius**, matching the card tier.

## 7. Depth & Elevation

| Level | Treatment                                                  | Use                              |
|-------|------------------------------------------------------------|----------------------------------|
| 0     | Flat (white canvas or navy band)                           | Body, headlines, hero            |
| 1     | Ambient shadow `rgba(11,5,29,0.06) 0 1px 2px`              | Resting card                     |
| 2     | Soft shadow `rgba(11,5,29,0.10) 0 8px 24px`                | Card hover, sticky nav           |
| 3     | Strong shadow `rgba(11,5,29,0.16) 0 24px 48px -8px`        | Dropdown, popover, floating panel|
| 4     | Strong shadow + scrim `rgba(11,5,29,0.16)` + overlay       | Modal dialog                     |

### Shadow Philosophy

Klarna's elevation is **light and navy-tinted**. On a white canvas, shadows are kept low-opacity (0.06–0.16) and colored with the navy ink (`rgba(11,5,29,…)`) rather than pure black, so they read as a soft, warm lift instead of a hard grey drop. Most cards rely on **borders or surface color** for definition rather than shadow — the navy cards need no shadow at all to separate from white. Depth is restrained; the design's energy comes from color and type, not from heavy elevation.

## 8. Interaction & Motion

### Easing
- **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — most state changes
- **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — entrances, headline reveals
- **Entrance**: `cubic-bezier(0, 0, 0.2, 1)` — elements arriving on scroll

### Durations
- **Fast**: 150ms — color/hover shifts, link underlines
- **Standard**: 240ms — card lift, button hover, most transitions
- **Slow**: 320ms — modal entrance, section reveals

### Per-Component Recipes
- **Primary button hover**: bg `#0b051d` → `#1c1430` over 150ms; subtle 1px lift
- **Pink button hover**: bg `#ffa8cd` → `#ffb3c7` over 150ms
- **Ghost button hover**: fills from transparent to solid navy over 150ms
- **Card hover**: ambient → soft shadow + 2px translateY over 240ms ease-standard
- **Headline reveal**: oversized display fades + rises 24px over 320ms ease-emphasized on scroll-in
- **Pink-blob parallax**: decorative pink shapes drift slowly on scroll (subtle, opt-in)
- **Link hover**: navy → deep-rose `#eb6f9e` + underline over 150ms

### Page Transitions
Section reveals stagger on scroll-in (headline first, then supporting copy, then CTA) over 320ms. Color bands crossfade rather than hard-cut between white and navy/pink.

### Reduced Motion
Strictly honored. `prefers-reduced-motion: reduce` collapses pink-blob parallax to static, headline reveals to instant, and card-lift hovers to a simple color change. No motion is essential to comprehension.

## 9. Accessibility & A11y

### Contrast Pairs (computed against the live tokens)
- `#0b051d` text on `#ffffff` bg: **~18.1:1** — AAA
- `#ffffff` text on `#0b051d` CTA / navy band: **~18.1:1** — AAA
- `#0b051d` (on-brand) text on `#ffa8cd` brand pink: **~12.9:1** — AAA (this is why text on pink is navy, never white)
- `#4a4458` muted on `#ffffff`: **~8.2:1** — AAA
- `#eb6f9e` (brand-deep) link on `#ffffff`: **~3.0:1** — passes AA for large/bold text only; use navy `#0b051d` for body-size links

**Critical rule:** white-on-pink fails contrast badly. Text on Klarna PINK must be the navy `#0b051d` (12.9:1), never white. This is the inverse of the navy CTA, where text is white.

### Focus Indicators
3px solid `#0b051d` ring with 2px offset on light surfaces; switch to a white ring on navy/pink surfaces so focus is always visible.

### ARIA Patterns
- **Dialog**: modals use `role="dialog"`, `aria-modal="true"`, focus-trap, Escape-to-close
- **Nav**: top nav uses `<nav aria-label="Primary">`; mobile menu toggle uses `aria-expanded`
- **Accordion** (FAQ): `aria-expanded` on triggers, `region` on panels
- **Live region**: payment-status updates use `aria-live="polite"`

### Keyboard Nav
Tab order follows visual flow. All buttons and links reachable; pill buttons and ghost buttons identical in keyboard behavior. Modal focus-trapped. Skip-to-content link on first tab.

### Screen Reader Hints
- Decorative pink blobs/shapes: `aria-hidden="true"`
- Logo: `role="img"` `aria-label="Klarna"`
- Icon-only buttons carry explicit `aria-label`

### Reduced Motion
All animations honored under `prefers-reduced-motion: reduce` — see Section 8.

## 10. Responsive Behavior

### Breakpoints
| Name    | Width      | Use                              |
|---------|------------|----------------------------------|
| mobile  | <640       | Single-column stack              |
| tablet  | 640–1024   | 2-col grid                       |
| desktop | 1024–1280  | 3-col grid                       |
| wide    | ≥1280      | Full 1280px layout               |

### Touch Targets
Minimum 44×44px. Buttons at 48px (56px hero). Nav links get padding to reach target on mobile.

### Collapsing Strategy
- Top nav collapses to hamburger below 1024px; "Sign up" navy pill stays visible
- display-mega scales 147 → 96 → 64 → 44px (desktop → tablet → mobile)
- display-hero scales 96 → 72 → 48px
- Feature grid 3-col → 2-col → 1-col
- Navy/pink full-bleed bands keep full-width at every breakpoint; only the inner content reflows

### Image Behavior
- Product shots sit on pink-wash (`#fff0f6`) or pink (`#ffa8cd`) blocks at 24px radius
- `loading="lazy"` for below-fold media
- Oversized headlines reflow to 2–3 lines on mobile rather than shrinking below ~44px

### Container Queries
Feature cards use container queries where supported: narrow container stacks icon-above-title; wide container places icon inline.

## 11. Content & Voice

### Tone
**Breezy, confident, lifestyle-forward** — Klarna talks about money the way a fashion or lifestyle brand talks about shopping. Sentences are short and friendly, often lowercase-casual, never solemn or jargon-heavy. The voice is reassuring without being corporate: it assumes the user is smart and busy, and it treats splitting a payment as an everyday convenience, not a financial event. Optimistic, a little playful, never preachy about debt.

### Microcopy Patterns
- **Button verbs**: "Get the app", "Sign up", "Shop now", "Log in", "Pay later", "See plans"
- **Error message recipe**: short, human, solution-first — "That code didn't work. Try again."
- **Success confirmation**: "You're all set." / "Payment scheduled."
- **Reassurance line**: "No interest. No fees when you pay on time."

### Empty States
- **No orders**: "Nothing here yet. Shop your favorite stores and your purchases show up here."
- **No saved cards**: "Add a card to check out faster."
- Empty states stay warm and short — a nudge, not an apology.

### CTA Verb Conventions
- **Acquisition**: "Get the app", "Sign up", "Get started"
- **Sign-in**: "Log in"
- **Shopping**: "Shop now", "Pay later", "Split in 4"
- **Exploration**: "Learn more", "See how it works", "See plans"

The voice leans on **plain, action-first verbs** and avoids financial-industry stiffness ("apply", "submit application"). Where a bank would say "Apply for financing", Klarna says "Pay later".

## 12. Dark Mode & Theming

Klarna's marketing site is **light-only** — there is no system-wide dark theme. The illusion of "dark mode" comes from the **navy full-bleed bands** (`#0b051d`) that punctuate the white canvas; these are styled sections, not a theme toggle. The theme-toggle audit returned no dark-mode signals.

If extending to a true dark theme, invert as follows — and note the pink must be handled carefully, because pink-on-navy is the brand's only legible pink-text pairing:

```yaml
colors-dark:
  bg: '#0b051d'           # navy becomes the canvas
  bg-elevated: '#16102b'  # +1 step
  surface: '#16102b'
  text: '#ffffff'
  text-muted: 'rgba(255,255,255,0.72)'
  brand: '#ffa8cd'        # pink stays — it reads beautifully on navy
  on-brand: '#0b051d'     # text on pink is still navy, never white
  cta: '#ffa8cd'          # on dark, the PINK pill becomes primary (navy can't fill a navy bg)
  on-cta: '#0b051d'
  border: 'rgba(255,255,255,0.14)'
  link: '#ffa8cd'
```

The key inversion: on a dark canvas, the **pink pill becomes the primary CTA** (a navy pill would vanish into a navy background), flipping the light-mode relationship where navy is primary and pink is secondary.

## 13. Lineage & Influences

Klarna's visual lineage sits at the intersection of **Scandinavian design restraint and fashion-campaign boldness**. The structure — white canvas, generous whitespace, a single rounded-radius family, a near-black navy ink, type-as-architecture — is unmistakably Swedish, the same minimalist confidence that runs through Spotify and the broader Nordic design tradition. But Klarna layers onto that restraint a single, deliberately un-Scandinavian move: candy pink. The pink pulls the brand out of the cool-grey fintech category and into the world of fashion e-commerce and lifestyle retail, where it spends most of its time (Klarna's customers are shoppers, and the brand dresses like the stores it sits inside).

What Klarna **rejects** is the entire trust-blue vocabulary of legacy finance and the developer-grey restraint of the payments-infrastructure brands. Where PayPal and Visa reassure in blue and Stripe whispers in a technical monochrome, Klarna refuses to look like a bank at all. The oversized Klarna Title headlines borrow from editorial and out-of-home advertising — billboards, fashion magazines, poster design — rather than from product UI. The result is the most consumer-facing, least institutional identity in BNPL: a fintech that styles itself as a retail brand.

**Influences:**
- **Spotify** ([spotify.com](https://www.spotify.com)) — Scandinavian fintech-adjacent boldness: oversized type, near-black ground, single loud accent color
- **Swiss / International Typographic Style** ([wikipedia.org](https://en.wikipedia.org/wiki/International_Typographic_Style)) — Grid discipline, generous whitespace, type as the primary visual element
- **Pentagram** ([pentagram.com](https://www.pentagram.com)) — Editorial big-type identity systems and confident single-color brand moves
- **Affirm** ([affirm.com](https://www.affirm.com)) — BNPL contemporary it diverges from: Affirm's restrained navy/teal vs Klarna's pink maximalism
- **Helvetica / system-sans tradition** ([wikipedia.org](https://en.wikipedia.org/wiki/Helvetica)) — Neutral, legible body type that lets the display tier and color carry the brand

## 14. Do's and Don'ts

**Do:**
- Default to a bright white `#ffffff` canvas with generous whitespace
- Use the navy `#0b051d` pill as the **primary** CTA — it's the brand's main action color
- Reserve Klarna PINK `#ffa8cd` for splash blocks, feature-card fills, and accent shapes
- Set text on pink in navy `#0b051d`, never white (white-on-pink fails contrast)
- Run Klarna Title display headlines at billboard scale (up to ~147px) with hard negative tracking
- Keep cards at the 24px signature radius and buttons as full pills
- Use navy full-bleed bands to punctuate white sections
- Tint shadows navy (`rgba(11,5,29,…)`), low-opacity, warm and soft
- Keep body copy in neutral system sans — let the display tier and color carry personality
- Write microcopy breezy and lowercase-friendly — "Pay later", not "Apply for financing"

**Don't:**
- Don't make the primary CTA pink — pink is the secondary; navy is the structural CTA
- Don't put white text on pink — it fails contrast badly; use navy
- Don't flood the layout with pink — it's the splash, not the canvas
- Don't use true black `#000000` for ink — the brand ink is near-black navy `#0b051d`
- Don't crowd the oversized headlines — the whitespace is the design
- Don't square the card corners — the 24px rounded family keeps the bold pink from going garish
- Don't set the display face in body sizes — Klarna Title is for the headline tier only
- Don't add heavy/hard-grey shadows — elevation is light, navy-tinted, restrained
- Don't use stiff financial-industry verbs ("Submit application", "Apply now")
- Don't reach for a competitor's trust-blue — refusing to look like a bank is the point

## 15. Agent Prompt Guide

### Quick Color Reference

```
Brand (PINK):   #ffa8cd  (Klarna PINK — audited; guideline #ffb3c7)
Brand Strong:   #ffb3c7
Brand Deep:     #eb6f9e  (pink-on-white text/links)
Brand Soft:     #ffe2ee  (badge bg)
Ink / Navy:     #0b051d  (text + primary CTA fill)
On Pink:        #0b051d  (navy text on pink — never white)
Canvas:         #ffffff
Pink Wash:      #fff0f6
Muted:          #4a4458
Border:         #e4e2e8
```

### Example Component Prompts

1. *"Create a Klarna hero: bright white `#ffffff` background, a 147px Klarna Title display-mega headline in near-black navy `#0b051d` at weight 700 with -0.035em tracking, reading 'Shop now. Pay later.' — set in acres of whitespace. Below, an 18px body in `#4a4458`. A navy pill CTA at 56px height filled with `#0b051d`, white text weight 600, labelled 'Get the app'. To the right, a `#ffa8cd` pink block at 24px radius holding a product shot."*

2. *"Design a Klarna feature card row: 3 cards, 32px gap. Card one is navy `#0b051d` with white text; card two is white `#ffffff` with a 1px `#e4e2e8` border and navy text; card three is pink `#ffa8cd` with navy `#0b051d` text. All at 24px radius, 32px padding, h4 Klarna Title titles at 24px weight 600. On hover, lift with a soft navy-tinted shadow `rgba(11,5,29,0.10) 0 8px 24px`."*

3. *"Build a Klarna navy full-bleed band: `#0b051d` background, white `#ffffff` 96px Klarna Title headline at weight 700, white body at 72% opacity. A PINK pill CTA `#ffa8cd` with navy `#0b051d` text labelled 'See plans'. Add a decorative pink blob shape (aria-hidden) drifting subtly in the corner."*

4. *"Design a Klarna pricing/plan card: white `#ffffff` surface, 1px `#e4e2e8` border, 24px radius, 32px padding. A pink badge `#ffe2ee` bg with `#eb6f9e` text reading 'No fees'. Plan name in 24px Klarna Title navy. Primary action: navy pill `#0b051d` with white text 'Choose plan'; secondary: ghost outline button (1.5px navy border, fills to navy on hover)."*

5. *"Create a Klarna checkout input: white background, 1.5px `#e4e2e8` border, 8px radius, 48px height, navy `#0b051d` text, `#76707f` placeholder. On focus, border goes navy `#0b051d` with a 3px `rgba(11,5,29,0.35)` ring. Label above in 13px weight 500 navy."*

6. *"Compose a Klarna footer: navy `#0b051d` full-bleed band, 64px vertical padding. White column headers, link text at `rgba(255,255,255,0.7)`. Klarna wordmark top-left with a small pink `#ffa8cd` accent detail."*

### Iteration Guide

1. **Whiten the canvas, navy the ink.** If your background isn't bright white and your text isn't near-black navy `#0b051d`, you're not Klarna yet.
2. **Make the primary CTA navy, not pink.** This is the single most-missed move. The dark navy pill is the main action; pink is the secondary/accent. Inverting this breaks the system instantly.
3. **Scale the headline to billboard size.** Klarna Title (or a rounded display fallback) at 96–147px with hard negative tracking. The headline is the layout, not a label.
4. **Use pink as a splash, not a flood.** One pink block, one pink card, or one pink CTA per section — surrounded by white and navy. Too much pink reads cheap.
5. **Text on pink is always navy.** Never white. `#0b051d` on `#ffa8cd` is the only legible pink pairing.
6. **Round everything: 24px cards, full-pill buttons, 8px inputs.** The soft geometry is what lets the bold pink stay premium.
7. **Keep whitespace generous.** Big margins around big type. The empty space is doing as much work as the color.
8. **Keep body copy neutral system sans.** Don't set running text in the display face — let color and the headline tier carry all the personality.