
Preview image. Unlock full-res
Friendly finance. A vibrant pink against deep violet, like a surprising bloom in a nighttime garden.
This design system feels like a friendly, yet sophisticated, financial advisor — welcoming and trustworthy. It achieves this through a vibrant, playful pink accent ('Bubblegum Pop') against a deep 'Midnight Plum' background in hero sections and a clean, accessible light gray elsewhere. The strategic use of large, rounded corners on buttons ('Pill Button') and cards ('Soft Square Card') softens the interface, making financial tools feel less intimidating. Headline typography is a signature element: 'Klarna Title' at heavy weights creates a bold, almost assertive voice, balanced by the friendly curvature of the other elements.
Always use 'Midnight Plum' (#0b051d) for primary headings and important text on light backgrounds to maintain brand authority.
Apply 'Bubblegum Pop' (#ffa8cd) for all primary call-to-action buttons to ensure maximum visibility and encourage clicks.
Maintain a 100px radius for all CTA buttons and a 999px radius for tertiary pill buttons to create a consistent soft, approachable aesthetic.
Utilize 'Off-White Canvas' (#f9f8f5) for main page backgrounds and secondary card surfaces to provide a clean, readable base.
Employ Klarna Title font with weights 500-700 for all large headlines, providing a bold, direct brand voice.
Use 32px as the standard padding within card components to ensure generous content spacing.
Do not use highly saturated colors for large text blocks; reserve them for interactive elements or accents.
Avoid using hard-edged rectangles for content cards; always feature a 16px or 24px border-radius to maintain approachability.
Never combine more than three vibrant card background colors (Amethyst, Lavender Mist, Mint Leaf) in close proximity to prevent visual clutter.
Do not vary letter-spacing for Klarna Title or Klarna Text unless explicitly defined; use the specified values like -0.0100em where applicable.
Avoid shadows on default content cards; only use the specified subtle shadow (rgba(0,0,0,0.1) 0px 2px 4px 0px) on elevated, vibrant cards.
Do not use dark backgrounds for main content sections; reserve 'Midnight Plum' for hero or impactful introductory blocks.









