W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Klarna
Klarna Bank AB is the Stockholm-headquartered buy-now-pay-later fintech that pioneered the consumer-installments category in Europe and now operates globally. The brand is built on a deliberately un-fintech identity: Klarna Pink (#FFA8CD) on white, with a warm near-black wordmark and a voice that reads more like a lifestyle brand than a payments processor. The "smoooth" tag line and the editorial-leaning visual system (oversized type, cropped photography, generous pink fields) frame Klarna as consumer-first rather than merchant-infrastructure.
1 palette 3 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/klarna/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/klarna/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Klarna
Klarna Bank AB is the Stockholm-headquartered buy-now-pay-later fintech that pioneered the consumer-installments category in Europe and now operates globally. The brand is built on a deliberately un-fintech identity: Klarna Pink (#FFA8CD) on white, with a warm near-black wordmark and a voice that reads more like a lifestyle brand than a payments processor. The "smoooth" tag line and the editorial-leaning visual system (oversized type, cropped photography, generous pink fields) frame Klarna as consumer-first rather than merchant-infrastructure.
Tags: fintech, payments, bnpl, klarna, pink, lifestyle, light-first
Atoms
Palette
Klarna · [email protected] · Proprietary — All Rights Reserved
Klarna corporate brand palette. Klarna's brand is built on an unmistakable signature: Klarna Pink (#FFA8CD), a warm pastel pink that reads as both consumer-friendly and irreverent, paired with Klarna Black on stark white. The 2018 brand refresh by Doberman and Stockholm Design Lab anchored the identity on this single pink — a deliberate departure from fintech blue conventions, designed to read like a lifestyle brand rather than a payments processor.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
klarna-pink |
Klarna Pink | #FFA8CD |
klarna-pink-deep |
Klarna Pink Deep | #E6739D |
klarna-black |
Klarna Black | #17120F |
klarna-white |
Klarna White | #FFFFFF |
klarna-cream |
Klarna Cream | #F5EBE0 |
klarna-graphite |
Klarna Graphite | #3C3733 |
klarna-gray |
Klarna Gray | #7A716A |
klarna-divider |
Klarna Divider | #E5DDD4 |
klarna-canvas-dark |
Klarna Canvas Dark | #1A1410 |
klarna-surface-dark |
Klarna Surface Dark | #2A211C |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
klarna-white |
#FFFFFF |
surface |
klarna-cream |
#F5EBE0 |
surface-elevated |
klarna-white |
#FFFFFF |
text-primary |
klarna-black |
#17120F |
text-secondary |
klarna-graphite |
#3C3733 |
text-tertiary |
klarna-gray |
#7A716A |
primary |
klarna-pink |
#FFA8CD |
primary-hover |
klarna-pink-deep |
#E6739D |
accent |
klarna-pink |
#FFA8CD |
accent-hover |
klarna-pink-deep |
#E6739D |
warning |
klarna-pink-deep |
#E6739D |
warning-hover |
klarna-pink |
#FFA8CD |
error |
klarna-black |
#17120F |
success |
klarna-pink |
#FFA8CD |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
klarna-canvas-dark |
#1A1410 |
surface |
klarna-surface-dark |
#2A211C |
surface-elevated |
klarna-surface-dark |
#2A211C |
text-primary |
klarna-white |
#FFFFFF |
text-secondary |
klarna-cream |
#F5EBE0 |
text-tertiary |
klarna-gray |
#7A716A |
primary |
klarna-pink |
#FFA8CD |
primary-hover |
klarna-pink-deep |
#E6739D |
accent |
klarna-pink |
#FFA8CD |
accent-hover |
klarna-pink-deep |
#E6739D |
warning |
klarna-pink-deep |
#E6739D |
warning-hover |
klarna-pink |
#FFA8CD |
error |
klarna-white |
#FFFFFF |
success |
klarna-pink |
#FFA8CD |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
klarna-pink |
#FFA8CD |
on-identity |
klarna-black |
#17120F |
primary |
klarna-pink |
#FFA8CD |
primary-hover |
klarna-pink-deep |
#E6739D |
accent |
klarna-pink |
#FFA8CD |
accent-hover |
klarna-pink-deep |
#E6739D |
mark |
klarna-black |
#17120F |
text-primary-light |
klarna-black |
#17120F |
text-primary-dark |
klarna-white |
#FFFFFF |
text-secondary-light |
klarna-graphite |
#3C3733 |
background-light |
klarna-white |
#FFFFFF |
background-dark |
klarna-canvas-dark |
#1A1410 |
surface-light |
klarna-cream |
#F5EBE0 |
surface-dark |
klarna-surface-dark |
#2A211C |
divider |
klarna-divider |
#E5DDD4 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (6)
colorChoice → logo.wordmark.fill
- allowed: klarna-black, klarna-white, klarna-pink
- forbidden: klarna-pink-deep, klarna-graphite, klarna-cream, klarna-gray
The Klarna wordmark renders in Klarna Black on pink or white surfaces, reversed white on dark surfaces, or as a pink mark on cream/white in expressive marketing. The deep-pink and gray tones are interactive-state or text values, not wordmark fills.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, inverted-without-variant
Klarna's brand-press program forbids modifying the wordmark. Apply only Klarna-approved variants with respected clearspace; gradient fills and drop-shadows conflict with the flat, deliberate visual system the 2018 refresh established.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Klarna Black (#17120F) on Klarna White gives ~19:1 — well above WCAG 2.1 Level AA. This rule guards the floor for any new foreground/background pairing on Klarna surfaces.
contrastRatio → roles.colors.primary
- against:
roles.colors.text-primary-light - minRatio:
4.5 - standard:
WCAG-AA
Klarna Black on Klarna Pink (#17120F on #FFA8CD) gives ~9:1 — well above AA. Klarna's signature treatment is black type on pink fields, and this contrast must remain comfortably above AA for body usage.
contextRestriction → roles.colors.identity
- forbiddenContexts: error-state, validation-failure, destructive-action
Klarna Pink is the brand-identity color and the signature brand surface. Using it for error states or destructive actions conflicts with its established positive-brand meaning and would dilute the most defining brand element.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Fintech surfaces handling consumer credit have elevated trust requirements; AA is the floor on any new role pairing.
⚠️ warning (2)
enumMembership → typography.heading.fontWeight
- allowed: 400, 500, 700
Klarna's editorial-leaning marketing uses Klarna Sans Regular (400), Medium (500), and Bold (700). The brand favors oversized type at lighter cuts over heavy display weights — a quieter, lifestyle-brand voice rather than a shouty one.
fontPairing → typography.heading
- requires:
body - minSizeRatio:
1.8
Klarna's editorial marketing surfaces use oversized display type — often 3-4× body size. A 1.8× minimum size ratio preserves the editorial display-to-prose hierarchy the brand voice depends on.
💡 recommendation (1)
compositionConstraint → roles.colors.identity
- pairsWith: klarna-black, klarna-white, klarna-cream
- doesNotPairWith: klarna-pink-deep
Klarna Pink pairs cleanly with Klarna Black, white, and cream. The deeper pink (#E6739D) is a hover state, not a co-equal brand color — pairing the two pinks on the same surface creates a muddy two-pink composition.
Provenance
- Source: https://www.klarna.com/us/press/brand/
- License:
Proprietary — All Rights Reserved - Attribution: Klarna Bank AB (publ) — Klarna, the Klarna wordmark, and the Klarna "smoooth" mark are registered trademarks of Klarna Bank AB. The signature Klarna Pink (#FFA8CD) is documented across Klarna's brand-press kit and verified against the deployed klarna.com brand surfaces. Klarna Mono and Klarna Sans are proprietary corporate typefaces; Inter is referenced here as the open-source fallback.
- Imported:
2026-05-18 - Notes: Klarna's proprietary typefaces (Klarna Sans, Klarna Mono, Klarna Display) were commissioned for the brand and are not publicly distributed. This atom references Inter for both heading and body roles and notes Klarna Sans as the proprietary primary in provenance. The pink is the brand's most-policed element — it is the brand, not merely a brand accent.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Klarna
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Klarna
A clear hierarchy in Klarna's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ klarna-pink #FFA8CD accent-hover
→ klarna-pink-deep #E6739D background-dark
→ klarna-canvas-dark #1A1410 background-light
→ klarna-white #FFFFFF divider
→ klarna-divider #E5DDD4 identity
→ klarna-pink #FFA8CD mark
→ klarna-black #17120F on-identity
→ klarna-black #17120F primary
→ klarna-pink #FFA8CD primary-hover
→ klarna-pink-deep #E6739D surface-dark
→ klarna-surface-dark #2A211C surface-light
→ klarna-cream #F5EBE0 text-primary-dark
→ klarna-white #FFFFFF text-primary-light
→ klarna-black #17120F text-secondary-light
→ klarna-graphite #3C3733 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from klarna)
Light mode (14 roles)
accent
→ klarna-pink accent-hover
→ klarna-pink-deep background
→ klarna-white error
→ klarna-black primary
→ klarna-pink primary-hover
→ klarna-pink-deep success
→ klarna-pink surface
→ klarna-cream surface-elevated
→ klarna-white text-primary
→ klarna-black text-secondary
→ klarna-graphite text-tertiary
→ klarna-gray warning
→ klarna-pink-deep warning-hover
→ klarna-pink Dark mode (14 roles)
accent
→ klarna-pink accent-hover
→ klarna-pink-deep background
→ klarna-canvas-dark error
→ klarna-white primary
→ klarna-pink primary-hover
→ klarna-pink-deep success
→ klarna-pink surface
→ klarna-surface-dark surface-elevated
→ klarna-surface-dark text-primary
→ klarna-white text-secondary
→ klarna-cream text-tertiary
→ klarna-gray warning
→ klarna-pink-deep warning-hover
→ klarna-pink Rules (9 typed constraints)
error · 6 rules
colorChoice logo.wordmark.fill allowed klarna-black, klarna-white, klarna-pink forbidden klarna-pink-deep, klarna-graphite, klarna-cream, klarna-gray The Klarna wordmark renders in Klarna Black on pink or white surfaces, reversed white on dark surfaces, or as a pink mark on cream/white in expressive marketing. The deep-pink and gray tones are interactive-state or text values, not wordmark fills.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, inverted-without-variant Klarna's brand-press program forbids modifying the wordmark. Apply only Klarna-approved variants with respected clearspace; gradient fills and drop-shadows conflict with the flat, deliberate visual system the 2018 refresh established.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA Klarna Black (#17120F) on Klarna White gives ~19:1 — well above WCAG 2.1 Level AA. This rule guards the floor for any new foreground/background pairing on Klarna surfaces.
contrastRatio roles.colors.primary against roles.colors.text-primary-light minRatio 4.5 standard WCAG-AA Klarna Black on Klarna Pink (#17120F on #FFA8CD) gives ~9:1 — well above AA. Klarna's signature treatment is black type on pink fields, and this contrast must remain comfortably above AA for body usage.
contextRestriction roles.colors.identity forbiddenContexts error-state, validation-failure, destructive-action Klarna Pink is the brand-identity color and the signature brand surface. Using it for error states or destructive actions conflicts with its established positive-brand meaning and would dilute the most defining brand element.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Fintech surfaces handling consumer credit have elevated trust requirements; AA is the floor on any new role pairing.
warning · 2 rules
enumMembership typography.heading.fontWeight allowed 400, 500, 700 Klarna's editorial-leaning marketing uses Klarna Sans Regular (400), Medium (500), and Bold (700). The brand favors oversized type at lighter cuts over heavy display weights — a quieter, lifestyle-brand voice rather than a shouty one.
fontPairing typography.heading requires body minSizeRatio 1.8 Klarna's editorial marketing surfaces use oversized display type — often 3-4× body size. A 1.8× minimum size ratio preserves the editorial display-to-prose hierarchy the brand voice depends on.
recommendation · 1 rule
compositionConstraint roles.colors.identity pairsWith klarna-black, klarna-white, klarna-cream doesNotPairWith klarna-pink-deep Klarna Pink pairs cleanly with Klarna Black, white, and cream. The deeper pink (#E6739D) is a hover state, not a co-equal brand color — pairing the two pinks on the same surface creates a muddy two-pink composition.
Provenance
- Source
- https://www.klarna.com/us/press/brand/
- License
Proprietary — All Rights Reserved- Attribution
- Klarna Bank AB (publ) — Klarna, the Klarna wordmark, and the Klarna "smoooth" mark are registered trademarks of Klarna Bank AB. The signature Klarna Pink (#FFA8CD) is documented across Klarna's brand-press kit and verified against the deployed klarna.com brand surfaces. Klarna Mono and Klarna Sans are proprietary corporate typefaces; Inter is referenced here as the open-source fallback.
- Imported
2026-05-18- Notes
- Klarna's proprietary typefaces (Klarna Sans, Klarna Mono, Klarna Display) were commissioned for the brand and are not publicly distributed. This atom references Inter for both heading and body roles and notes Klarna Sans as the proprietary primary in provenance. The pink is the brand's most-policed element — it is the brand, not merely a brand accent.