nuri___style_reference:
  info: "> Lavender art-deco bank lobby — pill-soft, serif-meets-stencil, cool violet bleeding into warm cream."

  theme: "light"

  info: "Nuri operates on a soft lavender canvas with a single bold typographic gesture: enormous Sharp Grotesk black-slab headlines colliding with whisper-weight Harriet Display serifs in the same line, like a financial publication cut by a graffiti stencil. The palette stays in cool violet territory across canvas, card, and hero surfaces, with a warm cream band cutting in near the footer — a deliberate cool-to-warm color temperature arc that signals a human, editorial fintech rather than a blue-and-white banking clone. Surfaces are pill-soft (9999px and 48px radii dominate), shadows are nearly absent, and accents appear as small illustrated characters and one Bitcoin-orange punctuation mark rather than as saturated UI chrome."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Hero Violet | `#beaaff` | `--color-hero-violet` | Hero section background, full-bleed brand wash — saturated lavender makes the page unmistakable from a thumbnail |"
    info: "| Card Lilac | `#e2d9ff` | `--color-card-lilac` | Card and panel surfaces — desaturated companion to Hero Violet, used for elevated content blocks on the lighter canvas |"
    info: "| Bitcoin Orange | `#f97316` | `--color-bitcoin-orange` | Accent for the Bitcoin currency icon and selective callouts — the only warm chromatic note in a cool palette, anchoring the crypto identity |"
    info: "| Warm Cream | `#fff7ed` | `--color-warm-cream` | Footer band and warm transitions — breaks the lavender monotony with a peach-tinged neutral |"
    info: "| Lavender Mist | `#f7f2ff` | `--color-lavender-mist` | Page canvas — the dominant background across most sections, a barely-there violet tint instead of pure white |"
    info: "| Off-White | `#f9fafb` | `--color-off-white` | Footer base surface, light secondary backgrounds |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Button text, inverse surfaces, card highlights on colored backgrounds |"
    info: "| Ink Plum | `#2c232e` | `--color-ink-plum` | Primary text, filled button backgrounds, dark borders — near-black with a violet undertone that keeps it on-palette |"
    info: "| Graphite | `#4b5563` | `--color-graphite` | Secondary headings, link text, subdued body copy |"
    info: "| Slate | `#6b7280` | `--color-slate` | Muted helper text, captions, tertiary metadata |"
    info: "| Steel | `#374151` | `--color-steel` | Icon strokes, button text on light surfaces, mid-emphasis labels |"
    info: "| Mist | `#e2e8f0` | `--color-mist` | Hairline borders, dividers, input outlines — the universal 1px rule throughout the UI |"
    info: "| Fog | `#d1d5db` | `--color-fog` | Button borders, disabled-state surfaces, secondary dividers |"
    info: "| Jet | `#000000` | `--color-jet` | Maximum-contrast text, logo marks, hard-edge elements where Ink Plum feels too soft |"

  tokens___typography:

    sharp_grotesk_bold___display_headlines_for_brand_words__nuri___back____extreme_weight_900_with_tight_tracking_creates_a_stencil_spray_paint_impact_that_contrasts_deliberately_with_the_serif_body_of_the_same_headline__at_118px_it_fills_the_hero_column__the_0_018em_positive_tracking_at_that_size_is_unusual_and_prevents_the_slabs_from_merging_at_extreme_scale_____font_sharp_grotesk_bold:
      - "**Substitute:** Druk Wide Bold, Knockout 90, Antonio Black"
      - "**Weights:** 900"
      - "**Sizes:** 72px, 118px"
      - "**Line height:** 0.90, 1.00"
      - "**Letter spacing:** -0.0200em at 72px, 0.0180em at 118px"
      - "**Role:** Display headlines for brand words ('NURI', 'BACK.') — extreme weight 900 with tight tracking creates a stencil/spray-paint impact that contrasts deliberately with the serif body of the same headline. At 118px it fills the hero column; the 0.018em positive tracking at that size is unusual and prevents the slabs from merging at extreme scale."

    harriet_display___editorial_serif_used_for_headline_companions__bank_is___one_tap__you_re_in__feature_section_headings__and_the_hero_subhead___weight_300_at_50_62px_is_a_restrained__magazine_display_choice_that_creates_tension_with_the_900_weight_sans_beside_it__the_0_90_line_height_at_display_sizes_keeps_stacked_lines_touching_like_fine_print_____font_harriet_display:
      - "**Substitute:** Source Serif Pro, PT Serif, Lora"
      - "**Weights:** 300, 400"
      - "**Sizes:** 24px, 30px, 50px, 55px, 62px, 112px"
      - "**Line height:** 0.90, 0.94, 1.20, 1.33"
      - "**Role:** Editorial serif used for headline companions ('BANK IS', 'One Tap. You're In.'), feature section headings, and the hero subhead — weight 300 at 50–62px is a restrained, magazine-display choice that creates tension with the 900-weight sans beside it. The 0.90 line-height at display sizes keeps stacked lines touching like fine print."

    inter___workhorse_for_body__navigation__buttons__inputs__footer_copy__card_text___weight_400_for_body__500_for_nav_links__600_for_subheadings_and_button_labels__the_tight_1_20_1_33_range_for_20_32px_sizes_keeps_mid_scale_text_compact_and_confident_____font_inter:
      - "**Substitute:** Inter (same), IBM Plex Sans, system-ui"
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 12px, 14px, 15px, 16px, 17px, 20px, 24px, 28px, 32px"
      - "**Line height:** 1.20, 1.32, 1.33, 1.40, 1.43, 1.50, 1.63"
      - "**Role:** Workhorse for body, navigation, buttons, inputs, footer copy, card text — weight 400 for body, 500 for nav/links, 600 for subheadings and button labels. The tight 1.20–1.33 range for 20–32px sizes keeps mid-scale text compact and confident."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.43 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 20px | 1.32 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.2 | — | `--text-heading-sm` |"
      info: "| heading | 32px | 1.33 | — | `--text-heading` |"
      info: "| heading-lg | 50px | 1.2 | — | `--text-heading-lg` |"
      info: "| display | 72px | 1 | -1.44px | `--text-display` |"
      info: "| display-xl | 112px | 0.9 | 2.02px | `--text-display-xl` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "spacious"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      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: "| 64 | 64px | `--spacing-64` |"
      info: "| 96 | 96px | `--spacing-96` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 48px |"
      info: "| icons | 9999px |"
      info: "| badges | 9999px |"
      info: "| inputs | 9999px |"
      info: "| buttons | 9999px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| sm | `rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0...` | `--shadow-sm` |"
      info: "| subtle | `rgba(44, 35, 46, 0.16) 0px 0px 0px 1px` | `--shadow-subtle` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 64px"
      - "**Card padding:** 24px"
      - "**Element gap:** 24px"

  components:

    dark_pill_button:
      role: "Primary form submission (Get App, Submit)"

      info: "Filled background #2c232, white text in Inter weight 600, 9999px radius, 12px 24px padding, 8px vertical internal padding on text rows. Sits inside the phone-number input on a lavender-tinted shell."

    ghost_outline_button:
      role: "Secondary action (Sign In with Passkey)"

      info: "Transparent background, 1px border in #2c232, Inter weight 600 text in #2c232, 9999px radius, 14px 24px padding. Renders as a thin dark ring on a light card surface."

    phone_number_input:
      role: "Hero lead-capture field"

      outer_pill_shell: "9999px radius, #ffffff background, 1px hairline border in #e2e8f0, 8px vertical padding. Inner: country flag prefix, Inter 16px #2c232 for number, Dark Pill Button docked inside the right edge."

    app_store_badge:
      role: "Download CTA pair"

      info: "Black (#000000) rounded rectangle, Apple/Google logo + label in white, 8px corner radius, approximately 40px tall. Paired horizontally with consistent gap."

    cryptocurrency_icon_row:
      role: "Trust signal — accepted currencies"

      info: "Small circular icons at ~32px diameter on a single row, including Bitcoin (orange #f97316 fill), Ethereum, and others. The Bitcoin circle anchors the color story; the rest are muted."

    mixed_weight_headline:
      role: "Hero display text"

      info: "A single line combining Sharp Grotesk Bold 900 at 112–118px for the brand-anchor word ('NURI', 'BACK.') with Harriet Display 300 at 50–62px for the connecting words ('BANK IS'). Tight 0.90–1.00 line-height stacks them as a single optical block."

    section_headline_serif:
      role: "Feature section titles"

      info: "Harriet Display 300–400 at 50–55px, #2c232, line-height 1.20. Used standalone on white or lavender-mist backgrounds, often centered or left-aligned beside a device mockup."

    device_mockup_frame:
      role: "Phone/app showcase"

      info: "iPhone-style bezel with thin dark border, displayed centered on Lavender Mist or Hero Violet. The interior shows the app's own UI — illustrations on a lavender card with its own CTA pills stacked vertically."

    editorial_body_text:
      role: "Hero subhead and section descriptions"

      info: "Harriet Display 300 at 20–24px, #2c232 or #4b5563, generous line-height 1.33–1.50. Feels like a magazine pull-quote rather than a SaaS subtitle."

    top_navigation_bar:
      role: "Site header"

      info: "Transparent or Lavender Mist background, no visible border. Left: small square NURI logo mark (#2c232 on lavender tile). Right: language switcher pill (#ffffff background, country flag + 'English', 9999px radius, 12px padding)."

    illustration_panel:
      role: "Decorative editorial art"

      info: "Large-scale character or object illustrations rendered in flat warm tones (browns, greens, peach) on lavender or cream backgrounds. Occupies significant vertical space near the footer — the visual equivalent of a magazine cover."

    footer_band:
      role: "Site footer with legal and download links"

      info: "Warm Cream (#fff7ed) or Off-White (#f9fafb) background, Inter 14px #4b5563 for legal copy, centered layout with Privacy/Terms links and a centered '© 2026 Nuri' copyright. App store badges and Visa/Gnosis Pay logos in a single row."

  do_s_and_don_ts:

    do:
      - "Use 9999px radius for every button, input, and interactive pill — the pill shape is the signature"
      - "Pair Sharp Grotesk Bold 900 with Harriet Display 300 in the same headline for the signature mixed-weight effect"
      - "Set page background to #f7f2ff and hero background to #beaaff — never pure white as the dominant canvas"
      - "Apply the 48px radius to cards and large containers, reserving 9999px for interactive elements"
      - "Use #2c232 for primary text and filled buttons — its violet undertone keeps it on-palette against lavender"
      - "Break sections into full-bleed color bands that transition from cool violet to warm cream toward the footer"
      - "Anchor the color story with #f97316 only on the Bitcoin currency icon — it is the sole warm accent"

    don_t:
      - "Do not use standard banking blue, green, or neutral gray as a brand color — it breaks the lavender identity"
      - "Do not apply heavy drop shadows — the system relies on surface color contrast, not elevation, for depth"
      - "Do not mix the Sharp Grotesk 900 and Harriet 300 at the same size — the contrast is in their weight difference at different sizes"
      - "Do not use border-radius values between 8px and 48px on primary surfaces — the system jumps from pill to soft-card"
      - "Do not place more than one filled chromatic button per section — the dark pill is the only primary action"
      - "Do not use stock photography or 3D renders — the visual language is flat editorial illustration on lavender"
      - "Do not set body type below 16px in Inter — the 14–16px floor preserves the spacious, magazine-like feel"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Page Canvas | `#f7f2ff` | Default page background — barely-tinted lavender |"
    info: "| 1 | Card Lilac | `#e2d9ff` | Elevated content panels and feature cards |"
    info: "| 2 | Hero Violet | `#beaaff` | Full-bleed hero band and brand-wash sections |"
    info: "| 3 | Warm Cream | `#fff7ed` | Footer band — warm counterpoint to cool violet |"
    info: "| 4 | Off-White | `#f9fafb` | Footer base and neutral light sections |"

  elevation:

    - "**Dark Pill Button:** `rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px`"
    - "**Phone Number Input (focused state):** `rgba(44, 35, 46, 0.16) 0px 0px 0px 1px`"

  imagery:

    info: "Editorial illustration is the dominant visual asset — flat, hand-drawn character portraits and object compositions (a woman with a cactus, a close-cropped face filling the viewport) rendered in warm earth tones (browns, peach, sage green) that deliberately contrast with the cool lavender UI. The illustrations occupy full viewport-width bands near the footer, functioning as a magazine-cover climax. Device mockups (iPhone frames) are used as product showcases in mid-page sections. No photography appears; the brand avoids lifestyle imagery entirely in favor of illustrated narrative. Icons are simple, monocolor, and small (32px cryptocurrency marks, small UI icons in #374151). The hero gradient is a soft radial wash of violet fading to transparent — atmospheric rather than structural."

  layout:

    info: "Full-bleed sections stacked vertically with alternating surface colors: Hero Violet band → Lavender Mist band → Warm Cream band → large illustration band. Hero is a two-column split with left-aligned headline and phone-input stack on the left, illustrative photograph (hand holding card near cactus) on the right. Mid-page sections use a centered three-column pattern: serif text left, device mockup center, serif text right — a classic editorial spread. The page max-width is approximately 1200px for content containers, but hero sections break to full-bleed. Navigation is a minimal top bar with logo left and language switcher right. Vertical rhythm uses 64px section gaps with 48px internal spacing. The overall density is spacious — single headlines and single CTAs per section, with generous breathing room around each block."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #2c232e"
    - "background: #f7f2ff"
    - "border: #e2e8f0"
    - "accent: #beaaff"
    - "primary action: #f97316 (filled action)"

    example_component_prompts:
    - "**Hero Mixed-Weight Headline**: Render 'NURI BANK IS BACK.' on a #beaaff full-bleed background. 'NURI' and 'BACK.' in Sharp Grotesk Bold at 118px weight 900, letter-spacing 0.018em, color #2c232e, line-height 0.90. 'BANK IS' in Harriet Display at 50px weight 300, color #2c232e, positioned between the two display lines as a single stacked block."

    - "**Phone Number Input with Dark Pill**: Outer pill on #f7f2ff background, 9999px radius, 1px border #e2e8f0, 8px vertical padding. Country flag + Inter 16px #2c232e placeholder 'Mobile number' on the left. Dark Pill Button (#2c232e fill, white Inter 600 'Get App' text, 9999px radius, 12px 24px padding) docked to the right inside the shell."

    - "**Ghost Outline Secondary Button**: Transparent background, 1px border #2c232e, Inter 600 16px 'Sign In with Passkey' in #2c232e, 9999px radius, 14px 24px padding. Place on a #e2d9ff card surface."

    - "**Serif Section Title**: Harriet Display 300 at 55px, color #2c232e, line-height 1.20, centered or left-aligned on Lavender Mist (#f7f2ff) background beside a centered iPhone mockup frame."

    - "**Cryptocurrency Trust Row**: Horizontal row of 32px circular icons on #f7f2ff. Bitcoin circle filled #f97316 with white 'B' mark; other currency circles in #4b5563 outline style. 12px gap between icons, 8px gap to a 'VISA' and 'SEPA' text lockup in Inter 500 14px #4b5563."

  gradient_system:

    info: "One signature gradient defines the hero atmosphere: radial-gradient(circle at 50% 0%, rgba(190, 170, 255, 0.45), rgba(0, 0, 0, 0) 48%). It bleeds from the top-center as a soft violet glow over the Hero Violet (#beaaff) background, creating a sense of overhead light source. Do not introduce additional gradients — the system relies on flat color blocks and this single atmospheric wash."

  similar_brands:

    - "**Revolut** — Same pill-shaped buttons and spacious section rhythm, though Nuri swaps Revolut's black-and-white for a violet editorial palette"
    - "**Plaid** — Same editorial serif headlines mixed with bold sans wordmarks, though Nuri's color story is warmer-cool lavender rather than black-and-coral"
    - "**Cash App** — Same oversized, ultra-bold display type and pill buttons, though Nuri uses serif companions and a lavender canvas instead of Cash App's neon green"
    - "**Stripe** — Same spacious light-mode fintech layout with generous section gaps, though Nuri leans editorial-illustration where Stripe is flat-product"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-hero-violet: #beaaff;
          --color-card-lilac: #e2d9ff;
          --color-bitcoin-orange: #f97316;
          --color-warm-cream: #fff7ed;
          --color-lavender-mist: #f7f2ff;
          --color-off-white: #f9fafb;
          --color-pure-white: #ffffff;
          --color-ink-plum: #2c232e;
          --color-graphite: #4b5563;
          --color-slate: #6b7280;
          --color-steel: #374151;
          --color-mist: #e2e8f0;
          --color-fog: #d1d5db;
          --color-jet: #000000;
        
          /* Typography — Font Families */
          --font-sharp-grotesk-bold: 'Sharp Grotesk Bold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-harriet-display: 'Harriet Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.32;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --text-heading: 32px;
          --leading-heading: 1.33;
          --text-heading-lg: 50px;
          --leading-heading-lg: 1.2;
          --text-display: 72px;
          --leading-display: 1;
          --tracking-display: -1.44px;
          --text-display-xl: 112px;
          --leading-display-xl: 0.9;
          --tracking-display-xl: 2.02px;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-black: 900;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-96: 96px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 24px;
          --element-gap: 24px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-full: 48px;
          --radius-full-2: 9999px;
        
          /* Named Radii */
          --radius-cards: 48px;
          --radius-icons: 9999px;
          --radius-badges: 9999px;
          --radius-inputs: 9999px;
          --radius-buttons: 9999px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
          --shadow-subtle: rgba(44, 35, 46, 0.16) 0px 0px 0px 1px;
        
          /* Surfaces */
          --surface-page-canvas: #f7f2ff;
          --surface-card-lilac: #e2d9ff;
          --surface-hero-violet: #beaaff;
          --surface-warm-cream: #fff7ed;
          --surface-off-white: #f9fafb;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-hero-violet: #beaaff;
          --color-card-lilac: #e2d9ff;
          --color-bitcoin-orange: #f97316;
          --color-warm-cream: #fff7ed;
          --color-lavender-mist: #f7f2ff;
          --color-off-white: #f9fafb;
          --color-pure-white: #ffffff;
          --color-ink-plum: #2c232e;
          --color-graphite: #4b5563;
          --color-slate: #6b7280;
          --color-steel: #374151;
          --color-mist: #e2e8f0;
          --color-fog: #d1d5db;
          --color-jet: #000000;
        
          /* Typography */
          --font-sharp-grotesk-bold: 'Sharp Grotesk Bold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-harriet-display: 'Harriet Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.32;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --text-heading: 32px;
          --leading-heading: 1.33;
          --text-heading-lg: 50px;
          --leading-heading-lg: 1.2;
          --text-display: 72px;
          --leading-display: 1;
          --tracking-display: -1.44px;
          --text-display-xl: 112px;
          --leading-display-xl: 0.9;
          --tracking-display-xl: 2.02px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-96: 96px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-full: 48px;
          --radius-full-2: 9999px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
          --shadow-subtle: rgba(44, 35, 46, 0.16) 0px 0px 0px 1px;
        }