# N26 · Design system migration spec

> Source: https://n26.com  ·  Curated by OpenDesign  ·  en

> This design is a masterclass in modern fintech branding, using a restricted color palette and spacious layout to build trust and clarity in a complex financial environment.

## 1. Identity DNA

The N26 design system operates like a modern, friendly bank branch translated into a pocketable interface, where every element serves the singular purpose of clarity and trust. It achieves this through a disciplined use of a signature teal accent on a warm off-white canvas, creating a high-contrast yet welcoming environment for financial activity.

**One-liner:** A clean, confident fintech UI that uses a signature teal accent to guide users toward a single primary action.
**Keywords:** banking · fintech · mobile-first · trust · simplicity
**Analogy:** A modern, friendly bank branch in your pocket that prioritizes clarity and trust.

## 2. Color

The palette is anchored by a warm off-white (#FAF8F5) background and dark ink (#1B1B1B) text, with a single, vibrant teal (#088177) serving as the dominant accent for all primary interactive elements. This restrained approach ensures the teal acts as a clear, trustworthy guide toward every key action.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FAF8F5` | main background |
| `--ink` | `#1B1B1B` | body text |
| `--muted` | `#6D6D6D` | placeholder |
| `--accent` | `#088177` | single accent |
| `--line` | `rgba(233, 233, 233, 1.0)` | divider |

**Color principle:** A warm off-white background with a dominant teal accent creates a trustworthy, accessible contrast for financial actions.

The system's core principle is singular accent dominance, using one high-contrast color to direct user focus and maintain visual coherence.

## 3. Typography

Typography employs a clean, geometric sans-serif category for all UI text, establishing a modern and highly readable voice. The scale is deliberately weighted toward large display sizes for key headlines, using direct, benefit-driven statements to guide the user.

- **Display:** geometric-sans
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 58px | 1.0 | 500 | -0.5px | Primary hero headlines and major section statements |
| heading | 32px | 1.2 | 400 | 0.3px | Secondary headlines and sub-section headers |
| body | 18px | 1.5 | 400 | 0.26px | Primary body text and descriptive paragraphs |
| small | 14px | 1.4 | 400 | 0.3px | Metadata, footer text, and minor UI labels |

## 4. Spacing

Rhythm is established through a standard 4px base grid, applied with generous padding to create breathing room and prevent information overload.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 40 / 48 / 64 / 80 / 96 px
- **Rhythm:** Standard 4px base grid with generous padding for breathing room

## 5. Surfaces

Depth is communicated through subtle, layered shadows and very light gray (#E9E9E9) borders for structural separation. The system prioritizes spacious, rounded containers over harsh divisions, using a consistent 24px border radius for primary cards.

- **Radius:** sm 4px · md 8px · lg 24px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.2) 0px 4px 8px 0px
- **Borders:** Subtle 1px borders for structural separation and interactive elements

## 6. Layout

The layout skeleton follows a clean, centered container model with generous vertical whitespace between major sections. This structure focuses the eye on large, readable typography and the single, pill-shaped primary call-to-action that anchors nearly every view.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered container with generous vertical whitespace between sections

## 7. Motion & Interaction

Motion philosophy is one of minimal, purposeful reinforcement, using smooth 0.3-second transitions to provide clear but non-distracting feedback. Interactions rely on subtle background-color and transform shifts to confirm user actions without introducing visual noise.

- **Durations:** micro 150ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth transitions on background-color, transform, and scale for interactive elements

- **Hover:** Background-color or color shift with smooth transition
- **Click:** Scale or translate transform for immediate feedback
- **Transition:** 0.3s cubic-bezier(0.4, 0, 0.2, 1) for standard state changes
- **Keyboard:** Visible focus states and logical tab order

## 8. Voice & Don'ts

The editorial voice is friendly, reassuring, and highly professional, communicating with direct, first-person statements that avoid complex financial jargon. CTA language is action-oriented and clear, focusing solely on the primary goal of each section.

- **Tone:** Friendly, reassuring, and highly professional
- **Headline style:** Direct, benefit-driven statements using first-person perspective
- **CTA style:** Action-oriented and clear, focusing on the primary goal
- **Avoid:** Avoiding complex financial jargon / Avoiding overly aggressive sales language / Avoiding dense, intimidating blocks of text / Avoiding cluttered layouts or excessive visual noise / Avoiding cold, purely corporate messaging

### Don'ts
- ❌ Don't use a pure white (#FFFFFF) for the main background — the screenshot shows a warm off-white (#FAF8F5) instead.
- ❌ Don't use multiple competing accent colors — the screenshot shows a single dominant teal (#088177) as the primary accent.
- ❌ Don't use decorative or script fonts — the screenshot uses a clean, custom geometric sans-serif for all UI text.
- ❌ Don't use harsh square corners for primary containers — the screenshot shows large, generous border radii (24px) for media cards.
- ❌ Don't use thin, light borders for separation — the screenshot uses a very subtle light gray (#E9E9E9) for horizontal rules.
- ❌ Don't use dark mode as a default — the screenshot primarily showcases a light, bright interface with teal accents.

The system deliberately avoids multiple competing accent colors, harsh square corners, and dense, jargon-heavy text blocks to preserve its focused, trustworthy clarity.

## System Prompt (paste into AI tool)

```
N26 is a premium fintech banking platform that balances a friendly, accessible tone with professional trust. The visual identity is built around a signature teal accent (#088177) on a warm off-white background (#FAF8F5), creating a high-contrast yet welcoming environment for financial activities. The typography is a clean geometric sans-serif that prioritizes readability and a modern feel, using large display sizes for key headlines. Layouts are spacious and centered, relying on a consistent 4px base grid and generous padding to prevent information overload. A primary CTA with a pill-shaped border radius is the focal point of almost every section. The interaction design is subtle, using smooth 0.3s transitions on hover and click. Critical design constraints: never use multiple competing accent colors; never use pure white backgrounds; never use harsh square corners for main content cards; avoid dense, jargon-heavy text blocks; and maintain a single, strong primary call-to-action per section to preserve the clean, focused user experience.
```