---
name: klarna-design-reference
provider: DesignSkill (https://designskill.dev)
reference: klarna.com
source_url: https://www.klarna.com/kr/?grs=%2F&grr=empty
tool: designskill-extract/3.2.0
extracted_at: 2026-07-27T09:14:00.818Z
mode: full-render
classification: reference_only
---

# Klarna — Design Reference (measured)

Measured design tokens extracted from `https://www.klarna.com/kr/?grs=%2F&grr=empty` by designskill-extract/3.2.0.
Every value below was observed in the live page (×N = observation count). Values not listed were **not observed** — do not invent them.
This document is `reference_only`: an analysis of a third-party site, not a license to its brand assets.

## Overview

- Extraction mode: **full-render** (viewports 390/768/1440px × light/dark), 1 page(s), 399 observation records.
- Primary action color observed as `#ffa8cd` (basis: declared, confidence 0.92).
- Dominant font family: **Klarna Text** (×512; secondary Klarna Title ×80).
- Type scale observed at 8 sizes from 14px to 52px.
- Corner radius values in use: 32px, 24px, 8px, 4px….
- Not observed in this extraction: visual-hero, forms, cards, badges.

## Colors

### Role Tokens

Semantic roles inferred from observed usage. `basis` tells how the role was established (declared CSS var > cross-validated > inferred).

| Token | Value | Basis | Confidence | Observed |
|---|---|---|---|---|
| `{color.primary}` | `#ffa8cd` | declared | 0.92 | ×18 — --colors-bg-brand |
| `{color.background}` | `#ffffff` | cross-validated | 0.94 | ×583 |
| `{color.ink}` | `#582fb4` | declared | 0.92 | ×0 — --colors-text-link |
| `{color.muted}` | `#96959f` | inferred | 0.7 | ×9 |
| `{color.surface}` | `#e2e2e7` | inferred | 0.7 | ×79 |
| `{color.accent}` | `#7039e2` | declared | 0.9 | ×4 — --colors-bg-accent |

### Observed Palette

Full measured palette ordered by usage share. `Used in` lists the CSS properties the color appeared on.

| Hex | Share | Used in | Observed |
|---|---|---|---|
| `#0b051d` | 37.6% | color, background-color, border-color, fill | ×544 (cross-validated, 0.94) |
| `#ffffff` | 40.3% | background-color, color, --inputbackground, --colors-text-inverse, --ratingtext | ×583 (cross-validated, 0.94) |
| `#0e0e0f` | 6.5% | color, background-color | ×94 (cross-validated, 0.92) |
| `#e2e2e7` | 5.5% | border-color, background-color, --primaryactiondisabled, --frame-background-pressed | ×79 (cross-validated, 0.91) |
| `#b798be` | 2.4% | background-color, --colors-klarna-balloon | ×34 (cross-validated, 0.9) |
| `#ffa8cd` | 1.2% | background-color, --colors-bg-brand | ×18 (cross-validated, 0.89) |
| `#f3f3f5` | 0.8% | background-color, --ribbon-foreign-store-background, --frame-background-hover | ×11 (cross-validated, 0.89) |
| `#000000` | 0.6% | background-color, border-color, --colors-badge-strong, custom-property | ×9 (inferred, 0.58) |
| `#96959f` | 0.6% | background-color, --text-disabled, color | ×9 (cross-validated, 0.88) |
| `#204988` | 0.4% | box-shadow | ×6 (inferred, 0.58) |
| `#7039e2` | 0.3% | color, box-shadow | ×4 (inferred, 0.57) |
| `#93969a` | 0.3% | color, fill | ×4 (inferred, 0.57) |
| `#5c31b8` | 0.4% | color, fill, --colors-text-accent | ×5 (inferred, 0.58) |
| `#2c2242` | 0.2% | background-color, --colors-klarna-eggplant | ×3 (inferred, 0.57) |
| `#046234` | 0.2% | --colors-bg-positive, custom-property | ×3 (inferred, 0.57) |
| `#37363f` | 0.7% | --inputplaceholder, box-shadow, --primaryactionhover, --overlay-primary, --overlay-content | ×10 (inferred, 0.58) |

## Typography

### Font Families

| Family | Observed |
|---|---|
| `Klarna Text` | ×512 |
| `Klarna Title` | ×80 |
| `Barlow` | ×4 |
| `Lato` | ×3 |
| `sans-serif` | ×1 |
| `Roboto Condensed` | ×1 |

Use **Klarna Text** as the default family — it accounts for the overwhelming majority of observed text nodes.

### Type Scale

| Token | Size | Observed |
|---|---|---|
| `{type.display}` | 52px | ×51 |
| `{type.h1}` | 40px | ×31 |
| `{type.h2}` | 32px | ×48 |
| `{type.h3}` | 31px | ×72 |
| `{type.body-lg}` | 24px | ×23 |
| `{type.body}` | 21px | ×51 |
| `{type.body-sm}` | 16px | ×250 |
| `{type.caption}` | 14px | ×55 |

The most frequently observed size is **16px** (×250) — treat it as the default body size.

## Spacing

| Value | Observed |
|---|---|
| `8px` | ×274 |
| `24px` | ×211 |
| `32px` | ×194 |
| `16px` | ×106 |
| `48px` | ×104 |
| `12px` | ×84 |
| `64px` | ×61 |
| `11px` | ×45 |
| `120px` | ×44 |
| `15px` | ×36 |
| `25px` | ×16 |
| `56px` | ×14 |

## Shape (Border Radius)

| Value | Observed |
|---|---|
| `32px` | ×154 |
| `24px` | ×87 |
| `8px` | ×7 |
| `4px` | ×2 |
| `2px` | ×1 |

## Elevation

| Shadow | Observed |
|---|---|
| `#204988` | ×6 |
| `rgb(123, 87, 216) 0px 0px 0px 3px` | ×3 |
| `#7039e2` | ×2 |
| `#282b30` | ×2 |
| `0 0 0 2px #7039E2` | ×2 |
| `0 0 0px 3px var(--focus)` | ×2 |

## Motion

| Duration | Observed |
|---|---|
| `0.2s` | ×42 |
| `200ms` | ×9 |
| `0.3s` | ×7 |
| `0.15s` | ×6 |
| `1s` | ×1 |

## Components

Measured computed styles of representative components (desktop viewport).

| Component | Measured spec | Samples |
|---|---|---|
| button.primary | bg `#0b051d` · text `#ffffff` · radius `24px` · padding `12px 20px` · font `16px/500` | ×7 |
| nav | height `72px` · position `static` · link `#0b051d` | — |

### Interaction States (observed)

| State | Property | From | To |
|---|---|---|---|
| hover | background-color | `rgb(11, 5, 29)` | `rgb(31, 25, 47)` |
| focus | background-color | `rgb(11, 5, 29)` | `rgb(31, 25, 47)` |
| focus | box-shadow | `none` | `rgb(123, 87, 216) 0px 0px 0px 3px` |
| focus | outline-color | `rgb(249, 248, 245)` | `rgb(11, 5, 29)` |

## Accessibility (WCAG Contrast)

| FG | BG | Ratio | AA | Source |
|---|---|---|---|---|
| `#0b051d` | `#ffffff` | 19.93 | pass | observed ×136 |
| `#0b051d` | `#f9f8f5` | 18.77 | pass | observed ×75 |
| `#0e0e0f` | `#ffffff` | 19.29 | pass | observed ×24 |
| `#ffffff` | `#0b051d` | 19.93 | pass | observed ×21 |
| `#0e0e0f` | `#b798be` | 7.58 | pass | observed ×18 |
| `#f9f8f5` | `#0b051d` | 18.77 | pass | observed ×9 |
| `#0b051d` | `#ffa8cd` | 11.14 | pass | observed ×6 |
| `#96959f` | `#ffffff` | 2.96 | fail | observed ×3 |
| `#582fb4` | `#ffffff` | 8.47 | pass | ink_on_background |
| `#ffffff` | `#ffa8cd` | 1.79 | fail | white_on_primary |
| `#96959f` | `#ffffff` | 2.96 | fail | muted_on_background |

3 measured pair(s) fail AA — if you reuse those pairs, adjust lightness until the ratio reaches 4.5:1.

## Usage Rules

### Do
- Use `{color.primary}` (`#ffa8cd`) for primary actions only — that is where it was observed.
- Default text pairing: `{color.ink}` (`#582fb4`) on `{color.background}` (`#ffffff`).
- Set all text in `Klarna Text` (fallbacks only for glyph coverage).
- Pick corner radii from the measured set (32px, 24px, 8px, 4px) — no intermediate values were observed.
- Cite this file's token names (`{color.*}`, `{type.*}`) when generating UI so output stays traceable to observations.

### Don't
- Don't invent colors, sizes, shadows, or spacing not listed above — absence means *not observed*, and this document records observations only.
- Don't assume the missing blocks (visual-hero, forms, cards, badges) don't exist on the site — they were simply not captured in this run.
- Don't copy brand assets (logo, wordmark, imagery, copy) — `reference_only` covers measured style values, not brand identity.

## Provenance

- Source: https://www.klarna.com/kr/?grs=%2F&grr=empty (1 page(s))
- Tool: designskill-extract/3.2.0 · extracted 2026-07-27T09:14:00.818Z
- Mode: full-render — 풀렌더 모드 — 3뷰포트 × 라이트/다크 computed style + 상태 관측.
- Blocks observed: 00, 02, 03, 04, 05, 09, 10, 11, 12 · missing: visual-hero, forms, cards, badges
- Warning: primary 불일치: static=#7039e2 vs render=#ffa8cd — render 채택

---

<sub>Generated & served by [DesignSkill](https://designskill.dev)</sub>