Skip to content
Browse
Library

N26. A bank that earns calm through quiet white space and a single confident color.

  • Finance
  • Light theme
  • 9 colors
  • 2 typefaces

N26 presents a calm, confident digital banking sanctuary anchored by a single deep teal hero that commands the viewport while the rest of the interface recedes into warm off-white space. The visual hierarchy is built on contrast: dense dark ink (#1b1b1b) on near-white canvas (#faf8f5), with teal appearing as purposeful punctuation for primary actions and brand moments rather than decoration. Typography carries a distinctive tension between the compact, slightly tracked N26 sans-serif used for navigation and body content, and the wider N26-Extended display face that gives headlines room to breathe at 58–80px. Components feel architectural and minimal — thin borders, generous padding, small radii on controls, large radii on imagery — reflecting a European design-banking sensibility where trust is conveyed through restraint rather than ornament.

Visit n26.com
Screenshot of The online bank
Captured from n26.com on October 11, 2026

N26 design system

N26

Brand1

  • Teal supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color

Accent2

  • Light teal-tinted surface for accent backgrounds, highlight panels, and soft washes that echo the brand color without dominating

  • Warm pink-tinted surface for category differentiation in editorial layouts — used as a subtle alternative to teal-tinted sections

Neutrals6

  • Reserved for icon fills and the rare element requiring maximum contrast — used sparingly alongside the softer Ink

  • Primary body text, headings, icon strokes, link text, and nav labels — a near-black that softens to charcoal, avoiding the harshness of pure black on warm white

  • Supporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color

  • Subtle borders, dividers between content blocks, and input field outlines — light enough to recede but present enough to structure information

  • Page background — a warm, paper-like off-white that gives the entire interface a human, editorial quality distinct from clinical SaaS whites

  • Light supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Surface White on Deep Teal

4.75 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictFails AAA 7

More DESIGN.md files. Same web, different personalities.