N26 — design system & UI screens
Full-bleed teal hero anchored by an oversized white sans-serif headline "The first bank you'll love" centered above a short subhead and a white pill CTA. Below it sits a large rounded-corner lifestyle photo of a hand holding a phone running the N26 app, with a floating white "Get the app" QR-code card pinned bottom-right. The signature move is the saturated single-color teal canvas with a huge centered wordmark and warm bokeh product photo punching through the flat brand field.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/n26.
Decoded design system
N26's decoded design system: background #FFFFFF, text #1B1B1B, accent #088177, link #088177, primary #003B39; type scale h1 80px / h2 58px / body 16px; 8px spacing base; 0px base radius. The single interactive/action color is #003B39 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #FFFFFF |
| surface | #F1F1F1 |
| border | #DCDCDC |
| text | #1B1B1B |
| text_muted | #717171 |
| primary | #003B39 |
| accent | #088177 |
| link | #088177 |
| secondary | #E3D9CF |
| button_bg | #003B39 |
| button_text | #FFFFFF |
Using these colors
- Action color
#003B39— the single interactive color; only on things you click or must notice, never large fills. primary,button_bgare all#003B39— one role, not several (the action color).accent,linkare all#088177— one role, not several (the action color).- accent
#088177— accent for emphasis — keep it rare on the page. - secondary
#E3D9CF— optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.
Typography
- Heading: N26 Extended
- Body: N26
- h1: 80px
- h2: 58px
- body: 16px
Spacing
- base unit: 8px
- scale: 4px, 8px, 10px, 12px, 16px, 24px, 32px, 40px, 48px, 56px
Radii
- base: 0px
- button: 24px
Shadows (elevation)
- card:
rgba(0, 0, 0, 0.2) 0px 0px 18px 0px
Motion
Micro-interactions run at 150ms (dominant) with cubic-bezier(0.4, 0, 0.2, 1).
- durations: 150ms · 300ms · 600ms
- easings:
cubic-bezier(0.4, 0, 0.2, 1)·cubic-bezier(0, 0.37, 0.28, 1) - animated properties: color, background-color, border-color, outline-color
Native design tokens
| Token | Value |
|---|---|
--color-nemoSand70 | #646054b3 |
--color-nemoLagoonStrong | #1d6ea2 |
--color-nemoRhubarbStrong | #b04364 |
--color-nemoTealBright | #d8edeb |
--color-gray-300 | #d6d6d6 |
--color-gray-500 | #d9d9d9 |
--color-lagoon-700 | #1d6ea2 |
--color-rhubarb-800 | #8e1b44 |
--color-white | #fff |
--color-nemoWhite | #fff |
…and 54 more measured on the page.
Button states (measured)
- primary hover: background
#045E58
Layout (measured)
- container max-width:
1280px - nav: 73px
Motion choreography (measured)
Load order: div.animate-slideUp×2 → div.nemoxs:px-nemo0 → div.overflow-hidden → div.otFlat → div.overflow-hidden → div.overflow-hidden
Stagger: div ×3 — 100ms apart.
Overlay recipe (measured)
dialog panel: #FAF8F5 · radius 16px
Responsive (measured)
- breakpoints: 320px · 426px · 475px · 550px · 640px · 768px
- mobile (390px): hero 48px · nav hamburger
Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →