Klarna

## Overview

Professional yet approachable fintech design with a sophisticated dark navy foundation balanced by playful pink accents. The design feels trustworthy and modern, with generous spacing creating a clean, uncluttered experience that prioritizes clarity and accessibility.

Generous spacing system based on 8px grid with prominent use of 32px, 24px, and 16px intervals. Hero sections use full-width layouts with centered content, while the overall design maintains clean margins and consistent vertical rhythm throughout components.

Uses a 8px base grid with scale: 0.5, 1, 2, 3, 4, 6, 10.

## Colors
- **Klarna Black** (#0b051d): Primary brand color, text, buttons
- **Klarna Pink** (#ffa8cd): Brand accent, CTAs, highlights
- **White** (#ffffff): Page background, cards, containers
- **Neutral Gray** (#c4c3ca): Borders, dividers, subtle elements
- **Text Body** (#282636): Body text, secondary content
- **Off White** (#f9f8f5): Subtle background, inverse text

## Typography
- **Headline Font**: Klarna Title
- **Body Font**: Klarna Text
- **Label Font**: -apple-system

The typography system combines custom Klarna fonts with system fonts for optimal performance. Klarna Title handles display text with weights from 500-700, while Klarna Text manages body content with subtle negative letter-spacing (-0.048px) for improved readability. System fonts provide fallback reliability. The scale jumps dramatically from body (16px) to display (90px), creating strong visual hierarchy with intermediate steps at 24px and 41px.

## Elevation

Minimal shadow strategy with subtle elevation using rgba(0, 0, 0, 0.1) 0px 2px 4px 0px for cards and components. The design relies more on color contrast and spacing than heavy shadows, maintaining a clean, flat aesthetic with just enough depth to establish hierarchy.

## Components
- **Hero Section**: Large hero with dark background, prominent white text, and mobile phone mockup
- **Navigation Header**: Clean white header with logo, navigation links, and login button
- **CTA Button**: Rounded buttons with high contrast, often using brand pink for primary actions
- **Rating Badge**: Star rating with App Store reference, using consistent typography
- **Feature Cards**: Clean cards with rounded corners, consistent spacing, and clear hierarchy

## Do's and Don'ts
- Do use the 32px border radius consistently for primary interactive elements
- Don't use shadows heavily - rely on color contrast and spacing for hierarchy
- Do maintain high contrast ratios between text and backgrounds for accessibility
- Don't exceed font-weight 700 - keep typography weights restrained and purposeful
- Do use the 8px spacing grid religiously for consistent rhythm
- Don't mix custom Klarna fonts with other brand fonts - stick to the system
- Do leverage the brand pink sparingly as an accent, not a dominant color
- Don't create new color variations - use the established semantic color system