N26 Mobile — design system & UI screens
German fintech banking app showing digital Mastercard and account management. The screen displays a notification about two free ATM withdrawals this month, a virtual Mastercard branded N26 in soft mint green, and two account cards below: a personal checking account with €3,526 balance and a joint "Gemeinschaftskonto" (shared account) with Marco & Maja holding €2,000. Layout stacks notification, digital card preview, and account balance cards vertically with teal and light blue background sections.
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-mobile.
Decoded design system
N26 Mobile's decoded design system: background #FFFFFF, text #000000, accent #088177, link #088177, primary #088177; type scale h1 34px / h2 22px / body 17px; 8px spacing base; 12px base radius. The single interactive/action color is #088177 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #FFFFFF |
| surface | #EFEFEF |
| border | #D8D8D8 |
| text | #000000 |
| text_muted | #606060 |
| primary | #088177 |
| accent | #088177 |
| link | #088177 |
| button_bg | #088177 |
| button_text | #FFFFFF |
Using these colors
- Action color
#088177— the single interactive color; only on things you click or must notice, never large fills. primary,accent,link,button_bgare all#088177— one role, not several (the action color).- accent
#088177— THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
Typography
- h1: 34px
- h2: 22px
- body: 17px
Spacing
- base unit: 8px
- scale: 4px, 8px, 10px, 12px, 16px, 24px, 32px, 40px, 48px, 56px
Radii
- base: 12px
- button: 12px
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.otFlat → div.overflow-hidden → 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 →