Klarna Design System

klarna.com

PROEngine v4

Visual system

100% confidence

hero-displayDesign is intelligence made visibleKlarna Title100px / 700 / 0.4

display-xlDesign is intelligence made visibleKlarna Title84px / 700 / 0.95

display-xl-lightDesign is intelligence made visibleKlarna Title84px / 400 / 1.1

display-lgDesign is intelligence made visibleKlarna Title66px / 400 / 1.1

display-mdDesign is intelligence made visibleKlarna Title52px / 700 / 1

display-smDesign is intelligence made visibleKlarna Title44px / 700 / 1.1

display-xsDesign is intelligence made visibleKlarna Title43.2px / 700 / 0.95

title-lgDesign is intelligence made visibleKlarna Text32px / 700 / 1.25

body-lgDesign is intelligence made visibleKlarna Text20px / 400 / 1.4

bodyDesign is intelligence made visibleKlarna Text16px / 400 / 1.5

body-tightDesign is intelligence made visibleKlarna Text16px / 400 / 1.45

uiDesign is intelligence made visibleKlarna Text16px / 400 / 1.25

buttonDesign is intelligence made visibleKlarna Text16px / 500 / 1.25

body-smDesign is intelligence made visibleKlarna Text14px / 400 / 1.45

body-sm-strongDesign is intelligence made visibleKlarna Text14px / 500 / 1.45

nav-linkDesign is intelligence made visibleKlarna Text14px / 500 / 1.15

label-systemDesign is intelligence made visible-apple-system14px / 700 / 1.15

captionDesign is intelligence made visibleKlarna Text12px / 400 / 1.65

100% confidence

button-secondary-padding-y
11px

button-ghost-padding-y
11px

button-ghost-padding-x
11px

button-ghost-3-padding-y
11px

button-ghost-3-padding-x
11px

button-ghost-4-padding-y
11px

button-primary-2-padding-y
15px

button-primary-3-padding-y
15px

button-secondary-padding-x
16px

button-ghost-4-padding-x
16px

button-primary-2-padding-x
20px

button-primary-3-padding-x
20px

card-6-grid-gap
40px

header-landing-gap
48px

header-landing-mobile-gap
48px

header-inner-gap
48px

header-inner-mobile-gap
48px

card-5-grid-gap
48px

card-7-grid-gap
48px

section-padding-y
80px

header-landing-inner-max-width
1680px

header-landing-mobile-inner-max-width
1680px

header-inner-inner-max-width
1680px

header-inner-mobile-inner-max-width
1680px

100% confidence

xs · 8px

sm · 16px

md · 24px

lg · 32px

xl · 48px

full · 9999px

Components

Button10

100% match

ghost · desktop

At rest100% match38 measurements match

Original

Render

Hover100% match22 measurements match

Original

Render

Focus100% match22 measurements match

Original

Render

Recipe in DESIGN.md

88% match

ghost · desktop

On focus, it renders 88% like the site, below the 97% bar.

At rest100% match154 measurements match

Original Button, ghost (2) on the site, at rest — Original

Isolated render of Button, ghost (2), at rest — Render

Focus88% match18 measurements match

Original Button, ghost (2) on the site, focus — Original

Isolated render of Button, ghost (2), focus — Render

Recipe in DESIGN.md

100% match

ghost · desktop

At rest100% match38 measurements match

Original

Render

Hover100% match22 measurements match

Original

Render

Focus100% match22 measurements match

Original

Render

Recipe in DESIGN.md

100% match

ghost · desktop

At rest100% match58 measurements match

Original

Render

Hover100% match22 measurements match

Original

Render

Focus100% match22 measurements match

Original

Render

Recipe in DESIGN.md

88% match

ghost · desktop

On focus, it renders 88% like the site, below the 97% bar.

At rest100% match154 measurements match

Original Button, ghost (5) on the site, at rest — Original

Isolated render of Button, ghost (5), at rest — Render

Focus88% match18 measurements match

Original Button, ghost (5) on the site, focus — Original

Isolated render of Button, ghost (5), focus — Render

Recipe in DESIGN.md

Not checked

primary · desktop

The recipe could not be rendered on its own.

Nothing was compared for this component.

Recipe in DESIGN.md

100% match

primary · desktop

At rest100% match25 measurements match

Original

Render

Hover100% match22 measurements match

Original

Render

Focus100% match22 measurements match

Original

Render

Recipe in DESIGN.md

100% match

primary · desktop

At rest100% match25 measurements match

Original

Render

Hover100% match22 measurements match

Original

Render

Focus100% match22 measurements match

Original

Render

Recipe in DESIGN.md

100% match

secondary · desktop

At rest100% match58 measurements match

Original

Render

Hover100% match22 measurements match

Original

Render

Focus100% match22 measurements match

Original

Render

Recipe in DESIGN.md

96% match

secondary · desktop

On focus, it renders 96% like the site, below the 97% bar.

At rest99% match25 measurements match

Original

Render

Focus96% match22 measurements match

Original

Render

Recipe in DESIGN.md

Card8

100% match

desktop

Group height is 20px, the site has 61px; Group 2 height is 20px, the site has 61px and 6 more.

At rest100% match8 of 135 measurements differ

Original Card on the site, at rest — Original

Isolated render of Card, at rest — Render

Hover100% match18 measurements match

Original Card on the site, hover — Original

Focus100% match18 measurements match

Original Card on the site, focus — Original

At rest, instance 2100% match8 of 135 measurements differ

Original

No image stored

Render

No image stored

At rest, instance 3100% match8 of 135 measurements differ

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

0% match

desktop

It renders 70% like the site, below the 96% bar.

At rest70% match141 measurements match

Original Card (2) on the site, at rest — Original

Isolated render of Card (2), at rest — Render

Hover0% match18 measurements match

Original Card (2) on the site, hover — Original

Isolated render of Card (2), hover — Render

Focus70% match18 measurements match

Original Card (2) on the site, focus — Original

Isolated render of Card (2), focus — Render

At rest, instance 270% match141 measurements match

Original

No image stored

Render

No image stored

At rest, instance 370% match141 measurements match

Original

No image stored

Render

No image stored

At rest, instance 470% match141 measurements match

Original

No image stored

Render

No image stored

At rest, instance 5100% match141 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

The check failed without a recorded difference.

At rest100% match132 measurements match

Original Card (3) on the site, at rest — Original

Isolated render of Card (3), at rest — Render

At rest, instance 2100% match132 measurements match

Original

No image stored

Render

No image stored

At rest, instance 3100% match132 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

The check failed without a recorded difference.

At rest100% match128 measurements match

Original Card (4) on the site, at rest — Original

Isolated render of Card (4), at rest — Render

At rest, instance 2100% match128 measurements match

Original

No image stored

Render

No image stored

At rest, instance 3100% match128 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

At rest100% match189 measurements match

Original Card (5) on the site, at rest — Original

Isolated render of Card (5), at rest — Render

At rest, instance 2100% match189 measurements match

Original

No image stored

Render

No image stored

At rest, instance 3100% match189 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

At rest100% match104 measurements match

Original Card (6) on the site, at rest — Original

Isolated render of Card (6), at rest — Render

At rest, instance 2100% match104 measurements match

Original

No image stored

Render

No image stored

At rest, instance 3100% match104 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

At rest100% match201 measurements match

Original Card (7) on the site, at rest — Original

Isolated render of Card (7), at rest — Render

At rest, instance 2100% match201 measurements match

Original

No image stored

Render

No image stored

At rest, instance 3100% match201 measurements match

Original

No image stored

Render

No image stored

At rest, instance 4100% match201 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

99% match

desktop

Group 4 y is 0px, the site has 32px; Group 4 height is 469px, the site has 560px and 3 more.

At rest100% match5 of 138 measurements differ

Original Card (8) on the site, at rest — Original

Isolated render of Card (8), at rest — Render

Hover100% match18 measurements match

Original Card (8) on the site, hover — Original

Isolated render of Card (8), hover — Render

Focus100% match5 of 18 measurements differ

Original Card (8) on the site, focus — Original

Isolated render of Card (8), focus — Render

At rest, instance 2100% match5 of 138 measurements differ

Original

No image stored

Render

No image stored

At rest, instance 3100% match5 of 138 measurements differ

Original

No image stored

Render

No image stored

At rest, instance 499% match5 of 138 measurements differ

Original

No image stored

Render

No image stored

At rest, instance 599% match5 of 138 measurements differ

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

Extra22

100% match

desktop

At rest100% match43 measurements match

Original Accordion on the site, at rest — Original

Isolated render of Accordion, at rest — Render

Focus100% match18 measurements match

Original Accordion on the site, focus — Original

Isolated render of Accordion, focus — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match63 measurements match

Original Accordion (2) on the site, at rest — Original

Isolated render of Accordion (2), at rest — Render

Hover100% match18 measurements match

Original Accordion (2) on the site, hover — Original

Isolated render of Accordion (2), hover — Render

Focus100% match18 measurements match

Original Accordion (2) on the site, focus — Original

Isolated render of Accordion (2), focus — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match63 measurements match

Original Accordion (3) on the site, at rest — Original

Isolated render of Accordion (3), at rest — Render

Focus100% match18 measurements match

Original Accordion (3) on the site, focus — Original

Isolated render of Accordion (3), focus — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match43 measurements match

Original Accordion item on the site, at rest — Original

Isolated render of Accordion item, at rest — Render

Focus100% match18 measurements match

Original Accordion item on the site, focus — Original

Isolated render of Accordion item, focus — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match63 measurements match

Original Accordion item (2) on the site, at rest — Original

Isolated render of Accordion item (2), at rest — Render

Hover100% match18 measurements match

Original Accordion item (2) on the site, hover — Original

Isolated render of Accordion item (2), hover — Render

Focus100% match18 measurements match

Original Accordion item (2) on the site, focus — Original

Isolated render of Accordion item (2), focus — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match63 measurements match

Original Accordion item (3) on the site, at rest — Original

Isolated render of Accordion item (3), at rest — Render

Hover100% match18 measurements match

Original Accordion item (3) on the site, hover — Original

Isolated render of Accordion item (3), hover — Render

Focus100% match18 measurements match

Original Accordion item (3) on the site, focus — Original

Isolated render of Accordion item (3), focus — Render

Recipe in DESIGN.md

40% match

desktop

It renders 78% like the site, below the 96% bar.

At rest78% match66 measurements match

Original

Render

Hover83% match18 measurements match

Original

Render

Focus40% match18 measurements match

Original

Render

Recipe in DESIGN.md

40% match

desktop

It renders 83% like the site, below the 96% bar.

At rest83% match66 measurements match

Original

Render

Hover79% match18 measurements match

Original

Render

Focus40% match18 measurements match

Original

Render

Recipe in DESIGN.md

Not checked

desktop

No recipe was made: the element was not visible.

Nothing was compared for this component.

100% match

desktop

Title y is 0px, the site has 154px; Title height is 73px, the site has 147px.

At rest100% match2 of 134 measurements differ

Original Hero on the site, at rest — Original

Isolated render of Hero, at rest — Render

Hover100% match18 measurements match

Original Hero on the site, hover — Original

Focus100% match5 of 18 measurements differ

Original Hero on the site, focus — Original

At rest, instance 2100% match2 of 134 measurements differ

Original

No image stored

Render

No image stored

At rest, instance 3100% match2 of 134 measurements differ

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

At rest100% match58 measurements match

Original Language selector on the site, at rest — Original

Isolated render of Language selector, at rest — Render

Hover100% match22 measurements match

Original Language selector on the site, hover — Original

Isolated render of Language selector, hover — Render

Focus100% match22 measurements match

Original Language selector on the site, focus — Original

Isolated render of Language selector, focus — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match392 measurements match

Original Nav on the site, at rest — Original

Isolated render of Nav, at rest — Render

Recipe in DESIGN.md

100% match

desktop

Group 2 width is 241px, the site has 273px.

At rest100% match1 of 440 measurements differ

Original Navigation on the site, at rest — Original

Isolated render of Navigation, at rest — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match392 measurements match

Original Navigation (2) on the site, at rest — Original

Isolated render of Navigation (2), at rest — Render

Recipe in DESIGN.md

34% match

desktop

It renders 83% like the site, below the 96% bar.

At rest83% match66 measurements match

Original

Render

Hover83% match18 measurements match

Original

Render

Focus34% match18 measurements match

Original

Render

Recipe in DESIGN.md

37% match

desktop

On focus, it renders 37% like the site, below the 96% bar.

At rest88% match66 measurements match

Original

Render

Hover78% match18 measurements match

Original

Render

Focus37% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

desktop

Group height is 20px, the site has 61px; Group 2 height is 20px, the site has 61px and 6 more.

At rest100% match8 of 135 measurements differ

Original Stat on the site, at rest — Original

Isolated render of Stat, at rest — Render

Hover100% match18 measurements match

Original Stat on the site, hover — Original

Focus100% match18 measurements match

Original Stat on the site, focus — Original

At rest, instance 2100% match8 of 135 measurements differ

Original

No image stored

Render

No image stored

At rest, instance 3100% match8 of 135 measurements differ

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

At rest100% match63 measurements match

Original Tab on the site, at rest — Original

Isolated render of Tab, at rest — Render

Hover100% match18 measurements match

Original Tab on the site, hover — Original

Focus100% match18 measurements match

Original Tab on the site, focus — Original

Recipe in DESIGN.md

100% match

desktop

At rest100% match63 measurements match

Original Tab (2) on the site, at rest — Original

Isolated render of Tab (2), at rest — Render

Focus100% match18 measurements match

Original Tab (2) on the site, focus — Original

Isolated render of Tab (2), focus — Render

Recipe in DESIGN.md

97% match

desktop

Group height is 234px, the site has 244px; Group 2 height is 40px, the site has 43px and 13 more.

At rest97% match15 of 197 measurements differ

Original Testimonial on the site, at rest — Original

Isolated render of Testimonial, at rest — Render

Focus97% match18 measurements match

Original Testimonial on the site, focus — Original

Isolated render of Testimonial, focus — Render

Recipe in DESIGN.md

97% match

desktop

It renders 98% like the site, below the 96% bar.

At rest98% match158 measurements match

Original Testimonial (2) on the site, at rest — Original

Isolated render of Testimonial (2), at rest — Render

Focus98% match18 measurements match

Original Testimonial (2) on the site, focus — Original

Isolated render of Testimonial (2), focus — Render

At rest, instance 297% match158 measurements match

Original

No image stored

Render

No image stored

At rest, instance 397% match158 measurements match

Original

No image stored

Render

No image stored

At rest, instance 498% match158 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

90% match

desktop

Group height is 210px, the site has 227px; Group 2 height is 40px, the site has 43px and 14 more.

At rest99% match16 of 197 measurements differ

Original Testimonial (3) on the site, at rest — Original

Isolated render of Testimonial (3), at rest — Render

Focus90% match18 measurements match

Original Testimonial (3) on the site, focus — Original

Isolated render of Testimonial (3), focus — Render

Recipe in DESIGN.md

Header4

100% match

desktop

At rest100% match426 measurements match

Original Header (inner) on the site, at rest — Original

Isolated render of Header (inner), at rest — Render

Hovernot checked

Original Header (inner) on the site, hover — Original

Isolated render of Header (inner), hover — Render

Focusnot checked

Original Header (inner) on the site, focus — Original

Isolated render of Header (inner), focus — Render

Focus on cta100% match22 measurements match

Original

No image stored

Render

No image stored

Hover on cta100% match22 measurements match

Original

No image stored

Render

No image stored

Focus on nav link 2100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on nav link 2100% match18 measurements match

Original

No image stored

Render

No image stored

Focus on nav link 3100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on nav link 3100% match18 measurements match

Original

No image stored

Render

No image stored

Focus on nav link100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

At rest100% match485 measurements match

Original Header (landing) on the site, at rest — Original

Isolated render of Header (landing), at rest — Render

Hovernot checked

Original Header (landing) on the site, hover — Original

Isolated render of Header (landing), hover — Render

Focusnot checked

Original Header (landing) on the site, focus — Original

Isolated render of Header (landing), focus — Render

Focus on cta100% match22 measurements match

Original

No image stored

Render

No image stored

Hover on cta100% match22 measurements match

Original

No image stored

Render

No image stored

Focus on menu toggle100% match22 measurements match

Original

No image stored

Render

No image stored

Hover on menu toggle100% match22 measurements match

Original

No image stored

Render

No image stored

Focus on nav link 2100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on nav link 2100% match18 measurements match

Original

No image stored

Render

No image stored

Focus on nav link 3100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on nav link 3100% match18 measurements match

Original

No image stored

Render

No image stored

Focus on nav link100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

mobile

At rest100% match234 measurements match

Hovernot checked

Focusnot checked

Focus on menu toggle100% match18 measurements match

Original

No image stored

Render

No image stored

Focus on nav link 2100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on nav link 2100% match18 measurements match

Original

No image stored

Render

No image stored

Focus on nav link100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

mobile

At rest100% match294 measurements match

Hovernot checked

Focusnot checked

Focus on menu toggle 2100% match22 measurements match

Original

No image stored

Render

No image stored

Hover on menu toggle 2100% match22 measurements match

Original

No image stored

Render

No image stored

Focus on menu toggle100% match18 measurements match

Original

No image stored

Render

No image stored

Focus on nav link 2100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on nav link 2100% match18 measurements match

Original

No image stored

Render

No image stored

Focus on nav link100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

DESIGN.md

Klarna

Overview

Klarna's German site reads like a fashion magazine that happens to sell payments: oversized, tightly-set display headlines in Klarna Title shout over warm lifestyle photography, while a calm, neutral Klarna Text handles every label, paragraph and control. The palette is almost binary. A near-black ink, Midnight Ink (primary, #0B051D), carries nearly all text and the dark pill CTAs, and Klarna Pink (brand-pink, #FFA8CD) is the one loud color, reserved for hero fills, highlighted tiles and the pink pill CTA.

Density is low and editorial. Sections breathe on a generous section-padding-y rhythm, cards sit in wide-gutter grids, and the hierarchy is made almost entirely by type scale and color blocks rather than by boxes or lines. A headline jumps from body (16px) straight to title-lg (32px) and then into the Klarna Title display ladder (44px to 100px); there is very little in between, so contrast in size does the work that borders and shadows do elsewhere.

Shapes are soft and friendly: every button is a pill, cards and hero modules use large 16 to 48px radii, and the only depth comes from a single soft shadow on review cards, a frosted glass chip over photography, and a violet focus halo.

Key Characteristics:

Two-family system: Klarna Title for display (400 and 700), Klarna Text for UI and body (400, 500, 700).
Ink-on-white base with Klarna Pink (brand-pink, #FFA8CD) as the single brand accent.
Lavender tints (surface-lavender, #EFECFF; surface-lavender-strong, #E4E0F7) for soft secondary surfaces and nav hover/focus fills.
Every button is a full pill; controls are 44px (secondary/ghost) or 52px (primary CTAs) tall.
Mostly flat: one 2px/4px soft shadow on review cards, one blur(10px) glass chip, and a #7B57D8 3px focus halo.
Generous 80px section rhythm (section-padding-y) and 40 to 48px grid gutters.
Photography-led storytelling with full-bleed rounded hero modules.

Colors

The palette is ink, white and one pink, with lavender and a cool grey ladder doing all the quiet work. There are no gradients on the measured surfaces; color blocks are always solid.

Brand & Accent

Midnight Ink (primary, #0B051D): the dominant color on every page. Body text, headings, icon strokes, the dark pill CTA (button-primary-3, header-landing-nav-link-3) and the focus outline. Treat it as the default foreground.
Focus Ink (focus-ring, #0B051D): the 2px outline drawn at 2px offset on every focusable element on light surfaces.
Klarna Pink (brand-pink, #FFA8CD): hero and tile fills, the pink pill CTA, the mobile menu toggle (header-landing-mobile-menu-toggle) and avatar bubbles in reviews. Always paired with ink text, never white.
Violet (accent-purple, #7039E2) and Deep Violet (accent-purple-deep, #582FB4): rare inline text accents seen on a single page; do not promote them to fills.
Success Green (success, #046234): positive/confirmation text only.

Surface

White (surface, #FFFFFF): the page canvas and card fill (card-3-group-3, card-4-group-3).
On Primary (on-primary, #FFFFFF): text and the white pill (button-primary-2) placed on dark or photographic surfaces.
Lavender (surface-lavender, #EFECFF): soft section and banner fills (the mobile warning banner) and the focus fill of nav links (header-landing-nav-link-2).
Lavender Strong (surface-lavender-strong, #E4E0F7): a slightly deeper lavender for a nested or emphasized tint surface; used sparingly.
Night Plum (surface-dark, #1F192F): measured only as the hover fill of the ink CTA (button-primary-3); a state color, not a page surface.

Text

Ink (ink, #0E0E0F): neutral near-black for long-form body copy inside cards (card-5-group-5, card-7-group-5).
Pure Black (ink-strong, #000000): the label of the white pill (button-primary-2).
Body Secondary (body-secondary, #282636): supporting card copy (card-6-text) and small captions.
Muted (muted, #504F5F): review dates and metadata (testimonial-text-3).
Muted Soft (muted-soft, #615F6D): tertiary helper text.
Muted Subtle (muted-subtle, #6C6B74): measured only on an inactive tab label (tab-2-text).
Muted Faint (muted-faint, #96959F): inactive accordion/tab headlines (accordion-2-text, tab-text) and inactive pagination dots.

Hairlines & Borders

Hairline (hairline, #E2E2E7): the 1px border of secondary and language pills (button-secondary, language-selector) and card dividers.
Border Strong (border-strong, #C4C3CA): the 1px ring on the circular menu toggle (header-landing-menu-toggle).

Component & State Colors

These were measured on components, not sampled as page palette:

Pink pill hover #F5A1C5 (button-primary); white pill hover #F5F5F5 (button-primary-2); ink pill hover #2C2242 (header-landing-nav-link-3).
Transparent pill hover overlay #0000000A (button-secondary, button-ghost, language-selector); on dark, #FFFFFF14 (button-ghost-3).
Nav link hover #E5E3F5 (header-landing-nav-link-2); menu toggle hover #F3F3F5 (header-landing-menu-toggle).
Off-white CTA label #F9F8F5 on ink pills (button-primary-3, header-landing-nav-link-3) and on hero headlines (hero-title).
Review card fill #F8F7FA (testimonial-group); translucent ink glass #0B051D4D (card-2-group-4).
Focus halo #7B57D8 (3px spread box-shadow on most interactive recipes).

Typography

Font Family

Klarna Title: proprietary display face, bold and tightly set. Used only at 43.2px and above for headlines, stat numerals, and the oversized accordion/tab headlines (accordion-text, 52px/700). Appears at 700 for punchy display and at 400 with 0.32px tracking for lighter editorial heroes (hero-title, card-8-title).
Klarna Text: proprietary UI and body face. Everything from 12px captions to the 32px title-lg card heading. Fallback stack in recipes: -apple-system, system-ui, Segoe UI, Roboto, Arial, sans-serif.
-apple-system: a system-font label style (label-system) and the white pill's label (button-primary-2), likely from an embedded widget.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`hero-display`	100px	700	0.4	normal	Giant stat/number glyphs; the 0.4 line-height lets them overlap surrounding layout
`display-xl`	84px	700	0.95	normal	Primary bold hero headline
`display-xl-light`	84px	400	1.1	0.32px	Light editorial hero headline (`card-8-title`)
`display-lg`	66px	400	1.1	0.32px	Light hero headline over photography (`hero-title`)
`display-md`	52px	700	1	normal	Section H2, accordion and tab headlines
`display-sm`	44px	700	1.1	normal	Secondary section headings
`display-xs`	43.2px	700	0.95	normal	Stat numerals and compact display spans
`title-lg`	32px	700	1.25	normal	Card titles in Klarna Text (`card-5-title`, `card-6-title`)
`body-lg`	20px	400	1.4	normal	Lead paragraphs under headlines
`body`	16px	400	1.5	normal	Paragraphs and list copy
`body-tight`	16px	400	1.45	-0.048px	Dense running copy
`ui`	16px	400	1.25	normal	Default UI text, links, list items
`button`	16px	500	1.25	normal	All pill button labels
`body-sm`	14px	400	1.45	normal	Supporting copy, inputs, review metadata
`body-sm-strong`	14px	500	1.45	normal	Emphasized small copy
`nav-link`	14px	500	1.15	normal	Header navigation links
`label-system`	14px	700	1.15	normal	System-font labels in embedded modules
`caption`	12px	400	1.65	normal	Legal and footnote text

Principles

Three weights only: 400, 500, 700. 500 is the interactive weight (buttons, nav links); 700 is for headings and display; 400 for everything read.
Display lines are set tight (0.95 to 1.1), UI lines medium (1.15 to 1.25), reading text open (1.4 to 1.65). Never set body copy below 1.45.
Letter-spacing is normal almost everywhere. The only tracking is +0.32px on the light 400-weight Klarna Title heroes and a hair of -0.048px on body-tight.
The ladder has a deliberate gap between 20px and 32px and between 32px and 43.2px: hierarchy is made by jumps, not steps.
Klarna Title never appears below 43.2px; anything smaller switches to Klarna Text.

Note on Font Substitutes

Both Klarna faces are proprietary. For Klarna Title, use a heavy grotesk with condensed proportions such as Archivo (700, optionally the condensed width) or Inter Tight 700; keep line-height at the token values and do not add tracking to the 700 sizes. For the 400-weight hero variants, use the same family at 400 with the 0.32px tracking. For Klarna Text, Inter is the closest neutral stand-in; it runs slightly wide, so consider -0.01em on 16px text and check that pill labels still fit the measured 44px and 52px heights.

Layout

Spacing System

No base step was extracted; spacing is expressed through measured tokens:

Token	Value	Read on
`section-padding-y`	80px	Vertical rhythm between page sections, measured on the page itself (44 section edges across 5 pages)
`header-landing-gap` / `header-inner-gap`	48px	Gap between header nav groups (`header-landing`, `header-inner`)
`header-landing-mobile-gap` / `header-inner-mobile-gap`	48px	Same gap on the mobile header
`card-5-grid-gap`	48px	Column gap of the icon-feature card grid (`card-5`)
`card-7-grid-gap`	48px	Column gap of the wider feature card grid (`card-7`)
`card-6-grid-gap`	40px	Column gap of the text card grid (`card-6`)
`button-primary-3-padding-y` / `-x`	15px / 20px	Ink pill CTA (`button-primary-3`)
`button-primary-2-padding-y` / `-x`	15px / 20px	White pill CTA (`button-primary-2`)
`button-secondary-padding-y` / `-x`	11px / 16px	Hairline pill (`button-secondary`)
`button-ghost-4-padding-y` / `-x`	11px / 16px	Bordered ghost pill (`button-ghost-4`)
`button-ghost-padding-y` / `-x`	11px / 11px	Icon-only ghost pill (`button-ghost`)
`button-ghost-3-padding-y` / `-x`	11px / 11px	Icon-only ghost pill on dark (`button-ghost-3`)

Button padding encodes size: 15px/20px for the large CTA tier, 11px/16px for labelled small pills, 11px square for icon-only circles.

Grid & Container

The header's inner row is capped at 1680px (header-landing-inner-max-width, header-inner-inner-max-width, and the mobile equivalents), which effectively sets the page container width.
Card grids use 48px gutters (card-5-grid-gap, card-7-grid-gap) for icon-led feature rows and 40px (card-6-grid-gap) for text-only card rows.
Screenshots show full-bleed rounded hero modules inside the container, centered section headings over multi-up card rows, a row of large stat numerals, a 2-up comparison card pair, single-column stacked storytelling cards, and a horizontally scrolling review carousel.

Whitespace Philosophy

Whitespace is the primary separator. Sections are divided by the 80px section-padding-y rhythm and color blocks, not rules. Inside grids, gutters stay wide (40 to 48px) so cards read as independent statements. Keep that air: when adding a section, give it the full section-padding-y top and bottom rather than tightening to fit more content.

Measured Layout

Every spacing token restates a measurement of a verified component recipe, or the step those measurements share. section-padding-y is measured directly on the page sections and feeds no step.

section-padding-y: 80px (vertical padding repeated on the page sections: 44 section edges on 5 pages)
header-landing-gap: 48px (header-landing, gap of header-landing-nav)
header-landing-inner-max-width: 1680px (header-landing, max width of header-landing-nav)
header-landing-mobile-gap: 48px (header-landing-mobile, gap of header-landing-mobile-nav)
header-landing-mobile-inner-max-width: 1680px (header-landing-mobile, max width of header-landing-mobile-nav)
header-inner-gap: 48px (header-inner, gap of header-inner-nav)
header-inner-inner-max-width: 1680px (header-inner, max width of header-inner-nav)
header-inner-mobile-gap: 48px (header-inner-mobile, gap of header-inner-mobile-nav)
header-inner-mobile-inner-max-width: 1680px (header-inner-mobile, max width of header-inner-mobile-nav)
card-5-grid-gap: 48px (card-5, column gap of the grid its instances sit in)
card-6-grid-gap: 40px (card-6, column gap of the grid its instances sit in)
card-7-grid-gap: 48px (card-7, column gap of the grid its instances sit in)
button-secondary-padding-y: 11px (button-secondary, vertical padding of the root)
button-secondary-padding-x: 16px (button-secondary, horizontal padding of the root)
button-ghost-padding-y: 11px (button-ghost, vertical padding of the root)
button-ghost-padding-x: 11px (button-ghost, horizontal padding of the root)
button-primary-2-padding-y: 15px (button-primary-2, vertical padding of the root)
button-primary-2-padding-x: 20px (button-primary-2, horizontal padding of the root)
button-ghost-3-padding-y: 11px (button-ghost-3, vertical padding of the root)
button-ghost-3-padding-x: 11px (button-ghost-3, horizontal padding of the root)
button-ghost-4-padding-y: 11px (button-ghost-4, vertical padding of the root)
button-ghost-4-padding-x: 16px (button-ghost-4, horizontal padding of the root)
button-primary-3-padding-y: 15px (button-primary-3, vertical padding of the root)
button-primary-3-padding-x: 20px (button-primary-3, horizontal padding of the root)

The card-5 grid lays out in 3 columns; the card-6 grid in 3 columns; the card-7 grid in 4 columns at desktop.

Elevation & Depth

Level	Treatment	Use
Flat	No shadow, solid fill (`surface`, `surface-lavender`, `brand-pink`)	Default for sections, hero modules, feature cards (`card-5`, `card-6`, `card-7`) and the header
Hairline	1px solid `hairline` (#E2E2E7) or `border-strong` (#C4C3CA)	Secondary/language pills (`button-secondary`, `language-selector`), the circular menu toggle (`header-landing-menu-toggle`)
Soft shadow	`#0000001A 0px 2px 4px 0px` (page sampling: rgba(0, 0, 0, 0.1) 0px 2px 4px 0px)	Review cards in the carousel: `testimonial-group` on a #F8F7FA fill (`testimonial` flagged: the `testimonial-group` height did not reproduce the measured 244px after 2 correction attempts), `testimonial-2-group` (`testimonial-2` flagged: the render came out 23 px taller and 36 px wider than the original), `testimonial-3-group`
Glass blur	`backdrop-filter: blur(10px)` over translucent ink #0B051D4D, 32px radius	The frosted toggle chip over hero photography, `card-2-group-4` (`card-2` flagged: the render came out 175 px taller and 140 px wider than the original (instance 1) after 2 correction attempts)
Focus halo	`#7B57D8 0px 0px 0px 3px` box-shadow plus 2px solid `focus-ring` outline at 2px offset	Keyboard focus on pills, accordions, tabs, pagination and review cards

Shadow philosophy. Depth is rationed, not absent. Most of the page gets its layering from color blocks and photography, and there is exactly one cast shadow in the system: a tight 2px/4px at 10% black, used to lift review cards off their background. The second depth tool is glass: a 10px backdrop blur on a translucent ink chip so controls stay legible over photos. Do not invent larger or colored drop shadows; when a surface needs separation, reach for a tint (surface-lavender) or a hairline border first, the soft shadow second, and blur only over imagery.

Shapes

Border Radius Scale

Token	Value	Use
`rounded.xs`	8px	Small inline elements; least used radius
`rounded.sm`	16px	Review cards (`testimonial`, `testimonial-group`), white card bodies (`card-3-group-3`, `card-4-group-3`)
`rounded.md`	24px	Image card containers (`card-2-group`, `card-4-group-4`)
`rounded.lg`	32px	Glass chips over photography (`card-2-group-4`) and rounded hero modules
`rounded.xl`	48px	Largest hero and banner modules
`rounded.full`	9999px	Every button, nav link, language pill, menu toggle, avatar bubble and pagination dot (recipes measure 99999px; treat as full)

The geometry is soft and consistent: nothing interactive has a corner. All buttons are full pills (button-primary-3, button-secondary, button-ghost), icon-only buttons become circles or short capsules (header-landing-menu-toggle 44px by 42px, header-landing-mobile-menu-toggle 40px by 52px), and pagination is a row of small capsule dots (carousel-pagination-group). Containers scale their radius with their size: 16px for compact review and content cards, 24px for image cards, 32 to 48px for full-bleed heroes. Sharp corners appear only on photography crops inside rounded frames and on the pink highlight marker behind emphasized words.

Components

Each component below was distilled from the live page: the recipe is a standalone, placeholder-filled reproduction with literal values, and every frontmatter key named in the anatomy carries the same measurements. A verified component reproduced the original in every check; a flagged one is shipped with the reason it did not; one marked not verifiable could not be compared with the original, which says nothing about the recipe.

Button, primary

Verification: flagged, the recipe could not be rendered on its own.

Anatomy

button-primary: the component root, a <a> (.c-button-primary), 13-character label

Recipe

HTML · CSS

<div class="c-button-primary-scope">
  <a class="c-button-primary" href="#">lorem ipsum d</a>
</div>

.c-button-primary-scope {
  background-color: #FFFFFF;
  color: #F9F8F5;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-button-primary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 100%;
  padding: 15px 20px;
  position: relative;
  background-color: #FFA8CD;
  color: #0B051D;
  border: 1px solid transparent;
  border-radius: 99999px;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-button-primary:hover {
  background-color: #F5A1C5;
}

.c-button-primary:focus {
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

States

hover (button-primary-hover): background-color #F5A1C5
focus: outline 2px solid #0B051D, outline-offset 2px

Button, secondary

Verification: verified against the live page at desktop.

Anatomy

button-secondary: the component root, a <button> (.c-button-secondary)
button-secondary-group: inner flex row (.c-button-secondary__group)
button-secondary-icon: icon placeholder, 16px (.c-button-secondary__icon)
button-secondary-label: label text, 2 characters (.c-button-secondary__label)

Recipe

HTML · CSS

<div class="c-button-secondary-scope">
  <button class="c-button-secondary" type="button">
    <div class="c-button-secondary__group">
      <span class="c-button-secondary__icon" aria-hidden="true"></span>
      <div class="c-button-secondary__label">lo</div>
    </div>
  </button>
</div>

.c-button-secondary-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-button-secondary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 11px 16px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 1px solid #E2E2E7;
  border-radius: 99999px;
  cursor: pointer;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-button-secondary__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  box-sizing: border-box;
  position: relative;
}

.c-button-secondary__icon {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
  border-radius: 99999px;
}

.c-button-secondary__label {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
}

.c-button-secondary:hover {
  background-color: #0000000A;
}

.c-button-secondary:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

States

hover (button-secondary-hover): background-color #0000000A
focus: box-shadow #7B57D8 0px 0px 0px 3px, outline 2px solid #0B051D, outline-offset 2px

Button, ghost

Verification: verified against the live page at desktop.

Anatomy

button-ghost: the component root, a <button> (.c-button-ghost)
button-ghost-icon: icon placeholder, 20px (.c-button-ghost__icon)

Recipe

HTML · CSS

<div class="c-button-ghost-scope">
  <button class="c-button-ghost" type="button">
    <span class="c-button-ghost__icon" aria-hidden="true"></span>
  </button>
</div>

.c-button-ghost-scope {
  background-color: #EFECFF;
  color: #0B051D;
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-button-ghost {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 11px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 1px solid transparent;
  border-radius: 99999px;
  cursor: pointer;
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  white-space: pre-line;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-button-ghost__icon {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-button-ghost:hover {
  background-color: #0000000A;
}

.c-button-ghost:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

States

hover (button-ghost-hover): background-color #0000000A
focus: box-shadow #7B57D8 0px 0px 0px 3px, outline 2px solid #0B051D, outline-offset 2px

Button, ghost (2)

Verification: flagged, the render matched 88% of the original pixels, below the 97% required on focus after 2 correction attempts.

Anatomy

button-ghost-2: the component root, a <button> (.c-button-ghost-2)
button-ghost-2-group: inner block (.c-button-ghost-2__group)
button-ghost-2-group-2: inner block (.c-button-ghost-2__group-2)
button-ghost-2-group-3: inner flex column (.c-button-ghost-2__group-3)
button-ghost-2-group-4: inner block (.c-button-ghost-2__group-4), content not captured
button-ghost-2-group-5: inner flex column (.c-button-ghost-2__group-5), content not captured
button-ghost-2-group-6: inner block (.c-button-ghost-2__group-6), content not captured

Recipe

HTML · CSS

<div class="c-button-ghost-2-scope">
  <button class="c-button-ghost-2" type="button">
    <div class="c-button-ghost-2__group">
      <div class="c-button-ghost-2__group-2">
        <div class="c-button-ghost-2__group-3">
          <div class="c-button-ghost-2__group-4"></div>
          <div class="c-button-ghost-2__group-5"></div>
          <div class="c-button-ghost-2__group-6"></div>
        </div>
      </div>
    </div>
  </button>
</div>

.c-button-ghost-2-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-button-ghost-2 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: #FFA8CD;
  color: #0B051D;
  border: 0;
  border-radius: 48px 48px 16px;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition: border-radius 0.3s ease-out;
}

.c-button-ghost-2__group {
  display: block;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  transition-duration: 0.18s, 0.18s;
  transition-timing-function: ease, ease;
  transition-property: opacity, transform;
}

.c-button-ghost-2__group-2 {
  display: block;
  box-sizing: border-box;
  width: 105px;
  position: absolute;
  right: 28px;
  bottom: 16px;
}

.c-button-ghost-2__group-3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  gap: 20px;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-button-ghost-2__group-4 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.c-button-ghost-2__group-5 {
  display: flex;
  flex-direction: column;
  align-self: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  line-height: 0px;
}

.c-button-ghost-2__group-6 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.c-button-ghost-2:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

States

focus: box-shadow #7B57D8 0px 0px 0px 3px, outline 2px solid #0B051D, outline-offset 2px

Card

Verification: flagged, the card-group height did not reproduce the measured 61px after 2 correction attempts.

Anatomy

Group: 3 instances in a 4-column grid, 48px gap; the recipe carries the values they all share
card: the component root, a <div> (.c-card)
card-group: inner block (.c-card__group)
card-group-2: inner flex column (.c-card__group-2)
card-group-3: inner group (.c-card__group-3)
card-group-4: inner group (.c-card__group-4), content not captured
card-group-5: inner flex row (.c-card__group-5)
card-media: image placeholder, 17px (.c-card__media)
card-text: label text, 20 characters (.c-card__text)

Recipe

HTML · CSS

<div class="c-card-scope">
  <div class="c-card">
    <div class="c-card__group">
      <div class="c-card__group-2">
        <span class="c-card__group-3">
          <span class="c-card__group-4"></span>
        </span>
        <div class="c-card__group-5">
          <span class="c-card__media" aria-hidden="true"></span>
          <span class="c-card__text">lorem ipsum dolor si</span>
        </div>
      </div>
    </div>
  </div>
</div>

.c-card-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-card {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-card__group {
  display: block;
  box-sizing: border-box;
}

.c-card__group-2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
}

.c-card__group-3 {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  font-family: "Klarna Title", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 43.2px;
  font-weight: 700;
  line-height: 41.04px;
}

.c-card__group-4 {
  display: inline;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
}

.c-card__group-5 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  box-sizing: border-box;
  position: relative;
}

.c-card__media {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 17px;
  height: 17px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
}

.c-card__text {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  color: #282636;
  font-size: 14px;
  text-align: center;
}

.c-card:hover {
  transform-origin: 78.6406px 30.5234px;
}

.c-card:focus {
  transform-origin: 78.6406px 30.5234px;
}

States

hover: transform-origin 78.6406px 30.5234px
focus: transform-origin 78.6406px 30.5234px

Card (2)

Verification: flagged, the render came out 175 px taller and 140 px wider than the original (instance 1) after 2 correction attempts.

Anatomy

Group: 5 instances in a 1-column grid; the recipe carries the values they all share
card-2: the component root, a <div> (.c-card-2)
card-2-group: inner flex column (.c-card-2__group)
card-2-group-2: inner flex column (.c-card-2__group-2)
card-2-media: image placeholder, 467x584px (.c-card-2__media)
card-2-group-3: inner flex column (.c-card-2__group-3)
card-2-group-4: inner flex row (.c-card-2__group-4)
card-2-group-5: inner flex row (.c-card-2__group-5), content not captured

Recipe

HTML · CSS

<div class="c-card-2-scope">
  <div class="c-card-2">
    <div class="c-card-2__group">
      <div class="c-card-2__group-2">
        <span class="c-card-2__media" aria-hidden="true"></span>
      </div>
      <div class="c-card-2__group-3">
        <div class="c-card-2__group-4">
          <div class="c-card-2__group-5"></div>
        </div>
      </div>
    </div>
  </div>
</div>

.c-card-2-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-card-2 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  left: 0px;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-card-2__group {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  border-radius: 24px;
}

.c-card-2__group-2 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  height: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.c-card-2__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 467px;
  height: 584px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
}

.c-card-2__group-3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 40px;
  position: absolute;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.c-card-2__group-4 {
  display: flex;
  box-sizing: border-box;
  padding: 8px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #0B051D4D;
  border-radius: 32px;
  backdrop-filter: blur(10px);
}

.c-card-2__group-5 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  box-sizing: border-box;
  max-width: 100%;
  padding: 2px 16px;
  position: relative;
}

.c-card-2:hover {
  z-index: 5;
  opacity: 0.904788;
  transform: matrix(0.971437, 0, 0, 0.971437, 0, 0);
}

.c-card-2:focus {
  z-index: 5;
  opacity: 0.860659;
  transform: matrix(0.958198, 0, 0, 0.958198, 0, 0);
}

States

hover: z-index 5, opacity 0.904788, transform matrix(0.971437, 0, 0, 0.971437, 0, 0)
focus: z-index 5, opacity 0.860659, transform matrix(0.958198, 0, 0, 0.958198, 0, 0)

Accordion

Verification: verified against the live page at desktop.

Anatomy

accordion: the component root, a <button> (.c-accordion)
accordion-group: inner block (.c-accordion__group)
accordion-text: label text, 21 characters (.c-accordion__text)

Recipe

HTML · CSS

<div class="c-accordion-scope">
  <button class="c-accordion" type="button">
    <div class="c-accordion__group">
      <span class="c-accordion__text">lorem ipsum dolor sit</span>
    </div>
  </button>
</div>

.c-accordion-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-accordion {
  display: inline-flex;
  flex-direction: column;
  align-self: flex-start;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 0;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  list-style-type: none;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-accordion__group {
  display: block;
  box-sizing: border-box;
  opacity: 0.931857;
  transform: matrix(1, 0, 0, 1, 0, 1.26273);
}

.c-accordion__text {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  font-family: "Klarna Title", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 52px;
  font-weight: 700;
  line-height: 52px;
  padding-top: 40px;
  padding-bottom: 40px;
  margin-top: -40px;
  margin-bottom: -28px;
}

.c-accordion:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

States

focus: box-shadow #7B57D8 0px 0px 0px 3px, outline 2px solid #0B051D, outline-offset 2px

Accordion (2)

Verification: verified against the live page at desktop.

Anatomy

accordion-2: the component root, a <button> (.c-accordion-2)
accordion-2-group: inner block (.c-accordion-2__group)
accordion-2-group-2: inner block (.c-accordion-2__group-2)
accordion-2-text: label text, 18 characters (.c-accordion-2__text)

Recipe

HTML · CSS

<div class="c-accordion-2-scope">
  <button class="c-accordion-2" type="button">
    <div class="c-accordion-2__group">
      <div class="c-accordion-2__group-2">
        <span class="c-accordion-2__text">lorem ipsum dolor</span>
      </div>
    </div>
  </button>
</div>

.c-accordion-2-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-accordion-2 {
  display: inline-flex;
  flex-direction: column;
  align-self: flex-start;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 0;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  list-style-type: none;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-accordion-2__group {
  display: block;
  box-sizing: border-box;
  opacity: 0.997777;
  transform: matrix(1, 0, 0, 1, 0, 0.0435746);
}

.c-accordion-2__group-2 {
  display: block;
  box-sizing: border-box;
  color: #96959F;
}

.c-accordion-2__text {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  font-family: "Klarna Title", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 52px;
  font-weight: 700;
  line-height: 52px;
  padding-top: 40px;
  padding-bottom: 40px;
  margin-top: -40px;
  margin-bottom: -28px;
}

.c-accordion-2:hover {
  opacity: 0.84;
}

.c-accordion-2:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

States

hover: opacity 0.84
focus: box-shadow #7B57D8 0px 0px 0px 3px, outline 2px solid #0B051D, outline-offset 2px

Accordion (3)

Verification: verified against the live page at desktop.

Anatomy

accordion-3: the component root, a <button> (.c-accordion-3)
accordion-3-group: inner block (.c-accordion-3__group)
accordion-3-group-2: inner block (.c-accordion-3__group-2)
accordion-3-text: label text, 18 characters (.c-accordion-3__text)

Recipe

HTML · CSS

<div class="c-accordion-3-scope">
  <button class="c-accordion-3" type="button">
    <div class="c-accordion-3__group">
      <div class="c-accordion-3__group-2">
        <span class="c-accordion-3__text">lorem ipsum dolor</span>
      </div>
    </div>
  </button>
</div>

.c-accordion-3-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-accordion-3 {
  display: inline-flex;
  flex-direction: column;
  align-self: flex-start;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 0;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  list-style-type: none;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-accordion-3__group {
  display: block;
  box-sizing: border-box;
}

.c-accordion-3__group-2 {
  display: block;
  box-sizing: border-box;
  color: #96959F;
}

.c-accordion-3__text {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  font-family: "Klarna Title", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 52px;
  font-weight: 700;
  line-height: 52px;
  padding-top: 40px;
  padding-bottom: 40px;
  margin-top: -40px;
  margin-bottom: -28px;
}

.c-accordion-3:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

States

focus: box-shadow #7B57D8 0px 0px 0px 3px, outline 2px solid #0B051D, outline-offset 2px

Verification: flagged, the navigation-group-2 width did not reproduce the measured 273px after 2 correction attempts.

Anatomy

navigation: the component root, a <nav> (.c-navigation)
navigation-group: inner flex row (.c-navigation__group)
navigation-cta: link (.c-navigation__cta)
navigation-icon: icon placeholder, 91x22px (.c-navigation__icon)
navigation-list: inner flex row (.c-navigation__list)
navigation-item: inner flex column (.c-navigation__item, 4 instances)
navigation-cta-2: link, 15-character label (.c-navigation__cta-2, 4 instances)
navigation-group-2: inner flex row (.c-navigation__group-2)
navigation-group-3: inner flex row (.c-navigation__group-3)
navigation-button: button (.c-navigation__button)
navigation-group-4: inner flex row (.c-navigation__group-4, 2 instances), content not captured
navigation-button-2: button (.c-navigation__button-2)
navigation-group-5: inner flex row (.c-navigation__group-5), content not captured
navigation-cta-3: link (.c-navigation__cta-3)

Recipe

HTML · CSS

<div class="c-navigation-scope">
  <nav class="c-navigation">
    <div class="c-navigation__group">
      <a class="c-navigation__cta" href="#">
        <span class="c-navigation__icon" aria-hidden="true"></span>
      </a>
    </div>
    <ul class="c-navigation__list">
      <li class="c-navigation__item">
        <a class="c-navigation__cta-2" href="#">lorem ipsum dol</a>
      </li>
      <li class="c-navigation__item">
        <a class="c-navigation__cta-2" href="#">lorem ip</a>
      </li>
      <li class="c-navigation__item">
        <a class="c-navigation__cta-2" href="#">lor</a>
      </li>
      <li class="c-navigation__item">
        <a class="c-navigation__cta-2" href="#">lorem</a>
      </li>
    </ul>
    <div class="c-navigation__group-2">
      <div class="c-navigation__group-3">
        <button class="c-navigation__button" type="button">
          <div class="c-navigation__group-4"></div>
        </button>
        <button class="c-navigation__button-2" type="button">
          <div class="c-navigation__group-5"></div>
        </button>
        <a class="c-navigation__cta-3" href="#">
          <div class="c-navigation__group-4"></div>
        </a>
      </div>
    </div>
  </nav>
</div>

.c-navigation-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-navigation {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 48px;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 1680px;
  color: #0B051D;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-navigation__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 16px;
  box-sizing: border-box;
  position: relative;
}

.c-navigation__cta {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  cursor: pointer;
  line-height: 0px;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-navigation__icon {
  display: block;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 91px;
  height: 22px;
  aspect-ratio: 4.13636 / 1;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-navigation__list {
  display: flex;
  align-items: center;
  flex-grow: 1;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  margin: 0px;
  overflow-x: auto;
  overflow-y: auto;
  list-style-type: none;
}

.c-navigation__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  height: 100%;
  padding-right: 4px;
  padding-left: 4px;
}

.c-navigation__cta-2 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  box-sizing: border-box;
  padding: 8px 12px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border-radius: 99999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  white-space: nowrap;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-navigation__group-2 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 32px;
  box-sizing: border-box;
  position: relative;
  margin-left: auto;
}

.c-navigation__group-3 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.c-navigation__button {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  padding: 11px 10px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 1px solid #C4C3CA;
  border-radius: 99999px;
  cursor: pointer;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-navigation__group-4 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 10px;
  box-sizing: border-box;
  position: relative;
}

.c-navigation__button-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  padding: 11px 16px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 1px solid #E2E2E7;
  border-radius: 99999px;
  cursor: pointer;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-navigation__group-5 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  box-sizing: border-box;
  position: relative;
}

.c-navigation__cta-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  padding: 11px 20px;
  position: relative;
  background-color: #0B051D;
  color: #F9F8F5;
  border-radius: 99999px;
  cursor: pointer;
  font-weight: 500;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

States

No hover or focus change was observed.

Pagination

Verification: flagged, the render matched 83% of the original pixels, below the 96% required after 2 correction attempts.

Anatomy

pagination: the component root, a <button> (.c-pagination)
pagination-group: inner flex column (.c-pagination__group)
pagination-group-2: inner flex column (.c-pagination__group-2)

Recipe

HTML · CSS

<div class="c-pagination-scope">
  <button class="c-pagination" type="button">
    <div class="c-pagination__group">
      <div class="c-pagination__group-2"></div>
    </div>
  </button>
</div>

.c-pagination-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-pagination {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 4px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 0;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.3s;
  transition-timing-function: ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, padding;
}

.c-pagination__group {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 6px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #96959F;
  border-radius: 99999px;
  transition-duration: 0.3s, 0.3s, 0.3s;
  transition-timing-function: ease, ease, ease;
  transition-property: background-color, width, height;
}

.c-pagination__group-2 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  background-color: #0B051D;
  transform: matrix(1, 0, 0, 1, -16.4842, 0);
  transition-duration: 0.3s, 0.3s, 0.3s;
  transition-timing-function: ease, ease, ease;
  transition-property: background-color, width, height;
}

.c-pagination:hover {
  opacity: 0.84;
}

.c-pagination:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

States

hover: opacity 0.84
focus: box-shadow #7B57D8 0px 0px 0px 3px, outline 2px solid #0B051D, outline-offset 2px

Pagination (2)

Verification: flagged, the render matched 37% of the original pixels, below the 96% required on focus after 2 correction attempts.

Anatomy

pagination-2: the component root, a <button> (.c-pagination-2)
pagination-2-group: inner flex column (.c-pagination-2__group)
pagination-2-group-2: inner flex column (.c-pagination-2__group-2)

Recipe

HTML · CSS

<div class="c-pagination-2-scope">
  <button class="c-pagination-2" type="button">
    <div class="c-pagination-2__group">
      <div class="c-pagination-2__group-2"></div>
    </div>
  </button>
</div>

.c-pagination-2-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-pagination-2 {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 4px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 0;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.3s;
  transition-timing-function: ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, padding;
}

.c-pagination-2__group {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 6px;
  height: 6px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #96959F;
  border-radius: 99999px;
  transition-duration: 0.3s, 0.3s, 0.3s;
  transition-timing-function: ease, ease, ease;
  transition-property: background-color, width, height;
}

.c-pagination-2__group-2 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  background-color: #96959F;
  transition-duration: 0.3s, 0.3s, 0.3s;
  transition-timing-function: ease, ease, ease;
  transition-property: background-color, width, height;
}

.c-pagination-2:hover {
  opacity: 0.84;
}

.c-pagination-2:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

States

hover: opacity 0.84
focus: box-shadow #7B57D8 0px 0px 0px 3px, outline 2px solid #0B051D, outline-offset 2px

Header (landing)

Verification: desktop verified against the live page at desktop; mobile verified against the live page at mobile.

Variant observed on https://www.klarna.com/.

Anatomy

header-landing: the component root, a <header> (.c-header-landing)
header-landing-nav: inner flex row (.c-header-landing__nav)
header-landing-group: inner flex row (.c-header-landing__group)
header-landing-nav-link: link (.c-header-landing__nav-link)
header-landing-nav-link-icon: icon placeholder, 91x22px (.c-header-landing__nav-link-icon)
header-landing-nav-list: inner flex row (.c-header-landing__nav-list)
header-landing-nav-item: inner flex column (.c-header-landing__nav-item, 4 instances)
header-landing-nav-link-2: link, 15-character label (.c-header-landing__nav-link-2, 4 instances)
header-landing-group-2: inner flex row (.c-header-landing__group-2)
header-landing-group-3: inner flex row (.c-header-landing__group-3)
header-landing-menu-toggle: button (.c-header-landing__menu-toggle)
header-landing-group-4: inner flex row (.c-header-landing__group-4, 2 instances)
header-landing-icon: icon placeholder, 20px (.c-header-landing__icon, 2 instances)
header-landing-cta: the button-secondary button (.c-header-landing__cta)
header-landing-group-5: inner flex row (.c-header-landing__group-5)
header-landing-icon-2: icon placeholder, 16px (.c-header-landing__icon-2)
header-landing-inner: label text, 2 characters (.c-header-landing__inner)
header-landing-nav-link-3: link (.c-header-landing__nav-link-3)
header-landing-inner-2: label text, 5 characters (.c-header-landing__inner-2)

Desktop recipe

HTML · CSS

<div class="c-header-landing-scope">
  <header class="c-header-landing">
    <nav class="c-header-landing__nav">
      <div class="c-header-landing__group">
        <a class="c-header-landing__nav-link" href="#">
          <span class="c-header-landing__nav-link-icon" aria-hidden="true"></span>
        </a>
      </div>
      <ul class="c-header-landing__nav-list">
        <li class="c-header-landing__nav-item">
          <a class="c-header-landing__nav-link-2" href="#">lorem ipsum dol</a>
        </li>
        <li class="c-header-landing__nav-item">
          <a class="c-header-landing__nav-link-2" href="#">lorem ip</a>
        </li>
        <li class="c-header-landing__nav-item">
          <a class="c-header-landing__nav-link-2" href="#">lor</a>
        </li>
        <li class="c-header-landing__nav-item">
          <a class="c-header-landing__nav-link-2" href="#">lorem</a>
        </li>
      </ul>
      <div class="c-header-landing__group-2">
        <div class="c-header-landing__group-3">
          <button class="c-header-landing__menu-toggle" type="button">
            <div class="c-header-landing__group-4">
              <span class="c-header-landing__icon" aria-hidden="true"></span>
            </div>
          </button>
          <button class="c-header-landing__cta" type="button">
            <div class="c-header-landing__group-5">
              <span class="c-header-landing__icon-2" aria-hidden="true"></span>
              <div class="c-header-landing__inner">lo</div>
            </div>
          </button>
          <a class="c-header-landing__nav-link-3" href="#">
            <div class="c-header-landing__group-4">
              <span class="c-header-landing__icon" aria-hidden="true"></span>
              <span class="c-header-landing__inner-2">lorem</span>
            </div>
          </a>
        </div>
      </div>
    </nav>
  </header>
</div>

.c-header-landing-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-header-landing {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 72px;
  color: #0B051D;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-header-landing__nav {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 48px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: 1680px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-landing__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 16px;
  box-sizing: border-box;
  position: relative;
}

.c-header-landing__nav-link {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  cursor: pointer;
  line-height: 0px;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-header-landing__nav-link-icon {
  display: block;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 91px;
  height: 22px;
  aspect-ratio: 4.13636 / 1;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing__nav-list {
  display: flex;
  align-items: center;
  flex-grow: 1;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  margin: 0px;
  overflow-x: auto;
  overflow-y: auto;
  list-style-type: none;
}

.c-header-landing__nav-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  height: 100%;
  padding-right: 4px;
  padding-left: 4px;
}

.c-header-landing__nav-link-2 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  box-sizing: border-box;
  padding: 8px 12px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border-radius: 99999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  white-space: nowrap;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-header-landing__group-2 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 32px;
  box-sizing: border-box;
  position: relative;
  margin-left: auto;
}

.c-header-landing__group-3 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.c-header-landing__menu-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  padding: 11px 10px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 1px solid #C4C3CA;
  border-radius: 99999px;
  cursor: pointer;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-header-landing__group-4 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 10px;
  box-sizing: border-box;
  position: relative;
}

.c-header-landing__icon {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  padding: 11px 16px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 1px solid #E2E2E7;
  border-radius: 99999px;
  cursor: pointer;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-header-landing__group-5 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  box-sizing: border-box;
  position: relative;
}

.c-header-landing__icon-2 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
  border-radius: 99999px;
}

.c-header-landing__inner {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
}

.c-header-landing__nav-link-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  padding: 11px 20px;
  position: relative;
  background-color: #0B051D;
  color: #F9F8F5;
  border-radius: 99999px;
  cursor: pointer;
  font-weight: 500;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-header-landing__inner-2 {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
}

.c-header-landing__nav-link:focus {
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

.c-header-landing__nav-link-2:hover {
  background-color: #E5E3F5;
}

.c-header-landing__nav-link-2:focus {
  background-color: #EFECFF;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

.c-header-landing__menu-toggle:hover {
  background-color: #F3F3F5;
}

.c-header-landing__menu-toggle:focus {
  background-color: #F3F3F5;
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

.c-header-landing__cta:hover {
  background-color: #0000000A;
}

.c-header-landing__cta:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

.c-header-landing__nav-link-3:hover {
  background-color: #2C2242;
}

.c-header-landing__nav-link-3:focus {
  background-color: #2C2242;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

Mobile anatomy

header-landing-mobile: the component root, a <header> (.c-header-landing-mobile)
header-landing-mobile-nav: inner flex row (.c-header-landing-mobile__nav)
header-landing-mobile-group: inner flex row (.c-header-landing-mobile__group)
header-landing-mobile-menu-toggle: button (.c-header-landing-mobile__menu-toggle)
header-landing-mobile-menu-toggle-icon: icon placeholder, 20px (.c-header-landing-mobile__menu-toggle-icon)
header-landing-mobile-nav-link: link (.c-header-landing-mobile__nav-link)
header-landing-mobile-nav-link-icon: icon placeholder, 91x22px (.c-header-landing-mobile__nav-link-icon)
header-landing-mobile-group-2: inner flex row (.c-header-landing-mobile__group-2)
header-landing-mobile-group-3: inner flex row (.c-header-landing-mobile__group-3)
header-landing-mobile-menu-toggle-2: button (.c-header-landing-mobile__menu-toggle-2)
header-landing-mobile-group-4: inner flex row (.c-header-landing-mobile__group-4, 2 instances)
header-landing-mobile-icon: icon placeholder, 20px (.c-header-landing-mobile__icon, 2 instances)
header-landing-mobile-nav-link-2: link (.c-header-landing-mobile__nav-link-2)

Mobile recipe

HTML · CSS

<div class="c-header-landing-mobile-scope">
  <header class="c-header-landing-mobile">
    <nav class="c-header-landing-mobile__nav">
      <div class="c-header-landing-mobile__group">
        <button class="c-header-landing-mobile__menu-toggle" type="button">
          <span class="c-header-landing-mobile__menu-toggle-icon" aria-hidden="true"></span>
        </button>
        <a class="c-header-landing-mobile__nav-link" href="#">
          <span class="c-header-landing-mobile__nav-link-icon" aria-hidden="true"></span>
        </a>
      </div>
      <div class="c-header-landing-mobile__group-2">
        <div class="c-header-landing-mobile__group-3">
          <button class="c-header-landing-mobile__menu-toggle-2" type="button">
            <div class="c-header-landing-mobile__group-4">
              <span class="c-header-landing-mobile__icon" aria-hidden="true"></span>
            </div>
          </button>
          <a class="c-header-landing-mobile__nav-link-2" href="#">
            <div class="c-header-landing-mobile__group-4">
              <span class="c-header-landing-mobile__icon" aria-hidden="true"></span>
            </div>
          </a>
        </div>
      </div>
    </nav>
  </header>
</div>

.c-header-landing-mobile-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-header-landing-mobile {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 72px;
  color: #0B051D;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-header-landing-mobile__nav {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 48px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: 1680px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-landing-mobile__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 16px;
  box-sizing: border-box;
  position: relative;
}

.c-header-landing-mobile__menu-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  width: 52px;
  height: 40px;
  padding: 11px 16px;
  position: relative;
  background-color: #FFA8CD;
  color: #0B051D;
  border: 0;
  border-radius: 99999px;
  cursor: pointer;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-header-landing-mobile__menu-toggle-icon {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing-mobile__nav-link {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  cursor: pointer;
  line-height: 0px;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-header-landing-mobile__nav-link-icon {
  display: block;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 91px;
  height: 22px;
  aspect-ratio: 4.13636 / 1;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing-mobile__group-2 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-grow: 1;
  gap: 32px;
  box-sizing: border-box;
  position: relative;
  margin-left: auto;
}

.c-header-landing-mobile__group-3 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.c-header-landing-mobile__menu-toggle-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  padding: 11px 10px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 1px solid #C4C3CA;
  border-radius: 99999px;
  cursor: pointer;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-header-landing-mobile__group-4 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 10px;
  box-sizing: border-box;
  position: relative;
}

.c-header-landing-mobile__icon {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing-mobile__nav-link-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  padding: 11px 12px;
  position: relative;
  background-color: #0B051D;
  color: #F9F8F5;
  border-radius: 99999px;
  cursor: pointer;
  font-weight: 500;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-header-landing-mobile__menu-toggle:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

.c-header-landing-mobile__nav-link:focus {
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

.c-header-landing-mobile__menu-toggle-2:hover {
  background-color: #F3F3F5;
}

.c-header-landing-mobile__menu-toggle-2:focus {
  background-color: #F3F3F5;
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

.c-header-landing-mobile__nav-link-2:hover {
  background-color: #2C2242;
}

.c-header-landing-mobile__nav-link-2:focus {
  background-color: #2C2242;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

States

header-landing-nav-link focus: outline 2px solid #0B051D, outline-offset 2px
header-landing-nav-link-2 hover (header-landing-nav-link-2-hover): background-color #E5E3F5
header-landing-nav-link-2 focus (header-landing-nav-link-2-focus): background-color #EFECFF, outline 2px solid #0B051D, outline-offset 2px
header-landing-menu-toggle hover (header-landing-menu-toggle-hover): background-color #F3F3F5
header-landing-menu-toggle focus (header-landing-menu-toggle-focus): background-color #F3F3F5, box-shadow #7B57D8 0px 0px 0px 3px, outline 2px solid #0B051D, outline-offset 2px
header-landing-cta hover (header-landing-cta-hover): background-color #0000000A
header-landing-cta focus: box-shadow #7B57D8 0px 0px 0px 3px, outline 2px solid #0B051D, outline-offset 2px
header-landing-nav-link-3 hover (header-landing-nav-link-3-hover): background-color #2C2242
header-landing-nav-link-3 focus (header-landing-nav-link-3-focus): background-color #2C2242, outline 2px solid #0B051D, outline-offset 2px
mobile, header-landing-mobile-menu-toggle focus: box-shadow #7B57D8 0px 0px 0px 3px, outline 2px solid #0B051D, outline-offset 2px
mobile, header-landing-mobile-nav-link focus: outline 2px solid #0B051D, outline-offset 2px
mobile, header-landing-mobile-menu-toggle-2 hover (header-landing-mobile-menu-toggle-2-hover): background-color #F3F3F5
mobile, header-landing-mobile-menu-toggle-2 focus (header-landing-mobile-menu-toggle-2-focus): background-color #F3F3F5, box-shadow #7B57D8 0px 0px 0px 3px, outline 2px solid #0B051D, outline-offset 2px
mobile, header-landing-mobile-nav-link-2 hover (header-landing-mobile-nav-link-2-hover): background-color #2C2242
mobile, header-landing-mobile-nav-link-2 focus (header-landing-mobile-nav-link-2-focus): background-color #2C2242, outline 2px solid #0B051D, outline-offset 2px

Button, primary (2)

Verification: verified against the live page at desktop.

Anatomy

button-primary-2: the component root, a <a> (.c-button-primary-2), 14-character label

Recipe

HTML · CSS

<div class="c-button-primary-2-scope">
  <a class="c-button-primary-2" href="#">lorem ipsum do</a>
</div>

.c-button-primary-2-scope {
  background-color: #0B051D;
  color: #FFFFFF;
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-button-primary-2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 15px 20px;
  position: relative;
  background-color: #FFFFFF;
  color: #000000;
  border: 1px solid transparent;
  border-radius: 99999px;
  cursor: pointer;
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-button-primary-2:hover {
  background-color: #F5F5F5;
}

.c-button-primary-2:focus {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

States

hover (button-primary-2-hover): background-color #F5F5F5
focus: outline 2px solid #FFFFFF, outline-offset 2px

Button, ghost (3)

Verification: verified against the live page at desktop.

Anatomy

button-ghost-3: the component root, a <button> (.c-button-ghost-3)
button-ghost-3-icon: icon placeholder, 20px (.c-button-ghost-3__icon)

Recipe

HTML · CSS

<div class="c-button-ghost-3-scope">
  <button class="c-button-ghost-3" type="button">
    <span class="c-button-ghost-3__icon" aria-hidden="true"></span>
  </button>
</div>

.c-button-ghost-3-scope {
  background-color: #0B051D;
  color: #FFFFFF;
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-button-ghost-3 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 11px;
  position: relative;
  background-color: transparent;
  color: #FFFFFF;
  border: 1px solid transparent;
  border-radius: 99999px;
  cursor: pointer;
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-button-ghost-3__icon {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-button-ghost-3:hover {
  background-color: #FFFFFF14;
}

.c-button-ghost-3:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

States

hover (button-ghost-3-hover): background-color #FFFFFF14
focus: box-shadow #7B57D8 0px 0px 0px 3px, outline 2px solid #FFFFFF, outline-offset 2px

Card (3)

Verification: not verifiable, what the page placed in it (photos, media, ads) covers most of it and nothing else differs, so the comparison could not be judged.

Anatomy

Group: 3 instances in a 3-column grid, 16px gap; the recipe carries the values they all share
card-3: the component root, a <div> (.c-card-3)
card-3-group: inner flex column (.c-card-3__group)
card-3-group-2: inner flex column (.c-card-3__group-2)
card-3-group-3: inner flex column (.c-card-3__group-3)
card-3-link: link (.c-card-3__link), content not captured
card-3-group-4: inner flex column (.c-card-3__group-4), content not captured

Recipe

HTML · CSS

<div class="c-card-3-scope">
  <div class="c-card-3">
    <div class="c-card-3__group">
      <div class="c-card-3__group-2">
        <span class="c-card-3__group-3">
          <a class="c-card-3__link" href="#"></a>
          <div class="c-card-3__group-4"></div>
        </span>
      </div>
    </div>
  </div>
</div>

.c-card-3-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-card-3 {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 100%;
  position: relative;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-card-3__group {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  position: relative;
}

.c-card-3__group-2 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
}

.c-card-3__group-3 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: 100%;
  position: relative;
  background-color: #FFFFFF;
  border-radius: 16px;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-card-3__link {
  display: block;
  flex-shrink: 0;
  gap: 4px;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  color: #0B051D;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: #0B051D;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-card-3__group-4 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 16px;
  box-sizing: border-box;
  position: relative;
}

States

No hover or focus change was observed.

Tab

Verification: verified against the live page at desktop.

Anatomy

tab: the component root, a <button> (.c-tab)
tab-group: inner block (.c-tab__group)
tab-group-2: inner block (.c-tab__group-2)
tab-text: label text, 11 characters (.c-tab__text)

Recipe

HTML · CSS

<div class="c-tab-scope">
  <button class="c-tab" type="button">
    <div class="c-tab__group">
      <div class="c-tab__group-2">
        <span class="c-tab__text">lorem ipsum</span>
      </div>
    </div>
  </button>
</div>

.c-tab-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-tab {
  display: inline-flex;
  flex-direction: column;
  align-self: flex-start;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 0;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  list-style-type: none;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-tab__group {
  display: block;
  box-sizing: border-box;
}

.c-tab__group-2 {
  display: block;
  box-sizing: border-box;
  color: #96959F;
}

.c-tab__text {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  font-family: "Klarna Title", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 52px;
  font-weight: 700;
  line-height: 52px;
  padding-top: 40px;
  padding-bottom: 40px;
  margin-top: -40px;
  margin-bottom: -28px;
}

.c-tab:hover {
  opacity: 0.84;
}

.c-tab:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

States

hover: opacity 0.84
focus: box-shadow #7B57D8 0px 0px 0px 3px, outline 2px solid #0B051D, outline-offset 2px

Tab (2)

Verification: verified against the live page at desktop.

Anatomy

tab-2: the component root, a <button> (.c-tab-2)
tab-2-group: inner block (.c-tab-2__group)
tab-2-group-2: inner block (.c-tab-2__group-2)
tab-2-text: label text, 8 characters (.c-tab-2__text)

Recipe

HTML · CSS

<div class="c-tab-2-scope">
  <button class="c-tab-2" type="button">
    <div class="c-tab-2__group">
      <div class="c-tab-2__group-2">
        <span class="c-tab-2__text">lorem ip</span>
      </div>
    </div>
  </button>
</div>

.c-tab-2-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-tab-2 {
  display: inline-flex;
  flex-direction: column;
  align-self: flex-start;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 0;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  list-style-type: none;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-tab-2__group {
  display: block;
  box-sizing: border-box;
}

.c-tab-2__group-2 {
  display: block;
  box-sizing: border-box;
  color: #6C6B74;
}

.c-tab-2__text {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  font-family: "Klarna Title", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 52px;
  font-weight: 700;
  line-height: 52px;
  padding-top: 40px;
  padding-bottom: 40px;
  margin-top: -40px;
  margin-bottom: -28px;
}

.c-tab-2:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

States

focus: box-shadow #7B57D8 0px 0px 0px 3px, outline 2px solid #0B051D, outline-offset 2px

Nav

Verification: verified against the live page at desktop.

Anatomy

nav: the component root, a <nav> (.c-nav)
nav-group: inner flex row (.c-nav__group)
nav-cta: link (.c-nav__cta)
nav-icon: icon placeholder, 91x22px (.c-nav__icon)
nav-list: inner flex row (.c-nav__list)
nav-item: inner flex column (.c-nav__item, 4 instances)
nav-cta-2: link, 15-character label (.c-nav__cta-2, 4 instances)
nav-group-2: inner flex row (.c-nav__group-2)
nav-group-3: inner flex row (.c-nav__group-3)
nav-button: button (.c-nav__button)
nav-group-4: inner flex row (.c-nav__group-4), content not captured
nav-cta-3: link (.c-nav__cta-3)
nav-group-5: inner flex row (.c-nav__group-5), content not captured

Recipe

HTML · CSS

<div class="c-nav-scope">
  <nav class="c-nav">
    <div class="c-nav__group">
      <a class="c-nav__cta" href="#">
        <span class="c-nav__icon" aria-hidden="true"></span>
      </a>
    </div>
    <ul class="c-nav__list">
      <li class="c-nav__item">
        <a class="c-nav__cta-2" href="#">lorem ipsum dol</a>
      </li>
      <li class="c-nav__item">
        <a class="c-nav__cta-2" href="#">lorem ip</a>
      </li>
      <li class="c-nav__item">
        <a class="c-nav__cta-2" href="#">lor</a>
      </li>
      <li class="c-nav__item">
        <a class="c-nav__cta-2" href="#">lorem</a>
      </li>
    </ul>
    <div class="c-nav__group-2">
      <div class="c-nav__group-3">
        <button class="c-nav__button" type="button">
          <div class="c-nav__group-4"></div>
        </button>
        <a class="c-nav__cta-3" href="#">
          <div class="c-nav__group-5"></div>
        </a>
      </div>
    </div>
  </nav>
</div>

.c-nav-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-nav {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 48px;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 1680px;
  color: #0B051D;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-nav__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 16px;
  box-sizing: border-box;
  position: relative;
}

.c-nav__cta {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  cursor: pointer;
  line-height: 0px;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-nav__icon {
  display: block;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 91px;
  height: 22px;
  aspect-ratio: 4.13636 / 1;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-nav__list {
  display: flex;
  align-items: center;
  flex-grow: 1;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  margin: 0px;
  overflow-x: auto;
  overflow-y: auto;
  list-style-type: none;
}

.c-nav__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  height: 100%;
  padding-right: 4px;
  padding-left: 4px;
}

.c-nav__cta-2 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  box-sizing: border-box;
  padding: 8px 12px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border-radius: 99999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  white-space: nowrap;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-nav__group-2 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 32px;
  box-sizing: border-box;
  position: relative;
  margin-left: auto;
}

.c-nav__group-3 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.c-nav__button {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  padding: 11px 16px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 1px solid #E2E2E7;
  border-radius: 99999px;
  cursor: pointer;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-nav__group-4 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  box-sizing: border-box;
  position: relative;
}

.c-nav__cta-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  padding: 11px 20px;
  position: relative;
  background-color: #0B051D;
  color: #F9F8F5;
  border-radius: 99999px;
  cursor: pointer;
  font-weight: 500;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-nav__group-5 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 10px;
  box-sizing: border-box;
  position: relative;
}

States

No hover or focus change was observed.

Header (inner)

Verification: desktop verified against the live page at desktop; mobile verified against the live page at mobile.

Variant observed on https://www.klarna.com/de/was-ist-klarna/.

Anatomy

header-inner: the component root, a <header> (.c-header-inner)
header-inner-nav: inner flex row (.c-header-inner__nav)
header-inner-group: inner flex row (.c-header-inner__group)
header-inner-nav-link: link (.c-header-inner__nav-link)
header-inner-nav-link-icon: icon placeholder, 91x22px (.c-header-inner__nav-link-icon)
header-inner-nav-list: inner flex row (.c-header-inner__nav-list)
header-inner-nav-item: inner flex column (.c-header-inner__nav-item, 4 instances)
header-inner-nav-link-2: link, 15-character label (.c-header-inner__nav-link-2, 4 instances)
header-inner-group-2: inner flex row (.c-header-inner__group-2)
header-inner-group-3: inner flex row (.c-header-inner__group-3)
header-inner-cta: the button-secondary button (.c-header-inner__cta)
header-inner-group-4: inner flex row (.c-header-inner__group-4)
header-inner-icon: icon placeholder, 16px (.c-header-inner__icon)
header-inner-inner: label text, 2 characters (.c-header-inner__inner)
header-inner-nav-link-3: link (.c-header-inner__nav-link-3)
header-inner-group-5: inner flex row (.c-header-inner__group-5)
header-inner-icon-2: icon placeholder, 20px (.c-header-inner__icon-2)
header-inner-inner-2: label text, 5 characters (.c-header-inner__inner-2)

Desktop recipe

HTML · CSS

<div class="c-header-inner-scope">
  <header class="c-header-inner">
    <nav class="c-header-inner__nav">
      <div class="c-header-inner__group">
        <a class="c-header-inner__nav-link" href="#">
          <span class="c-header-inner__nav-link-icon" aria-hidden="true"></span>
        </a>
      </div>
      <ul class="c-header-inner__nav-list">
        <li class="c-header-inner__nav-item">
          <a class="c-header-inner__nav-link-2" href="#">lorem ipsum dol</a>
        </li>
        <li class="c-header-inner__nav-item">
          <a class="c-header-inner__nav-link-2" href="#">lorem ip</a>
        </li>
        <li class="c-header-inner__nav-item">
          <a class="c-header-inner__nav-link-2" href="#">lor</a>
        </li>
        <li class="c-header-inner__nav-item">
          <a class="c-header-inner__nav-link-2" href="#">lorem</a>
        </li>
      </ul>
      <div class="c-header-inner__group-2">
        <div class="c-header-inner__group-3">
          <button class="c-header-inner__cta" type="button">
            <div class="c-header-inner__group-4">
              <span class="c-header-inner__icon" aria-hidden="true"></span>
              <div class="c-header-inner__inner">lo</div>
            </div>
          </button>
          <a class="c-header-inner__nav-link-3" href="#">
            <div class="c-header-inner__group-5">
              <span class="c-header-inner__icon-2" aria-hidden="true"></span>
              <span class="c-header-inner__inner-2">lorem</span>
            </div>
          </a>
        </div>
      </div>
    </nav>
  </header>
</div>

.c-header-inner-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-header-inner {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 72px;
  color: #0B051D;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-header-inner__nav {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 48px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: 1680px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-inner__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 16px;
  box-sizing: border-box;
  position: relative;
}

.c-header-inner__nav-link {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  cursor: pointer;
  line-height: 0px;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-header-inner__nav-link-icon {
  display: block;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 91px;
  height: 22px;
  aspect-ratio: 4.13636 / 1;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner__nav-list {
  display: flex;
  align-items: center;
  flex-grow: 1;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  margin: 0px;
  overflow-x: auto;
  overflow-y: auto;
  list-style-type: none;
}

.c-header-inner__nav-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  height: 100%;
  padding-right: 4px;
  padding-left: 4px;
}

.c-header-inner__nav-link-2 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  box-sizing: border-box;
  padding: 8px 12px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border-radius: 99999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  white-space: nowrap;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-header-inner__group-2 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 32px;
  box-sizing: border-box;
  position: relative;
  margin-left: auto;
}

.c-header-inner__group-3 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.c-header-inner__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  padding: 11px 16px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 1px solid #E2E2E7;
  border-radius: 99999px;
  cursor: pointer;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-header-inner__group-4 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  box-sizing: border-box;
  position: relative;
}

.c-header-inner__icon {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
  border-radius: 99999px;
}

.c-header-inner__inner {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
}

.c-header-inner__nav-link-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  padding: 11px 20px;
  position: relative;
  background-color: #0B051D;
  color: #F9F8F5;
  border-radius: 99999px;
  cursor: pointer;
  font-weight: 500;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-header-inner__group-5 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 10px;
  box-sizing: border-box;
  position: relative;
}

.c-header-inner__icon-2 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner__inner-2 {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
}

.c-header-inner__nav-link:focus {
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

.c-header-inner__nav-link-2:hover {
  background-color: #E5E3F5;
}

.c-header-inner__nav-link-2:focus {
  background-color: #EFECFF;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

.c-header-inner__cta:hover {
  background-color: #0000000A;
}

.c-header-inner__cta:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

.c-header-inner__nav-link-3:hover {
  background-color: #2C2242;
}

.c-header-inner__nav-link-3:focus {
  background-color: #2C2242;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

Mobile anatomy

header-inner-mobile: the component root, a <header> (.c-header-inner-mobile)
header-inner-mobile-nav: inner flex row (.c-header-inner-mobile__nav)
header-inner-mobile-group: inner flex row (.c-header-inner-mobile__group)
header-inner-mobile-menu-toggle: button (.c-header-inner-mobile__menu-toggle)
header-inner-mobile-menu-toggle-icon: icon placeholder, 20px (.c-header-inner-mobile__menu-toggle-icon)
header-inner-mobile-nav-link: link (.c-header-inner-mobile__nav-link)
header-inner-mobile-nav-link-icon: icon placeholder, 91x22px (.c-header-inner-mobile__nav-link-icon)
header-inner-mobile-group-2: inner flex row (.c-header-inner-mobile__group-2)
header-inner-mobile-group-3: inner flex row (.c-header-inner-mobile__group-3)
header-inner-mobile-nav-link-2: link (.c-header-inner-mobile__nav-link-2)
header-inner-mobile-group-4: inner flex row (.c-header-inner-mobile__group-4)
header-inner-mobile-icon: icon placeholder, 20px (.c-header-inner-mobile__icon)

Mobile recipe

HTML · CSS

<div class="c-header-inner-mobile-scope">
  <header class="c-header-inner-mobile">
    <nav class="c-header-inner-mobile__nav">
      <div class="c-header-inner-mobile__group">
        <button class="c-header-inner-mobile__menu-toggle" type="button">
          <span class="c-header-inner-mobile__menu-toggle-icon" aria-hidden="true"></span>
        </button>
        <a class="c-header-inner-mobile__nav-link" href="#">
          <span class="c-header-inner-mobile__nav-link-icon" aria-hidden="true"></span>
        </a>
      </div>
      <div class="c-header-inner-mobile__group-2">
        <div class="c-header-inner-mobile__group-3">
          <a class="c-header-inner-mobile__nav-link-2" href="#">
            <div class="c-header-inner-mobile__group-4">
              <span class="c-header-inner-mobile__icon" aria-hidden="true"></span>
            </div>
          </a>
        </div>
      </div>
    </nav>
  </header>
</div>

.c-header-inner-mobile-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-header-inner-mobile {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 72px;
  color: #0B051D;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-header-inner-mobile__nav {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 48px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: 1680px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-inner-mobile__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 16px;
  box-sizing: border-box;
  position: relative;
}

.c-header-inner-mobile__menu-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  width: 52px;
  height: 40px;
  padding: 11px 16px;
  position: relative;
  background-color: #FFA8CD;
  color: #0B051D;
  border: 0;
  border-radius: 99999px;
  cursor: pointer;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-header-inner-mobile__menu-toggle-icon {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-mobile__nav-link {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  cursor: pointer;
  line-height: 0px;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-header-inner-mobile__nav-link-icon {
  display: block;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 91px;
  height: 22px;
  aspect-ratio: 4.13636 / 1;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-mobile__group-2 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-grow: 1;
  gap: 32px;
  box-sizing: border-box;
  position: relative;
  margin-left: auto;
}

.c-header-inner-mobile__group-3 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.c-header-inner-mobile__nav-link-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  padding: 11px 12px;
  position: relative;
  background-color: #0B051D;
  color: #F9F8F5;
  border-radius: 99999px;
  cursor: pointer;
  font-weight: 500;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-header-inner-mobile__group-4 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 10px;
  box-sizing: border-box;
  position: relative;
}

.c-header-inner-mobile__icon {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-mobile__menu-toggle:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

.c-header-inner-mobile__nav-link:focus {
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

.c-header-inner-mobile__nav-link-2:hover {
  background-color: #2C2242;
}

.c-header-inner-mobile__nav-link-2:focus {
  background-color: #2C2242;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

States

header-inner-nav-link focus: outline 2px solid #0B051D, outline-offset 2px
header-inner-nav-link-2 hover (header-inner-nav-link-2-hover): background-color #E5E3F5
header-inner-nav-link-2 focus (header-inner-nav-link-2-focus): background-color #EFECFF, outline 2px solid #0B051D, outline-offset 2px
header-inner-cta hover (header-inner-cta-hover): background-color #0000000A
header-inner-cta focus: box-shadow #7B57D8 0px 0px 0px 3px, outline 2px solid #0B051D, outline-offset 2px
header-inner-nav-link-3 hover (header-inner-nav-link-3-hover): background-color #2C2242
header-inner-nav-link-3 focus (header-inner-nav-link-3-focus): background-color #2C2242, outline 2px solid #0B051D, outline-offset 2px
mobile, header-inner-mobile-menu-toggle focus: box-shadow #7B57D8 0px 0px 0px 3px, outline 2px solid #0B051D, outline-offset 2px
mobile, header-inner-mobile-nav-link focus: outline 2px solid #0B051D, outline-offset 2px
mobile, header-inner-mobile-nav-link-2 hover (header-inner-mobile-nav-link-2-hover): background-color #2C2242
mobile, header-inner-mobile-nav-link-2 focus (header-inner-mobile-nav-link-2-focus): background-color #2C2242, outline 2px solid #0B051D, outline-offset 2px

Button, ghost (4)

Verification: verified against the live page at desktop.

Anatomy

button-ghost-4: the component root, a <button> (.c-button-ghost-4)
button-ghost-4-group: inner flex row (.c-button-ghost-4__group)
button-ghost-4-icon: icon placeholder, 16px (.c-button-ghost-4__icon)
button-ghost-4-label: label text, 2 characters (.c-button-ghost-4__label)

Recipe

HTML · CSS

<div class="c-button-ghost-4-scope">
  <button class="c-button-ghost-4" type="button">
    <div class="c-button-ghost-4__group">
      <span class="c-button-ghost-4__icon" aria-hidden="true"></span>
      <div class="c-button-ghost-4__label">lo</div>
    </div>
  </button>
</div>

.c-button-ghost-4-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-button-ghost-4 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 11px 16px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 1px solid #E2E2E7;
  border-radius: 99999px;
  cursor: pointer;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-button-ghost-4__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  box-sizing: border-box;
  position: relative;
}

.c-button-ghost-4__icon {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
  border-radius: 99999px;
}

.c-button-ghost-4__label {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
}

.c-button-ghost-4:hover {
  background-color: #0000000A;
}

.c-button-ghost-4:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

States

hover (button-ghost-4-hover): background-color #0000000A
focus: box-shadow #7B57D8 0px 0px 0px 3px, outline 2px solid #0B051D, outline-offset 2px

Button, ghost (5)

Verification: flagged, the render matched 88% of the original pixels, below the 97% required on focus after 2 correction attempts.

Anatomy

button-ghost-5: the component root, a <button> (.c-button-ghost-5)
button-ghost-5-group: inner block (.c-button-ghost-5__group)
button-ghost-5-group-2: inner block (.c-button-ghost-5__group-2)
button-ghost-5-group-3: inner flex column (.c-button-ghost-5__group-3)
button-ghost-5-group-4: inner block (.c-button-ghost-5__group-4), content not captured
button-ghost-5-group-5: inner flex column (.c-button-ghost-5__group-5), content not captured
button-ghost-5-group-6: inner block (.c-button-ghost-5__group-6), content not captured

Recipe

HTML · CSS

<div class="c-button-ghost-5-scope">
  <button class="c-button-ghost-5" type="button">
    <div class="c-button-ghost-5__group">
      <div class="c-button-ghost-5__group-2">
        <div class="c-button-ghost-5__group-3">
          <div class="c-button-ghost-5__group-4"></div>
          <div class="c-button-ghost-5__group-5"></div>
          <div class="c-button-ghost-5__group-6"></div>
        </div>
      </div>
    </div>
  </button>
</div>

.c-button-ghost-5-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-button-ghost-5 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: #FFA8CD;
  color: #0B051D;
  border: 0;
  border-radius: 48px 48px 16px;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition: border-radius 0.3s ease-out;
}

.c-button-ghost-5__group {
  display: block;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  transition-duration: 0.18s, 0.18s;
  transition-timing-function: ease, ease;
  transition-property: opacity, transform;
}

.c-button-ghost-5__group-2 {
  display: block;
  box-sizing: border-box;
  width: 105px;
  position: absolute;
  right: 28px;
  bottom: 16px;
}

.c-button-ghost-5__group-3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  gap: 20px;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-button-ghost-5__group-4 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.c-button-ghost-5__group-5 {
  display: flex;
  flex-direction: column;
  align-self: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  line-height: 0px;
}

.c-button-ghost-5__group-6 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.c-button-ghost-5:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

States

focus: box-shadow #7B57D8 0px 0px 0px 3px, outline 2px solid #0B051D, outline-offset 2px

Card (4)

Verification: not verifiable, what the page placed in it (photos, media, ads) covers most of it and nothing else differs, so the comparison could not be judged.

Anatomy

Group: 3 instances in a 3-column grid, 16px gap; the recipe carries the values they all share
card-4: the component root, a <div> (.c-card-4)
card-4-group: inner flex column (.c-card-4__group)
card-4-group-2: inner flex column (.c-card-4__group-2)
card-4-group-3: inner flex column (.c-card-4__group-3)
card-4-group-4: inner flex column (.c-card-4__group-4), content not captured
card-4-group-5: inner flex column (.c-card-4__group-5), content not captured

Recipe

HTML · CSS

<div class="c-card-4-scope">
  <div class="c-card-4">
    <div class="c-card-4__group">
      <div class="c-card-4__group-2">
        <span class="c-card-4__group-3">
          <div class="c-card-4__group-4"></div>
          <div class="c-card-4__group-5"></div>
        </span>
      </div>
    </div>
  </div>
</div>

.c-card-4-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-card-4 {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 100%;
  position: relative;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-card-4__group {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  position: relative;
}

.c-card-4__group-2 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
}

.c-card-4__group-3 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: 100%;
  position: relative;
  background-color: #FFFFFF;
  border-radius: 16px;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-card-4__group-4 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  border-radius: 24px;
}

.c-card-4__group-5 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 16px;
  box-sizing: border-box;
  position: relative;
}

States

No hover or focus change was observed.

Card (5)

Verification: verified against the live page at desktop.

Anatomy

Group: 3 instances in a 3-column grid, 48px gap; the recipe carries the values they all share
card-5: the component root, a <div> (.c-card-5)
card-5-group: inner flex column (.c-card-5__group)
card-5-group-2: inner flex column (.c-card-5__group-2, 2 instances)
card-5-group-3: inner flex column (.c-card-5__group-3)
card-5-icon: icon placeholder, 50px (.c-card-5__icon)
card-5-group-4: inner flex column (.c-card-5__group-4)
card-5-title: heading, 20 characters (.c-card-5__title)
card-5-group-5: inner flex column (.c-card-5__group-5)
card-5-body: inner group (.c-card-5__body), content not captured

Recipe

HTML · CSS

<div class="c-card-5-scope">
  <div class="c-card-5">
    <div class="c-card-5__group">
      <div class="c-card-5__group-2">
        <span class="c-card-5__group-3">
          <span class="c-card-5__icon" aria-hidden="true"></span>
        </span>
      </div>
    </div>
    <div class="c-card-5__group-4">
      <h4 class="c-card-5__title">lorem ipsum dolor si</h4>
      <div class="c-card-5__group-2">
        <div class="c-card-5__group-5">
          <p class="c-card-5__body"></p>
        </div>
      </div>
    </div>
  </div>
</div>

.c-card-5-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-card-5 {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 100%;
  position: relative;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-card-5__group {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  margin-bottom: 24px;
}

.c-card-5__group-2 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
}

.c-card-5__group-3 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
}

.c-card-5__icon {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-card-5__group-4 {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 100%;
  position: relative;
}

.c-card-5__title {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  margin: -12px 0px -4px;
  position: relative;
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.c-card-5__group-5 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  max-width: 1760px;
  position: relative;
  color: #0E0E0F;
  text-align: left;
}

.c-card-5__body {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  margin: 0px;
  position: relative;
  font-family: "Klarna Text", sans-serif;
  line-height: 24px;
  letter-spacing: -0.048px;
}

States

No hover or focus change was observed.

Card (6)

Verification: verified against the live page at desktop.

Anatomy

Group: 3 instances in a 3-column grid, 40px gap; the recipe carries the values they all share
card-6: the component root, a <div> (.c-card-6)
card-6-group: inner flex column (.c-card-6__group)
card-6-group-2: inner flex column (.c-card-6__group-2)
card-6-group-3: inner flex column (.c-card-6__group-3)
card-6-title: heading, 23 characters (.c-card-6__title)
card-6-text: label text, 76 characters (.c-card-6__text)

Recipe

HTML · CSS

<div class="c-card-6-scope">
  <div class="c-card-6">
    <div class="c-card-6__group">
      <div class="c-card-6__group-2">
        <div class="c-card-6__group-3">
          <h3 class="c-card-6__title">lorem ipsum dolor sit a</h3>
        </div>
        <div class="c-card-6__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor</div>
      </div>
    </div>
  </div>
</div>

.c-card-6-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-card-6 {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 100%;
  position: relative;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-card-6__group {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-card-6__group-2 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-card-6__group-3 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-card-6__title {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  max-width: 700px;
  margin: -12px 0px;
  position: relative;
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  text-align: left;
  padding-top: 12px;
  padding-bottom: 12px;
}

.c-card-6__text {
  display: block;
  flex-direction: column;
  flex-grow: 1;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  color: #282636;
  line-height: 24px;
}

States

No hover or focus change was observed.

Hero

Verification: flagged, the hero-title y did not reproduce the measured 154px after 2 correction attempts.

Anatomy

Group: 3 instances in a 1-column grid; the recipe carries the values they all share
hero: the component root, a <div> (.c-hero)
hero-group: inner group (.c-hero__group)
hero-group-2: inner flex column (.c-hero__group-2, 3 instances), content not captured
hero-group-3: inner block (.c-hero__group-3)
hero-group-4: inner flex column (.c-hero__group-4), content not captured
hero-group-5: inner block (.c-hero__group-5)
hero-title: heading, 34 characters (.c-hero__title)

Recipe

HTML · CSS

<div class="c-hero-scope">
  <div class="c-hero">
    <section class="c-hero__group">
      <div class="c-hero__group-2">
        <div class="c-hero__group-3">
          <div class="c-hero__group-4"></div>
        </div>
      </div>
      <div class="c-hero__group-5">
        <div class="c-hero__group-2">
          <h1 class="c-hero__title">lorem ipsum dolor sit amet consect</h1>
          <div class="c-hero__group-2"></div>
        </div>
      </div>
    </section>
  </div>
</div>

.c-hero-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-hero {
  display: inline-flex;
  flex-direction: column;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-hero__group {
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-hero__group-2 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
}

.c-hero__group-3 {
  box-sizing: border-box;
  width: 100%;
}

.c-hero__group-4 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  color: #0B051D;
  font-size: 16px;
  line-height: 20px;
}

.c-hero__group-5 {
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-hero__title {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  margin: 0px 0px 24px;
  position: relative;
  color: #F9F8F5;
  font-family: "Klarna Title", sans-serif;
  font-size: 66px;
  font-weight: 400;
  line-height: 73.26px;
  letter-spacing: 0.32px;
  text-align: left;
}

.c-hero:hover {
  flex-shrink: 1;
  gap: 16px;
  max-width: 1760px;
  padding: 32px 40px 0px;
  margin: 0px auto;
  background-color: transparent;
}

.c-hero:focus {
  flex-shrink: 1;
  gap: 16px;
  max-width: 1760px;
  padding: 32px 40px 0px;
  margin: 0px auto;
  background-color: transparent;
}

States

hover (hero-hover): flex-shrink 1, gap 16px, max-width 1760px, padding 32px 40px 0px, margin 0px auto, background-color transparent
focus (hero-focus): flex-shrink 1, gap 16px, max-width 1760px, padding 32px 40px 0px, margin 0px auto, background-color transparent

Testimonial

Verification: flagged, the testimonial-group height did not reproduce the measured 244px after 2 correction attempts.

Anatomy

testimonial: the component root, a <button> (.c-testimonial)
testimonial-group: inner flex column (.c-testimonial__group)
testimonial-group-2: inner flex row (.c-testimonial__group-2)
testimonial-group-3: inner flex column (.c-testimonial__group-3)
testimonial-text: label text, 1 characters (.c-testimonial__text)
testimonial-group-4: inner flex column (.c-testimonial__group-4)
testimonial-text-2: label text, 9 characters (.c-testimonial__text-2)
testimonial-group-5: inner flex row (.c-testimonial__group-5), content not captured
testimonial-group-6: inner flex column (.c-testimonial__group-6)
testimonial-group-7: inner flex column (.c-testimonial__group-7)
testimonial-group-8: inner flex column (.c-testimonial__group-8), content not captured
testimonial-text-3: label text, 13 characters (.c-testimonial__text-3)

Recipe

HTML · CSS

<div class="c-testimonial-scope">
  <button class="c-testimonial" type="button">
    <div class="c-testimonial__group">
      <div class="c-testimonial__group-2">
        <div class="c-testimonial__group-3">
          <div class="c-testimonial__text">l</div>
        </div>
        <div class="c-testimonial__group-4">
          <div class="c-testimonial__text-2">lorem ips</div>
          <div class="c-testimonial__group-5"></div>
        </div>
      </div>
      <div class="c-testimonial__group-6">
        <div class="c-testimonial__group-7">
          <div class="c-testimonial__group-8"></div>
        </div>
      </div>
      <div class="c-testimonial__text-3">lorem ipsum d</div>
    </div>
  </button>
</div>

.c-testimonial-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-testimonial {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-testimonial__group {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  row-gap: 12px;
  box-sizing: border-box;
  min-width: 352px;
  max-width: 352px;
  min-height: 210px;
  padding: 16px;
  position: relative;
  z-index: 108;
  background-color: #F8F7FA;
  border: 1px solid transparent;
  border-radius: 16px;
  box-shadow: #0000001A 0px 2px 4px 0px;
  text-align: left;
  transition-duration: 0.09s, 0.09s, 0.09s;
  transition-timing-function: linear, linear, linear;
  transition-property: background-color, border-color, box-shadow;
}

.c-testimonial__group-2 {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  gap: 12px;
  box-sizing: border-box;
  position: relative;
}

.c-testimonial__group-3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #FFA8CD;
  border-radius: 99999px;
}

.c-testimonial__text {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  font-weight: 500;
}

.c-testimonial__group-4 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
  position: relative;
}

.c-testimonial__text-2 {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  font-weight: 700;
}

.c-testimonial__group-5 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  position: relative;
}

.c-testimonial__group-6 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  padding-top: 8px;
}

.c-testimonial__group-7 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-testimonial__group-8 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  max-height: 100px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  transition: max-height 0.35s ease-in-out;
}

.c-testimonial__text-3 {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  color: #504F5F;
  font-size: 14px;
}

.c-testimonial:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

States

focus: box-shadow #7B57D8 0px 0px 0px 3px, outline 2px solid #0B051D, outline-offset 2px

Testimonial (2)

Verification: flagged, the render came out 23 px taller and 36 px wider than the original (instance 1) after 2 correction attempts.

Anatomy

Group: 4 instances in a 1-column grid, 32px gap; the recipe carries the values they all share
testimonial-2: the component root, a <div> (.c-testimonial-2)
testimonial-2-button: button (.c-testimonial-2__button)
testimonial-2-group: inner flex column (.c-testimonial-2__group)
testimonial-2-group-2: inner flex row (.c-testimonial-2__group-2)
testimonial-2-group-3: inner flex column (.c-testimonial-2__group-3), content not captured
testimonial-2-group-4: inner flex column (.c-testimonial-2__group-4), content not captured
testimonial-2-group-5: inner flex column (.c-testimonial-2__group-5)
testimonial-2-group-6: inner flex column (.c-testimonial-2__group-6), content not captured
testimonial-2-text: label text, 13 characters (.c-testimonial-2__text)

Recipe

HTML · CSS

<div class="c-testimonial-2-scope">
  <div class="c-testimonial-2">
    <button class="c-testimonial-2__button" type="button">
      <div class="c-testimonial-2__group">
        <div class="c-testimonial-2__group-2">
          <div class="c-testimonial-2__group-3"></div>
          <div class="c-testimonial-2__group-4"></div>
        </div>
        <div class="c-testimonial-2__group-5">
          <div class="c-testimonial-2__group-6"></div>
        </div>
        <div class="c-testimonial-2__text">lorem ipsum d</div>
      </div>
    </button>
  </div>
</div>

.c-testimonial-2-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-testimonial-2 {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  color: #0B051D;
  border-radius: 16px;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-testimonial-2__button {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-testimonial-2__group {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  row-gap: 12px;
  box-sizing: border-box;
  min-width: 352px;
  max-width: 352px;
  min-height: 210px;
  padding: 16px;
  position: relative;
  border-width: 1px;
  border-style: solid;
  border-radius: 16px;
  box-shadow: #0000001A 0px 2px 4px 0px;
  text-align: left;
  transition-duration: 0.09s, 0.09s, 0.09s;
  transition-timing-function: linear, linear, linear;
  transition-property: background-color, border-color, box-shadow;
}

.c-testimonial-2__group-2 {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  gap: 12px;
  box-sizing: border-box;
  position: relative;
}

.c-testimonial-2__group-3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #FFA8CD;
  border-radius: 99999px;
}

.c-testimonial-2__group-4 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
  position: relative;
}

.c-testimonial-2__group-5 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  padding-top: 8px;
}

.c-testimonial-2__group-6 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-testimonial-2__text {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  color: #504F5F;
  font-size: 14px;
}

.c-testimonial-2:focus {
  transform: matrix(1.08, 0, 0, 1.08, 0, 0);
}

States

focus: transform matrix(1.08, 0, 0, 1.08, 0, 0)

Testimonial (3)

Verification: flagged, the testimonial-3-group height did not reproduce the measured 227px after 2 correction attempts.

Anatomy

testimonial-3: the component root, a <button> (.c-testimonial-3)
testimonial-3-group: inner flex column (.c-testimonial-3__group)
testimonial-3-group-2: inner flex row (.c-testimonial-3__group-2)
testimonial-3-group-3: inner flex column (.c-testimonial-3__group-3)
testimonial-3-text: label text, 1 characters (.c-testimonial-3__text)
testimonial-3-group-4: inner flex column (.c-testimonial-3__group-4)
testimonial-3-text-2: label text, 11 characters (.c-testimonial-3__text-2)
testimonial-3-group-5: inner flex row (.c-testimonial-3__group-5), content not captured
testimonial-3-group-6: inner flex column (.c-testimonial-3__group-6)
testimonial-3-group-7: inner flex column (.c-testimonial-3__group-7)
testimonial-3-group-8: inner flex column (.c-testimonial-3__group-8), content not captured
testimonial-3-text-3: label text, 13 characters (.c-testimonial-3__text-3)

Recipe

HTML · CSS

<div class="c-testimonial-3-scope">
  <button class="c-testimonial-3" type="button">
    <div class="c-testimonial-3__group">
      <div class="c-testimonial-3__group-2">
        <div class="c-testimonial-3__group-3">
          <div class="c-testimonial-3__text">l</div>
        </div>
        <div class="c-testimonial-3__group-4">
          <div class="c-testimonial-3__text-2">lorem ipsum</div>
          <div class="c-testimonial-3__group-5"></div>
        </div>
      </div>
      <div class="c-testimonial-3__group-6">
        <div class="c-testimonial-3__group-7">
          <div class="c-testimonial-3__group-8"></div>
        </div>
      </div>
      <div class="c-testimonial-3__text-3">lorem ipsum d</div>
    </div>
  </button>
</div>

.c-testimonial-3-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-testimonial-3 {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-testimonial-3__group {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  row-gap: 12px;
  box-sizing: border-box;
  min-width: 352px;
  max-width: 352px;
  min-height: 210px;
  padding: 16px;
  position: relative;
  z-index: 108;
  background-color: #F8F7FA;
  border: 1px solid transparent;
  border-radius: 16px;
  box-shadow: #0000001A 0px 2px 4px 0px;
  text-align: left;
  transition-duration: 0.09s, 0.09s, 0.09s;
  transition-timing-function: linear, linear, linear;
  transition-property: background-color, border-color, box-shadow;
}

.c-testimonial-3__group-2 {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  gap: 12px;
  box-sizing: border-box;
  position: relative;
}

.c-testimonial-3__group-3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #FFA8CD;
  border-radius: 99999px;
}

.c-testimonial-3__text {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  font-weight: 500;
}

.c-testimonial-3__group-4 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
  position: relative;
}

.c-testimonial-3__text-2 {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  font-weight: 700;
}

.c-testimonial-3__group-5 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  position: relative;
}

.c-testimonial-3__group-6 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  padding-top: 8px;
}

.c-testimonial-3__group-7 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-testimonial-3__group-8 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-testimonial-3__text-3 {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  color: #504F5F;
  font-size: 14px;
}

.c-testimonial-3:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

States

focus: box-shadow #7B57D8 0px 0px 0px 3px, outline 2px solid #0B051D, outline-offset 2px

Verification: verified against the live page at desktop.

Anatomy

navigation-2: the component root, a <nav> (.c-navigation-2)
navigation-2-group: inner flex row (.c-navigation-2__group)
navigation-2-cta: link (.c-navigation-2__cta)
navigation-2-icon: icon placeholder, 91x22px (.c-navigation-2__icon)
navigation-2-list: inner flex row (.c-navigation-2__list)
navigation-2-item: inner flex column (.c-navigation-2__item, 4 instances)
navigation-2-cta-2: link, 15-character label (.c-navigation-2__cta-2, 4 instances)
navigation-2-group-2: inner flex row (.c-navigation-2__group-2)
navigation-2-group-3: inner flex row (.c-navigation-2__group-3)
navigation-2-button: button (.c-navigation-2__button)
navigation-2-group-4: inner flex row (.c-navigation-2__group-4), content not captured
navigation-2-cta-3: link (.c-navigation-2__cta-3)
navigation-2-group-5: inner flex row (.c-navigation-2__group-5), content not captured

Recipe

HTML · CSS

<div class="c-navigation-2-scope">
  <nav class="c-navigation-2">
    <div class="c-navigation-2__group">
      <a class="c-navigation-2__cta" href="#">
        <span class="c-navigation-2__icon" aria-hidden="true"></span>
      </a>
    </div>
    <ul class="c-navigation-2__list">
      <li class="c-navigation-2__item">
        <a class="c-navigation-2__cta-2" href="#">lorem ipsum dol</a>
      </li>
      <li class="c-navigation-2__item">
        <a class="c-navigation-2__cta-2" href="#">lorem ip</a>
      </li>
      <li class="c-navigation-2__item">
        <a class="c-navigation-2__cta-2" href="#">lor</a>
      </li>
      <li class="c-navigation-2__item">
        <a class="c-navigation-2__cta-2" href="#">lorem</a>
      </li>
    </ul>
    <div class="c-navigation-2__group-2">
      <div class="c-navigation-2__group-3">
        <button class="c-navigation-2__button" type="button">
          <div class="c-navigation-2__group-4"></div>
        </button>
        <a class="c-navigation-2__cta-3" href="#">
          <div class="c-navigation-2__group-5"></div>
        </a>
      </div>
    </div>
  </nav>
</div>

.c-navigation-2-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-navigation-2 {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 48px;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 1680px;
  color: #0B051D;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-navigation-2__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 16px;
  box-sizing: border-box;
  position: relative;
}

.c-navigation-2__cta {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  cursor: pointer;
  line-height: 0px;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-navigation-2__icon {
  display: block;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 91px;
  height: 22px;
  aspect-ratio: 4.13636 / 1;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-navigation-2__list {
  display: flex;
  align-items: center;
  flex-grow: 1;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  margin: 0px;
  overflow-x: auto;
  overflow-y: auto;
  list-style-type: none;
}

.c-navigation-2__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  height: 100%;
  padding-right: 4px;
  padding-left: 4px;
}

.c-navigation-2__cta-2 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  box-sizing: border-box;
  padding: 8px 12px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border-radius: 99999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  white-space: nowrap;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-navigation-2__group-2 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 32px;
  box-sizing: border-box;
  position: relative;
  margin-left: auto;
}

.c-navigation-2__group-3 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.c-navigation-2__button {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  padding: 11px 16px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 1px solid #E2E2E7;
  border-radius: 99999px;
  cursor: pointer;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-navigation-2__group-4 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  box-sizing: border-box;
  position: relative;
}

.c-navigation-2__cta-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  padding: 11px 20px;
  position: relative;
  background-color: #0B051D;
  color: #F9F8F5;
  border-radius: 99999px;
  cursor: pointer;
  font-weight: 500;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-navigation-2__group-5 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 10px;
  box-sizing: border-box;
  position: relative;
}

States

No hover or focus change was observed.

Button, primary (3)

Verification: verified against the live page at desktop.

Anatomy

button-primary-3: the component root, a <a> (.c-button-primary-3), 28-character label

Recipe

HTML · CSS

<div class="c-button-primary-3-scope">
  <a class="c-button-primary-3" href="#">lorem ipsum dolor sit amet c</a>
</div>

.c-button-primary-3-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-button-primary-3 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 100%;
  padding: 15px 20px;
  position: relative;
  background-color: #0B051D;
  color: #F9F8F5;
  border: 1px solid transparent;
  border-radius: 99999px;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-button-primary-3:hover {
  background-color: #1F192F;
}

.c-button-primary-3:focus {
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

States

hover (button-primary-3-hover): background-color #1F192F
focus: outline 2px solid #0B051D, outline-offset 2px

Button, secondary (2)

Verification: flagged, the render matched 96% of the original pixels, below the 97% required on focus after 2 correction attempts.

Anatomy

button-secondary-2: the component root, a <a> (.c-button-secondary-2), 15-character label

Recipe

HTML · CSS

<div class="c-button-secondary-2-scope">
  <a class="c-button-secondary-2" href="#">lorem ipsum dol</a>
</div>

.c-button-secondary-2-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-button-secondary-2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 100%;
  padding: 15px 20px;
  position: relative;
  background-color: #FFA8CD;
  color: #0B051D;
  border: 1px solid transparent;
  border-radius: 99999px;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-decoration-line: none;
  text-align: center;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-button-secondary-2:focus {
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

States

focus: outline 2px solid #0B051D, outline-offset 2px

Card (7)

Verification: verified against the live page at desktop.

Anatomy

Group: 4 instances in a 4-column grid, 48px gap; the recipe carries the values they all share
card-7: the component root, a <div> (.c-card-7)
card-7-group: inner flex column (.c-card-7__group)
card-7-group-2: inner flex column (.c-card-7__group-2, 2 instances)
card-7-group-3: inner flex column (.c-card-7__group-3)
card-7-icon: icon placeholder, 50px (.c-card-7__icon)
card-7-group-4: inner flex column (.c-card-7__group-4)
card-7-title: heading, 34 characters (.c-card-7__title)
card-7-group-5: inner flex column (.c-card-7__group-5)
card-7-body: inner group (.c-card-7__body), content not captured

Recipe

HTML · CSS

<div class="c-card-7-scope">
  <div class="c-card-7">
    <div class="c-card-7__group">
      <div class="c-card-7__group-2">
        <span class="c-card-7__group-3">
          <span class="c-card-7__icon" aria-hidden="true"></span>
        </span>
      </div>
    </div>
    <div class="c-card-7__group-4">
      <h3 class="c-card-7__title">lorem ipsum dolor sit amet consect</h3>
      <div class="c-card-7__group-2">
        <div class="c-card-7__group-5">
          <p class="c-card-7__body"></p>
        </div>
      </div>
    </div>
  </div>
</div>

.c-card-7-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-card-7 {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 100%;
  position: relative;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-card-7__group {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  margin-bottom: 24px;
}

.c-card-7__group-2 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
}

.c-card-7__group-3 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
}

.c-card-7__icon {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-card-7__group-4 {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 100%;
  position: relative;
}

.c-card-7__title {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  margin: -12px 0px -4px;
  position: relative;
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.c-card-7__group-5 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  max-width: 1760px;
  position: relative;
  color: #0E0E0F;
  text-align: left;
}

.c-card-7__body {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  margin: 0px;
  position: relative;
  font-family: "Klarna Text", sans-serif;
  line-height: 24px;
  letter-spacing: -0.048px;
}

States

No hover or focus change was observed.

Card (8)

Verification: flagged, the card-8-group-4 y did not reproduce the measured 32px after 2 correction attempts.

Anatomy

Group: 5 instances in a 1-column grid; the recipe carries the values they all share
card-8: the component root, a <div> (.c-card-8)
card-8-group: inner group (.c-card-8__group)
card-8-group-2: inner flex row (.c-card-8__group-2)
card-8-group-3: inner flex column (.c-card-8__group-3), content not captured
card-8-group-4: inner flex column (.c-card-8__group-4)
card-8-group-5: inner flex column (.c-card-8__group-5)
card-8-title: heading, 44 characters (.c-card-8__title)
card-8-group-6: inner flex column (.c-card-8__group-6), content not captured

Recipe

HTML · CSS

<div class="c-card-8-scope">
  <div class="c-card-8">
    <section class="c-card-8__group">
      <div class="c-card-8__group-2">
        <div class="c-card-8__group-3"></div>
      </div>
      <div class="c-card-8__group-4">
        <div class="c-card-8__group-5">
          <h1 class="c-card-8__title">lorem ipsum dolor sit amet consectetur adipi</h1>
          <div class="c-card-8__group-6"></div>
        </div>
      </div>
    </section>
  </div>
</div>

.c-card-8-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-card-8 {
  display: inline-flex;
  flex-direction: column;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-card-8__group {
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-card-8__group-2 {
  display: flex;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
}

.c-card-8__group-3 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-card-8__group-4 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 40px 40px 32px;
  position: relative;
}

.c-card-8__group-5 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  box-sizing: border-box;
  max-width: min(50% - 16px, 600px);
  position: relative;
  color: #F9F8F5;
}

.c-card-8__title {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  margin: 0px 0px 24px;
  position: relative;
  font-family: "Klarna Title", sans-serif;
  font-size: 84px;
  font-weight: 400;
  line-height: 93.24px;
  letter-spacing: 0.32px;
  text-align: left;
}

.c-card-8__group-6 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  max-width: 1760px;
  position: relative;
  color: #0E0E0F;
  text-align: left;
}

.c-card-8:hover {
  flex-shrink: 1;
  gap: 16px;
  max-width: 1760px;
  padding: 32px 40px 0px;
  margin: 0px auto;
  background-color: transparent;
  text-align: start;
}

.c-card-8:focus {
  flex-shrink: 1;
  gap: 16px;
  max-width: 1760px;
  padding: 32px 40px 0px;
  margin: 0px auto;
  background-color: transparent;
  text-align: start;
}

States

hover (card-8-hover): flex-shrink 1, gap 16px, max-width 1760px, padding 32px 40px 0px, margin 0px auto, background-color transparent, text-align start
focus (card-8-focus): flex-shrink 1, gap 16px, max-width 1760px, padding 32px 40px 0px, margin 0px auto, background-color transparent, text-align start

Stat

Verification: flagged, the stat-group height did not reproduce the measured 61px after 2 correction attempts.

Anatomy

Group: 3 instances in a 4-column grid, 48px gap; the recipe carries the values they all share
stat: the component root, a <div> (.c-stat)
stat-group: inner block (.c-stat__group)
stat-group-2: inner flex column (.c-stat__group-2)
stat-group-3: inner group (.c-stat__group-3)
stat-group-4: inner group (.c-stat__group-4), content not captured
stat-group-5: inner flex row (.c-stat__group-5)
stat-media: image placeholder, 17px (.c-stat__media)
stat-text: label text, 20 characters (.c-stat__text)

Recipe

HTML · CSS

<div class="c-stat-scope">
  <div class="c-stat">
    <div class="c-stat__group">
      <div class="c-stat__group-2">
        <span class="c-stat__group-3">
          <span class="c-stat__group-4"></span>
        </span>
        <div class="c-stat__group-5">
          <span class="c-stat__media" aria-hidden="true"></span>
          <span class="c-stat__text">lorem ipsum dolor si</span>
        </div>
      </div>
    </div>
  </div>
</div>

.c-stat-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-stat {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-stat__group {
  display: block;
  box-sizing: border-box;
}

.c-stat__group-2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
}

.c-stat__group-3 {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  font-family: "Klarna Title", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 43.2px;
  font-weight: 700;
  line-height: 41.04px;
}

.c-stat__group-4 {
  display: inline;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
}

.c-stat__group-5 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  box-sizing: border-box;
  position: relative;
}

.c-stat__media {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 17px;
  height: 17px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
}

.c-stat__text {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  color: #282636;
  font-size: 14px;
  text-align: center;
}

.c-stat:hover {
  transform-origin: 78.6406px 30.5234px;
}

.c-stat:focus {
  transform-origin: 78.6406px 30.5234px;
}

States

hover: transform-origin 78.6406px 30.5234px
focus: transform-origin 78.6406px 30.5234px

Language selector

Verification: verified against the live page at desktop.

Anatomy

language-selector: the component root, a <button> (.c-language-selector)
language-selector-group: inner flex row (.c-language-selector__group)
language-selector-icon: icon placeholder, 16px (.c-language-selector__icon)
language-selector-text: label text, 2 characters (.c-language-selector__text)

Recipe

HTML · CSS

<div class="c-language-selector-scope">
  <button class="c-language-selector" type="button">
    <div class="c-language-selector__group">
      <span class="c-language-selector__icon" aria-hidden="true"></span>
      <div class="c-language-selector__text">lo</div>
    </div>
  </button>
</div>

.c-language-selector-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-language-selector {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 11px 16px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 1px solid #E2E2E7;
  border-radius: 99999px;
  cursor: pointer;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-language-selector__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  box-sizing: border-box;
  position: relative;
}

.c-language-selector__icon {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
  border-radius: 99999px;
}

.c-language-selector__text {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
}

.c-language-selector:hover {
  background-color: #0000000A;
}

.c-language-selector:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

States

hover (language-selector-hover): background-color #0000000A
focus: box-shadow #7B57D8 0px 0px 0px 3px, outline 2px solid #0B051D, outline-offset 2px

Accordion item

Verification: verified against the live page at desktop.

Anatomy

accordion-item: the component root, a <button> (.c-accordion-item)
accordion-item-group: inner block (.c-accordion-item__group)
accordion-item-text: label text, 21 characters (.c-accordion-item__text)

Recipe

HTML · CSS

<div class="c-accordion-item-scope">
  <button class="c-accordion-item" type="button">
    <div class="c-accordion-item__group">
      <span class="c-accordion-item__text">lorem ipsum dolor sit</span>
    </div>
  </button>
</div>

.c-accordion-item-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-accordion-item {
  display: inline-flex;
  flex-direction: column;
  align-self: flex-start;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 0;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  list-style-type: none;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-accordion-item__group {
  display: block;
  box-sizing: border-box;
  opacity: 0.823973;
  transform: matrix(1, 0, 0, 1, 0, 3.17137);
}

.c-accordion-item__text {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  font-family: "Klarna Title", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 52px;
  font-weight: 700;
  line-height: 52px;
  padding-top: 40px;
  padding-bottom: 40px;
  margin-top: -40px;
  margin-bottom: -28px;
}

.c-accordion-item:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

States

focus: box-shadow #7B57D8 0px 0px 0px 3px, outline 2px solid #0B051D, outline-offset 2px

Accordion item (2)

Verification: verified against the live page at desktop.

Anatomy

accordion-item-2: the component root, a <button> (.c-accordion-item-2)
accordion-item-2-group: inner block (.c-accordion-item-2__group)
accordion-item-2-group-2: inner block (.c-accordion-item-2__group-2)
accordion-item-2-text: label text, 18 characters (.c-accordion-item-2__text)

Recipe

HTML · CSS

<div class="c-accordion-item-2-scope">
  <button class="c-accordion-item-2" type="button">
    <div class="c-accordion-item-2__group">
      <div class="c-accordion-item-2__group-2">
        <span class="c-accordion-item-2__text">lorem ipsum dolor</span>
      </div>
    </div>
  </button>
</div>

.c-accordion-item-2-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-accordion-item-2 {
  display: inline-flex;
  flex-direction: column;
  align-self: flex-start;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 0;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  list-style-type: none;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-accordion-item-2__group {
  display: block;
  box-sizing: border-box;
  opacity: 0.996957;
  transform: matrix(1, 0, 0, 1, 0, 0.0606895);
}

.c-accordion-item-2__group-2 {
  display: block;
  box-sizing: border-box;
  color: #96959F;
}

.c-accordion-item-2__text {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  font-family: "Klarna Title", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 52px;
  font-weight: 700;
  line-height: 52px;
  padding-top: 40px;
  padding-bottom: 40px;
  margin-top: -40px;
  margin-bottom: -28px;
}

.c-accordion-item-2:hover {
  opacity: 0.84;
}

.c-accordion-item-2:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

States

hover: opacity 0.84
focus: box-shadow #7B57D8 0px 0px 0px 3px, outline 2px solid #0B051D, outline-offset 2px

Accordion item (3)

Verification: verified against the live page at desktop.

Anatomy

accordion-item-3: the component root, a <button> (.c-accordion-item-3)
accordion-item-3-group: inner block (.c-accordion-item-3__group)
accordion-item-3-group-2: inner block (.c-accordion-item-3__group-2)
accordion-item-3-text: label text, 18 characters (.c-accordion-item-3__text)

Recipe

HTML · CSS

<div class="c-accordion-item-3-scope">
  <button class="c-accordion-item-3" type="button">
    <div class="c-accordion-item-3__group">
      <div class="c-accordion-item-3__group-2">
        <span class="c-accordion-item-3__text">lorem ipsum dolor</span>
      </div>
    </div>
  </button>
</div>

.c-accordion-item-3-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-accordion-item-3 {
  display: inline-flex;
  flex-direction: column;
  align-self: flex-start;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 0;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  list-style-type: none;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-accordion-item-3__group {
  display: block;
  box-sizing: border-box;
}

.c-accordion-item-3__group-2 {
  display: block;
  box-sizing: border-box;
  color: #96959F;
}

.c-accordion-item-3__text {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  font-family: "Klarna Title", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 52px;
  font-weight: 700;
  line-height: 52px;
  padding-top: 40px;
  padding-bottom: 40px;
  margin-top: -40px;
  margin-bottom: -28px;
}

.c-accordion-item-3:hover {
  opacity: 0.84;
}

.c-accordion-item-3:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

States

hover: opacity 0.84
focus: box-shadow #7B57D8 0px 0px 0px 3px, outline 2px solid #0B051D, outline-offset 2px

Carousel pagination

Verification: flagged, the render matched 78% of the original pixels, below the 96% required after 2 correction attempts.

Anatomy

carousel-pagination: the component root, a <button> (.c-carousel-pagination)
carousel-pagination-group: inner flex column (.c-carousel-pagination__group)
carousel-pagination-group-2: inner flex column (.c-carousel-pagination__group-2)

Recipe

HTML · CSS

<div class="c-carousel-pagination-scope">
  <button class="c-carousel-pagination" type="button">
    <div class="c-carousel-pagination__group">
      <div class="c-carousel-pagination__group-2"></div>
    </div>
  </button>
</div>

.c-carousel-pagination-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-carousel-pagination {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 4px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 0;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.3s;
  transition-timing-function: ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, padding;
}

.c-carousel-pagination__group {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 6px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #96959F;
  border-radius: 99999px;
  transition-duration: 0.3s, 0.3s, 0.3s;
  transition-timing-function: ease, ease, ease;
  transition-property: background-color, width, height;
}

.c-carousel-pagination__group-2 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  background-color: #0B051D;
  transform: matrix(1, 0, 0, 1, -16.88, 0);
  transition-duration: 0.3s, 0.3s, 0.3s;
  transition-timing-function: ease, ease, ease;
  transition-property: background-color, width, height;
}

.c-carousel-pagination:hover {
  opacity: 0.84;
}

.c-carousel-pagination:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

States

hover: opacity 0.84
focus: box-shadow #7B57D8 0px 0px 0px 3px, outline 2px solid #0B051D, outline-offset 2px

Carousel pagination (2)

Verification: flagged, the render matched 83% of the original pixels, below the 96% required after 2 correction attempts.

Anatomy

carousel-pagination-2: the component root, a <button> (.c-carousel-pagination-2)
carousel-pagination-2-group: inner flex column (.c-carousel-pagination-2__group)
carousel-pagination-2-group-2: inner flex column (.c-carousel-pagination-2__group-2)

Recipe

HTML · CSS

<div class="c-carousel-pagination-2-scope">
  <button class="c-carousel-pagination-2" type="button">
    <div class="c-carousel-pagination-2__group">
      <div class="c-carousel-pagination-2__group-2"></div>
    </div>
  </button>
</div>

.c-carousel-pagination-2-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-carousel-pagination-2 {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 4px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 0;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.3s;
  transition-timing-function: ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, padding;
}

.c-carousel-pagination-2__group {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 6px;
  height: 6px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #96959F;
  border-radius: 99999px;
  transition-duration: 0.3s, 0.3s, 0.3s;
  transition-timing-function: ease, ease, ease;
  transition-property: background-color, width, height;
}

.c-carousel-pagination-2__group-2 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  background-color: #96959F;
  transition-duration: 0.3s, 0.3s, 0.3s;
  transition-timing-function: ease, ease, ease;
  transition-property: background-color, width, height;
}

.c-carousel-pagination-2:hover {
  opacity: 0.84;
}

.c-carousel-pagination-2:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

States

hover: opacity 0.84
focus: box-shadow #7B57D8 0px 0px 0px 3px, outline 2px solid #0B051D, outline-offset 2px

Do's and Don'ts

Do

Use only the observed weights 400, 500 and 700; 500 belongs to button and nav-link, 700 to display and title-lg.
Make every button a full pill (rounded.full): the site does this on button-secondary, button-ghost, button-primary-2, button-ghost-3, button-ghost-4 and button-primary-3.
Keep control heights on the two observed tiers: 44px for button-secondary, button-ghost, button-ghost-3, button-ghost-4; 52px for the CTA pills button-primary-2 and button-primary-3.
Use the ink pill (button-primary-3, primary fill, #F9F8F5 label) as the primary CTA on light surfaces, and the white pill (button-primary-2, on-primary fill, ink-strong label) as the primary CTA on dark or photographic surfaces; the white fill appears on no other measured component.
Separate sections with the 80px section-padding-y rhythm and place feature cards on 48px gutters (card-5-grid-gap, card-7-grid-gap) or 40px for text cards (card-6-grid-gap).
Lift review cards with the single soft shadow #0000001A 0px 2px 4px 0px and keep the frosted blur(10px) on glass chips over photos (card-2-group-4).
Draw focus with a 2px focus-ring outline at 2px offset plus the #7B57D8 3px halo, as every interactive recipe does.
Pair brand-pink fills with primary ink text.

Don't

Don't set white text on brand-pink; the pink surfaces always carry #0B051D labels (button-secondary-2, header-landing-mobile-menu-toggle).
Don't use Klarna Title below display-xs (43.2px); switch to Klarna Text at title-lg and smaller.
Don't add tracking to bold display sizes; 0.32px belongs only to the 400-weight display-lg and display-xl-light.
Don't introduce heavier drop shadows, colored shadows or stacked elevation levels; the system has one shadow tier.
Don't replace the glass chip's blur(10px) with an opaque fill or use blur on plain white surfaces.
Don't give buttons or nav links square or rounded.sm corners; reserve 16 to 48px radii for containers.
Don't promote accent-purple or accent-purple-deep to fills or CTAs; they are rare text accents.
Don't separate sections with rules; use whitespace and color blocks (surface-lavender, brand-pink).

Responsive Behavior

This is a two-viewport analysis (one desktop, one mobile capture); no intermediate breakpoints were observed, so none are stated.

What changes between viewports

Header: stays 72px tall on both (header-landing, header-landing-mobile), with the inner row capped at 1680px and a 48px group gap (header-landing-mobile-gap). On desktop it shows the logo, four nav-link text links, a language pill and the ink login pill (header-landing-nav-link-3, 109px wide in navigation). On mobile the links collapse behind a pink pill menu toggle (header-landing-mobile-menu-toggle, brand-pink, 40px by 52px) to the left of the logo, and the ink pill shrinks to a 42px by 44px icon circle (header-landing-mobile-nav-link-2).
Content: multi-up card rows and text-left/image-right hero overlays collapse to a single centered column; hero images stack as rounded blocks with the headline centered.
Banners: a full-width dismissible surface-lavender warning banner sits above the mobile header.

Touch targets

Interactive pills keep their desktop heights on mobile: 44px for ghost and secondary pills (header-landing-mobile-menu-toggle-2), 52px for CTA pills (button-primary-3). The mobile menu toggle at 40px is the one control below 44px; when building new mobile controls, use the 44px tier.

Iteration Guide

Reference tokens, never raw hex: text is primary, canvases are surface, accents are brand-pink, borders are hairline or border-strong. State colors (#F5A1C5, #2C2242, #0000000A, #7B57D8) live on the component recipes; take them from the recipe key (button-primary, header-landing-nav-link-3, button-secondary) rather than adding new palette tokens.
Keep the two-family split absolute: Klarna Title for hero-display through display-xs, Klarna Text for title-lg and below. New headings pick an existing token; do not interpolate sizes between 20px, 32px and 43.2px.
Buttons come in three verified sizes only: CTA pill 52px with button-primary-3-padding-y/-x, labelled small pill 44px with button-secondary-padding-y/-x, icon circle 44px with button-ghost-padding-y/-x. All use rounded.full.
Choose the CTA by surface: button-primary-3 (ink) on light, button-primary-2 (white) on dark or photography, the pink pill on neutral sections. Never put two filled CTA colors side by side.
Elevation has exactly three moves: the #0000001A 0px 2px 4px 0px shadow for review cards, blur(10px) glass over imagery, and the #7B57D8 focus halo. Anything else is flat with a tint or hairline border.
Spacing new sections: section-padding-y (80px) vertically; grid gutters from card-5-grid-gap/card-7-grid-gap (48px) or card-6-grid-gap (40px); container capped at header-landing-inner-max-width (1680px).
Treat flagged recipes (button-primary, card, card-2, hero, testimonial, testimonial-2, testimonial-3, navigation, pagination variants) as approximate; verify against verified siblings (button-primary-3, card-5, card-6, header-landing) before copying their geometry.

Known Gaps

Responsive breakpoints: only one desktop and one mobile viewport were captured; the widths where grids collapse and the header swaps to the menu toggle are unknown.
Flagged recipes: button-primary (flagged: the recipe could not be rendered on its own), button-ghost-2 and button-ghost-5 (flagged: the render matched 88% of the original pixels, below the 97% required on focus), button-secondary-2 (flagged: the render matched 96% of the original pixels, below the 97% required on focus), card and stat (flagged: the group height did not reproduce the measured 61px), card-2 (flagged: the render came out 175 px taller and 140 px wider than the original), card-8 (flagged: the card-8-group-4 y did not reproduce the measured 32px), hero (flagged: the hero-title y did not reproduce the measured 154px), navigation (flagged: the navigation-group-2 width did not reproduce the measured 273px), the three testimonial variants (flagged: height/size did not reproduce), and the pagination/carousel-pagination variants (flagged: pixel match between 37% and 83%).
Unverifiable: card-3 and card-4 (not verifiable: photos and media cover most of the card, so the comparison could not be judged).
Animation and scroll effects: the page reveals content on scroll and uses sticky storytelling sections with a vertical dot navigator; timing, easing and reveal behavior were not captured.
Interaction depth: hover and focus fills were measured on recipes, but pressed/active, disabled and loading states were not. Menu overlays, search, and the language picker's open state were not reached.
Forms: no input, select or checkbox recipe was extracted; field styling is undocumented.
Footer: no footer recipe or landmark measurement was captured.
Authenticated surfaces: the logged-in app and checkout flows are outside this capture of five public pages.
Fonts: Klarna Title and Klarna Text are proprietary; substitutes are recommendations, not measured matches.

Extracted from Klarna’s public website, not official brand guidelines.

More like this

Browse all

Finance & Fintech

Stripe

Stripe's marketing homepage uses a tightly controlled design system (HDS — Stripe Design System) built around the variable font "sohne-var" at light weights (300–400), a deep navy-to-indigo brand palette anchored by #533afd (Stripe Indigo), and a signature full-bleed spectral gradient hero. Components are low-radius (4–6px), flat-to-minimal-shadow, and structured around an 8px base spacing grid. The overall tone is authoritative yet approachable — financial infrastructure communicated through confident typography and restrained color use.

Finance & Fintech

PayPal

PayPal's Dutch homepage uses a bold, consumer-facing design anchored by a vivid sky-blue (#60cdff) hero section with ultra-heavy black display typography (PayPal Pro w900). The navigation is white with black text and two distinct CTA buttons — an outlined "Inloggen" and a filled black "Rekening openen". A dark navy announcement banner sits at the top. The overall language is high-contrast, pill-radius-heavy, and brand-typeface-driven, projecting trust and accessibility for a broad consumer finance audience.

Travel, Transport & Logistics

Uber

Uber's design language combines clean minimalism with vibrant illustrations to create an approachable yet professional transportation platform. The stark black-and-white foundation provides clarity and readability, while colorful hero illustrations add warmth and human connection. Typography relies on the custom UberMove family for brand consistency, with generous spacing creating breathing room throughout the interface.

Travel, Transport & Logistics

Airbnb

Airbnb's design system is built around a single proprietary variable font (Airbnb Cereal VF), a near-monochrome neutral palette anchored by deep charcoal (#222222) and light grays, with the brand's signature "Rausch" coral-pink (#ff385c) reserved exclusively for primary CTAs and the logo. The layout is a responsive photo-card grid with generous image-to-text ratios, soft 20px rounded corners on cards, and a multi-layer ambient shadow system that creates subtle depth without harsh contrast. The search bar is a prominent pill-shaped container that unifies the core user action.

Commerce & Retail · E-commerce Store

IKEA

IKEA's global homepage uses a bold, flat design system anchored by the iconic IKEA Yellow (#ffdb00) as the primary action surface and IKEA Blue (#0058a3) as the brand logo accent. The entire typographic system is built on a single custom typeface — Noto IKEA — spanning weights 400 and 700 across a tightly defined scale from 14px body text to 51px display headings. Elevation is conveyed entirely through color contrast and layout structure rather than shadows. The layout uses a max-width container of 90rem with a 1.5rem desktop grid gap, and a consistent 8px border-radius token applied to interactive elements. The off-white background (#fffefb) provides warmth against the stark #111111 text, creating a high-contrast, accessible reading experience.

Software & SaaS · Productivity & Notes

Notion

Notion's marketing homepage pairs a deep navy (#02093a) hero section with a light (#f6f5f4) body, using a custom typeface (NotionInter) across all text roles. The design employs a 12-column grid with 28px gutters, a dual-radius language (8px for cards, 9999px for pills), and a multi-layer progressive shadow system for floating UI elements. Brand blue (#2537b1) drives CTAs and accent highlights, while a semantic gray-scale ladder (gray-200 through gray-900) structures all text and surface hierarchy.

Klarna Design System

Button10

Card8

Extra22

Header4

Overview

Colors

Brand & Accent

Surface

Text

Hairlines & Borders

Component & State Colors

Typography

Font Family

Hierarchy

Principles

Note on Font Substitutes

Layout

Spacing System

Grid & Container

Whitespace Philosophy

Measured Layout

Elevation & Depth

Shapes

Border Radius Scale

Components

Button, primary

Button, secondary

Button, ghost

Button, ghost (2)

Card

Card (2)

Accordion

Accordion (2)

Accordion (3)

Navigation

Pagination

Pagination (2)

Header (landing)

Button, primary (2)

Button, ghost (3)

Card (3)

Tab

Tab (2)

Nav

Header (inner)

Button, ghost (4)

Button, ghost (5)

Card (4)

Card (5)

Card (6)

Hero

Testimonial

Testimonial (2)

Testimonial (3)

Navigation (2)

Button, primary (3)

Button, secondary (2)

Card (7)

Card (8)

Stat

Language selector

Accordion item

Accordion item (2)

Accordion item (3)

Carousel pagination

Carousel pagination (2)

Do's and Don'ts

Do

Don't

Responsive Behavior

What changes between viewports

Touch targets

Iteration Guide

Known Gaps

More like this

Stripe

PayPal

Uber

Airbnb