the_online_bank___style_reference:
  info: "> Digital vault in deep ocean teal — a bank that earns calm through quiet white space and a single confident color."

  theme: "light"

  info: "N26 presents a calm, confident digital banking sanctuary anchored by a single deep teal hero that commands the viewport while the rest of the interface recedes into warm off-white space. The visual hierarchy is built on contrast: dense dark ink (#1b1b1b) on near-white canvas (#faf8f5), with teal appearing as purposeful punctuation for primary actions and brand moments rather than decoration. Typography carries a distinctive tension between the compact, slightly tracked N26 sans-serif used for navigation and body content, and the wider N26-Extended display face that gives headlines room to breathe at 58–80px. Components feel architectural and minimal — thin borders, generous padding, small radii on controls, large radii on imagery — reflecting a European design-banking sensibility where trust is conveyed through restraint rather than ornament."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Deep Teal | `#088177` | `--color-deep-teal` | Teal supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"
    info: "| Ink | `#1b1b1b` | `--color-ink` | Primary body text, headings, icon strokes, link text, and nav labels — a near-black that softens to charcoal, avoiding the harshness of pure black on warm white |"
    info: "| Canvas Warmth | `#faf8f5` | `--color-canvas-warmth` | Page background — a warm, paper-like off-white that gives the entire interface a human, editorial quality distinct from clinical SaaS whites |"
    info: "| Surface White | `#ffffff` | `--color-surface-white` | Light supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color |"
    info: "| Hairline | `#e9e9e9` | `--color-hairline` | Subtle borders, dividers between content blocks, and input field outlines — light enough to recede but present enough to structure information |"
    info: "| Border Soft | `#d9d9d9` | `--color-border-soft` | Supporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color |"
    info: "| Pure Black | `#000000` | `--color-pure-black` | Reserved for icon fills and the rare element requiring maximum contrast — used sparingly alongside the softer Ink |"
    info: "| Teal Mist | `#d8edeb` | `--color-teal-mist` | Light teal-tinted surface for accent backgrounds, highlight panels, and soft washes that echo the brand color without dominating |"
    info: "| Blush Neutral | `#f5e1e3` | `--color-blush-neutral` | Warm pink-tinted surface for category differentiation in editorial layouts — used as a subtle alternative to teal-tinted sections |"

  tokens___typography:

    n26___the_workhorse_sans_serif_for_all_navigation__body_copy__buttons__labels__and_ui_micro_text__weight_500_for_emphasis__700_for_primary_action_labels_and_key_headings__slight_positive_tracking_0_008_0_019em_gives_small_sizes_a_controlled__legible_quality___the_custom_feel_comes_from_this_restrained_openness_rather_than_display_flourishes_____font_n26:
      - "**Substitute:** Inter, DM Sans, or system-ui"
      - "**Weights:** 400, 500, 700"
      - "**Sizes:** 11px, 14px, 16px, 18px, 20px, 24px"
      - "**Line height:** 1.33, 1.38, 1.43, 1.50, 1.60"
      - "**Letter spacing:** 0.0080em at 24px, 0.0100em at 18px, 0.0160em at 14px, 0.0190em at 11px — tracking widens as size decreases for optical balance"
      - "**Role:** The workhorse sans-serif for all navigation, body copy, buttons, labels, and UI micro-text. Weight 500 for emphasis, 700 for primary action labels and key headings. Slight positive tracking (0.008–0.019em) gives small sizes a controlled, legible quality — the custom feel comes from this restrained openness rather than display flourishes."

    n26_extended___display_face_reserved_for_hero_headlines__section_titles__and_large_statement_copy__the_wider_proportions_at_58_80px_create_breathing_room_that_contrasts_the_compact_n26_body_face___this_duality_tight_ui_type___expansive_display_type_is_the_typographic_signature__normal_letter_spacing_lets_the_wide_letterforms_do_the_work_____font_n26_extended:
      - "**Substitute:** Inter Display, Söhne Breit, or a wide-proportion alternative"
      - "**Weights:** 400, 500"
      - "**Sizes:** 18px, 32px, 44px, 58px, 80px"
      - "**Line height:** 1.10, 1.20, 1.25, 1.50"
      - "**Role:** Display face reserved for hero headlines, section titles, and large statement copy. The wider proportions at 58–80px create breathing room that contrasts the compact N26 body face — this duality (tight UI type + expansive display type) is the typographic signature. Normal letter-spacing lets the wide letterforms do the work."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 11px | 1.38 | 0.21px | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | 0.22px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | 0.16px | `--text-body` |"
      info: "| subheading | 20px | 1.43 | 0.16px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.38 | 0.19px | `--text-heading-sm` |"
      info: "| heading | 32px | 1.25 | — | `--text-heading` |"
      info: "| heading-lg | 44px | 1.2 | — | `--text-heading-lg` |"
      info: "| display | 80px | 1.1 | — | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 192 | 192px | `--spacing-192` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| images | 24px |"
      info: "| inputs | 4px |"
      info: "| buttons | 8px |"
      info: "| small_elements | 4px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 64-80px"
      - "**Card padding:** 32-48px"
      - "**Element gap:** 8-16px"

  components:

    primary_filled_button:
      role: "Top-of-page conversion actions, nav CTAs"

      info: "Filled with #088177 Deep Teal, white text, N26 weight 500 at 14-16px, 8px border-radius, approximately 8px 20px padding. Sits in the top nav as the highest-prominence action on the page."

    inverse_button:
      role: "CTAs placed on teal hero backgrounds"

      info: "White background, #1b1b1b Ink text, 8px border-radius, 12px 24px padding. Used on the full-bleed teal hero to create inversion contrast while maintaining the same compact button shape."

    text_link_nav_item:
      role: "Primary navigation items"

      info: "N26 weight 500 at 16px, #1b1b1b text, no underline by default, 8px horizontal padding. Generous spacing between items creates the quiet, unhurried navigation rhythm."

    hero_band:
      role: "Full-bleed opening section"

088177_deep_teal_background_spanning_the_full_viewport_width__centered_content_with_80px_vertical_padding__n26_extended_display_headline_at_58_80px_in_white__body_subtext_at_18px_in_white__followed_by_the_inverse_button__the_color_band_itself_is_the_hero___no_image__no_gradient:

    risk_disclosure_strip:
      role: "Regulatory/compliance information panels"

      info: "White background, #e9e9e9 hairline borders, small N26 body text at 14px in #1b1b1b. Two-column layout with 1/6 and 6/6 risk indicators. Padding 16-24px, no rounded corners — utilitarian and informational."

    brand_wordmark:
      role: "Logo and brand mark in nav"

      info: "N26 in condensed form, weight 500, approximately 20-24px, #1b1b1b. The overline/tilde above the N is a distinctive brand mark. Links to homepage from any page."

    card_surface:
      role: "Content cards on warm canvas"

ffffff_background_on_the_faf8f5_canvas__no_shadow__24px_border_radius_for_image_forward_cards_or_8px_for_compact_info_cards__32_48px_internal_padding__elevation_comes_from_color_contrast__not_shadow:

    app_download_qr:
      role: "Floating app acquisition element"

      info: "Small white card with 8px radius, fixed-position bottom right, QR code image with 'Get the app' caption at 14px N26 weight 500. Stays accessible without disrupting the main content flow."

    locale_selector:
      role: "Language/country switcher in nav"

      info: "Inline element with #1b1b1b text at 14px, small flag indicator, minimal styling — appears as a simple text link rather than a dropdown chrome."

    hairline_divider:
      role: "Section separators and content structure"

      info: "1px solid #e9e9e9 horizontal rule. Used between risk disclosure rows and to separate content blocks without requiring additional spacing."

  do_s_and_don_ts:

    do:
      - "Use #088177 Deep Teal for filled primary action buttons and full-bleed brand sections — it is the only chromatic color with permission to dominate a screen."
      - "Set all page backgrounds to #faf8f5 Canvas Warmth; reserve #ffffff for card surfaces that need to lift off the canvas."
      - "Apply N26-Extended at 44-80px with line-height 1.10-1.25 for display headlines; the wide proportions need scale to read correctly."
      - "Use 8px border-radius for buttons and interactive controls; reserve 24px for image cards and large media."
      - "Maintain section gaps of 64-80px to preserve the spacious, unhurried rhythm visible in the hero-to-content transition."
      - "Use #e9e9e9 for all hairline borders and dividers — never heavier than 1px on the warm canvas."
      - "Apply slight positive tracking (0.008-0.019em) to all N26 text at 24px and below for optical balance at small sizes."

    don_t:
      - "Never introduce additional accent colors — the entire system runs on Ink, white, and one teal. Adding a second hue breaks the brand discipline."
      - "Don't use #000000 for body text — always use #1b1b1b Ink for softer contrast on the warm canvas."
      - "Don't apply N26-Extended to body copy or UI micro-text — it is a display face only and loses legibility below 24px."
      - "Never use drop shadows for elevation — N26 achieves layering through background color contrast (#faf8f5 → #ffffff → tinted surfaces) alone."
      - "Don't set body text below 14px — the type scale starts at 11px for legal/caption text only."
      - "Never use border-radius larger than 8px on buttons or smaller than 24px on hero imagery — the radius scale is intentional and narrow."
      - "Don't place colored buttons on the teal hero — always use the white inverse button on brand-colored backgrounds to maintain the inversion relationship."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Canvas | `#faf8f5` | Base page background — warm off-white that gives the entire interface its editorial, paper-like quality |"
    info: "| 2 | Surface | `#ffffff` | Cards, elevated panels, and content blocks that need visual lift from the canvas |"
    info: "| 3 | Teal Mist | `#d8edeb` | Light teal-tinted accent surface for highlight panels and category sections |"
    info: "| 4 | Blush | `#f5e1e3` | Warm pink-tinted surface for editorial category differentiation |"
    info: "| 5 | Brand Band | `#088177` | Full-bleed brand hero sections and primary action fills — the highest-prominence surface |"

  elevation:

    info: "N26 deliberately avoids drop shadows. Elevation is achieved entirely through background color layering: the warm canvas (#faf8f5) provides the base, white cards lift off it through tonal contrast alone, and the deep teal brand band sits as the highest visual layer. This shadow-free approach reinforces the editorial, paper-like quality and avoids the generic SaaS card-with-shadow pattern."

  imagery:

    info: "The homepage is text-dominant with minimal imagery. The teal hero band relies on typography alone — no background image, illustration, or photographic element. Photography, when present on deeper pages, is treated as tight, contained crops with 24px border-radius, no overlays or duotone treatments. The visual language is fundamentally typographic and color-driven, with the brand teal serving as the primary 'image' on the hero."

  layout:

    info: "The page model is centered and max-width contained at approximately 1200px, with the hero band breaking to full-bleed for the teal section. The hero pattern is a centered headline over a solid color field — no split layout, no media. Below the hero, content flows in centered stacks with generous 64-80px vertical breathing room between sections. Navigation is a minimal top bar with brand mark left, primary nav links center, and action buttons (login + primary CTA) right. The overall density is spacious and editorial rather than information-dense."

  agent_prompt_guide:

    quick_color_reference:
    - "Primary text: #1b1b1b"
    - "Background (canvas): #faf8f5"
    - "Surface (cards): #ffffff"
    - "Border/hairline: #e9e9e9"
    - "Brand accent: #088177"
    - "primary action: no distinct CTA color"

    example_component_prompts:

    info: "No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color."

    - "**Nav Bar**: #faf8f5 background, 64px height, 48px horizontal padding. Brand mark left in N26 at 20px weight 500 #1b1b1b. Nav items center in N26 weight 500 at 16px #1b1b1b, 32px gap between items. Right side: 'Log in' text link in N26 weight 500 at 14px #1b1b1b, then 'Open free bank account' filled button with #088177 background, white text, N26 weight 500 at 14px, 8px border-radius, 8px 20px padding."

    - "**Content Card**: #ffffff background on #faf8f5 canvas, 24px border-radius, 32-48px internal padding. No shadow. Heading in N26 weight 700 at 24px #1b1b1b, body text in N26 weight 400 at 16px #1b1b1b, line-height 1.50."

    - "**Info Strip**: #ffffff background, 1px solid #e9e9e9 top and bottom borders, 16-24px vertical padding, two-column layout with 32px column gap. Left column: N26 weight 500 at 24px #1b1b1b. Right column: N26 weight 400 at 14px #1b1b1b."

    - "**App Download Widget**: #ffffff background, 8px border-radius, 16px padding, fixed bottom-right position. QR code image 80x80px, caption 'Get the app' in N26 weight 500 at 14px #1b1b1b below."

  similar_brands:

    - "**Revolut** — Same teal-or-purple single-accent strategy on a light neutral canvas, with a hero band that dominates the viewport through color rather than imagery"
    - "**Monzo** — Shared approach of using one vivid brand color as a full-bleed hero, with otherwise monochrome light interface and minimal ornamentation"
    - "**Klarna** — Similar typographic-forward hero with a solid brand color band, clean light backgrounds, and compact button styling"
    - "**Wise (TransferWise)** — Same financial-product minimalism: warm off-white canvas, single brand accent, generous spacing, and editorial typography-driven hero"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-deep-teal: #088177;
          --color-ink: #1b1b1b;
          --color-canvas-warmth: #faf8f5;
          --color-surface-white: #ffffff;
          --color-hairline: #e9e9e9;
          --color-border-soft: #d9d9d9;
          --color-pure-black: #000000;
          --color-teal-mist: #d8edeb;
          --color-blush-neutral: #f5e1e3;
        
          /* Typography — Font Families */
          --font-n26: 'N26', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-n26-extended: 'N26-Extended', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.38;
          --tracking-caption: 0.21px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: 0.22px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 0.16px;
          --text-subheading: 20px;
          --leading-subheading: 1.43;
          --tracking-subheading: 0.16px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.38;
          --tracking-heading-sm: 0.19px;
          --text-heading: 32px;
          --leading-heading: 1.25;
          --text-heading-lg: 44px;
          --leading-heading-lg: 1.2;
          --text-display: 80px;
          --leading-display: 1.1;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-192: 192px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64-80px;
          --card-padding: 32-48px;
          --element-gap: 8-16px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-3xl: 24px;
        
          /* Named Radii */
          --radius-images: 24px;
          --radius-inputs: 4px;
          --radius-buttons: 8px;
          --radius-smallelements: 4px;
        
          /* Surfaces */
          --surface-canvas: #faf8f5;
          --surface-surface: #ffffff;
          --surface-teal-mist: #d8edeb;
          --surface-blush: #f5e1e3;
          --surface-brand-band: #088177;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-deep-teal: #088177;
          --color-ink: #1b1b1b;
          --color-canvas-warmth: #faf8f5;
          --color-surface-white: #ffffff;
          --color-hairline: #e9e9e9;
          --color-border-soft: #d9d9d9;
          --color-pure-black: #000000;
          --color-teal-mist: #d8edeb;
          --color-blush-neutral: #f5e1e3;
        
          /* Typography */
          --font-n26: 'N26', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-n26-extended: 'N26-Extended', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.38;
          --tracking-caption: 0.21px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: 0.22px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 0.16px;
          --text-subheading: 20px;
          --leading-subheading: 1.43;
          --tracking-subheading: 0.16px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.38;
          --tracking-heading-sm: 0.19px;
          --text-heading: 32px;
          --leading-heading: 1.25;
          --text-heading-lg: 44px;
          --leading-heading-lg: 1.2;
          --text-display: 80px;
          --leading-display: 1.1;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-192: 192px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-3xl: 24px;
        }