---
version: alpha
name: N26
description: European mobile bank where a custom condensed grotesque (N26-Extended) sets cool authority at display scale, a contained teal accent signals precision over warmth, and small-radius buttons reject the finance-app pill trend in favor of crisp, confident geometry.

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#faf8f5"           # warm off-white section fills
  surface-dark: "#1b1b1b"      # near-black hero overlay, footer canvas

  # Ink / text
  ink: "#1b1b1b"               # primary text, wordmark, nav — near-black from nemoBlack
  ink-secondary: "#6d6d6d"     # supporting copy — nemoGrayStrong
  on-dark: "#ffffff"           # text on dark surfaces

  # Brand accent — the singular N26 teal
  primary: "#088177"           # CTA fill, active states, focus rings, link hover
  primary-hover: "#06736a"     # deepened teal on hover
  primary-deep: "#005451"      # nemoTealDeep — pressed / dark-surface accent
  primary-light: "#a8ded8"     # nemoTeal200 — soft tint for badges, highlights
  on-primary: "#ffffff"        # text on teal surfaces

  # Semantic
  error: "#99424b"             # nemoRhubarbStrong — error states
  error-deep: "#7d3940"        # rhubarb-800 — pressed error
  error-light: "#edcccf"       # nemoRhubarb200 — error container tint
  error-mid: "#b55b64"         # nemoRhubarb — error mid tone

  # Borders
  border: "#e9e9e9"            # section dividers, hairlines
  border-strong: "#d9d9d9"     # was rgb(217,217,217) — input outlines, header rule

  # Link / hover
  link-hover: "#3860be"        # was rgb(56,96,190) — link hover state

  # Shadow tints
  shadow-soft: "#000000"       # was rgba(0,0,0,0.2) — Google format requires hex

typography:
  display-hero:
    fontFamily: "N26-Extended, N26-Extended-Fallback, Barlow Condensed, sans-serif"
    fontSize: 80px
    fontWeight: 400
    lineHeight: 1.10
    letterSpacing: 0px
  display:
    fontFamily: "N26-Extended, N26-Extended-Fallback, Barlow Condensed, sans-serif"
    fontSize: 58px
    fontWeight: 400
    lineHeight: 1.10
    letterSpacing: 0px
  heading:
    fontFamily: "N26-Extended, N26-Extended-Fallback, Barlow Condensed, sans-serif"
    fontSize: 44px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: 0px
  heading-sub:
    fontFamily: "N26-Extended, N26-Extended-Fallback, Barlow Condensed, sans-serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0px
  label-caps:
    fontFamily: "N26, N26-Fallback, Inter, system-ui, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.47
    letterSpacing: 0px
  body-large:
    fontFamily: "N26, N26-Fallback, Inter, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0.31px
  body:
    fontFamily: "N26, N26-Fallback, Inter, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  body-medium:
    fontFamily: "N26, N26-Fallback, Inter, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0px
  button-ui:
    fontFamily: "N26, N26-Fallback, Inter, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: 0.30px
  caption:
    fontFamily: "N26, N26-Fallback, Inter, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0.26px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 64px
  5xl: 72px

rounded:
  none: 0px
  xs: 2px
  sm: 6px
  md: 8px
  lg: 24px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary-hover}"

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
  button-ghost-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px
  card-feature:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 32px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 16px 24px

  badge-teal:
    backgroundColor: "{colors.primary-light}"
    textColor: "{colors.primary-deep}"
    typography: "{typography.caption}"
    rounded: "{rounded.xs}"
    padding: 4px 8px

  badge-error:
    backgroundColor: "{colors.error-light}"
    textColor: "{colors.error-deep}"
    typography: "{typography.caption}"
    rounded: "{rounded.xs}"
    padding: 4px 8px

  link:
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 0px
  link-hover:
    textColor: "{colors.link-hover}"
    padding: 0px
---

# N26 Design System

## Overview

N26's visual language is precision made legible — a design system that strips away the warmth and pill-softness of consumer fintech to deliver something closer to a Swiss banking app with a modern mobile soul. The canvas is clean white (`{colors.background}`) and near-black ink (`{colors.ink}`), but the tone is set by the typography before anything else: N26-Extended, a condensed grotesque built on GT America Extended, renders headlines at weight 400 with zero tracking. Where Monzo shouts at 800 weight and Revolut commands at stadium scale, N26 is controlled — the type is confident without being loud, precise without being cold.

The singular brand accent is a mid-depth teal (`{colors.primary}`, `#088177`). It appears on CTAs, active states, focused inputs, and link hovers, but not liberally — the marketing surface is dominated by the near-black and white polarity, and the teal is the measure of brand identity. On the homepage hero, this plays out directly: a dark full-bleed photographic section ("The first bank you'll love") with white text and a single teal-filled CTA that is immediately identifiable as the brand's action signal. The button geometry underscores the philosophy — `{rounded.sm}` at 6px, not a pill. N26 chooses a contained, mature radius over the pill-softness its fintech peers favor.

The warm off-white surface (`{colors.surface}`, a hint-of-beige `#faf8f5`) is the second canvas register — feature sections shift to it for separation without reaching for a cold gray. The "Nemo" design token architecture, partially exposed in the CSS (`--color-nemoTeal*`, `--color-nemoRhubarb*`, `--color-nemoBlack`), reveals a more complete semantic system underneath: rhubarb reds for error states, teal tints for positive moments, a gray scale for supporting copy. The public-facing marketing site shows only the clean surface; the in-app token system is richer.

**Key Characteristics:**
- Clean white canvas (`{colors.background}`) with warm beige-white section fills (`{colors.surface}`) — neither cold nor particularly warm, just precise
- **N26-Extended at weight 400** for all display (`{typography.display-hero}`) — condensed grotesque, authority through proportion not weight
- N26 (GT America Standard) for body and UI copy (`{typography.body}`) — clean humanist sans at weights 400-600
- Teal accent (`{colors.primary}`, `#088177`) is the entire brand signal: CTAs, focus states, and hover links only
- **Buttons use 6px radius** (`{rounded.sm}`) — deliberately not a pill; mature, contained, and precise
- Near-black `{colors.ink}` (`#1b1b1b`) for all text and the dark hero section canvas — never pure black
- "Nemo" semantic token architecture underneath: `--color-nemoTeal*`, `--color-nemoRhubarb*` cover product states not shown on marketing surface
- Minimal elevation — low, sparse shadows; separation comes from surface color contrast
- Warm off-white `{colors.surface}` for section banding, never a cold gray
- 8px spacing base with generous large-spacing steps (48-72px) for vertical rhythm

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The primary marketing canvas; most content sits on pure white.
- **Warm Off-White** (`{colors.surface}`): Section-band fills — a barely-warm beige shift from white, never a cold gray.
- **Near-Black** (`{colors.surface-dark}`): Dark hero sections, footer canvas, and overlay surfaces. The `nemoBlack` token. Not pure `#000000`.

### Ink / Text
- **Near-Black Ink** (`{colors.ink}`): All headings, body, nav labels, and the primary text workhorse. The `nemoBlack` value.
- **Mid Gray** (`{colors.ink-secondary}`): Supporting copy and secondary labels — `nemoGrayStrong` at mid-lightness.
- **On Dark** (`{colors.on-dark}`): White text for the dark hero and footer sections.

### Brand Accent
- **N26 Teal** (`{colors.primary}`): The singular brand color — CTAs, active nav states, focus rings, icon accents.
- **Teal Hover / Deep** (`{colors.primary-hover}`, `{colors.primary-deep}`): Hover-deepened teal and the darkest pressed state (`nemoTealDeep`).
- **Teal Light** (`{colors.primary-light}`): Soft container fill for positive badges and highlights (`nemoTeal200`).

### Semantic
- **Error Rhubarb** (`{colors.error}`): Error/destructive states — a warm red with pink undertone (`nemoRhubarbStrong`).
- **Error Range** (`{colors.error-deep}`, `{colors.error-mid}`, `{colors.error-light}`): Full rhubarb scale from pressed deep to container tint.

### Borders & Links
- **Hairline** (`{colors.border}`): Section dividers — `#e9e9e9`.
- **Strong Border** (`{colors.border-strong}`): Input outlines and the header bottom rule.
- **Link Hover** (`{colors.link-hover}`): A blue that appears on link hover — separate from the teal brand accent.

## Typography

### Font Family
- **Display**: `N26-Extended` (GT America Extended Medium underneath) — a condensed grotesque used for all headlines at weights 400-500. Fallback: `Barlow Condensed, sans-serif`.
- **Body / UI**: `N26` (GT America Standard) — clean humanist sans for body copy, navigation, and UI labels at weights 400-600. Fallback: `Inter, system-ui, sans-serif`.
- **Positive tracking on body**: body text carries a subtle positive spacing (0.16-0.31px) for airy readability; display sits at 0 tracking, relying on condensed proportions.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 80px N26-Extended 400 — marquee headline on hero |
| `display` | 58px — major section titles |
| `heading` | 44px — feature block headings |
| `heading-sub` | 32px / 500 — sub-section and card headings |
| `label-caps` | 19px — uppercase-variant section labels |
| `body-large` | 20px / 400 — introductory lead paragraphs |
| `body` | 18px / 400 — standard reading text |
| `body-medium` | 18px / 500 — emphasized body, feature descriptions |
| `button-ui` | 16px / 500 / +0.30px — button labels and nav CTAs |
| `caption` | 14px / 400 — metadata, badges, helper text |

### Principles
- **Condensed proportion, not heavy weight**: N26-Extended uses weight 400-500 exclusively — authority comes from the wide-to-narrow ratio of the condensed cut, not from bolding.
- **Two families, one job each**: Extended for display, Standard for everything else. Mixing them in a single visual block is not the N26 pattern.
- **Slight positive tracking on small sizes**: body and caption text breathes at +0.16-0.30px; display uses 0 tracking, letting the condensed form do the work.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px. Section-level vertical rhythm uses `{spacing.3xl}`-`{spacing.5xl}` (48-72px); component internals stay in `{spacing.md}`-`{spacing.xl}` (12-24px).

### Grid & Container
- Max content width: approximately 1200px, centered
- Hero: full-bleed dark photographic section with headline and single CTA
- Feature sections: alternating white and warm off-white bands; 2-column text-and-visual rows at desktop
- 16 breakpoints detected including stops at 768px, 896px, 1023px, and 1280px

### Whitespace Philosophy
- **Generous vertical rhythm**: section separation is handled by 48-72px spacing, not by heavy borders or dividers
- **Flat and airy**: the page reads as stacked panels; the photography and the teal accent do the visual work
- **Precision over warmth**: spacing is consistent and deliberate — the 8px grid is strictly observed

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, hairline `{colors.border}` | Section dividers, nav rule, most page content |
| Subtle (Level 1) | `0 4px 8px` at ~20% black (`{colors.shadow-soft}`) | Floating product cards, dropdown surfaces |
| Subtle (Level 2) | `rgb(153, 153, 153) 0 2px 10px -3px` | Navigation hover surfaces |
| Focus Ring | 1px solid `{colors.primary}` ring on interactive elements | Form focus, button focus |

**Shadow Philosophy**: N26 uses shadows sparingly and softly. The dominant depth mechanism is surface-color contrast — white sections against off-white against near-black. When elevation appears, it is a diffuse, low-opacity cast under a floating card, never a dramatic layered shadow. The system is closer to Revolut's flat approach than to a shadow-heavy system like Airbnb.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Dividers, full-bleed images |
| `xs` | 2px | Cookie banners, micro UI elements |
| `sm` | 6px | **Buttons** — the signature contained radius |
| `md` | 8px | Tabs, image frames, input fields, small cards |
| `lg` | 24px | Feature cards, larger image containers |
| `pill` | 9999px | Tag chips (rare use) |

The radius philosophy sets N26 apart from its fintech peers: buttons are 6px, not pills. This is a deliberate choice — contained geometry reads as mature and precise, the visual language of a product you can trust with your money rather than a consumer app trying to feel friendly. Card radii step to 8-24px; nothing is sharp, but nothing is excessively rounded.

## Components

The complete component spec lives in the `components:` token block above.

### Button variants
- **`button-primary`** — Teal fill (`{colors.primary}`), white text, 6px radius, `12px 24px` padding. The "Open bank account" CTA. Hover deepens to `{colors.primary-hover}`.
- **`button-secondary`** — White fill, teal text, 6px radius — the ghost-teal pattern used alongside the primary on hero surfaces.
- **`button-ghost`** — White fill, near-black text, 6px radius — neutral supporting actions.

### Cards
- **`card`** — White surface, 8px radius, 24px padding. Default content block.
- **`card-feature`** — Warm off-white (`{colors.surface}`) fill, 24px radius, 32px padding. Used for larger feature moments.

### Inputs
- **`input`** — White fill, `{colors.border-strong}` 1px outline, 6px radius. **`input-focus`** swaps to a 1px solid teal (`{colors.primary}`) ring — no glow, no shadow, just a color shift.

### Navigation
- **`nav-bar`** — White surface, `{colors.border-strong}` hairline bottom, N26 body text at weight 400. Teal CTA persists at the right.

### Badges
- **`badge-teal`** — Teal-light container (`{colors.primary-light}`), deep teal text, 2px radius — positive state chips and category tags.
- **`badge-error`** — Rhubarb-light container (`{colors.error-light}`), deep rhubarb text — error/warning labels.

### Links
- **`link`** — Near-black text, underline on default. **`link-hover`** shifts to a distinct blue (`{colors.link-hover}`) and removes the underline — separate from the teal brand accent.

## Do's and Don'ts

### Do
- Use N26-Extended at weight 400 for all display headlines (`{typography.display-hero}`) — the condensed proportion is the voice, not a heavy weight
- Keep buttons at **6px radius** (`{rounded.sm}`) — the contained geometry is intentional and brand-defining
- Reserve teal (`{colors.primary}`) for the single most important action on any surface — CTAs, focus rings, and nothing else
- Use near-black (`{colors.ink}`) for the dark canvas, never pure `#000000`
- Pair white and warm off-white (`{colors.surface}`) for section banding — the beige shift reads warmer than a cold gray
- Keep elevation flat — let surface contrast and teal do the work; shadows are sparse and low
- Use the "Nemo" rhubarb tokens for error states — `{colors.error}` through `{colors.error-light}` form a coherent semantic range
- Apply positive letter-spacing on body text (`{typography.body}` at +0.16-0.30px) — it is part of the type rhythm

### Don't
- Don't round buttons to a full pill (`{rounded.pill}`) — that undoes the precise, mature geometry that defines N26
- Don't use bold (700+) weights in N26-Extended — weight 400-500 is the entire display range
- Don't place teal on section backgrounds or decorative surfaces — it is a functional signal only
- Don't use cold grays for section fills — the brand uses warm off-white (`{colors.surface}`) for secondary surfaces
- Don't introduce hard, tight shadows — the system is designed to be nearly flat
- Don't use the body font (N26 Standard) for hero headlines — the condensed extended cut is mandatory at display scale
- Don't apply the link-hover blue (`{colors.link-hover}`) to buttons — it is a link state color, not a brand accent
- Don't skip the teal focus ring on interactive elements — it is the only focus-state indicator in the system

---

## Responsive Behavior

### Breakpoints
*(The site uses 16 breakpoints; the table below covers the meaningful layout stops.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <425px | Single column; hero headline scales down from 80px; nav collapses to hamburger; CTA goes full-width |
| Mobile | 425-768px | Standard mobile layout; feature sections stack vertically |
| Tablet | 768-1023px | Two-column feature rows begin; image and text side by side |
| Desktop | 1024-1279px | Full layout; full-bleed hero with overlaid text |
| Large | ≥1280px | Max ~1200px container, centered; full section spacing (`{spacing.4xl}`-`{spacing.5xl}`) |

### Touch Targets
- Primary buttons run ~42px tall with `12px 24px` padding — meets minimum touch target; generous horizontal padding aids mobile tap accuracy
- Nav tabs carry at least `{spacing.lg}` vertical padding for comfortable mobile tapping

### Collapsing Strategy
- **Navigation**: full horizontal bar → hamburger menu on mobile; teal CTA persists in collapsed state
- **Hero**: full-bleed dark photography with overlaid headline → stacked layout on mobile, image below headline
- **Display type**: 80px condensed headline steps down to approximately 36-44px on mobile while retaining the N26-Extended face
- **Section spacing**: 64-72px vertical rhythm compresses to ~32-48px on mobile

### Image Behavior
- Full-bleed photography in the dark hero; the 8-24px rounded frames on feature cards maintain radius across breakpoints
- App UI screenshots (the product phone mock) scale with the container, cropped to keep the interface readable

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White (`{colors.background}`)
- Text: Near-Black (`{colors.ink}`, `#1b1b1b`)
- Brand accent / CTA: Teal (`{colors.primary}`, `#088177`)
- Secondary text: Mid Gray (`{colors.ink-secondary}`)
- Section fill: Warm Off-White (`{colors.surface}`, `#faf8f5`)
- Border: Hairline (`{colors.border}`, `#e9e9e9`)
- Error: Rhubarb (`{colors.error}`)

### Example Component Prompts

- "Create a dark hero section using `{colors.surface-dark}` (`#1b1b1b`) as the background, full-bleed lifestyle photography as a background layer, a white headline in N26-Extended at 80px weight 400 line-height 1.10 (`{typography.display-hero}`), a subline in N26 body at 20px (`{typography.body-large}`), and a single teal CTA button (`{colors.primary}` fill, `{colors.on-primary}` text, `{rounded.sm}` radius, `12px 24px` padding)"
- "Build a primary button: teal background (`{colors.primary}`), white text (`{colors.on-primary}`), 6px radius (`{rounded.sm}`), 12px 24px padding, N26 16px weight 500 (`{typography.button-ui}`). Hover state deepens background to `{colors.primary-hover}`"
- "Create a feature card: warm off-white (`{colors.surface}`) surface, 24px radius (`{rounded.lg}`), 32px padding, a 32px N26-Extended weight 500 title (`{typography.heading-sub}`) and 18px N26 body (`{typography.body}`), with a 0 4px 8px low shadow (`{colors.shadow-soft}` at ~20% opacity)"
- "Design a navigation bar: white background, `{colors.border-strong}` 1px bottom rule, N26 body text links at 18px, a right-aligned teal CTA button (`{components.button-primary}`). Transparent on scroll until the user scrolls 120px, then white fill"
- "Build a form input: white fill, `{colors.border-strong}` 1px solid outline, `{rounded.sm}` 6px radius, `12px 16px` padding, N26 body 18px (`{typography.body}`). Focus state changes the border to 1px solid `{colors.primary}` (teal) — no shadow, no glow, just the color shift"

### Iteration Guide

1. Start on white (`{colors.background}`) and use warm off-white (`{colors.surface}`) — never cold gray — for section banding.
2. Set all display headlines in N26-Extended at weight 400 (`{typography.display-hero}`). Condensed proportion, not bold weight, carries the authority.
3. Use teal (`{colors.primary}`) exactly once per surface as the primary CTA. It is the only brand color; diluting it across multiple elements diminishes its signal.
4. Button radius is 6px (`{rounded.sm}`) — not a pill. This is load-bearing to the design language.
5. Elevation is nearly flat — only use the `0 4px 8px rgba(0,0,0,0.2)` shadow for genuinely elevated surfaces (floating cards, dropdowns).
6. Keep the near-black (`{colors.ink}`, `#1b1b1b`) for both text and the dark hero canvas. Pure black is not in this system.
7. For error states, draw from the rhubarb range (`{colors.error}`-`{colors.error-light}`) — do not reuse teal for negative feedback.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by N26. Brand names and trademarks belong to their respective owners.