What is N26's primary brand color and how is it used?

Teal — `#088177`, a deep saturated teal that sits between the brand's namespaced `--color-nemoTeal` and `--color-teal-500` CSS variables. The structural rule: teal is both canvas and CTA. It fills the hero band edge-to-edge under the 80px display heading, and it fills the `button-primary` pill at radius `6px` with white text. There is no separate action color — the brand fuses surface voltage and action voltage onto the same hex. Tonal steps live in the same family: `#005451` (nemoTealDeep) for hover and pressed, `#06736a` (nemoTealStrong) as the mid-step, `#a8ded8` (nemoTeal200) as a soft surface chip, and `#d8edeb` (nemoTealBright) as a near-cream tint.

What typography does N26 use, and what should I use if N26 isn't available?

N26 runs two proprietary families: N26-Extended at the single weight 400 for every heading from 14px up to the 80px hero, and N26 (the house grotesk) at weights 400 (body prose) and 500 (labels, nav links, button text). Body sizes are 14px (caption), 16px (default), 17px (lead), and 20px (large). Every body token sits at positive letter-spacing — `0.3px` on the 16px default, `0.2625px` on the 14px caption — wider than zero, against the negative-tracked Sohne / Inter / Söhne convention that Stripe and Linear use. Display tokens use `letterSpacing: normal` (zero). When N26 cannot be licensed, Inter Variable at weight 400 with positive 0.3px tracking on body sizes is the closest open-source path; alternatively General Sans or DM Sans render the same rounded-grotesk silhouette. Do not bump display above weight 400 — N26-Extended is a single-weight stack and heavier weights collapse into generic neobank type.

What is the four-family chromatic stack and how strict is it?

N26 maintains four named color families under the brand's `--color-nemo*` CSS prefix: teal (#088177 / #005451 / #06736a / #a8ded8 / #d8edeb), rhubarb (#b55b64 / #99424b / #7d3940 / #edcccf / #f5e1e3), gold (#a67931 / #c89d58 / #d6b17d / #ebddcc), and slate-blue (#205b6b / #2b697a / #4f8392). Teal is the brand voltage and runs across the hero, CTA, and link emphasis. Rhubarb, gold, and slate-blue are scoped to illustration and product-card art rather than CTA fills — they carry the marketing canvas's editorial range without competing for action attention. The discipline: only teal fills buttons. Rhubarb and gold fill product-card art and decorative tile chrome. Slate-blue fills the rare data-mockup chart line and a few footer accent ranges.

Why does N26 use 6px buttons on a 2px to 24px radii scale instead of pills?

Every button across primary, secondary, and outline variants uses `borderRadius: 6px` — the literal value the brand ships, not `9999px` or `500px`. The radii scale is small and conservative: `2px` for chips and tags, `4px` for inline labels, `6px` for buttons, `8px` for cards, `24px` for the largest illustrated product cards. There is no pill geometry anywhere in the system — the brand chooses small corners over maximal-pill commitment. The visual effect reads as software-utility rather than chat-bubble friendliness: N26 frames itself as a banking app, not a messaging app. The hero band CTA sits at 48px tall with `12px 24px` padding and the same `6px` corner — same geometry as a `card` corner, scaled down.

Can I use this DESIGN.md to build my own React banking app?

Yes — the file is structured to feed into Claude, Cursor, or any AI coding tool that reads structured design tokens. The agent will reproduce N26's saturated-teal hero rhythm, single-weight-400 N26-Extended heading stack, and `6px` button corner rather than a generic neobank theme. You can also reference the tokens directly: every color is a quoted hex, every radius and padding is a quoted pixel string, and the 18 component definitions reference each other by token name so `button-primary` resolves through `{colors.brand-teal}` to the actual `#088177`. The four-family chromatic stack maps onto the brand's `--color-nemo*` namespace so a Tailwind config can mirror the source variables.

What's missing from this DESIGN.md spec?

A few items, documented in the Known Gaps section: precise pressed and focus states across button variants are not captured — only the base CTA and hover hex `#005451` are documented. The logged-in app surfaces (transactions, spaces, investments, account settings) are out of scope; only the public marketing canvas at n26.com is in this spec. Localized variants (en-eu vs en-de vs fr-fr) may run different hero headlines and copy density but share the token system. The rhubarb / gold / slate-blue illustration palettes appear inside product-card art rather than as CSS-rendered backgrounds and are enumerated as color tokens without component-level placements. The 257 `--*` CSS variables on `:root` include a large set of utility-class tokens (text-nemo*, spacing-nemo*) that mirror Tailwind theme keys rather than carry brand voice.

N26 Design System

N26's neobank design system as a DESIGN.md file.

About N26 DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source n26.com

Banking & Payments
Fintech & Crypto

N26's marketing canvas is the Berlin neobank's argument for a fully-mobile retail bank built around a single saturated teal. The hex `#088177` is the brand: it fills the hero band edge-to-edge, it fills the primary "Open bank account" pill, and it carries link emphasis through the nav. Display type is N26-Extended at weight 400 — every heading from a 14px section eyebrow up to the 80px hero ("The first bank you'll love") renders at the one weight. There is no bold display tier. Body type is N26 (the house grotesk) at weights 400 (prose) and 500 (labels, nav links, button text) with positive `0.3px` letter-spacing on every reading size — wider than zero, against the convention of negative-tracked sans serifs in fintech. The button radius is the literal value `6px`, not the customary 9999 or 500; N26 commits to a small-corner geometry across a `2px / 4px / 6px / 8px / 24px` radii scale and renders no pills.

This page packages the N26 marketing canvas into a single DESIGN.md file built on the Google Labs DESIGN.md specification. Inside the spec: 19 color tokens grouped into brand-teal, rhubarb, gold, slate-blue, ink, and surface roles drawn from the brand's `--color-nemo*` CSS variable namespace; 11 typography tokens spanning an 80px hero down to a 14px caption with the full N26-Extended 400 display stack and N26 400/500 body stack; six radius tokens including the load-bearing `6px` button corner and `24px` card corner; nine spacing tokens climbing from a 2px micro-gap up to a 132px section band; and 18 component tokens covering buttons, the QR-download card, the cream product card, the teal hero band, the white catalogue band, the top nav, and the legal-link footer. Every value is quoted as an exact hex, pixel, or weight number.

A working React or Next.js developer drops the file into Claude, Cursor, or GitHub Copilot and the agent reproduces N26's saturated-teal mobile-bank rhythm rather than a generic neobank dashboard. Tokens map onto Tailwind config or CSS variables; the four-family chromatic stack maps onto the brand's `nemo*` prefix in the source CSS. The system is worth studying for one disciplined choice that distinguishes it from Monzo's white-on-cream restraint and Mercury's dark-canvas inversion: N26 collapses canvas and CTA onto the same teal hex `#088177`. Where most fintech brands separate the surface voltage from the action voltage, N26 fuses them — the hero band is the button is the brand.

What makes it distinct

Teal as both canvas and CTA`#088177` fills the hero band and the primary button, the rare brand that uses one hex for surface and action
Display weight 400 across every headingN26-Extended never appears above weight 400, the inverse of Monzo's single-weight-800 commitment
Four-family chromatic stackteal, rhubarb `#b55b64`, gold `#a67931`, and slate-blue `#205b6b` coexist as named `--color-nemo*` CSS variables
Tight `6px` button radius on a small-radii scale2px / 4px / 6px / 8px / 24px, with no pill geometry anywhere in the system
Positive `0.3px` letter-spacing on bodyevery N26 body token tracks wider than zero, against the Sohne / Inter negative-tracking default

Live at n26.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

n26.com

Explore N26

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

N26 design system FAQ

Common questions about N26's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

N26 — official site

The Berlin neobank's marketing canvas — source of every hex, font, and radius in this spec.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use N26 in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→