---
name: N26
description: "This design is a masterclass in modern fintech branding, using a restricted color palette and spacious layout to build trust and clarity in a complex financial environment."
version: alpha

colors:
  background: "#FAF8F5"
  primary: "#1B1B1B"
  tertiary: "#088177"
  neutral: "#6D6D6D"
  line: "rgba(233, 233, 233, 1.0)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 58px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-0.5px"
  heading:
    fontFamily: geometric-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0.3px"
  body:
    fontFamily: geometric-sans
    fontSize: 18px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.26px"
  small:
    fontFamily: geometric-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0.3px"

rounded:
  sm: 4px
  md: 8px
  lg: 24px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 40px

---

## Overview

A clean, confident fintech UI that uses a signature teal accent to guide users toward a single primary action.

*A modern, friendly bank branch in your pocket that prioritizes clarity and trust.*

## Colors

A warm off-white background with a dominant teal accent creates a trustworthy, accessible contrast for financial actions.

- **Background (`#FAF8F5`)** — uses `bg` token
- **Primary text (`#1B1B1B`)** — uses `ink` token
- **Accent (`#088177`)** — uses `accent` token
- **Muted (`#6D6D6D`)** — uses `muted` token
- **Borders (`rgba(233, 233, 233, 1.0)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** geometric-sans

## Layout

Centered container with generous vertical whitespace between sections

*Rhythm:* Standard 4px base grid with generous padding for breathing room

## Elevation & Depth

- rgba(0, 0, 0, 0.2) 0px 4px 8px 0px
- Borders: Subtle 1px borders for structural separation and interactive elements

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 24px
- `pill`: 999px

## Components

- **button:** Rounded pill-shaped CTAs with high contrast, either teal background on light or white background on teal
- **card:** Large rounded containers for media and content, often with 24px border radius
- **hero:** Full-width teal or image-backed section with centered large typography and a single primary CTA

## Do's and Don'ts

**Don't:**
- Don't use a pure white (#FFFFFF) for the main background — the screenshot shows a warm off-white (#FAF8F5) instead.
- Don't use multiple competing accent colors — the screenshot shows a single dominant teal (#088177) as the primary accent.
- Don't use decorative or script fonts — the screenshot uses a clean, custom geometric sans-serif for all UI text.
- Don't use harsh square corners for primary containers — the screenshot shows large, generous border radii (24px) for media cards.
- Don't use thin, light borders for separation — the screenshot uses a very subtle light gray (#E9E9E9) for horizontal rules.
- Don't use dark mode as a default — the screenshot primarily showcases a light, bright interface with teal accents.

---

## System Prompt (paste into AI agent)

```
N26 is a premium fintech banking platform that balances a friendly, accessible tone with professional trust. The visual identity is built around a signature teal accent (#088177) on a warm off-white background (#FAF8F5), creating a high-contrast yet welcoming environment for financial activities. The typography is a clean geometric sans-serif that prioritizes readability and a modern feel, using large display sizes for key headlines. Layouts are spacious and centered, relying on a consistent 4px base grid and generous padding to prevent information overload. A primary CTA with a pill-shaped border radius is the focal point of almost every section. The interaction design is subtle, using smooth 0.3s transitions on hover and click. Critical design constraints: never use multiple competing accent colors; never use pure white backgrounds; never use harsh square corners for main content cards; avoid dense, jargon-heavy text blocks; and maintain a single, strong primary call-to-action per section to preserve the clean, focused user experience.
```