> ## Documentation Index
> Fetch the complete documentation index at: https://kamino.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Borrow Overview

<div className="w-full" id="borrow-page">
  <div className="relative w-full bg-white dark:bg-transparent" id="borrow-hero-section">
    <div className="w-full pb-2 sm:pb-3 lg:pb-4">
      <div className="rounded-2xl overflow-hidden">
        {/* Blue banner: title (top) + subtext (bottom), dots graphic in the corner */}

        <div className="relative flex flex-col min-h-[440px] sm:min-h-[480px] lg:min-h-[520px] bg-[#C6F4FF] dark:bg-[#0c1b37] px-6 sm:px-12 pb-12 sm:pb-16">
          {/* Dots graphic — small, flush to the top-right corner (flips to white in dark mode) */}

          <img src="https://mintcdn.com/kamino-3d73a151/wADNksI7oget4gqs/images/borrow/kamino-dots.svg?fit=max&auto=format&n=wADNksI7oget4gqs&q=85&s=71e8a7b14234a4ab2271754603e62861" alt="" className="borrow-hero-dots pointer-events-none select-none absolute top-0 right-6 sm:right-10 lg:right-14 opacity-90" width="101" height="474" data-path="images/borrow/kamino-dots.svg" />

          {/* Title (keeps its original offset now that the box top padding is gone) */}

          <div className="relative z-10 flex-1 pt-12 sm:pt-16">
            <h1 className="text-5xl sm:text-6xl lg:text-7xl font-medium text-gray-900 dark:text-gray-100 leading-[1.05]">
              Borrow &<br />Lend
            </h1>
          </div>

          {/* Subtext — near the bottom of the blue container */}

          <div className="relative z-10">
            <p className="text-lg sm:text-xl font-medium text-gray-800 dark:text-gray-300 max-w-xl leading-relaxed">
              Integrate borrow and lending markets, and build leveraged positions with Multiply.
            </p>
          </div>
        </div>

        {/* Stats panel — white background, black vertical dividers */}

        <div className="bg-white dark:bg-[#13284d] py-8 px-4 sm:px-6">
          <div className="grid grid-cols-3 divide-x divide-black/60 dark:divide-white/15 text-center">
            <div className="px-2 sm:px-4">
              <div className="text-3xl sm:text-4xl lg:text-5xl font-medium text-gray-900 dark:text-gray-100 mb-2">
                \$2.7B
              </div>

              <div className="text-[10px] sm:text-sm font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider">
                Market Size
              </div>
            </div>

            <div className="px-2 sm:px-4">
              <div className="text-3xl sm:text-4xl lg:text-5xl font-medium text-gray-900 dark:text-gray-100 mb-2">
                \$1B
              </div>

              <div className="text-[10px] sm:text-sm font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider">
                Active Borrows
              </div>
            </div>

            <div className="px-2 sm:px-4">
              <div className="flex items-center justify-center gap-2 text-3xl sm:text-4xl lg:text-5xl font-medium text-gray-900 dark:text-gray-100 mb-2">
                <Icon icon="circle-check" iconType="solid" size={28} className="text-[#0EA5E9]" />

                18+
              </div>

              <div className="text-[10px] sm:text-sm font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider">
                Audits
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div className="w-full pt-16 sm:pt-20 pb-12 sm:pb-14 bg-[#fcfbfb] dark:bg-[#0c1b37]">
    <div className="w-full max-w-[1200px] mx-auto px-6 sm:px-12">
      <div className="text-center mb-16">
        <h2 className="text-4xl lg:text-5xl font-semibold text-gray-900 dark:text-gray-100 mb-4">
          How It Works
        </h2>

        <p className="text-lg text-gray-700 dark:text-gray-400 max-w-2xl mx-auto">
          A high-level view of the Borrow model.
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
        <div className="text-center">
          <div className="flex justify-center mb-6">
            <img src="https://mintcdn.com/kamino-3d73a151/wADNksI7oget4gqs/images/borrow/deposit.png?fit=max&auto=format&n=wADNksI7oget4gqs&q=85&s=d3183b4fc95ff4d4c07bd5fb19403158" alt="Deposit icon" width="120" height="180" data-path="images/borrow/deposit.png" />
          </div>

          <h3 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-3">
            Deposit
          </h3>

          <p className="text-sm text-gray-700 dark:text-gray-400 leading-relaxed">
            User supplies collateral tokens. An obligation is created to track their position and enable borrowing capacity.
          </p>
        </div>

        <div className="text-center">
          <div className="flex justify-center mb-6">
            <img src="https://mintcdn.com/kamino-3d73a151/wADNksI7oget4gqs/images/borrow/borrow.png?fit=max&auto=format&n=wADNksI7oget4gqs&q=85&s=de5006aaeabe5586885bf5a7f66a3a3a" alt="Borrow icon" width="120" height="180" data-path="images/borrow/borrow.png" />
          </div>

          <h3 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-3">
            Borrow
          </h3>

          <p className="text-sm text-gray-700 dark:text-gray-400 leading-relaxed">
            User borrows assets against collateral. LTV ratio determines borrow limit. Interest accrues on borrowed amount.
          </p>
        </div>

        <div className="text-center">
          <div className="flex justify-center mb-6">
            <img src="https://mintcdn.com/kamino-3d73a151/wADNksI7oget4gqs/images/borrow/repay.png?fit=max&auto=format&n=wADNksI7oget4gqs&q=85&s=ddd2459e6144b448c003b652293e9b64" alt="Repay icon" width="120" height="180" data-path="images/borrow/repay.png" />
          </div>

          <h3 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-3">
            Repay
          </h3>

          <p className="text-sm text-gray-700 dark:text-gray-400 leading-relaxed">
            User repays borrowed assets plus interest. Reduces debt, improves health factor, and unlocks collateral for withdrawal.
          </p>
        </div>
      </div>
    </div>
  </div>

  <div className="w-full pt-8 sm:pt-10 pb-8 sm:pb-10 bg-white dark:bg-[#0c1b37]">
    <div className="max-w-[1200px] mx-auto rounded-2xl bg-[#fcfbfb] dark:bg-[#13284d] px-6 sm:px-12 py-12 sm:py-16">
      <div className="text-center mb-16">
        <h2 className="text-4xl lg:text-5xl font-semibold text-gray-900 dark:text-gray-100 mb-4">
          Borrow Integration Model
        </h2>

        <p className="text-lg text-gray-700 dark:text-gray-400 max-w-2xl mx-auto">
          Built for seamless integration. Borrow centers on three core layers of composability.
        </p>
      </div>

      <div className="hidden lg:block">
        {/* Selector labels */}

        <div className="flex flex-wrap justify-center gap-x-8 gap-y-2 mb-8">
          <a href="#bim-markets" className="text-sm sm:text-base font-semibold text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors no-underline">Markets & Reserves</a>
          <a href="#bim-transactions" className="text-sm sm:text-base font-semibold text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors no-underline">Transactions</a>
          <a href="#bim-positions" className="text-sm sm:text-base font-semibold text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors no-underline">Positions & Health</a>
        </div>

        {/* Slide track */}

        <div className="hiw-track flex overflow-x-auto snap-x snap-mandatory scroll-smooth">
          <div id="bim-markets" className="hiw-slide relative shrink-0 w-full snap-center flex items-center justify-center px-12 sm:px-16">
            <img src="https://mintcdn.com/kamino-3d73a151/wADNksI7oget4gqs/images/borrow/integration-markets.png?fit=max&auto=format&n=wADNksI7oget4gqs&q=85&s=0158423f5abe83240fb16edc010d763c" loading="lazy" alt="Layer 1, Markets and Reserves: browse reserves to supply and borrow capital and understand each market's conditions before routing users" className="w-full max-w-3xl rounded-xl" width="1080" height="800" data-path="images/borrow/integration-markets.png" />
          </div>

          <div id="bim-transactions" className="hiw-slide relative shrink-0 w-full snap-center flex items-center justify-center px-12 sm:px-16">
            <img src="https://mintcdn.com/kamino-3d73a151/wADNksI7oget4gqs/images/borrow/integration-transactions.png?fit=max&auto=format&n=wADNksI7oget4gqs&q=85&s=cef26d2f673da1e03008a5ef56877b48" loading="lazy" alt="Layer 2, Transactions: turn lending actions into signable flows, from account setup to obligation management and transaction construction" className="w-full max-w-3xl rounded-xl" width="1080" height="800" data-path="images/borrow/integration-transactions.png" />
          </div>

          <div id="bim-positions" className="hiw-slide relative shrink-0 w-full snap-center flex items-center justify-center px-12 sm:px-16">
            <img src="https://mintcdn.com/kamino-3d73a151/wADNksI7oget4gqs/images/borrow/integration-positions.png?fit=max&auto=format&n=wADNksI7oget4gqs&q=85&s=26d8e01d6c4719786945c10876ebcfc3" loading="lazy" alt="Layer 3, Positions and Health: bring account health into focus across the borrow lifecycle to keep users within healthy borrowing ranges" className="w-full max-w-3xl rounded-xl" width="1080" height="800" data-path="images/borrow/integration-positions.png" />
          </div>
        </div>
      </div>

      <div className="lg:hidden space-y-3">
        <div className="rounded-xl bg-[#C6F4FF] dark:bg-[#1d3a66] p-5">
          <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-1">Markets & Reserves</h3>
          <p className="text-sm text-gray-700 dark:text-gray-300 mb-3">Browse reserves to supply and borrow capital, and understand the conditions of each market before routing users.</p>
          <p className="text-xs text-gray-700 dark:text-gray-300"><span className="font-semibold text-gray-900 dark:text-gray-100">Best Tools:</span> REST API, TypeScript SDK</p>
          <p className="text-xs text-gray-700 dark:text-gray-300"><span className="font-semibold text-gray-900 dark:text-gray-100">Available Market Data:</span> supply APY, borrow APY, utilization, liquidity, market configuration, reserve metadata, reward farms, and bonus yield.</p>
        </div>

        <div className="rounded-xl bg-[#C6F4FF] dark:bg-[#1d3a66] p-5">
          <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-1">Transactions</h3>
          <p className="text-sm text-gray-700 dark:text-gray-300 mb-3">Turn lending actions into signable flows, from account setup to obligation management and transaction construction.</p>
          <p className="text-xs text-gray-700 dark:text-gray-300"><span className="font-semibold text-gray-900 dark:text-gray-100">Best Tools:</span> TypeScript SDK, REST API, Rust Interface Crate</p>
          <p className="text-xs text-gray-700 dark:text-gray-300"><span className="font-semibold text-gray-900 dark:text-gray-100">Available Transaction Flows:</span> user account setup, obligation account creation, transaction construction, flash loans.</p>
        </div>

        <div className="rounded-xl bg-[#C6F4FF] dark:bg-[#1d3a66] p-5">
          <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-1">Positions & Health</h3>
          <p className="text-sm text-gray-700 dark:text-gray-300 mb-3">Bring account health into focus across the borrow lifecycle, helping users stay within healthy borrowing ranges.</p>
          <p className="text-xs text-gray-700 dark:text-gray-300"><span className="font-semibold text-gray-900 dark:text-gray-100">Best Tools:</span> TypeScript SDK, REST API</p>
          <p className="text-xs text-gray-700 dark:text-gray-300"><span className="font-semibold text-gray-900 dark:text-gray-100">Available Position Data:</span> obligations, user PnL, portfolio value, collateral balances, debt balances, LTV, health factors, borrowing capacity, liquidation thresholds, and position history.</p>
        </div>
      </div>
    </div>
  </div>

  <div className="w-full pt-8 sm:pt-10 pb-8 sm:pb-10 bg-white dark:bg-[#0c1b37]">
    <div className="w-full max-w-[1200px] mx-auto px-6 sm:px-12">
      <div className="mb-12">
        <h2 className="text-3xl lg:text-4xl font-bold tracking-tight mb-4 text-gray-900 dark:text-gray-100">
          Start Building
        </h2>

        <p className="text-lg text-gray-700 dark:text-gray-400 max-w-xl">
          Explore guides, tutorials, and API references.
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <a href="/build/borrow/tutorials/deposit-and-borrow" className="p-6 rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-[#13284d] hover:border-[#0ea5e9] dark:hover:border-[#0ea5e9] transition-colors group">
          <div className="w-10 h-10 rounded-lg flex items-center justify-center mb-4 bg-blue-500/10 dark:bg-blue-500/20 group-hover:bg-blue-500/20 dark:group-hover:bg-blue-500/30 transition-colors">
            <Icon icon="book" iconType="solid" className="w-5 h-5 text-[#0ea5e9]" />
          </div>

          <h3 className="text-lg font-bold text-gray-900 dark:text-gray-100 mb-2">
            SDK Tutorials
          </h3>

          <p className="text-sm text-gray-700 dark:text-gray-400 mb-3">
            Step-by-step guides for building with Kamino lending markets.
          </p>

          <div className="flex items-center gap-2 text-[#0ea5e9] text-sm font-medium">
            View Tutorials

            <Icon icon="arrow-right" iconType="regular" className="w-3 h-3" />
          </div>
        </a>

        <a href="/build/borrow/recipes/deposit-via-api" className="p-6 rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-[#13284d] hover:border-[#0ea5e9] dark:hover:border-[#0ea5e9] transition-colors group">
          <div className="w-10 h-10 rounded-lg flex items-center justify-center mb-4 bg-green-500/10 dark:bg-green-500/20 group-hover:bg-green-500/20 dark:group-hover:bg-green-500/30 transition-colors">
            <Icon icon="flask" iconType="solid" className="w-5 h-5 text-green-500" />
          </div>

          <h3 className="text-lg font-bold text-gray-900 dark:text-gray-100 mb-2">
            API Recipes
          </h3>

          <p className="text-sm text-gray-700 dark:text-gray-400 mb-3">
            Quick code examples for common lending operations via API.
          </p>

          <div className="flex items-center gap-2 text-green-500 text-sm font-medium">
            View Recipes

            <Icon icon="arrow-right" iconType="regular" className="w-3 h-3" />
          </div>
        </a>

        <a href="/build/borrow/tutorials/rust/deposit-and-borrow" className="p-6 rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-[#13284d] hover:border-[#0ea5e9] dark:hover:border-[#0ea5e9] transition-colors group">
          <div className="w-10 h-10 rounded-lg flex items-center justify-center mb-4 bg-orange-500/10 dark:bg-orange-500/20 group-hover:bg-orange-500/20 dark:group-hover:bg-orange-500/30 transition-colors">
            <Icon icon="crab" iconType="solid" className="w-5 h-5 text-orange-500" />
          </div>

          <h3 className="text-lg font-bold text-gray-900 dark:text-gray-100 mb-2">
            Rust Tutorials
          </h3>

          <p className="text-sm text-gray-700 dark:text-gray-400 mb-3">
            Deposit, borrow, repay, and withdraw using the klend-interface Rust crate.
          </p>

          <div className="flex items-center gap-2 text-orange-500 text-sm font-medium">
            View Tutorials

            <Icon icon="arrow-right" iconType="regular" className="w-3 h-3" />
          </div>
        </a>

        <a href="/build/borrow/multiply/leverage-concepts" className="p-6 rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-[#13284d] hover:border-[#0ea5e9] dark:hover:border-[#0ea5e9] transition-colors group">
          <div className="w-10 h-10 rounded-lg flex items-center justify-center mb-4 bg-purple-500/10 dark:bg-purple-500/20 group-hover:bg-purple-500/20 dark:group-hover:bg-purple-500/30 transition-colors">
            <Icon icon="chart-line-up" iconType="solid" className="w-5 h-5 text-purple-500" />
          </div>

          <h3 className="text-lg font-bold text-gray-900 dark:text-gray-100 mb-2">
            Multiply Integration
          </h3>

          <p className="text-sm text-gray-700 dark:text-gray-400 mb-3">
            Build leveraged positions with flash loans and swaps.
          </p>

          <div className="flex items-center gap-2 text-purple-500 text-sm font-medium">
            Learn More

            <Icon icon="arrow-right" iconType="regular" className="w-3 h-3" />
          </div>
        </a>
      </div>
    </div>
  </div>
</div>