{
  "id": "klarna",
  "version": "1.0.0",
  "name": "Klarna",
  "description": "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.\n",
  "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.\n",
    "importedDate": "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.\n"
  },
  "tags": [
    "fintech",
    "payments",
    "bnpl",
    "klarna",
    "pink",
    "lifestyle",
    "light-first"
  ],
  "palette": {
    "ref": "klarna@1.0.0",
    "swatches": [
      {
        "id": "klarna-pink",
        "name": "Klarna Pink",
        "value": "#FFA8CD",
        "description": "Signature pastel pink — the defining brand color, used as background fields and primary brand surface.",
        "aliases": []
      },
      {
        "id": "klarna-pink-deep",
        "name": "Klarna Pink Deep",
        "value": "#E6739D",
        "description": "Authored deeper pink for hover/pressed states on the primary pink action.",
        "aliases": []
      },
      {
        "id": "klarna-black",
        "name": "Klarna Black",
        "value": "#17120F",
        "description": "Klarna Black — warm near-black used for the wordmark, body text, and high-contrast type on pink fields.",
        "aliases": []
      },
      {
        "id": "klarna-white",
        "name": "Klarna White",
        "value": "#FFFFFF",
        "description": "Canonical light canvas paired with the pink fields.",
        "aliases": []
      },
      {
        "id": "klarna-cream",
        "name": "Klarna Cream",
        "value": "#F5EBE0",
        "description": "Warm off-white used as a secondary surface — softer than pure white, often paired with pink on marketing.",
        "aliases": []
      },
      {
        "id": "klarna-graphite",
        "name": "Klarna Graphite",
        "value": "#3C3733",
        "description": "Secondary text on light surfaces; a warm graphite that holds the same warmth as Klarna Black.",
        "aliases": []
      },
      {
        "id": "klarna-gray",
        "name": "Klarna Gray",
        "value": "#7A716A",
        "description": "Tertiary text and metadata.",
        "aliases": []
      },
      {
        "id": "klarna-divider",
        "name": "Klarna Divider",
        "value": "#E5DDD4",
        "description": "Authored hairline divider tone that respects the warm palette.",
        "aliases": []
      },
      {
        "id": "klarna-canvas-dark",
        "name": "Klarna Canvas Dark",
        "value": "#1A1410",
        "description": "Authored dark-mode canvas — Klarna is light-first; this is an authored inversion.",
        "aliases": []
      },
      {
        "id": "klarna-surface-dark",
        "name": "Klarna Surface Dark",
        "value": "#2A211C",
        "description": "Authored elevated surface on dark mode.",
        "aliases": []
      }
    ],
    "modes": {
      "light": {
        "roles": {
          "background": "klarna-white",
          "surface": "klarna-cream",
          "surface-elevated": "klarna-white",
          "text-primary": "klarna-black",
          "text-secondary": "klarna-graphite",
          "text-tertiary": "klarna-gray",
          "primary": "klarna-pink",
          "primary-hover": "klarna-pink-deep",
          "accent": "klarna-pink",
          "accent-hover": "klarna-pink-deep",
          "warning": "klarna-pink-deep",
          "warning-hover": "klarna-pink",
          "error": "klarna-black",
          "success": "klarna-pink"
        }
      },
      "dark": {
        "roles": {
          "background": "klarna-canvas-dark",
          "surface": "klarna-surface-dark",
          "surface-elevated": "klarna-surface-dark",
          "text-primary": "klarna-white",
          "text-secondary": "klarna-cream",
          "text-tertiary": "klarna-gray",
          "primary": "klarna-pink",
          "primary-hover": "klarna-pink-deep",
          "accent": "klarna-pink",
          "accent-hover": "klarna-pink-deep",
          "warning": "klarna-pink-deep",
          "warning-hover": "klarna-pink",
          "error": "klarna-white",
          "success": "klarna-pink"
        }
      }
    }
  },
  "fonts": [
    {
      "role": "heading",
      "ref": "inter@1.0.0",
      "family": "Inter",
      "classification": "sans-serif",
      "source": {
        "kind": "google-fonts",
        "family": "Inter",
        "url": "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
      },
      "fallbackStack": [
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "Roboto",
        "Helvetica Neue",
        "Arial",
        "sans-serif"
      ],
      "availableStyles": [
        {
          "weight": 100,
          "style": "normal"
        },
        {
          "weight": 100,
          "style": "italic"
        },
        {
          "weight": 200,
          "style": "normal"
        },
        {
          "weight": 200,
          "style": "italic"
        },
        {
          "weight": 300,
          "style": "normal"
        },
        {
          "weight": 300,
          "style": "italic"
        },
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 400,
          "style": "italic"
        },
        {
          "weight": 500,
          "style": "normal"
        },
        {
          "weight": 500,
          "style": "italic"
        },
        {
          "weight": 600,
          "style": "normal"
        },
        {
          "weight": 600,
          "style": "italic"
        },
        {
          "weight": 700,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "italic"
        },
        {
          "weight": 800,
          "style": "normal"
        },
        {
          "weight": 800,
          "style": "italic"
        },
        {
          "weight": 900,
          "style": "normal"
        },
        {
          "weight": 900,
          "style": "italic"
        }
      ]
    },
    {
      "role": "body",
      "ref": "inter@1.0.0",
      "family": "Inter",
      "classification": "sans-serif",
      "source": {
        "kind": "google-fonts",
        "family": "Inter",
        "url": "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
      },
      "fallbackStack": [
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "Roboto",
        "Helvetica Neue",
        "Arial",
        "sans-serif"
      ],
      "availableStyles": [
        {
          "weight": 100,
          "style": "normal"
        },
        {
          "weight": 100,
          "style": "italic"
        },
        {
          "weight": 200,
          "style": "normal"
        },
        {
          "weight": 200,
          "style": "italic"
        },
        {
          "weight": 300,
          "style": "normal"
        },
        {
          "weight": 300,
          "style": "italic"
        },
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 400,
          "style": "italic"
        },
        {
          "weight": 500,
          "style": "normal"
        },
        {
          "weight": 500,
          "style": "italic"
        },
        {
          "weight": 600,
          "style": "normal"
        },
        {
          "weight": 600,
          "style": "italic"
        },
        {
          "weight": 700,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "italic"
        },
        {
          "weight": 800,
          "style": "normal"
        },
        {
          "weight": 800,
          "style": "italic"
        },
        {
          "weight": 900,
          "style": "normal"
        },
        {
          "weight": 900,
          "style": "italic"
        }
      ]
    },
    {
      "role": "mono",
      "ref": "jetbrainsmono-nerdfont@1.0.0",
      "family": "JetBrainsMono Nerd Font",
      "classification": "monospace",
      "source": {
        "kind": "external",
        "family": "JetBrainsMono Nerd Font",
        "notes": "Nerd-Font-patched build of JetBrains Mono. Not available via Google Fonts. Download woff2/ttf files from the Nerd Fonts GitHub release and self-host, or install system-wide for terminal/IDE use.\n"
      },
      "fallbackStack": [
        "JetBrains Mono",
        "Fira Code",
        "Menlo",
        "Monaco",
        "Consolas",
        "Liberation Mono",
        "monospace"
      ],
      "availableStyles": [
        {
          "weight": 100,
          "style": "normal"
        },
        {
          "weight": 100,
          "style": "italic"
        },
        {
          "weight": 200,
          "style": "normal"
        },
        {
          "weight": 200,
          "style": "italic"
        },
        {
          "weight": 300,
          "style": "normal"
        },
        {
          "weight": 300,
          "style": "italic"
        },
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 400,
          "style": "italic"
        },
        {
          "weight": 500,
          "style": "normal"
        },
        {
          "weight": 500,
          "style": "italic"
        },
        {
          "weight": 600,
          "style": "normal"
        },
        {
          "weight": 600,
          "style": "italic"
        },
        {
          "weight": 700,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "italic"
        },
        {
          "weight": 800,
          "style": "normal"
        },
        {
          "weight": 800,
          "style": "italic"
        }
      ]
    }
  ],
  "roles": {
    "colors": {
      "identity": "klarna-pink",
      "on-identity": "klarna-black",
      "primary": "klarna-pink",
      "primary-hover": "klarna-pink-deep",
      "accent": "klarna-pink",
      "accent-hover": "klarna-pink-deep",
      "mark": "klarna-black",
      "text-primary-light": "klarna-black",
      "text-primary-dark": "klarna-white",
      "text-secondary-light": "klarna-graphite",
      "background-light": "klarna-white",
      "background-dark": "klarna-canvas-dark",
      "surface-light": "klarna-cream",
      "surface-dark": "klarna-surface-dark",
      "divider": "klarna-divider"
    },
    "typography": {
      "display": "heading",
      "prose": "body",
      "code": "mono"
    }
  },
  "assets": [],
  "rules": [
    {
      "type": "colorChoice",
      "target": "logo.wordmark.fill",
      "severity": "error",
      "rationale": "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.\n",
      "allowed": [
        "klarna-black",
        "klarna-white",
        "klarna-pink"
      ],
      "forbidden": [
        "klarna-pink-deep",
        "klarna-graphite",
        "klarna-cream",
        "klarna-gray"
      ]
    },
    {
      "type": "forbiddenTreatment",
      "target": "logo",
      "severity": "error",
      "rationale": "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.\n",
      "treatments": [
        "stretched",
        "rotated",
        "recolored",
        "drop-shadow",
        "gradient-fill",
        "on-busy-photo",
        "inverted-without-variant"
      ]
    },
    {
      "type": "contrastRatio",
      "target": "text-primary",
      "severity": "error",
      "rationale": "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.\n",
      "against": "background",
      "minRatio": 4.5,
      "standard": "WCAG-AA"
    },
    {
      "type": "contrastRatio",
      "target": "roles.colors.primary",
      "severity": "error",
      "rationale": "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.\n",
      "against": "roles.colors.text-primary-light",
      "minRatio": 4.5,
      "standard": "WCAG-AA"
    },
    {
      "type": "enumMembership",
      "target": "typography.heading.fontWeight",
      "severity": "warning",
      "rationale": "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.\n",
      "allowed": [
        "400",
        "500",
        "700"
      ]
    },
    {
      "type": "contextRestriction",
      "target": "roles.colors.identity",
      "severity": "error",
      "rationale": "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.\n",
      "forbiddenContexts": [
        "error-state",
        "validation-failure",
        "destructive-action"
      ]
    },
    {
      "type": "accessibilityRequirement",
      "target": "*",
      "severity": "error",
      "rationale": "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.\n",
      "standard": "WCAG-AA",
      "criterion": "1.4.3"
    },
    {
      "type": "compositionConstraint",
      "target": "roles.colors.identity",
      "severity": "recommendation",
      "rationale": "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.\n",
      "pairsWith": [
        "klarna-black",
        "klarna-white",
        "klarna-cream"
      ],
      "doesNotPairWith": [
        "klarna-pink-deep"
      ]
    },
    {
      "type": "fontPairing",
      "target": "typography.heading",
      "severity": "warning",
      "rationale": "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.\n",
      "requires": "body",
      "minSizeRatio": 1.8
    }
  ]
}