letter___style_reference:
  info: "> Private gallery with iridescent vault artifacts. A black-walled showroom where serif headlines float above chrome sculptures on tinted gallery walls."

  theme: "mixed"

  info: "Letter is a private-banking platform that reads like a gallery exhibition for high-net-worth finance. The visual system pivots between a deep ink-black hero stage and a bright editorial body, with 3D metallic and prismatic renders as the recurring sculptural accent. Typography is split into two deliberate registers: a wide grotesque for interface text and navigation, and a high-contrast serif at 80px for headlines that read like magazine cover titles. Color is used as architectural punctuation — three near-gray tinted panels (peach, mint, lavender) act as gallery walls, while teal, violet, and blue claim the action buttons as discrete brand moments. Components are square and confident: 2px corner radii, generous horizontal button padding, and zero decorative shadow — the renders and typography do all the emotional work."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Vault Ink | `#191b1f` | `--color-vault-ink` | Hero background, dark surface stage, dark card panel — deep near-black with the faintest blue chill, warmer than pure black but harder than charcoal |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Page canvas, light card surface, inverse text on dark backgrounds, outlined button fills |"
    info: "| Mist White | `#f6f9f9` | `--color-mist-white` | Soft section background, subtle card surface, secondary canvas — sits one step below pure white without grayness |"
    info: "| Fog Gray | `#9fabad` | `--color-fog-gray` | Muted helper text, secondary metadata, low-emphasis labels — a true middle gray with no chromatic bias |"
    info: "| Hairline | `#e6ebec` | `--color-hairline` | Borders, dividers, card outlines, button strokes at low contrast — barely-there separators that define structure without drawing the eye |"
    info: "| Obsidian | `#000000` | `--color-obsidian` | Primary text, headline ink, logo mark — the only true black in the system, reserved for maximum-contrast typography |"
    info: "| Peach Wall | `#fcede1` | `--color-peach-wall` | Hairline borders, dividers, input outlines, and card edges on light surfaces. |"
    info: "| Mint Wall | `#eefcef` | `--color-mint-wall` | Tinted card background — cool mint gallery wall, likely the investing/savings panel |"
    info: "| Lavender Wall | `#e6def0` | `--color-lavender-wall` | Tinted card background — soft lavender gallery wall for the credit or lending panel |"
    info: "| Deep Teal | `#186f64` | `--color-deep-teal` | Teal action color for filled buttons, selected navigation states, and focused conversion moments. |"
    info: "| Electric Violet | `#536eff` | `--color-electric-violet` | Violet action color for filled buttons, selected navigation states, and focused conversion moments. |"
    info: "| Royal Violet | `#644bc4` | `--color-royal-violet` | Secondary action buttons, hover state on violet CTAs, accent borders — deeper companion to Electric Violet for depth |"
    info: "| Sapphire Blue | `#154ea5` | `--color-sapphire-blue` | Blue action color for filled buttons, selected navigation states, and focused conversion moments. |"

  tokens___typography:

    neufile_grotesk_extended___body_copy__navigation_links__button_text__card_descriptions__footer_text__and_medium_weight_subheads_at_28px__this_is_the_working_sans___wide_apertures_and_extended_proportions_give_it_an_editorial__almost_monospace_rhythm_at_small_sizes__weight_400_for_running_text__weight_500_for_subheads_and_emphasized_ui_labels_____font_neufile_grotesk_extended:
      - "**Substitute:** Söhne, Inter, IBM Plex Sans"
      - "**Weights:** 400, 500"
      - "**Sizes:** 13px, 16px, 28px"
      - "**Line height:** 1.30, 1.40, 1.00, 2.00"
      - "**Role:** Body copy, navigation links, button text, card descriptions, footer text, and medium-weight subheads at 28px. This is the working sans — wide apertures and extended proportions give it an editorial, almost monospace rhythm at small sizes. Weight 400 for running text, weight 500 for subheads and emphasized UI labels."

    albra_sans___all_headlines_and_display_text__the_serif_sans_split_is_the_system_s_defining_typographic_move__a_high_contrast_serif_at_80px_line_height_1_10_creates_magazine_cover_presence_for_the_hero__while_a_46px_line_height_1_20_handles_section_titles__the_22px_size_at_weight_600_works_as_a_serif_subhead___unusual_and_signature__positive_0_020em_letter_spacing_on_a_serif_is_anti_convention_most_serifs_tighten_at_display_sizes__here_it_breathes_the_letterforms_open_for_gallery_label_elegance_____font_albra_sans:
      - "**Substitute:** GT Sectra, Tiempos Headline, Canela, Playfair Display"
      - "**Weights:** 600"
      - "**Sizes:** 22px, 46px, 80px"
      - "**Line height:** 1.10, 1.20"
      - "**Letter spacing:** 0.0200em"
      - "**Role:** All headlines and display text. The serif/sans split is the system's defining typographic move: a high-contrast serif at 80px line-height 1.10 creates magazine-cover presence for the hero, while a 46px line-height 1.20 handles section titles. The 22px size at weight 600 works as a serif subhead — unusual and signature. Positive 0.020em letter-spacing on a serif is anti-convention (most serifs tighten at display sizes), here it breathes the letterforms open for gallery-label elegance."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 13px | 1.4 | — | `--text-caption` |"
      info: "| body | 16px | 1.4 | — | `--text-body` |"
      info: "| subheading | 22px | 1.2 | 0.44px | `--text-subheading` |"
      info: "| heading-sm | 28px | 1.3 | — | `--text-heading-sm` |"
      info: "| heading | 46px | 1.2 | 0.92px | `--text-heading` |"
      info: "| display | 80px | 1.1 | 1.6px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

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

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 2px |"
      info: "| cards | 0px |"
      info: "| inputs | 2px |"
      info: "| buttons | 2px |"

    layout:

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

  components:

    navigation_bar_dark:
      role: "Primary navigation over hero"

      info: "Transparent dark bar (#191b1f) with white Neufile Grotesk Extended 13px nav links. Logo mark (white S-shape) left, 7 nav items spaced 23px horizontal padding, 'Join' as ghost button (white border, 2px radius) and 'Sign In' as text link on the far right. No background blur — sits on pure dark."

    navigation_bar_light:
      role: "Primary navigation on light sections"

      info: "White background bar, #191b1f text and logo. Same structure as dark nav but inverted. 'Join' becomes a dark filled button (#191b1f fill, white text, 2px radius) and 'Sign In' remains text."

    teal_filled_button:
      role: "Primary action — invest, deposit"

      info: "Background #186f64, white text in Neufile Grotesk Extended 16px weight 500. 2px border radius. Padding 12px vertical, 27px horizontal. No shadow. The flagship CTA color — appears on 'Invest Now' actions."

    violet_filled_button:
      role: "Secondary action — borrow, credit"

      info: "Background #536eff, white text in Neufile Grotesk Extended 16px weight 500. 2px border radius. Padding 12px vertical, 27px horizontal. Appears on 'Borrow Now' actions."

    blue_filled_button:
      role: "Tertiary action — card, checking"

      info: "Background #154ea5, white text in Neufile Grotesk Extended 16px weight 500. 2px border radius. Padding 12px vertical, 27px horizontal. Appears on 'Get Your Card' actions."

    ghost_text_link:
      role: "Tertiary action — learn more"

      info: "No background, no border. Dark text (#191b1f) in Neufile Grotesk Extended 16px. Sits immediately right of a filled button as a low-commitment alternative. Color-tinted to match its sibling filled button (teal link beside teal button, etc.)."

    tinted_feature_card:
      role: "Product/service showcase panel"

      info: "Full-width or half-width card with a tinted near-gray background — Peach Wall (#fcede1), Mint Wall (#eefcef), or Lavender Wall (#e6def0). Zero border radius, no border, no shadow. Contains a serif Albra Sans 22px subhead, a 16px body description, a filled action button, a ghost link, and a large 3D render occupying the right or lower half. 32px internal padding. The tinted background is the card's only differentiator from the white page."

    dark_hero_stage:
      role: "Above-the-fold hero section"

      info: "Full-bleed #191b1f background. Centered Albra Sans 80px display headline in white, 46px or 22px serif subhead below, and a large 3D metallic/chrome render with dramatic light flares occupying the lower 60% of the viewport. No border, no card treatment — the dark background IS the surface. Generous vertical padding (96-128px top, 64-96px bottom)."

    split_content_section:
      role: "Body content with paired 3D render"

      info: "Two-column layout, roughly 50/50. Left column: Albra Sans 46px heading, 16px body text, optional CTA. Right column: 3D render (iridescent card, liquid-metal form, chrome sphere) with generous breathing room. Background alternates between white and #f6f9f9 between sections."

    3d_abstract_render:
      role: "Signature visual element"

      info: "Full-color 3D renders with metallic, prismatic, or iridescent surfaces. Floating in space with dramatic directional lighting — lens flares, caustic light patterns, and subsurface scattering. Treatment: sharp edges, no rounded masks, overlapping light bloom. Each render is a one-off composition, not a reusable component, but they share a consistent material language: polished chrome, dichroic glass, and liquid metal. This is the brand's most distinctive visual asset."

  do_s_and_don_ts:

    do:
      - "Use Albra Sans serif for all headlines and display text — never substitute a sans-serif for headings; the serif/sans split is the system's identity"
      - "Keep button corner radius at 2px — the near-square edges read as architectural confidence, not friendliness"
      - "Use 80px Albra Sans for hero headlines only; section titles cap at 46px"
      - "Pair every filled colored button with an adjacent ghost text link in the matching brand color — teal button + teal link, violet button + violet link"
      - "Let 3D renders float in negative space without containers, borders, or rounded masks — the raw edges of the render ARE the visual frame"
      - "Use tinted card backgrounds (#fcede1, #eefcef, #e6def0) for product panels; reserve #ffffff and #f6f9f9 for structural sections"
      - "Maintain 27px horizontal button padding — this generous horizontal breathing is what makes the buttons feel premium rather than functional"

    don_t:
      - "Never use shadows, drop shadows, or box-shadows on cards, buttons, or sections — the system is flat and lets background color and 3D renders do the depth work"
      - "Don't introduce additional border radii beyond 2px — no rounded cards, no pill buttons, no circular avatars"
      - "Don't use the brand colors (#186f64, #536eff, #644bc4, #154ea5) for body text, borders, or backgrounds — they are reserved for action moments and headlines only"
      - "Never set headlines in a sans-serif — the serif Albra Sans is non-negotiable for the editorial voice"
      - "Don't use the tinted card backgrounds (#fcede1, #eefcef, #e6def0) for body text or large surface areas — they are gallery walls for 3D renders, not page backgrounds"
      - "Don't apply gradients to UI components — gradients appear only in 3D renders and the hero light burst, not in buttons, cards, or backgrounds"
      - "Avoid tight letter-spacing on serif headlines — the 0.020em positive tracking is deliberate and creates the gallery-label feel"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Vault Ink | `#191b1f` | Hero stage, dark section backgrounds, dark nav — the deepest surface |"
    info: "| 1 | Paper White | `#ffffff` | Page canvas, light cards, primary content surface |"
    info: "| 2 | Mist White | `#f6f9f9` | Alternating section background, subtle elevation above white |"
    info: "| 3 | Tinted Gallery Walls | `#fcede1` | Product panel backgrounds — peach, mint, lavender variants act as gallery walls for 3D renders |"

  elevation:

    info: "The system is intentionally shadowless. Depth is created through surface color contrast (white → #f6f9f9 → tinted walls → #191b1f) and through 3D renders that carry their own internal lighting. No box-shadows, no drop shadows, no glows on UI elements. This flat treatment is a luxury signal — the confidence to not use visual crutches."

  imagery:

    info: "3D abstract renders are the dominant visual asset — polished chrome spheres, iridescent prismatic card forms, liquid-metal organic shapes, and faceted geometric crystals. Treatment: full-color, high-contrast, with dramatic directional lighting (caustic light patterns, lens flares, subsurface glow on metallic surfaces). Renders are never masked or placed in containers — they float in raw negative space with sharp edges. No photography, no illustration, no flat icons. Icon style: minimal outlined line icons in nav and UI chrome, monochrome white or #191b1f, thin consistent stroke weight. Role: the 3D renders are explanatory content (visualizing abstract financial concepts as physical artifacts) and brand atmosphere simultaneously. Density: text-dominant overall, but each major section features one large hero render that commands 40-60% of the viewport."

  layout:

    info: "Max-width ~1200px centered container. Hero is full-bleed dark with centered headline stack (display → subhead → no button above fold), then transitions to a rhythm of alternating light sections. Pattern: dark hero → white split section → tinted card row (2-column grid) → white split section → tinted card row. Sections use generous vertical padding (64-96px) for gallery-walk pacing. Content arrangement: 50/50 split layouts pairing text with 3D renders, with text consistently on the left and renders on the right. Tinted feature cards form a 2-column grid for product panels. Navigation: sticky top bar that transitions from dark (on hero) to light (on scroll). No sidebar, no mega-menu."

  agent_prompt_guide:

    quick_color_reference:
    - "text (primary): #191b1f"
    - "background: #ffffff"
    - "soft background: #f6f9f9"
    - "border/hairline: #e6ebec"
    - "brand accent (teal): #186f64"
    - "brand accent (violet): #536eff"
    - "brand accent (blue): #154ea5"
    - "primary action: #186f64 (filled action)"

    3_example_component_prompts:

    - "**Dark Hero Section**: Full-bleed #191b1f background. Centered Albra Sans 80px weight 600 display headline in #ffffff, letter-spacing 1.6px, line-height 1.1. Below: Albra Sans 22px weight 600 subhead in #ffffff at 70% opacity, line-height 1.2. Large 3D metallic render with chrome and prismatic lighting occupying the lower 60% of the viewport, no border, no container, raw edges. 128px top padding, 96px bottom padding."

    - "**Tinted Feature Card (Peach)**: Full-width panel with #fcede1 background, zero border-radius, no border, no shadow. 32px padding. Left half: Albra Sans 22px weight 600 heading in #191b1f, 16px Neufile Grotesk Extended weight 400 body text in #191b1f, teal filled button (#186f64, white text, 2px radius, 12px 27px padding), teal ghost text link beside it. Right half: 3D liquid-metal render, no container."

    - "**Teal Filled Button**: Background #186f64, white text in Neufile Grotesk Extended 16px weight 500. 2px border-radius. Padding 12px vertical, 27px horizontal. No shadow, no gradient. Adjacent ghost text link in matching #186f64, no background, no border."

  material_language:

    info: "The 3D renders share a consistent material vocabulary that functions as the brand's secondary color system: polished chrome, dichroic glass, liquid metal, and iridescent prismatic surfaces. These are rendered with dramatic directional lighting — single key light with lens flare, caustic light patterns on adjacent surfaces, and subtle subsurface glow. Each render is a one-off composition, but the material treatment is the system: objects that look like museum artifacts displayed under gallery spotlights. Never matte, never flat-shaded, never cartoonish."

  similar_brands:

    - "**Mercury** — Serif headlines paired with sans-serif body, restrained color palette with single accent moments, luxury private-banking tone, near-zero border radii"
    - "**Arc** — Dramatic dark-to-light section transitions, premium typography mixing serif display with sans body, generous whitespace as luxury signal"
    - "**Linear** — Dark hero stage transitioning to clean light sections, precise typographic hierarchy, product panels with distinct color identity"
    - "**Ramp** — Clean financial UI with generous horizontal button padding, flat surfaces without shadows, restrained chromatic palette"
    - "**Stripe** — Editorial typography treatment applied to financial product, gallery-like section rhythm, confidence through typographic restraint rather than visual effects"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-vault-ink: #191b1f;
          --color-paper-white: #ffffff;
          --color-mist-white: #f6f9f9;
          --color-fog-gray: #9fabad;
          --color-hairline: #e6ebec;
          --color-obsidian: #000000;
          --color-peach-wall: #fcede1;
          --color-mint-wall: #eefcef;
          --color-lavender-wall: #e6def0;
          --color-deep-teal: #186f64;
          --color-electric-violet: #536eff;
          --color-royal-violet: #644bc4;
          --color-sapphire-blue: #154ea5;
        
          /* Typography — Font Families */
          --font-neufile-grotesk-extended: 'Neufile Grotesk Extended', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-albra-sans: 'Albra Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.4;
          --text-body: 16px;
          --leading-body: 1.4;
          --text-subheading: 22px;
          --leading-subheading: 1.2;
          --tracking-subheading: 0.44px;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.3;
          --text-heading: 46px;
          --leading-heading: 1.2;
          --tracking-heading: 0.92px;
          --text-display: 80px;
          --leading-display: 1.1;
          --tracking-display: 1.6px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-72: 72px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64-96px;
          --card-padding: 32px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-sm: 2px;
        
          /* Named Radii */
          --radius-tags: 2px;
          --radius-cards: 0px;
          --radius-inputs: 2px;
          --radius-buttons: 2px;
        
          /* Surfaces */
          --surface-vault-ink: #191b1f;
          --surface-paper-white: #ffffff;
          --surface-mist-white: #f6f9f9;
          --surface-tinted-gallery-walls: #fcede1;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-vault-ink: #191b1f;
          --color-paper-white: #ffffff;
          --color-mist-white: #f6f9f9;
          --color-fog-gray: #9fabad;
          --color-hairline: #e6ebec;
          --color-obsidian: #000000;
          --color-peach-wall: #fcede1;
          --color-mint-wall: #eefcef;
          --color-lavender-wall: #e6def0;
          --color-deep-teal: #186f64;
          --color-electric-violet: #536eff;
          --color-royal-violet: #644bc4;
          --color-sapphire-blue: #154ea5;
        
          /* Typography */
          --font-neufile-grotesk-extended: 'Neufile Grotesk Extended', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-albra-sans: 'Albra Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.4;
          --text-body: 16px;
          --leading-body: 1.4;
          --text-subheading: 22px;
          --leading-subheading: 1.2;
          --tracking-subheading: 0.44px;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.3;
          --text-heading: 46px;
          --leading-heading: 1.2;
          --tracking-heading: 0.92px;
          --text-display: 80px;
          --leading-display: 1.1;
          --tracking-display: 1.6px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-72: 72px;
        
          /* Border Radius */
          --radius-sm: 2px;
        }