The visual approach
Klarna's homepage opens on #3d2656 — a deep, saturated purple that sits nowhere near the pale blues and grays that dominate fintech. The brand pink (#ffb3d9) appears as accent, not primary, and the type hierarchy pushes scale harder than most SaaS: display headings run 80px at 700 weight, stat numbers hit 72px, and body text sits at 20px, not the cautious 16px default.
Every interactive surface is a pill. Buttons carry border-radius: 9999px, cards round to 8–16px, and phone mockups curve at 24–36px. The pill pattern shows up in the design system's base unit — 8px spacing, 14px × 32px button padding — and in the motion spec: button backgrounds transition from rgb(11, 5, 29) to rgb(31, 25, 47) over 200ms ease on hover. It's a consumer interface vocabulary applied to a category that typically skews corporate.
The technical stack reflects that consumer-first posture. Next.js 14+ with TypeScript, Tailwind for the utility layer, Framer Motion for the animation primitives. The motion library choice matters: Framer Motion is overkill if you only need CSS transitions, but it signals that the design system expects orchestrated, sequenced animation — not just hover states.
What works
The color choice does two things at once. First, it differentiates. If every competitor runs light backgrounds with blue CTAs, a deep purple field makes Klarna recognizable in a screenshot before you read a word. Second, it sets expectation. Purple codes as creative, flexible, even playful — attributes Klarna wants associated with "buy now, pay later" more than "enterprise loan processing."
The type scale works because it's internally consistent. An 80px display heading would look unbalanced against 14px body copy, but Klarna runs body at 20px and keeps line-height tight. The result feels confident rather than unreadable. The stat treatment — 72px numerals in 700 weight — borrows from editorial design, not SaaS dashboards, and that's the point: the homepage is selling a consumer behavior shift, not API uptime.
The pill buttons solve a practical problem. Rectangular buttons need careful alignment and padding to feel balanced; pills forgive sloppier math because the eye reads them as a single shape. For a brand that wants to feel frictionless, the pill says "one tap" better than a hard-edged rectangle. The 200ms hover transition is fast enough to feel immediate but slow enough to read as intentional, not jumpy.
Section padding scales with viewport: 80px on mobile, 120px on desktop. That's wider than most SaaS products ship (64px / 96px is more common), but it gives the purple field room to breathe. Dense layouts make sense for dashboards; breathing room makes sense when you're trying to feel premium.
What a builder can borrow
The color strategy is portable. Pick a saturated background that sits outside your category's default palette, then pair it with a neutral light and a single accent. Klarna uses white text (#ffffff / rgba(255,255,255,0.85)) and pink highlights; you could run deep green with cream and coral, or navy with white and gold. The pattern is: one bold field color, one accent, one neutral. No gradients, no secondary/tertiary/quaternary color scales that nobody can remember.
The type scale is a ratio decision. Klarna's display (80px) to body (20px) is 4:1. Stat (72px) to body is 3.6:1. If you want that same confident hierarchy, pick your body size first — 18px or 20px, not 16px — then multiply up. Apply 700 weight to the large sizes and 400 to body. Two weights, one typeface, clear ratios.
The pill radius is a single token: border-radius: 9999px for buttons, 8–16px for cards. You don't need six radius variables. Pick pill or square for interactive elements, then one modest radius for containers, and stop.
The motion spec is minimal. One hover transition, 200ms, ease curve, background-color property. You don't need twelve easing curves. Framer Motion is in the stack, but the design system only documents one transition. That restraint is the lesson: pick one timing, one curve, apply it everywhere, and ship.