--- version: alpha name: N26-design-analysis description: "A mobile bank in deep teal greens (#003b39, #045e58, #088177) and warm creams, with large N26 Extended headlines at regular weight, the N26 text face with open tracking, dark teal pill buttons, translucent sand pills and 40px rounded feature panels." status: Draft appVersion: "measured in a browser, 2026-10-15" platformsCovered: [Web] reviewer: "" verifiedAt: "" colors: primary: "#003b39" on-primary: "#ffffff" teal: "#088177" teal-mid: "#045e58" ink: "#1b1b1b" ink-soft: "#2a2a2a" ink-muted: "#6d6d6d" canvas: "#ffffff" cream: "#faf8f5" cream-deep: "#ede7e0" sand-wash: "#f1ece7" border: "#d9d9d9" border-light: "#e9e9e9" login-ink: "#121212" typography: # Font note: "N26-Extended" is a private font and is not available in open fonts. Closest open alternative: "Geist". # Font note: "N26" is a private font and is not available in open fonts. Closest open alternative: "Geist". display: fontFamily: "N26-Extended, sans-serif" fontSize: 80px fontWeight: 400 lineHeight: 88px headline: fontFamily: "N26-Extended, sans-serif" fontSize: 58px fontWeight: 400 lineHeight: 64px title: fontFamily: "N26-Extended, sans-serif" fontSize: 24px fontWeight: 500 lineHeight: 32px subtitle: fontFamily: "N26, sans-serif" fontSize: 18px fontWeight: 500 lineHeight: 28px letterSpacing: 0.28px body: fontFamily: "N26, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: 0.3px button: fontFamily: "N26, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 24px letterSpacing: 0.3px small: fontFamily: "N26, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: 0.26px rounded: xs: 2px sm: 8px md: 16px lg: 24px xl: 40px pill: 9999px spacing: xs: 4px sm: 8px md: 12px base: 16px lg: 24px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.lg}" height: 48px padding: 12px 24px button-sand: backgroundColor: "{colors.sand-wash}" textColor: "{colors.primary}" typography: "{typography.button}" rounded: "{rounded.lg}" height: 48px padding: 12px 24px button-login: backgroundColor: "{colors.teal}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.sm}" height: 53px padding: 13px 26px nav-chip: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.pill}" height: 32px padding: 4px 8px teal-panel: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.headline}" rounded: "{rounded.xl}" padding: 40px cream-panel: backgroundColor: "{colors.cream-deep}" textColor: "{colors.ink}" typography: "{typography.headline}" rounded: "{rounded.xl}" padding: 40px --- ## Overview N26 is a European mobile bank. Its site uses three deep teal greens and two warm creams, large regular-weight headlines in the wide N26 Extended face, the N26 text face with slightly open tracking, and big panels with 40px corners. [Observed] What defines the look: 1. **Three teals.** `#088177` fills the hero, `#045e58` and `#003b39` fill feature panels, and `#003b39` is the main button. [Measured] 2. **Warm creams.** `#faf8f5` and `#ede7e0` carry calm sections and the footer, and a sand at 25 percent (`#c6b29f`) fills the Log in pill. [Measured] 3. **Wide regular headlines.** N26 Extended at 400, 80 on 88 for the hero and 58 on 64 for sections. Headlines never go bold. [Measured] 4. **Open text tracking.** The N26 text face carries +0.3px tracking at 16 and +0.26px at 14. [Measured] 5. **40px panels.** Feature panels are 1280 wide with 40px corners, plan cards 16 and buttons 24. [Measured] Source for this file: the home page, the plans page and the web app's log in page, measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass. The account comparison address returned a not-found page, and one request was refused. N26 does not publish its design system. No app captures were used. See Known Gaps. ## Core ### Colors | Role | Value | Where | |------|-------|-------| | Deep teal | `#003b39` | Main buttons, Log in text, feature panels [Measured] | | Mid teal | `#045e58` | Feature panels [Measured] | | Bright teal | `#088177` | Hero band, the web app's Log in button and links [Measured] | | Text | `#1b1b1b`, `#2a2a2a` | Body and headings [Measured] | | Muted text | `#6d6d6d` | Inactive plan tabs [Measured] | | Canvas | `#ffffff` | Page [Measured] | | Creams | `#faf8f5`, `#ede7e0` | Calm sections, travel panel, footer [Measured] | | Sand wash | `#c6b29f` at 25 percent (about `#f1ece7` on white) | Log in pill [Measured] | | Borders | `#d9d9d9`, `#e9e9e9` | Dividers and plan tables [Measured] | ### Typography | Role | Desktop | Mobile | Face and weight | |------|---------|--------|-----------------| | Display | 80 on 88 | 48 on 56 | N26 Extended 400 [Measured] | | Headline | 58 on 64 | 38 on 46 | N26 Extended 400 [Measured] | | Plan title | 24 on 32 | not measured | N26 Extended 500 [Measured] | | Question heading | 18 on 28, +0.28px | 16 on 24 | N26 500 [Measured] | | Body | 16 on 24, +0.3px | same | N26 400 [Measured] | | Button | 16 on 24, +0.3px | same | N26 500 [Measured] | | Small | 14 on 20, +0.26px | same | N26 400 [Measured] | | Web app title | 36 on 50.4 | not measured | N26 700 [Measured] | ### Shape and spacing Feature panels use 40px corners (32 and 16 elsewhere), buttons 24 at 48 high, plan cards 16, nav chips full pills, and the web app's fields and button 8. [Measured] Buttons carry 12 by 24 padding. [Measured] ### Iconography and motion Not measured. [Inferred] ### Themes Light only. The dark color scheme pass changed nothing. [Measured] ## Platform: iOS How the N26 iOS app looks and behaves was not captured. N26 does not publish a design system, so every item below is inferred from the web design and platform conventions. No device capture was done. ### Back and up navigation Expected on iOS: Chevron plus previous title, swipe from the left edge. Not measured. [Inferred] ### Primary navigation Expected on iOS: Bottom tab bar, about five items. A bottom tab bar for home, spaces, payments and the profile is expected. [Inferred] ### Main action Expected on iOS: Nav bar or bottom bar button. A teal transfer or pay action. [Inferred] ### Sheets, dialogs and messages Expected on iOS: Action sheets, alerts, modals. Not measured. [Inferred] ### Controls Expected on iOS: Cupertino switches, pickers, segmented controls. Not measured. [Inferred] ### Text sizing Expected on iOS: Dynamic Type. Not measured. [Inferred] ### Touch and pointer targets Expected on iOS: 44pt minimum. Not measured. [Inferred] ### Insets and system bars Expected on iOS: Safe areas, status bar. Not measured. [Inferred] ### Icons Expected on iOS: SF Symbols or custom. Not measured. [Inferred] ### Account and sign-in rules Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked. Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only. ### Platform conformance Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates. The app is expected to share the teals, the creams and the wide headline face with the web. [Inferred] ## Platform: Android How the N26 Android app looks and behaves was not captured. N26 does not publish a design system, so every item below is inferred from the web design and platform conventions. No device capture was done. ### Back and up navigation Expected on Android: System back and gesture, up arrow in the top bar. Not measured. [Inferred] ### Primary navigation Expected on Android: Navigation bar, rail on tablets. A bottom navigation bar for home, spaces, payments and the profile is expected. [Inferred] ### Main action Expected on Android: Floating action button. A teal transfer or pay action. [Inferred] ### Sheets, dialogs and messages Expected on Android: Bottom sheets, dialogs, snackbars. Not measured. [Inferred] ### Controls Expected on Android: Material switches, pickers, chips. Not measured. [Inferred] ### Text sizing Expected on Android: Font scale. Not measured. [Inferred] ### Touch and pointer targets Expected on Android: 48dp minimum. Not measured. [Inferred] ### Insets and system bars Expected on Android: Edge to edge, system bars. Not measured. [Inferred] ### Icons Expected on Android: Material Symbols or custom. Not measured. [Inferred] ### Account and sign-in rules Expected on Android: Account deletion and data safety requirements. Note the date checked. Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only. ### Platform conformance Expected on Android: For each important component: what Android expects, what this app does, and why it deviates. The app is expected to share the teals, the creams and the wide headline face with the web. [Inferred] ## Platform: Web The home page, the plans page and the web app log in, measured at 1440 and 390 wide. ### Back and up navigation Expected on Web: Browser back, breadcrumbs. Browser back. [Observed] ### Primary navigation Expected on Web: Top nav or sidebar. A white header with product menus (Plans, Bank, Save, Invest, Travel) as 32 high round chips, a Personal and Business switcher as 28 high chips, a sand Log in pill and a teal "Open bank account" pill, both 48 high. [Measured] ### Main action Expected on Web: Page-level button. A deep teal `#003b39` pill-like button (24px corner) with white 16px medium text, 48 high with 12 by 24 padding. [Measured] ### Sheets, dialogs and messages Expected on Web: Modals, toasts. Not measured. [Inferred] ### Controls Expected on Web: Native or custom. Plan tabs on mobile are 45 high text tabs with the selected plan in ink and the rest in `#6d6d6d`. FAQ rows are plain 18px text buttons. The web app log in uses 70 high fields with an 8px corner and a floating label, and a 53 high bright teal button. [Measured] ### Text sizing Expected on Web: Browser zoom. Sizes are fixed pixel values that step down at the mobile width. [Measured] ### Touch and pointer targets Expected on Web: Pointer and keyboard. Buttons are 48 high (53 in the web app). Nav chips are 28 to 32. [Measured] ### Insets and system bars Expected on Web: Viewport, scrollbars. Not measured. [Inferred] ### Icons Expected on Web: Any. Not measured. [Inferred] ### Account and sign-in rules Expected on Web: Not applicable unless the product has accounts. The web app log in uses email and password, with a "Forgot?" link in bright teal. [Observed] ### Platform conformance Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates. The marketing site and web app share the teals and the N26 face but use different corners: 24 on marketing buttons, 8 in the app. [Measured] ## Cross-platform consistency Consistent across platforms: the teals, the creams and the N26 faces. [Measured for web, Inferred for the apps] Intentionally different: the web app uses 8px corners and a bright teal button, while marketing uses 24px corners and the deep teal. [Measured] ## Do's and Don'ts ### Do - Build pages from the three teals and two creams. - Set headlines wide and regular weight, never bold. - Open text tracking slightly (+0.3px at 16). - Round feature panels to 40. ### Don't - Don't add a bright accent color. The palette is teal and cream. - Don't set headlines bold. - Don't use sharp panel corners. ## Known Gaps - The banking app sits behind an account. Only its log in page was measured. - The account comparison address returned a not-found page, and one request to it was refused, so the plans page stood in for it. - The iOS and Android apps were not captured, and N26 publishes no design system, so every mobile topic is inferred. - Icons, motion and modals were not measured. - N26 and N26 Extended are private. Geist was chosen for both by comparing the same line side by side (within 1 percent at 20 and at 80px). Host Grotesk and Manrope were close seconds. The extended face measured no wider than ordinary sans faces at the hero size, so a wide open face was not used. - Account deletion and store policy rules were not verified.