--- name: N26 colors: primary: '#088177' primary-strong: '#045e58' primary-deep: '#005451' primary-heavy: '#003b39' primary-light: '#a8ded8' primary-bright: '#d8edeb' primary-mist: '#809d9c' rhubarb: '#b55b64' rhubarb-strong: '#b04364' rhubarb-deep: '#8e1b44' rhubarb-light: '#ffdce1' lagoon: '#1d6ea2' lagoon-deep: '#00395f' lagoon-light: '#c6eaff' sand: '#c6b29f' cream: '#faf8f5' cream-deep: '#ede7e0' foreground: '#1b1b1b' gray-strong: '#6d6d6d' gray-deep: '#2a2a2a' gray-line: '#d9d9d9' canvas: '#ffffff' typography: body: fontSize: 16px use: N26 400/500; the buttons at 500 rounded: xs: 2px sm: 4px md: 8px lg: 16px pill: 24px xl: 32px xxl: 40px components: button-primary: type: button backgroundColor: '#003b39' textColor: '#ffffff' rounded: 24px height: 48px padding: 12px 24px typography: 16px / 500 hover: '#045e58' focus: 'ring 0 0 0 2px #ffffff, 0 0 0 4px #045e58' use: Girokonto eröffnen — the account-opening pill in --color-nemoTealHeavy. Hover lightens to --color-nemoTealStrong over 0.15s; focus draws a double ring, 2px white inside 4px teal. pressed: 'bg #045e58 (:hover + :active)' button-tonal: type: button backgroundColor: rgba(198,178,159,0.25) textColor: '#003b39' rounded: 24px height: 48px padding: 12px 24px typography: 16px / 500 hover: rgba(198,178,159,0.5) focus: 'ring 0 0 0 2px #ffffff, 0 0 0 4px #045e58' use: Login in the header — sand at 25% (--color-nemoSand25) with a deep-teal label. Hover doubles the sand to 50%; focus is the same double ring. omitted: - section: spacing reason: No verified values in current evidence. fonts: roles: sans: N26 display: N26-Extended --- # Design System Inspiration of N26 ## Overview ### Visual Theme & Atmosphere N26 is a mobile bank from Berlin — a current account opened and run from a phone. Its look was set in a rebrand announced on its own blog on 19 December 2018: a rounder, heavier logo, a new typeface, and a palette that left the earlier mint behind for **teal**, "our primary branding color", **golden wheat**, **rhubarb** and **petrol blue**. Christian Hertlein, N26's Head of Design, described the choice: at first glance "quite a traditional color set — a blue; a yellow; a green", but on a second look "each an uncommon version of the simpler shade". Eight years later the site still runs on exactly those four families. The page is white and warm cream **`#faf8f5`**, the ink a soft black **`#1b1b1b`**, the brand teal **`#088177`** in links and accents, a deep teal **`#003b39`** on the account-opening button, and the golden wheat — here named sand, **`#c6b29f`** — as a translucent fill on quiet buttons. Buttons are pills; cards are rounded at 16px. What makes it worth reading: - **The palette is the rebrand, verbatim.** `--color-teal-*`, `--color-rhubarb-*`, `--color-lagoon-*` (petrol blue) and `--color-nemoSand*` (golden wheat) map one-to-one onto the four colours the 2018 post names. - **Every token has a nemo name.** `--color-nemoTealHeavy`, `--text-nemo16`, `--spacing-nemo24`, `--radius-nemo24`, `--tracking-nemoWide` — one prefix across the system. - **Focus is a double ring**: 2px of white inside 4px of teal, on every measured button. #### Primary tasks - Open a current account (Girokonto eröffnen); log in. - Compare account plans; read about banking, saving, investing and travel. ### Brand Narrative N26 set out to be a bank people might like, and its 2018 rebrand said so in colour: familiar hues — a blue, a yellow, a green — each made slightly unusual. The site has kept that palette intact, named every token in one consistent vocabulary, and put its care into details like a focus ring that works on any background and fallback fonts tuned so text does not shift as the brand face arrives. ### Principles - **Familiar, then unusual.** Teal, wheat, rhubarb, petrol. - **One vocabulary.** Every token is nemo-named. - **Soft and round.** Cream grounds, pill buttons, a soft black. ### Personas Not researched. No persona claim is made from a UI capture. ## Colors Measured with `getComputedStyle` on `n26.com/de-de`: 305 root custom properties. **Tailwind v4's engine variables are excluded** (29 `--tw-*`, and the stock container and drop-shadow scales), as are 56 hashed build variables (`--_1n4x04z*`, `--_1yr65jo*`) that redirect to named tokens. None of the colours are Tailwind defaults — all are flat hex values. ### Teal — the brand - **Primary** (`#088177`) — `--color-teal-500`, `--color-nemoTeal`. Links and accents (21 text elements). - **Primary Strong** (`#045e58`) — `teal-700`, `--color-nemoTealStrong`. The primary button's hover and the outer focus ring. - **Primary Deep** (`#005451`) — `teal-800` · **Primary Heavy** (`#003b39`) — `teal-900`, `--color-nemoTealHeavy`, the account-opening button and deep-teal labels. - **Primary Light** (`#a8ded8`) — `teal-200` · **Primary Bright** (`#d8edeb`) — `teal-100` · **Primary Mist** (`#809d9c`) — `teal-450`. ### Rhubarb, lagoon, sand - **Rhubarb** (`#b55b64`) with **Rhubarb Strong** `#b04364`, **Rhubarb Deep** `#8e1b44`, **Rhubarb Light** `#ffdce1` (and `#44021d`, `#f5e1e3` at the ends). - **Lagoon** — the petrol blue — (`#1d6ea2`) with **Lagoon Deep** `#00395f` and **Lagoon Light** `#c6eaff`. - **Sand** — the golden wheat — (`#c6b29f`), used mostly translucent: `--color-nemoSand15` `#c6b29f26`, `-25` `#c6b29f40`, `-50` `#c6b29f80` (rgba 15%, 25%, 50%). ### Ink, grey, cream - **Foreground** (`#1b1b1b`) — `--color-black` and `--color-nemoBlack`. Every `

`, 459 text elements. Not pure black. - **Gray Strong** (`#6d6d6d`) · **Gray Deep** (`#2a2a2a`) · **Gray Line** (`#d9d9d9`). - **Cream** (`#faf8f5`) — `--color-nemoCream`, section backgrounds · **Cream Deep** (`#ede7e0`) · **Canvas** (`#ffffff`). ## Typography ### Font family Two families load (`document.fonts`): **N26** at 400, 500 and 600 — body, navigation and buttons, `--font-standard: N26, N26-Fallback, sans-serif` — and **N26-Extended** at 500 for headings, `--font-extended`. Both are self-hosted under `/_build/fonts/`, and the files are named for the face underneath: `GT-America-Standard-Regular`, `GT-America-Standard-Medium`, `GT-America-Extended-Medium`, and `N26-Sans-Extended-Medium`. The CSS names are N26's; the files say most of it is GT America. The 2018 post mentions a new typeface without naming it. Metric-tuned fallback faces (`N26-Fallback`, `N26-Extended-Fallback`, both local Arial with `size-adjust` and ascent/descent overrides) are declared so the layout does not jump while the fonts load. ### Scale `--text-nemo12` to `--text-nemo80`, 21 sizes each with its own line height. Weights `--font-weight-nemoNormal` 400 and `-nemoMedium` 500. Tracking is slightly open: `--tracking-nemoWide` 0.015625em, `-nemoWider` 0.01875em. ## Layout - Spacing tokens `--spacing-nemo0 … nemo132` in pixels. - Named z-index layers: tooltip 980, floating button 990, overlay-under-header 995, dialog 998, header 999, overlay 1000, modal 1001. - Header heights are tokens per breakpoint (63 / 69 / 73px); section heights are computed from the viewport minus the header. ### Responsive Behavior **Not measured** beyond the breakpoint header-height tokens. Desktop 1440×1000 only. ## Elevation & Depth Flat at rest — no drop shadows in the measured view. Separation comes from cream and sand fills and from radius. The only shadow is the focus ring. ## Motion & Easing Buttons transition over `--default-transition-duration` 0.15s; 16 `--animate-*` shorthands (slideUp, fadeIn, accordionSlideDown/Up, shimmer, scaleIn/Out, dropDownScaleIn/Out) and three `--ease-*` curves are declared. --- **Tier 1 sources:** https://n26.com/de-de (live homepage — 305 root custom properties read via `getComputedStyle`, Tailwind and build variables excluded; two components measured at rest, hover and focus after rejecting the consent banner; N26 and N26-Extended loaded, captured 2026-09-26); https://n26.com/zz-this-does-not-exist-omd-probe (nonsense-path control — a real HTTP 404, "Whoops, that page cannot be found", captured 2026-09-26); https://n26.com/en-eu/blog/n26-new-logo-new-colors (N26 blog, 2018-12-19 — "Introducing our new look": teal, golden wheat, rhubarb and petrol blue; Christian Hertlein's quote; a new logo and typeface, read 2026-09-26) **Regional sources:** https://www.deutsche-startups.de/2018/03/20/5-knallharte-fakten-zum-fintech-wunderkind-n26/ (deutsche-startups.de, 2018-03-20 — "5 knallharte Fakten zum FinTech-Wunderkind N26") ## Components Two components, measured in one browser session after rejecting the consent banner (Usercentrics), focus read under a real Tab key before the pointer moved, hover confirmed with `:hover` matched. - **Primary** — Girokonto eröffnen: `#003b39`, white N26 16px/500, a 24px-radius pill 48px tall, `12px 24px`. Hover lightens to **`#045e58`** over 0.15s. - **Tonal** — Login: sand at 25% (`rgba(198,178,159,0.25)`), `#003b39` label, the same pill. Hover doubles the sand to 50%. ### Focus is authored Both draw `box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #045e58` under `:focus-visible` — a white gap and a teal ring, readable on white and on teal alike. ### Radius `--radius-nemo2 … nemo40`. Rendered: **16px** ×39 (cards), **24px** ×27 (pills), 32px ×13, 8px ×9, 40px ×8, fully round ×8, plus top-only `8px 8px 0 0` and `16px 16px 0 0`. ### States Two components. Hover: the primary lightens to `#045e58`; the tonal button doubles its sand. Focus: the double ring on both. The plan-selection buttons, tabs and FAQ accordions on the comparison page were not measured. No disabled state was observed. Live state probe, 2026-10-16 (`https://n26.com/de-de`), `button-primary`: pressed — bg #045e58. ## Do's and Don'ts ### Do - Keep to the four rebrand families: teal, rhubarb, lagoon, sand. - Use `#003b39` for the account-opening action and `#088177` for links. - Use sand translucently (15–50%) for quiet buttons and chips. - Give every focusable element the white-and-teal double ring. ### Don't - Don't swap in Tailwind's default palette; N26's colours are its own. - Don't use pure black for text; the ink is `#1b1b1b`. - Don't square off buttons — they are pills. ## Voice & Tone Not assessed as authored voice. The German page is functional ("Girokonto eröffnen"); the English page leads with "Love your bank". ## Agent Prompt Guide ### Quick Color Reference `#088177` teal · `#045e58` teal strong · `#003b39` teal heavy · `#b55b64` rhubarb · `#1d6ea2` lagoon · `#c6b29f` sand · `#faf8f5` cream · `#1b1b1b` ink · `#ffffff` white ### Example Component Prompts - "A 48px pill: `#003b39`, white 16px/500, 24px radius; hover `#045e58`; focus `0 0 0 2px #fff, 0 0 0 4px #045e58`." - "A tonal pill: sand `rgba(198,178,159,0.25)` with a `#003b39` label; hover 50% sand."