With {remittanceProductName}, you can send and receive low cost real-time payments to bank accounts and UMA addresses worldwide through a single, simple API. {topLevelProductName} automatically routes each payment across its network of Grid switches, handling FX, blockchain settlement, and instant banking off-ramps for you.
-
- 
-
- );
-};
+{/* ProductTiles Component */}
+export const ProductTiles = ({ categories }) => {
+ const [activeCategory, setActiveCategory] = React.useState(categories[0].id);
+ const [activeItem, setActiveItem] = React.useState(categories[0].items[0]?.id);
+
+ const currentCategory = categories.find((cat) => cat.id === activeCategory);
+ const currentItem = currentCategory?.items.find((item) => item.id === activeItem);
-export const HeroCard = ({ title, description, href, icon, whiteIcon }) => {
return (
-
-
-
{title}
- {description} +
+
);
};
-
+ {categories.map((cat) => (
+
+ ))}
-
+
+
+
+ {currentCategory?.items.map((item) => (
+ setActiveItem(item.id)}
+ className={`product-tiles-item ${activeItem === item.id ? 'active' : ''}`}
+ >
+ 
+
+
+
+ {activeItem === item.id && (
+
+ )}
+
+ ))}
+ {item.title}
+ {item.description}
+
+ {currentCategory?.items.map((item) => (
+ 
+ ))}
+
+
-
-
-
-
+
+{/* Hero Header - Two Column Layout */}
+
+
+
+{/* Hero Banner with Sand Dunes Image */}
+
+
+
+ 
+ Documentation
+
+
+ Documentation
+
+
+Build applications and financial products that move money globally across fiat, stablecoins, and Bitcoin with a single API.
+
+ Ready to test? Explore the Grid Sandbox
+ Request sandbox access
+
+
+
+{/* Info Cards: Understand Grid & Start Building */}
+
+
+ 
+
+
+
- Understand Grid
+ Learn how Grid works before you integrate
-
-- Commands for money. One API to send, - receive, and settle value globally. Fiat, stablecoins, or BTC. Always - real time, always low-cost, built on Bitcoin. -
+ -
-
+
+
+ 
+
+
+
+
Start building
+ Jump into a quickstart guide
+
-
-
-
Build with Lightspark Grid
-Choose your use case
+ +
+
+
+
+ Capabilities
+ Primitives for moving money
+
+
+
+
+
+
+
-
+
+
- Send
-
+
-
+ Move funds to any destination
+
+
-
+
+
+ Receive
Accept incoming funds
-
-
-
Resources
-Explore, test, and integrate
+
+
-
+
+
- Convert
-
+
-
+ Exchange currencies and assets
+
+
+
+
+
+ Hold
+ Store multi-currency balances
+
+
+
+
+
+ Ramp
+ Bridge fiat and crypto
+
+
+
+
+
+ Bill
+ Invoice and collect payments
+
+
+
+
+
+ Program
+ Create programmable flows
+
+
+
+
+ Identify
KYC/KYB verification
-
-
- Simplify external account setup with Plaid Link for instant bank verification
-
-
-
- Learn how to send international payments using external accounts
-
-
-
- View complete API documentation for external accounts
-
-
+
+
+ Simplify external account setup with Plaid Link for instant bank verification
+
+
+ Learn how to send international payments using external accounts
+
+
+ View complete API documentation for external accounts
+
+
diff --git a/mintlify/payouts-and-b2b/depositing-funds/internal-accounts.mdx b/mintlify/payouts-and-b2b/depositing-funds/internal-accounts.mdx
index 8902b682..2e6fc875 100644
--- a/mintlify/payouts-and-b2b/depositing-funds/internal-accounts.mdx
+++ b/mintlify/payouts-and-b2b/depositing-funds/internal-accounts.mdx
@@ -1,28 +1,27 @@
---
title: "Internal Accounts"
description: "Learn how to manage internal accounts for holding platform and customer funds"
+icon: "/images/icons/wallet1.svg"
---
import InternalAccounts from '/snippets/internal-accounts.mdx';
+import { FeatureCard, FeatureCardGrid } from '/snippets/feature-card.mdx';
-
-Learn how to add customer bank accounts as withdrawal destinations
-
-
-
-Simplify bank account verification with Plaid Link
-
-
-
-Use internal account balances to send international payments
-
-
-
-View complete API documentation for internal accounts
-
-
+
+
+ Learn how to add customer bank accounts as withdrawal destinations
+
+
+ Simplify bank account verification with Plaid Link
+
+
+ Use internal account balances to send international payments
+
+
+ View complete API documentation for internal accounts
+
+
diff --git a/mintlify/payouts-and-b2b/depositing-funds/plaid.mdx b/mintlify/payouts-and-b2b/depositing-funds/plaid.mdx
index 65fe4f78..b41079d1 100644
--- a/mintlify/payouts-and-b2b/depositing-funds/plaid.mdx
+++ b/mintlify/payouts-and-b2b/depositing-funds/plaid.mdx
@@ -1,32 +1,27 @@
---
title: "External Accounts with Plaid"
description: "Simplify bank account verification with Plaid Link for external account setup"
+icon: "/images/icons/IconPlaid.svg"
---
import PlaidIntegration from '/snippets/plaid-integration.mdx';
+import { FeatureCard, FeatureCardGrid } from '/snippets/feature-card.mdx';
-
-Learn more about managing external accounts
-
-
-
- Transfer funds between internal and external accounts
-
-
-
- Set up webhook handling for account notifications
-
-
-
-View complete Plaid API documentation
-
-
+
+
+ Learn more about managing external accounts
+
+
+ Transfer funds between internal and external accounts
+
+
+ Set up webhook handling for account notifications
+
+
+ View complete Plaid API documentation
+
+
diff --git a/mintlify/payouts-and-b2b/index.mdx b/mintlify/payouts-and-b2b/index.mdx
index c57ff2e2..903f0796 100644
--- a/mintlify/payouts-and-b2b/index.mdx
+++ b/mintlify/payouts-and-b2b/index.mdx
@@ -1,26 +1,34 @@
---
-title: "Introduction"
-description: "Integrate Global payments quickly and easily"
+title: "Payouts & B2B"
+sidebarTitle: "Introduction"
+icon: "/images/icons/paper-plane-top-right.svg"
+mode: "wide"
---
import { payToBankProductName, topLevelProductName } from '/snippets/variables.mdx';
import PaymentFlow from '/snippets/payment-flow.mdx';
import CountrySupport from '/snippets/country-support.mdx';
+import { FeatureCard, FeatureCardGrid } from '/snippets/feature-card.mdx';
-With {payToBankProductName}, you can send and receive low cost real-time payments to bank accounts worldwide through a single, simple API. {topLevelProductName} automatically routes each payment across its network of {topLevelProductName} switches, handling FX, blockchain settlement, and instant banking off-ramps for you.
+
+With {payToBankProductName}, you can send and receive low cost real-time payments to bank accounts worldwide through a single, simple API. {topLevelProductName} automatically routes each payment across its network of {topLevelProductName} switches, handling FX, blockchain settlement, and instant banking off-ramps for you.
-
-
+
+
Single API, global reach. {payToBankProductName} interacts with the Money Grid to route your payments globally.
-
-
+
+
No crypto handling. {payToBankProductName} converts between fiat and crypto instantly to simplify your implementation and minimize FX costs.
-
-
+
+
Real-time settlement. Leverages local instant banking rails and global low latency crypto rails to settle payments in real-time.
-
-
+
+
-
- Learn how to send payments from internal accounts
-
-
-
- Match payments with your internal accounting systems
-
-
-
- Handle transaction failures and errors
-
-
+
+
+ Learn how to send payments from internal accounts
+
+
+ Match payments with your internal accounting systems
+
+
+ Handle transaction failures and errors
+
+
diff --git a/mintlify/payouts-and-b2b/payment-flow/reconciliation.mdx b/mintlify/payouts-and-b2b/payment-flow/reconciliation.mdx
index 64ceeb89..fa8f04a4 100644
--- a/mintlify/payouts-and-b2b/payment-flow/reconciliation.mdx
+++ b/mintlify/payouts-and-b2b/payment-flow/reconciliation.mdx
@@ -1,6 +1,7 @@
---
title: "Reconciliation"
description: "Match Grid transactions with your internal systems"
+icon: "/images/icons/checkmark1.svg"
---
import Reconciliation from '/snippets/reconciliation/reconciliation.mdx'
diff --git a/mintlify/payouts-and-b2b/payment-flow/send-payment.mdx b/mintlify/payouts-and-b2b/payment-flow/send-payment.mdx
index afad8016..dc7598db 100644
--- a/mintlify/payouts-and-b2b/payment-flow/send-payment.mdx
+++ b/mintlify/payouts-and-b2b/payment-flow/send-payment.mdx
@@ -1,23 +1,25 @@
---
title: "Sending Payments"
description: "Learn how to send payments from internal accounts to external bank accounts with same-currency and cross-currency transfers"
+icon: "/images/icons/paper-plane-top-right.svg"
---
+import { FeatureCard, FeatureCardGrid } from '/snippets/feature-card.mdx';
+
Send payments from your customers' internal accounts to their external bank accounts or to other destinations. Grid supports both same-currency transfers and cross-currency transfers with automatic exchange rate handling.
## Overview
Grid provides two payment methods depending on your use case:
-
-
- Send funds in the same currency from an internal account to an external account. Fast and straightforward.
-
-
-
- Send funds with currency conversion using real-time exchange rates. Supports multiple fiat currencies and payment rails.
-
-
+
+
+ Send funds in the same currency from an internal account to an external account. Fast and straightforward.
+
+
+ Send funds with currency conversion using real-time exchange rates. Supports multiple fiat currencies and payment rails.
+
+
## Prerequisites
@@ -559,24 +561,14 @@ await db.payments.update(
## Next Steps
-
-
- Handle payment failures and error scenarios
-
-
-
- Query and filter transaction history
-
-
-
- Match payments with your internal systems
-
-
+
+
+ Handle payment failures and error scenarios
+
+
+ Query and filter transaction history
+
+
+ Match payments with your internal systems
+
+
diff --git a/mintlify/payouts-and-b2b/platform-tools/postman-collection.mdx b/mintlify/payouts-and-b2b/platform-tools/postman-collection.mdx
index d11e88a6..95c65767 100644
--- a/mintlify/payouts-and-b2b/platform-tools/postman-collection.mdx
+++ b/mintlify/payouts-and-b2b/platform-tools/postman-collection.mdx
@@ -1,5 +1,6 @@
---
title: "Postman Collection"
+icon: "/images/icons/IconPostman.svg"
---
import PostmanCollection from '/snippets/postman-collection.mdx';
diff --git a/mintlify/payouts-and-b2b/platform-tools/sandbox-testing.mdx b/mintlify/payouts-and-b2b/platform-tools/sandbox-testing.mdx
index 3d6d5aa6..30c72906 100644
--- a/mintlify/payouts-and-b2b/platform-tools/sandbox-testing.mdx
+++ b/mintlify/payouts-and-b2b/platform-tools/sandbox-testing.mdx
@@ -1,6 +1,7 @@
---
title: "Sandbox Testing"
description: "Test your payouts integration in the Grid sandbox environment"
+icon: "/images/icons/hammer.svg"
---
## Overview
diff --git a/mintlify/payouts-and-b2b/platform-tools/webhooks.mdx b/mintlify/payouts-and-b2b/platform-tools/webhooks.mdx
index e636c6ff..a2f4822f 100644
--- a/mintlify/payouts-and-b2b/platform-tools/webhooks.mdx
+++ b/mintlify/payouts-and-b2b/platform-tools/webhooks.mdx
@@ -1,5 +1,6 @@
---
title: "Webhooks"
+icon: "/images/icons/bell.svg"
---
import Webhooks from '/snippets/webhooks.mdx';
diff --git a/mintlify/payouts-and-b2b/terminology.mdx b/mintlify/payouts-and-b2b/terminology.mdx
index d90a2a1d..c0258250 100644
--- a/mintlify/payouts-and-b2b/terminology.mdx
+++ b/mintlify/payouts-and-b2b/terminology.mdx
@@ -1,6 +1,7 @@
---
title: "Core Concepts"
description: "Core concepts and terminology for the Grid API"
+icon: "/images/icons/file-text.svg"
---
import Terminology from '/snippets/terminology.mdx';
diff --git a/mintlify/platform-overview/capabilities.mdx b/mintlify/platform-overview/capabilities.mdx
new file mode 100644
index 00000000..a97b4dcc
--- /dev/null
+++ b/mintlify/platform-overview/capabilities.mdx
@@ -0,0 +1,37 @@
+---
+icon: "/images/icons/blocks.svg"
+title: "Capabilities"
+description: "Explore Grid's core capabilities for moving money globally"
+mode: "wide"
+---
+
+import { FeatureCard, FeatureCardGrid } from '/snippets/feature-card.mdx';
+
+Grid provides a comprehensive set of primitives for building financial applications. Each capability can be combined to create powerful payment experiences.
+
+
+
+ Move funds to any destination
+
+
+ Accept incoming funds
+
+
+ Exchange currencies and assets
+
+
+ Store multi-currency balances
+
+
+ Bridge fiat and crypto
+
+
+ Invoice and collect payments
+
+
+ Create programmable flows
+
+
+ KYC/KYB verification
+
+
diff --git a/mintlify/platform-overview/configuration.mdx b/mintlify/platform-overview/configuration.mdx
new file mode 100644
index 00000000..f7da70f0
--- /dev/null
+++ b/mintlify/platform-overview/configuration.mdx
@@ -0,0 +1,42 @@
+---
+icon: "/images/icons/settings-gear2.svg"
+title: "Configuration"
+description: "Configure your Grid integration"
+---
+
+import { FeatureCard, FeatureCardGrid } from '/snippets/feature-card.mdx';
+
+Learn how to configure Grid for your specific use case.
+
+## Platform Configuration
+
+Before you can start using Grid, you'll need to configure your platform settings. This includes:
+
+- Setting up your API credentials
+- Configuring webhooks for real-time updates
+- Defining your supported currencies and payment rails
+- Setting up compliance and KYC requirements
+
+## Environment Setup
+
+Grid provides two environments:
+
+
+
+ Test your integration with simulated payments
+
+
+ Process real payments with live credentials
+
+
+
+## Next Steps
+
+
+
+ Learn how to authenticate API requests
+
+
+ Set up real-time event notifications
+
+
diff --git a/mintlify/platform-overview/core-concepts/account-model.mdx b/mintlify/platform-overview/core-concepts/account-model.mdx
index d9be0cb1..af3e4bce 100644
--- a/mintlify/platform-overview/core-concepts/account-model.mdx
+++ b/mintlify/platform-overview/core-concepts/account-model.mdx
@@ -1,4 +1,5 @@
---
+icon: "/images/icons/wallet1.svg"
title: "Account Model"
description: "Internal accounts, external accounts, and how they work together"
---
diff --git a/mintlify/platform-overview/core-concepts/currencies-and-rails.mdx b/mintlify/platform-overview/core-concepts/currencies-and-rails.mdx
index 7dc70720..5235f0cb 100644
--- a/mintlify/platform-overview/core-concepts/currencies-and-rails.mdx
+++ b/mintlify/platform-overview/core-concepts/currencies-and-rails.mdx
@@ -1,4 +1,5 @@
---
+icon: "/images/icons/coins.svg"
title: "Currencies & Payment Rails"
description: "Supported currencies, countries, and payment methods"
---
diff --git a/mintlify/platform-overview/core-concepts/entities.mdx b/mintlify/platform-overview/core-concepts/entities.mdx
index e1832793..e91ee087 100644
--- a/mintlify/platform-overview/core-concepts/entities.mdx
+++ b/mintlify/platform-overview/core-concepts/entities.mdx
@@ -1,4 +1,5 @@
---
+icon: "/images/icons/agent.svg"
title: "Entities & Relationships"
description: "Understanding Grid's core data model"
---
diff --git a/mintlify/platform-overview/core-concepts/quote-system.mdx b/mintlify/platform-overview/core-concepts/quote-system.mdx
index 2e9a3b57..e06025c7 100644
--- a/mintlify/platform-overview/core-concepts/quote-system.mdx
+++ b/mintlify/platform-overview/core-concepts/quote-system.mdx
@@ -1,4 +1,5 @@
---
+icon: "/images/icons/receipt-check.svg"
title: "Quote System"
description: "How exchange rates, pricing, and payment execution work"
---
diff --git a/mintlify/platform-overview/core-concepts/transaction-lifecycle.mdx b/mintlify/platform-overview/core-concepts/transaction-lifecycle.mdx
index 13769d72..4f62f531 100644
--- a/mintlify/platform-overview/core-concepts/transaction-lifecycle.mdx
+++ b/mintlify/platform-overview/core-concepts/transaction-lifecycle.mdx
@@ -1,4 +1,5 @@
---
+icon: "/images/icons/arrows-repeat-circle.svg"
title: "Transaction Lifecycle"
description: "Follow a payment from creation to settlement"
---
diff --git a/mintlify/platform-overview/introduction/faq.mdx b/mintlify/platform-overview/introduction/faq.mdx
index b67eeb8f..e808f6c7 100644
--- a/mintlify/platform-overview/introduction/faq.mdx
+++ b/mintlify/platform-overview/introduction/faq.mdx
@@ -1,5 +1,7 @@
---
+icon: "/images/icons/bubble-question.svg"
title: "FAQ"
+mode: "wide"
---
## Getting Started
diff --git a/mintlify/platform-overview/introduction/what-is-grid.mdx b/mintlify/platform-overview/introduction/what-is-grid.mdx
index 54780a24..1d7cc3ae 100644
--- a/mintlify/platform-overview/introduction/what-is-grid.mdx
+++ b/mintlify/platform-overview/introduction/what-is-grid.mdx
@@ -1,7 +1,24 @@
---
+icon: "/images/icons/square-info.svg"
title: "What is Grid?"
+mode: "wide"
---
+import { FeatureCard, FeatureCardGrid } from '/snippets/feature-card.mdx';
+
+
+
+
Grid is a low-level payment infrastructure API that enables modern financial institutions, businesses, or any developer to send, receive, and settle value globally across fiat currencies, stablecoins, and Bitcoin. With a single, simple API, you can build applications that move money instantly across borders without the complexity of orchestrating multiple payment rails or currencies.
## Features
@@ -11,7 +28,7 @@ Grid is a low-level payment infrastructure API that enables modern financial ins
|
Move money anywhere. Fiat to fiat, crypto to fiat, or the other way around, all through a single API. | |
Send and receive across 65+ countries using local instant rails or global crypto rails. | |
Instant, 24/7/365. Powered by Bitcoin and local payment networks. | -|
We handle all the on-chain logic, wallet ops, and conversions so you don’t have to. | +|
We handle all the on-chain logic, wallet ops, and conversions so you don't have to. | ## What to build @@ -47,44 +64,20 @@ Whether you're receiving Bitcoin or sending dollars as pesos to a bank account, ## Next steps -
-
- Understand Grid's core data model and how entities relate to each other
-
-
-
- Learn how exchange rates, pricing, and payment execution work
-
-
-
- Explore internal and external accounts and how they work together
-
-
-
- Follow a payment from creation through settlement
-
-
-
- View supported currencies, countries, and payment methods
-
-
+
+
+ Understand Grid's core data model and how entities relate to each other
+
+
+ Learn how exchange rates, pricing, and payment execution work
+
+
+ Explore internal and external accounts and how they work together
+
+
+ Follow a payment from creation through settlement
+
+
+ View supported currencies, countries, and payment methods
+
+
diff --git a/mintlify/platform-overview/quickstart/p2p.mdx b/mintlify/platform-overview/quickstart/p2p.mdx
new file mode 100644
index 00000000..cf04cf24
--- /dev/null
+++ b/mintlify/platform-overview/quickstart/p2p.mdx
@@ -0,0 +1,90 @@
+---
+icon: "/images/icons/at.svg"
+title: "Send to an UMA address"
+description: "Send payments using Universal Money Addresses with Grid's Global P2P API."
+---
+
+import { FeatureCard, FeatureCardGrid } from '/snippets/feature-card.mdx';
+
+
+This quickstart walks you through sending to an UMA address. For detailed implementation, see the full [Global P2P documentation](/global-p2p).
+
+
+## Overview
+
+Grid's Global P2P API enables payments via Universal Money Addresses (UMA). In this quickstart, you'll:
+
+1. Set up your platform
+2. Resolve an UMA address
+3. Send a payment
+
+## Prerequisites
+
+- A Grid API key ([request sandbox access](https://lightspark.com/grid#signup))
+- Basic understanding of REST APIs and UMA
+
+## What is UMA?
+
+Universal Money Address (UMA) is an open standard that enables payments using human-readable addresses like `$alice@example.com`.
+
+## Step 1: Platform Configuration
+
+Configure your platform for Global P2P payments.
+
+
+
+ Learn how to configure your platform for P2P
+
+
+
+## Step 2: Resolve UMA Address
+
+Look up the recipient's UMA address to get payment details.
+
+```bash
+curl -X GET "https://api.lightspark.com/grid/2025-10-13/receiver/uma/\$alice@example.com" \
+ -H "Authorization: Basic YOUR_API_KEY"
+```
+
+## Step 3: Send Payment
+
+Execute a payment to the resolved UMA address.
+
+```bash
+# Get a quote
+curl -X POST https://api.lightspark.com/grid/2025-10-13/quotes \
+ -H "Authorization: Basic YOUR_API_KEY" \
+ -H "Content-Type: application/json" \
+ -d '{
+ "receiver_uma": "$alice@example.com",
+ "sending_currency": "USD",
+ "amount": "50.00"
+ }'
+
+# Execute the payment
+curl -X POST https://api.lightspark.com/grid/2025-10-13/payments \
+ -H "Authorization: Basic YOUR_API_KEY" \
+ -H "Content-Type: application/json" \
+ -d '{
+ "quote_id": "QUOTE_ID"
+ }'
+```
+
+## Testing
+
+
+
+ Use the UMA test wallet to test payments in sandbox
+
+
+
+## Next Steps
+
+
+
+ Explore the complete Global P2P documentation
+
+
+ Learn how to receive UMA payments
+
+
diff --git a/mintlify/platform-overview/quickstart/payouts.mdx b/mintlify/platform-overview/quickstart/payouts.mdx
new file mode 100644
index 00000000..b5fdb499
--- /dev/null
+++ b/mintlify/platform-overview/quickstart/payouts.mdx
@@ -0,0 +1,98 @@
+---
+icon: "/images/icons/paper-plane-top-right.svg"
+title: "Send a payout"
+description: "Get started sending cross-border payments with Grid in minutes."
+---
+
+import { FeatureCard, FeatureCardGrid } from '/snippets/feature-card.mdx';
+
+
+This quickstart walks you through sending your first payout. For detailed implementation, see the full [Payouts & B2B documentation](/payouts-and-b2b).
+
+
+## Overview
+
+Grid's Payouts API enables you to send money globally across fiat, stablecoins, and Bitcoin. In this quickstart, you'll:
+
+1. Set up your platform
+2. Create a customer
+3. Configure accounts
+4. Send your first payment
+
+## Prerequisites
+
+- A Grid API key ([request sandbox access](https://lightspark.com/grid#signup))
+- Basic understanding of REST APIs
+
+## Step 1: Platform Configuration
+
+First, configure your platform settings including supported currencies and payment rails.
+
+
+
+ Learn how to configure your platform settings
+
+
+
+## Step 2: Create a Customer
+
+Create a customer entity to represent the recipient of your payout.
+
+```bash
+curl -X POST https://api.lightspark.com/grid/2025-10-13/customers \
+ -H "Authorization: Basic YOUR_API_KEY" \
+ -H "Content-Type: application/json" \
+ -d '{
+ "name": "John Doe",
+ "email": "john@example.com"
+ }'
+```
+
+## Step 3: Configure Accounts
+
+Set up internal and external accounts for the customer.
+
+
+
+ Platform-managed accounts for holding funds
+
+
+ Connect bank accounts for withdrawals
+
+
+
+## Step 4: Send a Payment
+
+Execute your first payout using a quote.
+
+```bash
+# Get a quote
+curl -X POST https://api.lightspark.com/grid/2025-10-13/quotes \
+ -H "Authorization: Basic YOUR_API_KEY" \
+ -H "Content-Type: application/json" \
+ -d '{
+ "source_currency": "USD",
+ "destination_currency": "MXN",
+ "amount": "100.00"
+ }'
+
+# Execute the payment
+curl -X POST https://api.lightspark.com/grid/2025-10-13/transactions \
+ -H "Authorization: Basic YOUR_API_KEY" \
+ -H "Content-Type: application/json" \
+ -d '{
+ "quote_id": "QUOTE_ID",
+ "customer_id": "CUSTOMER_ID"
+ }'
+```
+
+## Next Steps
+
+
+
+ Explore the complete Payouts & B2B documentation
+
+
+ Set up webhooks to track payment status
+
+
diff --git a/mintlify/platform-overview/quickstart/ramps.mdx b/mintlify/platform-overview/quickstart/ramps.mdx
new file mode 100644
index 00000000..b5553e6b
--- /dev/null
+++ b/mintlify/platform-overview/quickstart/ramps.mdx
@@ -0,0 +1,99 @@
+---
+icon: "/images/icons/arrows-repeat-circle.svg"
+title: "On-ramp to crypto"
+description: "Enable users to convert fiat to crypto with Grid's Ramps API."
+---
+
+import { FeatureCard, FeatureCardGrid } from '/snippets/feature-card.mdx';
+
+
+This quickstart walks you through your first fiat-to-crypto conversion. For detailed implementation, see the full [Ramps documentation](/ramps).
+
+
+## Overview
+
+Grid's Ramps API enables seamless conversion between fiat and cryptocurrency. In this quickstart, you'll:
+
+1. Set up your platform
+2. Complete user KYC
+3. Link a funding source
+4. Execute a conversion
+
+## Prerequisites
+
+- A Grid API key ([request sandbox access](https://lightspark.com/grid#signup))
+- Basic understanding of REST APIs
+
+## Step 1: Platform Configuration
+
+Configure your platform for ramp operations.
+
+
+
+ Learn how to configure your platform for ramps
+
+
+
+## Step 2: User Onboarding & KYC
+
+Create a customer and complete KYC verification.
+
+```bash
+curl -X POST https://api.lightspark.com/grid/2025-10-13/customers \
+ -H "Authorization: Basic YOUR_API_KEY" \
+ -H "Content-Type: application/json" \
+ -d '{
+ "name": "Jane Smith",
+ "email": "jane@example.com",
+ "kyc_level": "basic"
+ }'
+```
+
+## Step 3: Link Funding Source
+
+Connect a bank account or other funding source.
+
+
+
+ Link bank accounts via Plaid
+
+
+ Manual bank account setup
+
+
+
+## Step 4: Execute Conversion
+
+Convert fiat to crypto.
+
+```bash
+# Get a conversion quote
+curl -X POST https://api.lightspark.com/grid/2025-10-13/quotes \
+ -H "Authorization: Basic YOUR_API_KEY" \
+ -H "Content-Type: application/json" \
+ -d '{
+ "source_currency": "USD",
+ "destination_currency": "BTC",
+ "amount": "100.00"
+ }'
+
+# Execute the conversion
+curl -X POST https://api.lightspark.com/grid/2025-10-13/conversions \
+ -H "Authorization: Basic YOUR_API_KEY" \
+ -H "Content-Type: application/json" \
+ -d '{
+ "quote_id": "QUOTE_ID",
+ "destination_wallet": "bc1q..."
+ }'
+```
+
+## Next Steps
+
+
+
+ Explore the complete Ramps documentation
+
+
+ Learn about self-custody wallet support
+
+
diff --git a/mintlify/platform-overview/quickstart/rewards.mdx b/mintlify/platform-overview/quickstart/rewards.mdx
new file mode 100644
index 00000000..1df214ed
--- /dev/null
+++ b/mintlify/platform-overview/quickstart/rewards.mdx
@@ -0,0 +1,85 @@
+---
+icon: "/images/icons/gift1.svg"
+title: "Send Bitcoin rewards"
+description: "Deliver instant Bitcoin rewards and cashback with Grid's Rewards API."
+---
+
+import { FeatureCard, FeatureCardGrid } from '/snippets/feature-card.mdx';
+
+
+This quickstart walks you through sending your first Bitcoin reward. For detailed implementation, see the full [Rewards documentation](/rewards).
+
+
+## Overview
+
+Grid's Rewards API enables you to send micro-payments and Bitcoin rewards at scale. In this quickstart, you'll:
+
+1. Set up your platform
+2. Create a rewards pool
+3. Send your first reward
+
+## Prerequisites
+
+- A Grid API key ([request sandbox access](https://lightspark.com/grid#signup))
+- Basic understanding of REST APIs
+
+## Step 1: Platform Configuration
+
+Configure your platform for rewards distribution.
+
+
+
+ Learn how to configure your platform for rewards
+
+
+
+## Step 2: Create Internal Account
+
+Set up an internal account to fund rewards.
+
+```bash
+curl -X POST https://api.lightspark.com/grid/2025-10-13/internal-accounts \
+ -H "Authorization: Basic YOUR_API_KEY" \
+ -H "Content-Type: application/json" \
+ -d '{
+ "currency": "BTC",
+ "name": "Rewards Pool"
+ }'
+```
+
+## Step 3: Send a Reward
+
+Distribute Bitcoin to a recipient.
+
+```bash
+curl -X POST https://api.lightspark.com/grid/2025-10-13/rewards \
+ -H "Authorization: Basic YOUR_API_KEY" \
+ -H "Content-Type: application/json" \
+ -d '{
+ "amount_sats": 1000,
+ "recipient_wallet": "bc1q...",
+ "memo": "Cashback reward"
+ }'
+```
+
+## Use Cases
+
+
+
+ Instant Bitcoin cashback on purchases
+
+
+ Reward engagement and loyalty
+
+
+
+## Next Steps
+
+
+
+ Explore the complete Rewards documentation
+
+
+ Track reward delivery status
+
+
diff --git a/mintlify/platform-overview/use-cases.mdx b/mintlify/platform-overview/use-cases.mdx
new file mode 100644
index 00000000..ba05edf6
--- /dev/null
+++ b/mintlify/platform-overview/use-cases.mdx
@@ -0,0 +1,67 @@
+---
+icon: "/images/icons/light-bulb.svg"
+title: "Use Cases"
+description: "Discover what you can build with Grid"
+mode: "wide"
+---
+
+import { FeatureCardGrid, ImageCard } from '/snippets/feature-card.mdx';
+
+## Payouts & B2B
+
+
+
+ Pay creators and influencers instantly, anywhere they bank
+
+
+ Send salaries and contractor payments globally with locked FX rates
+
+
+ Distribute earnings to sellers and service providers worldwide automatically
+
+
+ Pay international vendors and suppliers in their local currency, settled in seconds
+
+
+
+## Ramps
+
+
+
+ Let users purchase Bitcoin directly inside your app
+
+
+ Convert Bitcoin to fiat and settle to any bank account
+
+
+ On-ramp fiat to fund user wallets with stablecoins or BTC
+
+
+ Off-ramp digital assets to local bank rails in real time
+
+
+
+## Rewards
+
+
+
+ Give users Bitcoin back on purchases or actions
+
+
+ Pay out BTC or fiat when users refer new customers
+
+
+ Build point-based or asset-based loyalty with real redemption value
+
+
+
+## Global P2P
+
+
+
+ Move money across countries on the fastest, lowest-cost rails
+
+
+ Send and receive via UMA addresses across any participating app
+
+
diff --git a/mintlify/ramps/accounts/depositing-funds.mdx b/mintlify/ramps/accounts/depositing-funds.mdx
index d7fde2ac..6c88ca9b 100644
--- a/mintlify/ramps/accounts/depositing-funds.mdx
+++ b/mintlify/ramps/accounts/depositing-funds.mdx
@@ -1,6 +1,7 @@
---
title: "Depositing Funds"
description: "Depositing funds into internal accounts"
+icon: "/images/icons/arrow-inbox.svg"
---
import DepositingFunds from '/snippets/depositing-funds.mdx';
diff --git a/mintlify/ramps/accounts/external-accounts.mdx b/mintlify/ramps/accounts/external-accounts.mdx
index 98d54bb0..0aa76c2b 100644
--- a/mintlify/ramps/accounts/external-accounts.mdx
+++ b/mintlify/ramps/accounts/external-accounts.mdx
@@ -1,6 +1,7 @@
---
title: "External Accounts"
description: "Configure external bank accounts and crypto wallets for ramp destinations"
+icon: "/images/icons/bank.svg"
---
import ExternalAccountsContent from "/snippets/external-accounts.mdx";
diff --git a/mintlify/ramps/accounts/internal-accounts.mdx b/mintlify/ramps/accounts/internal-accounts.mdx
index bd56904d..360490d9 100644
--- a/mintlify/ramps/accounts/internal-accounts.mdx
+++ b/mintlify/ramps/accounts/internal-accounts.mdx
@@ -1,6 +1,7 @@
---
title: "Internal Accounts"
description: "Manage internal accounts for holding fiat and crypto balances for ramp operations"
+icon: "/images/icons/wallet1.svg"
---
import InternalAccountsContent from "/snippets/internal-accounts.mdx";
diff --git a/mintlify/ramps/accounts/plaid.mdx b/mintlify/ramps/accounts/plaid.mdx
index afbf3a7e..d1d8a485 100644
--- a/mintlify/ramps/accounts/plaid.mdx
+++ b/mintlify/ramps/accounts/plaid.mdx
@@ -1,6 +1,7 @@
---
title: "External Accounts with Plaid"
description: "Connect bank accounts securely via Plaid for seamless off-ramp destinations"
+icon: "/images/icons/IconPlaid.svg"
---
import PlaidContent from "/snippets/plaid-integration.mdx";
diff --git a/mintlify/ramps/conversion-flows/fiat-crypto-conversion.mdx b/mintlify/ramps/conversion-flows/fiat-crypto-conversion.mdx
index 3dfc8340..c391c517 100644
--- a/mintlify/ramps/conversion-flows/fiat-crypto-conversion.mdx
+++ b/mintlify/ramps/conversion-flows/fiat-crypto-conversion.mdx
@@ -1,8 +1,11 @@
---
title: "Fiat-to-Crypto and Crypto-to-Fiat"
description: "Build on-ramp and off-ramp flows to convert between fiat currencies and cryptocurrencies"
+icon: "/images/icons/repeat.svg"
---
+import { FeatureCard, FeatureCardGrid } from '/snippets/feature-card.mdx';
+
## Overview
Grid enables seamless conversion between fiat currencies and cryptocurrencies via the Lightning Network. Use quotes to lock exchange rates and get payment instructions for completing transfers.
@@ -275,16 +278,14 @@ if (transaction.status === "FAILED") {
## Next steps
-
-
- Send crypto to user-controlled wallets
-
-
-
- Monitor transaction status
-
-
-
- Complete API documentation
-
-
+
+
+ Send crypto to user-controlled wallets
+
+
+ Monitor transaction status
+
+
+ Complete API documentation
+
+
diff --git a/mintlify/ramps/conversion-flows/self-custody-wallets.mdx b/mintlify/ramps/conversion-flows/self-custody-wallets.mdx
index a09f0c84..0c3f8c0d 100644
--- a/mintlify/ramps/conversion-flows/self-custody-wallets.mdx
+++ b/mintlify/ramps/conversion-flows/self-custody-wallets.mdx
@@ -1,8 +1,11 @@
---
title: "Self-Custody Wallet Integration"
description: "Send and receive cryptocurrency to and from user-controlled wallets"
+icon: "/images/icons/lock.svg"
---
+import { FeatureCard, FeatureCardGrid } from '/snippets/feature-card.mdx';
+
## Overview
Grid supports sending Bitcoin via Lightning Network to self-custody wallets using Spark wallet addresses. This enables users to maintain full control of their crypto while benefiting from Grid's fiat-to-crypto conversion and payment rails.
@@ -405,28 +408,17 @@ console.log("Test transfer status:", testTransfer.status);
## Next steps
-
-
- Learn about on-ramp and off-ramp flows
-
-
-
- Manage external accounts including Spark wallets
-
-
-
- Set up webhooks to monitor transaction status
-
-
-
- Test wallet integrations in sandbox mode
-
-
+
+
+ Learn about on-ramp and off-ramp flows
+
+
+ Manage external accounts including Spark wallets
+
+
+ Set up webhooks to monitor transaction status
+
+
+ Test wallet integrations in sandbox mode
+
+
diff --git a/mintlify/ramps/index.mdx b/mintlify/ramps/index.mdx
index 60a4e120..49f6a326 100644
--- a/mintlify/ramps/index.mdx
+++ b/mintlify/ramps/index.mdx
@@ -1,27 +1,33 @@
---
-title: "Introduction"
-description: "Convert between fiat and crypto with Grid's on-ramp and off-ramp infrastructure"
+title: "Ramps"
+sidebarTitle: "Introduction"
+icon: "/images/icons/arrow-inbox.svg"
+mode: "wide"
---
import { topLevelProductName } from '/snippets/variables.mdx';
import { rampsProductName } from '/snippets/variables.mdx';
+import { FeatureCard, FeatureCardGrid } from '/snippets/feature-card.mdx';
+
+
With Grid, you can seamlessly convert between fiat currencies and cryptocurrencies through a single, simple API. The {topLevelProductName} automatically handles currency conversion, compliance, and instant settlement via the Lightning Network.
-
-
- Convert fiat to crypto (on-ramp) or crypto to fiat (off-ramp) in seconds
- using real-time exchange rates.
-
-
- Grid handles the conversion and settlement process, reducing complexity in
- your crypto integration.
-
-
- Leverages the Lightning Network for instant Bitcoin transfers and local
- banking rails for fiat settlement worldwide.
-
-
+
+
+ Convert fiat to crypto (on-ramp) or crypto to fiat (off-ramp) in seconds using real-time exchange rates.
+
+
+ Grid handles the conversion and settlement process, reducing complexity in your crypto integration.
+
+
+ Leverages the Lightning Network for instant Bitcoin transfers and local banking rails for fiat settlement worldwide.
+
+
---
@@ -103,6 +109,8 @@ The Production environment uses live credentials and base URLs for real transact
---
-
- Ready to integrate {rampsProductName}? Check out our quickstart guide.
-
+
+
+ Ready to integrate {rampsProductName}? Check out our quickstart guide.
+
+
diff --git a/mintlify/ramps/onboarding/configuring-customers.mdx b/mintlify/ramps/onboarding/configuring-customers.mdx
index 621e55c6..5484ca4e 100644
--- a/mintlify/ramps/onboarding/configuring-customers.mdx
+++ b/mintlify/ramps/onboarding/configuring-customers.mdx
@@ -1,11 +1,13 @@
---
title: "Configuring Customers"
description: "Create and manage customers for ramp conversions"
+icon: "/images/icons/people.svg"
---
import KycRegulated from '/snippets/kyc/kyc-regulated.mdx'
import KycUnregulated from '/snippets/kyc/kyc-unregulated.mdx'
import KycWebhooks from '/snippets/kyc/kyc-webhooks.mdx'
+import { FeatureCard, FeatureCardGrid } from '/snippets/feature-card.mdx'
Customers must complete identity verification before processing conversions. The required information varies based on your platform's regulatory status.
@@ -79,28 +81,17 @@ curl -X POST 'https://api.lightspark.com/grid/2025-10-13/customers' \
## Next steps
-
-
-Fund crypto for off-ramp conversions
-
-
-
- Set up wallet destinations
-
-
-
- Build conversion flows
-
-
-
-Complete customer API docs
-
-
+
+
+ Fund crypto for off-ramp conversions
+
+
+ Set up wallet destinations
+
+
+ Build conversion flows
+
+
+ Complete customer API docs
+
+
diff --git a/mintlify/ramps/onboarding/implementation-overview.mdx b/mintlify/ramps/onboarding/implementation-overview.mdx
index 94a47d01..1aa13c4d 100644
--- a/mintlify/ramps/onboarding/implementation-overview.mdx
+++ b/mintlify/ramps/onboarding/implementation-overview.mdx
@@ -1,5 +1,6 @@
---
title: "Implementation Overview"
+icon: "/images/icons/code.svg"
---
import { rampsProductName } from '/snippets/variables.mdx';
diff --git a/mintlify/ramps/onboarding/platform-configuration.mdx b/mintlify/ramps/onboarding/platform-configuration.mdx
index e55a5765..4ade8350 100644
--- a/mintlify/ramps/onboarding/platform-configuration.mdx
+++ b/mintlify/ramps/onboarding/platform-configuration.mdx
@@ -1,5 +1,6 @@
---
title: "Platform Configuration"
+icon: "/images/icons/settings-gear2.svg"
---
This guide explains how to configure your platform for ramp operations: get API credentials, configure webhooks, and set up supported currencies for conversions.
diff --git a/mintlify/ramps/platform-tools/postman-collection.mdx b/mintlify/ramps/platform-tools/postman-collection.mdx
index d11e88a6..95c65767 100644
--- a/mintlify/ramps/platform-tools/postman-collection.mdx
+++ b/mintlify/ramps/platform-tools/postman-collection.mdx
@@ -1,5 +1,6 @@
---
title: "Postman Collection"
+icon: "/images/icons/IconPostman.svg"
---
import PostmanCollection from '/snippets/postman-collection.mdx';
diff --git a/mintlify/ramps/platform-tools/sandbox-testing.mdx b/mintlify/ramps/platform-tools/sandbox-testing.mdx
index e0a12ecd..e7ce0a37 100644
--- a/mintlify/ramps/platform-tools/sandbox-testing.mdx
+++ b/mintlify/ramps/platform-tools/sandbox-testing.mdx
@@ -1,6 +1,7 @@
---
title: "Sandbox Testing"
description: "Test ramp flows safely without moving real funds"
+icon: "/images/icons/hammer.svg"
---
The Grid Sandbox environment provides a complete testing environment for ramp operations, allowing you to validate on-ramp and off-ramp flows without using real money or cryptocurrency.
diff --git a/mintlify/ramps/platform-tools/webhooks.mdx b/mintlify/ramps/platform-tools/webhooks.mdx
index 85e319a8..7507865b 100644
--- a/mintlify/ramps/platform-tools/webhooks.mdx
+++ b/mintlify/ramps/platform-tools/webhooks.mdx
@@ -1,6 +1,7 @@
---
title: "Webhooks"
description: "Receive real-time notifications for ramp conversions, account updates, and transaction status"
+icon: "/images/icons/bell.svg"
---
Webhooks provide real-time notifications about ramp operations, allowing you to respond immediately to conversion completions, account balance changes, and transaction status updates.
diff --git a/mintlify/ramps/terminology.mdx b/mintlify/ramps/terminology.mdx
index 8e1a67ab..60551a63 100644
--- a/mintlify/ramps/terminology.mdx
+++ b/mintlify/ramps/terminology.mdx
@@ -1,6 +1,7 @@
---
title: "Core Concepts"
description: "Core concepts and terminology for the Grid API"
+icon: "/images/icons/file-text.svg"
---
import Terminology from '/snippets/terminology.mdx';
diff --git a/mintlify/rewards/developer-guides/configuring-customers.mdx b/mintlify/rewards/developer-guides/configuring-customers.mdx
index bc15a9af..9b09f78a 100644
--- a/mintlify/rewards/developer-guides/configuring-customers.mdx
+++ b/mintlify/rewards/developer-guides/configuring-customers.mdx
@@ -1,6 +1,7 @@
---
title: "Configuring Customers"
description: "Complete guide to creating and managing customers for Bitcoin rewards"
+icon: "/images/icons/people.svg"
---
import KycRegulated from '/snippets/kyc/kyc-regulated.mdx'
diff --git a/mintlify/rewards/developer-guides/distributing-rewards.mdx b/mintlify/rewards/developer-guides/distributing-rewards.mdx
index dbce54a0..02e73ff0 100644
--- a/mintlify/rewards/developer-guides/distributing-rewards.mdx
+++ b/mintlify/rewards/developer-guides/distributing-rewards.mdx
@@ -1,6 +1,7 @@
---
title: "Paying out Bitcoin rewards"
description: "Send Bitcoin rewards to customers using the Grid API"
+icon: "/images/icons/gift1.svg"
---
This guide covers how to distribute Bitcoin rewards to your customers, including quote creation, execution options, and tracking delivery.
diff --git a/mintlify/rewards/developer-guides/external-accounts.mdx b/mintlify/rewards/developer-guides/external-accounts.mdx
index 5da1cd74..43bfaa6e 100644
--- a/mintlify/rewards/developer-guides/external-accounts.mdx
+++ b/mintlify/rewards/developer-guides/external-accounts.mdx
@@ -1,28 +1,24 @@
---
title: "External Accounts"
description: "Add and manage external funding sources and wallets as payment destinations for rewards"
+icon: "/images/icons/bank.svg"
---
import ExternalAccounts from '/snippets/external-accounts.mdx';
+import { FeatureCard, FeatureCardGrid } from '/snippets/feature-card.mdx';
-
- Simplify external account setup with Plaid Link for instant bank verification
-
-
-
- Learn how to pay out Bitcoin rewards using external accounts
-
-
-
- View complete API documentation for external accounts
-
-
+
+
+ Simplify external account setup with Plaid Link for instant bank verification
+
+
+ Learn how to pay out Bitcoin rewards using external accounts
+
+
+ View complete API documentation for external accounts
+
+
diff --git a/mintlify/rewards/developer-guides/implementation-overview.mdx b/mintlify/rewards/developer-guides/implementation-overview.mdx
index 51fe767f..a95e1a8b 100644
--- a/mintlify/rewards/developer-guides/implementation-overview.mdx
+++ b/mintlify/rewards/developer-guides/implementation-overview.mdx
@@ -1,5 +1,6 @@
---
title: "Implementation Overview"
+icon: "/images/icons/code.svg"
---
This page gives you a 10,000‑ft view of an end‑to‑end Bitcoin rewards implementation. It is intentionally generalized to cover the main building blocks. The detailed guides that follow provide concrete fields, edge cases, and step‑by‑step instructions.
diff --git a/mintlify/rewards/developer-guides/internal-accounts.mdx b/mintlify/rewards/developer-guides/internal-accounts.mdx
index b44a554d..4146f28b 100644
--- a/mintlify/rewards/developer-guides/internal-accounts.mdx
+++ b/mintlify/rewards/developer-guides/internal-accounts.mdx
@@ -1,28 +1,27 @@
---
title: "Internal Accounts"
description: "Learn how to manage and fund internal accounts for holding platform and customer funds"
+icon: "/images/icons/wallet1.svg"
---
import InternalAccounts from '/snippets/internal-accounts.mdx';
+import { FeatureCard, FeatureCardGrid } from '/snippets/feature-card.mdx';
-
-Learn how to add customer wallets as reward destinations
-
-
-
-Simplify bank account verification with Plaid Link
-
-
-
-Use internal account balances to send Bitcoin rewards
-
-
-
-View complete API documentation for internal accounts
-
-
+
+
+ Learn how to add customer wallets as reward destinations
+
+
+ Simplify bank account verification with Plaid Link
+
+
+ Use internal account balances to send Bitcoin rewards
+
+
+ View complete API documentation for internal accounts
+
+
diff --git a/mintlify/rewards/developer-guides/listing-transactions.mdx b/mintlify/rewards/developer-guides/listing-transactions.mdx
index 822137a8..d16bb116 100644
--- a/mintlify/rewards/developer-guides/listing-transactions.mdx
+++ b/mintlify/rewards/developer-guides/listing-transactions.mdx
@@ -1,8 +1,11 @@
---
title: "Listing Transactions"
description: "Query and track Bitcoin reward payment history with filtering and pagination"
+icon: "/images/icons/file-text.svg"
---
+import { FeatureCard, FeatureCardGrid } from '/snippets/feature-card.mdx';
+
Retrieve transaction history for Bitcoin rewards distributed through your platform. Transactions are returned in descending order (most recent first) and are paginated.
## Basic request
@@ -262,16 +265,14 @@ Always filter by `type=OUTGOING` when tracking rewards to exclude incoming trans
## Next steps
-
-
- Learn how to create and execute Bitcoin reward payouts
-
-
-
- Set up webhook handling for real-time transaction notifications
-
-
-
- View complete transaction API documentation
-
-
+
+
+ Learn how to create and execute Bitcoin reward payouts
+
+
+ Set up webhook handling for real-time transaction notifications
+
+
+ View complete transaction API documentation
+
+
diff --git a/mintlify/rewards/developer-guides/plaid.mdx b/mintlify/rewards/developer-guides/plaid.mdx
index 19ab79f6..d3303da2 100644
--- a/mintlify/rewards/developer-guides/plaid.mdx
+++ b/mintlify/rewards/developer-guides/plaid.mdx
@@ -1,28 +1,24 @@
---
title: "External Accounts with Plaid"
description: "Simplify bank account verification with Plaid Link for external account setup"
+icon: "/images/icons/IconPlaid.svg"
---
import PlaidIntegration from '/snippets/plaid-integration.mdx';
+import { FeatureCard, FeatureCardGrid } from '/snippets/feature-card.mdx';
-
-Learn more about managing external accounts
-
-
-
- Set up webhook handling for account notifications
-
-
-
-View complete Plaid API documentation
-
-
+
+
+ Learn more about managing external accounts
+
+
+ Set up webhook handling for account notifications
+
+
+ View complete Plaid API documentation
+
+
diff --git a/mintlify/rewards/developer-guides/platform-configuration.mdx b/mintlify/rewards/developer-guides/platform-configuration.mdx
index 88736911..873caa83 100644
--- a/mintlify/rewards/developer-guides/platform-configuration.mdx
+++ b/mintlify/rewards/developer-guides/platform-configuration.mdx
@@ -1,6 +1,7 @@
---
title: "Platform Configuration"
description: "Configuring platform settings for rewards"
+icon: "/images/icons/settings-gear2.svg"
---
import PlatformConfigAPI from '/snippets/platform-config-currency-api-webhooks.mdx';
diff --git a/mintlify/rewards/index.mdx b/mintlify/rewards/index.mdx
index c12556be..be0e2c9f 100644
--- a/mintlify/rewards/index.mdx
+++ b/mintlify/rewards/index.mdx
@@ -1,22 +1,31 @@
---
-title: 'Introduction'
-description: 'Send instant Bitcoin rewards to users worldwide through a single API'
+title: "Rewards"
+sidebarTitle: "Introduction"
+icon: "/images/icons/gift1.svg"
+mode: "wide"
---
import { rewardsProductName, topLevelProductName } from '/snippets/variables.mdx';
+import { FeatureCard, FeatureCardGrid } from '/snippets/feature-card.mdx';
+
+
With {rewardsProductName}, you can send instant Bitcoin rewards to your **users' self-custody wallets** worldwide through a single, simple API. {topLevelProductName} automatically handles the entire process, managing the fiat-to-crypto conversion, compliance checks, and instant delivery for you.
-
-
+
+
The Grid API combines USD-to-BTC conversion and payout into a single, atomic operation, simplifying the process of distributing rewards.
-
-
+
+
Grid converts your platform's fiat balance into Bitcoin on demand, allowing you to offer crypto rewards without managing digital asset custody or complex exchange integrations.
-
-
- Delivers Bitcoin to your users’ wallets in seconds (like a Spark wallet) giving them immediate ownership and control.
-
-
+
+
+ Delivers Bitcoin to your users' wallets in seconds (like a Spark wallet) giving them immediate ownership and control.
+
+
---
@@ -81,6 +90,8 @@ The Production environment uses live credentials and base URLs for real transact
---
-
- Ready to integrate {rewardsProductName}? Check out our quickstart guide.
-
+
+
+ Ready to integrate {rewardsProductName}? Check out our quickstart guide.
+
+
diff --git a/mintlify/rewards/platform-tools/postman-collection.mdx b/mintlify/rewards/platform-tools/postman-collection.mdx
index d11e88a6..95c65767 100644
--- a/mintlify/rewards/platform-tools/postman-collection.mdx
+++ b/mintlify/rewards/platform-tools/postman-collection.mdx
@@ -1,5 +1,6 @@
---
title: "Postman Collection"
+icon: "/images/icons/IconPostman.svg"
---
import PostmanCollection from '/snippets/postman-collection.mdx';
diff --git a/mintlify/rewards/platform-tools/sandbox-testing.mdx b/mintlify/rewards/platform-tools/sandbox-testing.mdx
index 8a050533..739cd03b 100644
--- a/mintlify/rewards/platform-tools/sandbox-testing.mdx
+++ b/mintlify/rewards/platform-tools/sandbox-testing.mdx
@@ -1,6 +1,7 @@
---
title: "Sandbox Testing"
description: "Test your rewards integration in the Grid sandbox environment"
+icon: "/images/icons/hammer.svg"
---
## Overview
diff --git a/mintlify/rewards/platform-tools/webhooks.mdx b/mintlify/rewards/platform-tools/webhooks.mdx
index e636c6ff..a2f4822f 100644
--- a/mintlify/rewards/platform-tools/webhooks.mdx
+++ b/mintlify/rewards/platform-tools/webhooks.mdx
@@ -1,5 +1,6 @@
---
title: "Webhooks"
+icon: "/images/icons/bell.svg"
---
import Webhooks from '/snippets/webhooks.mdx';
diff --git a/mintlify/rewards/quickstart.mdx b/mintlify/rewards/quickstart.mdx
index 4f76ccbc..fd309aee 100644
--- a/mintlify/rewards/quickstart.mdx
+++ b/mintlify/rewards/quickstart.mdx
@@ -1,6 +1,7 @@
---
title: "Quickstart"
description: "Complete walkthrough for buying Bitcoin and sending it as a reward to an external Spark wallet for self-custody"
+icon: "/images/icons/lightning.svg"
---
This guide walks you through the complete process of buying Bitcoin with USD and sending it to a self-custody Spark wallet, from customer onboarding through quote execution.
diff --git a/mintlify/rewards/terminology.mdx b/mintlify/rewards/terminology.mdx
index 8e1a67ab..60551a63 100644
--- a/mintlify/rewards/terminology.mdx
+++ b/mintlify/rewards/terminology.mdx
@@ -1,6 +1,7 @@
---
title: "Core Concepts"
description: "Core concepts and terminology for the Grid API"
+icon: "/images/icons/file-text.svg"
---
import Terminology from '/snippets/terminology.mdx';
diff --git a/mintlify/snippets/country-support.mdx b/mintlify/snippets/country-support.mdx
index b75467ec..46fd5f4a 100644
--- a/mintlify/snippets/country-support.mdx
+++ b/mintlify/snippets/country-support.mdx
@@ -1,18 +1,20 @@
-
-
+import { FeatureCard, FeatureCardGrid } from '/snippets/feature-card.mdx';
+
+
+
**Available Globally**
Bitcoin (BTC) and Stablecoin transactions supported worldwide with no geographic restrictions.
-
-
+
+
**United States & Europe**
Onboard as a platform with complete access to APIs, hosted KYC/KYB, dashboard, and business integrations.
Send payments to 65 countries on local banking rails, in addition to BTC and stablecoins.
-
-
+
+
**65 Countries**
Receive payments via local rails like SEPA, PIX, UPI, and more.
-
-
+
+
| Country | ISO Code | Payment Rails |
|---|:---:|:---:|
@@ -83,17 +85,18 @@ Receive payments via local rails like SEPA, PIX, UPI, and more.
| 🇿🇲 Zambia | ZM | `Bank Transfer` |
Regional Summary
-
-
+
+
+
**32 countries** Primary: SEPA/SEPA Instant
-
-
+
+
**17 countries** Primary: Bank Transfer
-
-
+
+
**11 countries** Various instant payment systems
-
-
+
+
**5 countries** PIX, SPEI, ACH, FedNow
-
-
+
+
diff --git a/mintlify/snippets/error-handling.mdx b/mintlify/snippets/error-handling.mdx
index df0cec47..51191f86 100644
--- a/mintlify/snippets/error-handling.mdx
+++ b/mintlify/snippets/error-handling.mdx
@@ -1,3 +1,5 @@
+import { FeatureCard, FeatureCardGrid } from '/snippets/feature-card.mdx';
+
Learn how to handle errors when working with payments and transactions in Grid. Proper error handling ensures a smooth user experience and helps you quickly identify and resolve issues.
## HTTP status codes
@@ -526,26 +528,16 @@ try {
## Next steps
-
-
- Learn how to send payments from internal accounts
-
-
-
- Query and filter payment history
-
-
-
- Match payments with your internal systems
-
-
+
+
+ Learn how to send payments from internal accounts
+
+
+ Query and filter payment history
+
+
+ Match payments with your internal systems
+
+
diff --git a/mintlify/snippets/feature-card.mdx b/mintlify/snippets/feature-card.mdx
new file mode 100644
index 00000000..8579ab10
--- /dev/null
+++ b/mintlify/snippets/feature-card.mdx
@@ -0,0 +1,37 @@
+export const FeatureCard = ({ icon, title, children, href }) => {
+ const card = (
+
Use our hosted Postman collection to explore endpoints and send test requests quickly.
-
-Launch the collection in Postman.
-
-
-
+
+
+ Launch the collection in Postman.
+
+
diff --git a/mintlify/snippets/product-tiles.mdx b/mintlify/snippets/product-tiles.mdx
new file mode 100644
index 00000000..940525ba
--- /dev/null
+++ b/mintlify/snippets/product-tiles.mdx
@@ -0,0 +1,234 @@
+{/* ProductTiles Component - Adapted from Aspen theme */}
+{/* Creates a tabbed interface with use case list on left and preview image on right */}
+
+export const ProductTiles = ({ categories }) => {
+ const [activeCategory, setActiveCategory] = React.useState(categories[0].id);
+ const [activeItem, setActiveItem] = React.useState(categories[0].items[0]?.id);
+
+ const currentCategory = categories.find((cat) => cat.id === activeCategory);
+ const currentItem = currentCategory?.items.find((item) => item.id === activeItem);
+
+ return (
+
-
-Open the hosted test wallet to try UMA flows in your browser.
-
+The UMA Test Wallet is an external tool that demonstrates UMA payment flows end to end and gives you a realistic counterparty for development and QA. It helps you understand flows through hands-on interaction, explore recommended UX patterns, and develop against a live UMA FI.
-
-Browse the code, file issues, and contribute improvements.
-
-
+
+
+ Open the hosted test wallet to try UMA flows in your browser.
+
+
+ Browse the code, file issues, and contribute improvements.
+
+
### What UMA Test Wallet can do
- **Experience UMA flows**: Send and receive cross currency UMA payments
diff --git a/mintlify/styles/base.css b/mintlify/styles/base.css
new file mode 100644
index 00000000..bec3ff88
--- /dev/null
+++ b/mintlify/styles/base.css
@@ -0,0 +1,1775 @@
+/* ===========================================
+ Base Styles
+
+ Global typography, navbar, sidebar, and
+ content area styling. Uses design tokens.
+ =========================================== */
+
+/* ===========================================
+ Root Color Overrides
+ Override Mintlify's primary color variables
+ =========================================== */
+
+:root {
+ --primary: var(--ls-gray-900) !important;
+ --text-primary: var(--ls-gray-900) !important;
+ --color-primary: var(--ls-gray-900) !important;
+ --tw-text-opacity: 1;
+}
+
+html.dark {
+ --primary: var(--ls-gray-100) !important;
+ --text-primary: var(--ls-gray-100) !important;
+ --color-primary: var(--ls-gray-100) !important;
+}
+
+/* ===========================================
+ Squircle Corners (Progressive Enhancement)
+ Smooth Apple-style corners. Falls back to
+ regular border-radius in unsupported browsers.
+ =========================================== */
+
+* {
+ corner-shape: squircle;
+}
+
+/* ===========================================
+ Hide Scrollbars Globally
+ =========================================== */
+
+* {
+ scrollbar-width: none; /* Firefox */
+ -ms-overflow-style: none; /* IE/Edge */
+}
+
+*::-webkit-scrollbar {
+ display: none; /* Chrome, Safari, Edge */
+}
+
+/* ===========================================
+ Global Typography
+
+ Base fonts configured in docs.json.
+ This handles additional customizations.
+ =========================================== */
+
+/* Enable single-story 'a' (stylistic alternates) */
+* {
+ font-feature-settings: "salt" on;
+ text-shadow: none;
+}
+
+/* Headings & Bold: Medium weight (500) */
+h1, h2, h3, h4, h5, h6,
+strong, b, th,
+.sidebar-group-header,
+.eyebrow,
+.font-semibold,
+[data-component-part="step-title"],
+[data-component-part="tab-button"] {
+ font-weight: 500 !important;
+ letter-spacing: normal !important;
+}
+
+/* Page title and H2s: Regular weight (400) */
+h1#page-title,
+#content h2 {
+ font-weight: 400 !important;
+}
+
+/* H3s: Book weight (450) */
+#content h3 {
+ font-weight: 450 !important;
+}
+
+/* Navigation tabs & CTA button: Medium weight */
+.nav-tabs-item,
+#topbar-cta-button, #topbar-cta-button *,
+#page-context-menu-button, #page-context-menu-button *,
+#pagination a, #pagination a * {
+ font-weight: 500 !important;
+ text-shadow: none !important;
+}
+
+/* Navbar links: Book weight (450) */
+.navbar-link a,
+#navbar a.link:not(.nav-tabs-item) {
+ font-weight: 450 !important;
+}
+
+/* Code: Suisse Intl Mono */
+code, pre, kbd, samp, .font-mono {
+ font-family: "Suisse Intl Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
+ font-feature-settings: "salt" on !important;
+}
+
+/* API field names: Mono Bold */
+[data-component-part="field-name"] {
+ font-family: "Suisse Intl Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
+ font-weight: 700 !important;
+ font-feature-settings: "salt" on !important;
+}
+
+/* ===========================================
+ SVG Icons
+ =========================================== */
+
+/* Non-scaling stroke for all SVGs */
+svg, svg * {
+ vector-effect: non-scaling-stroke;
+}
+
+/* Stroke width for Central Icons */
+svg[class*="icon"] path,
+svg[class*="icon"] line,
+svg[class*="icon"] circle,
+svg[class*="icon"] rect,
+svg[class*="icon"] polyline,
+svg[class*="icon"] polygon {
+ stroke-width: 1.5px;
+}
+
+/* Disable lightbox/click on all icon images */
+img[class*="icon"],
+svg[class*="icon"] {
+ pointer-events: none;
+}
+
+/* ===========================================
+ Navbar - Top Row
+ Border, padding, and layout
+ =========================================== */
+
+#navbar {
+ background-color: var(--ls-gray-100) !important;
+}
+
+html.dark #navbar {
+ background-color: var(--ls-gray-975) !important;
+}
+
+#navbar > div,
+#navbar .h-16,
+#navbar [class*="h-16"] {
+ background: transparent !important;
+}
+
+#navbar .h-16,
+#navbar [class*="h-16"] {
+ border-bottom: 0.5px solid var(--ls-black-10) !important;
+ padding-left: 32px !important;
+ padding-right: 32px !important;
+}
+
+html.dark #navbar .h-16,
+html.dark #navbar [class*="h-16"] {
+ border-bottom: 0.5px solid var(--ls-white-06) !important;
+}
+
+/* Tabs row padding */
+#navbar .h-12,
+#navbar [class*="h-12"] {
+ padding-left: 32px !important;
+ padding-right: 32px !important;
+ background: transparent !important;
+}
+
+html.dark #navbar .h-12,
+html.dark #navbar [class*="h-12"],
+html.dark #navbar .h-12 *,
+html.dark #navbar [class*="h-12"] *,
+html.dark #navbar > div,
+html.dark #navbar .z-10,
+html.dark #navbar [class*="z-10"] {
+ border-color: var(--ls-white-06) !important;
+}
+
+/* ===========================================
+ Navbar - Search Bar
+ =========================================== */
+
+#search-bar-entry {
+ background: var(--ls-gray-050) !important;
+ border: 0.5px solid var(--ls-black-10) !important;
+ border-radius: var(--ls-radius-md) !important;
+ width: 320px !important;
+ height: 36px !important;
+ padding: 8px 12px !important;
+ font-size: 14px !important;
+ font-weight: 400 !important;
+ line-height: 20px !important;
+ color: var(--ls-gray-500) !important;
+ display: flex !important;
+ align-items: center !important;
+ gap: 8px !important;
+ transition: all 0.2s ease !important;
+ box-shadow: none !important;
+}
+
+#search-bar-entry:hover {
+ border-color: var(--ls-black-20) !important;
+}
+
+#search-bar-entry:hover svg,
+#search-bar-entry:hover > div > span:first-child {
+ color: var(--ls-gray-950) !important;
+}
+
+html.dark #search-bar-entry {
+ background: rgba(255, 255, 255, 0.05) !important;
+ border-color: var(--ls-white-06) !important;
+ color: var(--ls-gray-500) !important;
+}
+
+html.dark #search-bar-entry:hover {
+ border-color: var(--ls-white-20) !important;
+}
+
+html.dark #search-bar-entry:hover svg,
+html.dark #search-bar-entry:hover > div > span:first-child {
+ color: var(--ls-gray-100) !important;
+}
+
+#search-bar-entry svg {
+ width: 16px !important;
+ height: 16px !important;
+ color: var(--ls-gray-500) !important;
+ stroke-width: 1.5px !important;
+ transition: color 0.2s ease !important;
+}
+
+#search-bar-entry span {
+ color: var(--ls-gray-500) !important;
+ transition: color 0.2s ease !important;
+}
+
+/* Keyboard shortcut badge */
+#search-bar-entry kbd,
+#search-bar-entry [class*="min-w-"] > span:last-child {
+ background: var(--ls-gray-100) !important;
+ border: none !important;
+ border-radius: var(--ls-radius-xs) !important;
+ padding: 2px 6px !important;
+ font-size: 12px !important;
+ font-weight: 400 !important;
+ line-height: 18px !important;
+ color: var(--ls-gray-500) !important;
+ font-family: inherit !important;
+}
+
+html.dark #search-bar-entry kbd,
+html.dark #search-bar-entry [class*="min-w-"] > span:last-child {
+ background: var(--ls-white-06) !important;
+ color: var(--ls-gray-400) !important;
+}
+
+/* ===========================================
+ Navbar - Ask AI Button
+ =========================================== */
+
+[class*="ask-ai"],
+button[aria-label*="AI"],
+[data-component*="ai"],
+#ask-ai-button {
+ background: var(--ls-gray-050) !important;
+ border: 0.5px solid var(--ls-black-10) !important;
+ border-radius: var(--ls-radius-md) !important;
+ height: 36px !important;
+ padding: 8px 12px !important;
+ font-size: 14px !important;
+ font-weight: 400 !important;
+ color: var(--ls-gray-500) !important;
+ transition: all 0.2s ease !important;
+}
+
+[class*="ask-ai"]:hover,
+button[aria-label*="AI"]:hover,
+#ask-ai-button:hover {
+ border-color: var(--ls-black-20) !important;
+ color: var(--ls-gray-950) !important;
+}
+
+html.dark [class*="ask-ai"],
+html.dark button[aria-label*="AI"],
+html.dark #ask-ai-button {
+ background: rgba(255, 255, 255, 0.05) !important;
+ border-color: var(--ls-white-06) !important;
+}
+
+html.dark [class*="ask-ai"]:hover,
+html.dark button[aria-label*="AI"]:hover,
+html.dark #ask-ai-button:hover {
+ border-color: var(--ls-white-20) !important;
+ color: var(--ls-gray-100) !important;
+}
+
+/* ===========================================
+ Navbar - Links (GitHub, Contact)
+ =========================================== */
+
+#navbar .h-16 [class*="gap-x-"],
+#navbar .h-16 [class*="flex"][class*="items-center"] > *:not(:first-child) {
+ margin-left: 0 !important;
+}
+
+/* Navbar link buttons gap */
+#navbar .h-16 nav ul {
+ gap: 8px !important;
+}
+
+#navbar a.link:not(.nav-tabs-item),
+#navbar [class*="navbar"] a,
+.navbar-link {
+ display: flex !important;
+ align-items: center !important;
+ gap: 6px !important;
+ height: 32px !important;
+ padding: 0 4px !important;
+ border-radius: var(--ls-radius-sm) !important;
+ font-size: 14px !important;
+ font-weight: 450 !important;
+ line-height: 20px !important;
+ color: var(--ls-gray-950) !important;
+ text-decoration: none !important;
+ transition: opacity 0.15s ease !important;
+ font-feature-settings: "salt" 1 !important;
+}
+
+#navbar a.link:not(.nav-tabs-item):hover,
+#navbar [class*="navbar"] a:hover,
+.navbar-link:hover {
+ opacity: 0.7 !important;
+}
+
+#navbar a.link:not(.nav-tabs-item) svg,
+#navbar [class*="navbar"] a svg,
+.navbar-link svg {
+ width: 20px !important;
+ height: 20px !important;
+ color: var(--ls-gray-950) !important;
+}
+
+html.dark #navbar a.link:not(.nav-tabs-item),
+html.dark #navbar [class*="navbar"] a,
+html.dark .navbar-link {
+ color: var(--ls-gray-100) !important;
+}
+
+html.dark #navbar a.link:not(.nav-tabs-item) svg,
+html.dark #navbar [class*="navbar"] a svg,
+html.dark .navbar-link svg {
+ color: var(--ls-gray-100) !important;
+}
+
+
+/* ===========================================
+ Navbar - Tabs
+ =========================================== */
+
+/* Inactive state */
+.nav-tabs-item,
+a.nav-tabs-item,
+#navbar .nav-tabs-item,
+.nav-tabs-item:not([class*="text-gray-800"]):not([class*="text-gray-200"]) {
+ color: var(--ls-gray-500) !important;
+}
+
+/* Hover state */
+.nav-tabs-item:hover,
+a.nav-tabs-item:hover,
+#navbar .nav-tabs-item:hover {
+ color: var(--ls-gray-950) !important;
+}
+
+/* Active state */
+.nav-tabs-item.text-gray-800,
+.nav-tabs-item[class*="text-gray-800"],
+a.nav-tabs-item.text-gray-800,
+#navbar .nav-tabs-item.text-gray-800,
+.nav-tabs-item[aria-current="page"] {
+ color: var(--ls-gray-950) !important;
+}
+
+/* Active indicator line */
+.nav-tabs-item::after,
+.nav-tabs-item.text-gray-600::after,
+.nav-tabs-item[class*="text-gray-600"]::after {
+ content: "" !important;
+ position: absolute !important;
+ bottom: 0 !important;
+ left: 0 !important;
+ right: 0 !important;
+ height: 2px !important;
+ background-color: transparent !important;
+ opacity: 0 !important;
+}
+
+.nav-tabs-item.text-gray-800::after,
+a.nav-tabs-item.text-gray-800::after,
+#navbar .nav-tabs-item.text-gray-800::after,
+.nav-tabs-item[aria-current="page"]::after {
+ background-color: var(--ls-gray-950) !important;
+ opacity: 1 !important;
+}
+
+/* Dark mode tabs */
+html.dark .nav-tabs-item,
+html.dark a.nav-tabs-item,
+html.dark #navbar .nav-tabs-item {
+ color: var(--ls-gray-600) !important;
+}
+
+html.dark .nav-tabs-item:hover,
+html.dark a.nav-tabs-item:hover,
+html.dark #navbar .nav-tabs-item:hover {
+ color: var(--ls-gray-100) !important;
+}
+
+/* Active tab in dark mode - override Tailwind's dark:text-gray-200 */
+html.dark .nav-tabs-item[class*="dark:text-gray-200"],
+html.dark a.nav-tabs-item[class*="dark:text-gray-200"],
+html.dark #navbar .nav-tabs-item[class*="dark:text-gray-200"],
+html.dark #navbar a.link.nav-tabs-item[class*="dark:text-gray-200"] {
+ color: var(--ls-white) !important;
+}
+
+/* Dark mode - hide ALL tab indicators by default */
+html.dark .nav-tabs-item::after,
+html.dark #navbar .nav-tabs-item::after {
+ background-color: var(--ls-gray-050) !important;
+ opacity: 0 !important;
+}
+
+/* Dark mode - show indicator ONLY for active tab */
+html.dark .nav-tabs-item.text-gray-200::after,
+html.dark a.nav-tabs-item.text-gray-200::after,
+html.dark .nav-tabs-item[aria-current="page"]::after {
+ opacity: 1 !important;
+}
+
+/* Active sidebar item: Medium weight */
+a[class*="text-primary"]:not(.nav-tabs-item),
+a[class*="text-primary"]:not(.nav-tabs-item) *,
+button[class*="text-primary"],
+button[class*="text-primary"] * {
+ font-weight: 500 !important;
+}
+
+/* ===========================================
+ Sidebar
+ =========================================== */
+
+#sidebar-content {
+ background-color: var(--ls-gray-100) !important;
+ border-right: 0.5px solid var(--ls-black-10) !important;
+ width: 280px !important;
+ min-width: 280px !important;
+ max-width: 280px !important;
+}
+
+html.dark #sidebar-content {
+ background-color: var(--ls-gray-975) !important;
+ border-right-color: var(--ls-white-06) !important;
+}
+
+#navigation-items {
+ background-color: var(--ls-gray-100) !important;
+ padding: 24px !important;
+ display: flex !important;
+ flex-direction: column !important;
+ gap: 0 !important;
+}
+
+html.dark #navigation-items {
+ background-color: var(--ls-gray-975) !important;
+}
+
+#navigation-items > div.text-sm {
+ display: flex !important;
+ flex-direction: column !important;
+ gap: 0 !important;
+}
+
+/* Group containers */
+#navigation-items .mt-6,
+#navigation-items .lg\:mt-8,
+#navigation-items [class*="mt-6"],
+#navigation-items [class*="mt-8"] {
+ margin-top: 0 !important;
+ padding-top: 24px !important;
+ padding-bottom: 24px !important;
+ position: relative !important;
+}
+
+/* First group */
+#navigation-items > div > div:first-child,
+#navigation-items > div.text-sm > div:first-child,
+#navigation-items .text-sm > div:first-child,
+#navigation-items > .text-sm > div:first-of-type {
+ padding-top: 0 !important;
+ padding-bottom: 24px !important;
+ margin-top: 0 !important;
+}
+
+/* Group dividers */
+#navigation-items .mt-6:not(:first-child)::before,
+#navigation-items .lg\:mt-8:not(:first-child)::before,
+#navigation-items [class*="mt-6"]:not(:first-child)::before,
+#navigation-items [class*="mt-8"]:not(:first-child)::before {
+ content: "" !important;
+ position: absolute !important;
+ top: 0 !important;
+ left: -24px !important;
+ right: -24px !important;
+ height: 0 !important;
+ border-top: 0.5px solid var(--ls-black-10) !important;
+}
+
+html.dark #navigation-items .mt-6:not(:first-child)::before,
+html.dark #navigation-items .lg\:mt-8:not(:first-child)::before,
+html.dark #navigation-items [class*="mt-6"]:not(:first-child)::before,
+html.dark #navigation-items [class*="mt-8"]:not(:first-child)::before {
+ border-top-color: var(--ls-white-06) !important;
+}
+
+/* Group labels */
+#navigation-items button[class*="group"],
+#navigation-items [data-component-part="group-title"],
+.sidebar-group-header,
+h5#sidebar-title,
+.sidebar-group-header h5,
+#navigation-items h5 {
+ font-size: 12px !important;
+ font-weight: 400 !important;
+ line-height: 18px !important;
+ color: var(--ls-gray-400) !important;
+ letter-spacing: 0 !important;
+ text-transform: none !important;
+ margin-bottom: 2px !important;
+}
+
+html.dark #navigation-items button[class*="group"],
+html.dark #navigation-items [data-component-part="group-title"],
+html.dark .sidebar-group-header,
+html.dark h5#sidebar-title,
+html.dark .sidebar-group-header h5,
+html.dark #navigation-items h5 {
+ color: var(--ls-gray-700) !important;
+}
+
+/* Group header container */
+.sidebar-group-header,
+div.sidebar-group-header,
+#navigation-items .sidebar-group-header {
+ padding: 4px 8px !important;
+ padding-left: 8px !important;
+ margin-left: 0 !important;
+}
+
+/* Nav item list */
+#navigation-items ul,
+#navigation-items [class*="group"] + div {
+ display: flex !important;
+ flex-direction: column !important;
+ gap: 2px !important;
+}
+
+/* Nav items */
+#navigation-items a,
+#navigation-items li > a {
+ min-height: 36px !important;
+ padding: 8px !important;
+ border-radius: var(--ls-radius-md) !important;
+ font-size: 14px !important;
+ font-weight: 400 !important;
+ line-height: 20px !important;
+ color: var(--ls-gray-500) !important;
+ display: flex !important;
+ align-items: center !important;
+ gap: 12px !important;
+ transition: background-color 0.15s ease, color 0.15s ease !important;
+}
+
+/* Active nav item */
+#navigation-items a[class*="text-primary"],
+#navigation-items a.active,
+#navigation-items a[aria-current="page"] {
+ color: var(--ls-gray-950) !important;
+ font-weight: 500 !important;
+}
+
+/* Dark mode - inactive nav items one step darker */
+html.dark #navigation-items a {
+ color: var(--ls-gray-600) !important;
+}
+
+html.dark #navigation-items a svg {
+ color: var(--ls-gray-600) !important;
+}
+
+html.dark #navigation-items a[class*="text-primary"],
+html.dark #navigation-items a.active,
+html.dark #navigation-items a[aria-current="page"] {
+ color: var(--ls-gray-100) !important;
+}
+
+/* Hover state */
+#navigation-items a:hover {
+ background-color: rgba(0, 0, 0, 0.03) !important;
+}
+
+html.dark #navigation-items a:hover {
+ background-color: rgba(255, 255, 255, 0.05) !important;
+}
+
+/* Nav item icons */
+#navigation-items a svg,
+#navigation-items a img {
+ width: 20px !important;
+ height: 20px !important;
+ flex-shrink: 0 !important;
+}
+
+#navigation-items a svg {
+ color: var(--ls-gray-500) !important;
+}
+
+#navigation-items a img {
+ filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(98%) contrast(87%) !important;
+ opacity: 1 !important;
+}
+
+html.dark #navigation-items a img {
+ filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(90%) !important;
+}
+
+#navigation-items a svg,
+#navigation-items a svg * {
+ vector-effect: non-scaling-stroke !important;
+ stroke-width: 1.5px !important;
+}
+
+/* Active nav item icons */
+#navigation-items a[class*="text-primary"] svg,
+#navigation-items a.active svg,
+#navigation-items a[aria-current="page"] svg {
+ color: var(--ls-gray-950) !important;
+}
+
+html.dark #navigation-items a[class*="text-primary"] svg,
+html.dark #navigation-items a.active svg,
+html.dark #navigation-items a[aria-current="page"] svg {
+ color: var(--ls-gray-100) !important;
+}
+
+#navigation-items a[class*="text-primary"] img,
+#navigation-items a.active img,
+#navigation-items a[aria-current="page"] img {
+ filter: brightness(0) saturate(100%) invert(7%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(95%) !important;
+}
+
+html.dark #navigation-items a[class*="text-primary"] img,
+html.dark #navigation-items a.active img,
+html.dark #navigation-items a[aria-current="page"] img {
+ filter: brightness(0) saturate(100%) invert(90%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(105%) contrast(95%) !important;
+}
+
+/* Hide sidebar controls */
+button[class*="sidebar-toggle"],
+button[aria-label*="sidebar"],
+button[aria-label*="Collapse"],
+[class*="sidebar"] button[class*="collapse"],
+[class*="sidebar-collapse"],
+#sidebar-toggle,
+button[class*="toggle-sidebar"],
+#sidebar-content > button.absolute,
+#sidebar-content > button[class*="absolute"],
+button.absolute.top-5.right-5 {
+ display: none !important;
+}
+
+/* ===========================================
+ API Reference Sidebar - Expandable Groups
+ =========================================== */
+
+/* Force left alignment on sidebar group elements (overrides Palm theme defaults) */
+#navigation-items [class*="mt-6"],
+#navigation-items [class*="mt-8"],
+#navigation-items [class*="lg:mt-"],
+#sidebar-group,
+ul#sidebar-group,
+#sidebar-group *,
+ul#sidebar-group *,
+#navigation-items li.space-y-px,
+#navigation-items li.space-y-px *,
+#navigation-items li[class*="space-y"],
+#navigation-items li[class*="space-y"] * {
+ text-align: left !important;
+ justify-content: flex-start !important;
+ align-items: flex-start !important;
+}
+
+/* Sidebar group container - full width, left aligned */
+#sidebar-group,
+ul#sidebar-group {
+ width: 100% !important;
+ display: flex !important;
+ flex-direction: column !important;
+ align-items: stretch !important;
+ justify-content: flex-start !important;
+}
+
+/* List items - full width, block display */
+#sidebar-group > li,
+ul#sidebar-group > li,
+#navigation-items li.space-y-px,
+#navigation-items li[class*="space-y"] {
+ width: 100% !important;
+ max-width: 100% !important;
+ display: block !important;
+ text-align: left !important;
+}
+
+/* Expandable group buttons - full width, left aligned */
+#sidebar-group > li > button,
+ul#sidebar-group > li > button,
+#navigation-items li.space-y-px > button,
+#navigation-items li[class*="space-y"] > button {
+ position: relative !important;
+ min-height: 36px !important;
+ padding: 8px !important;
+ padding-right: 32px !important;
+ border-radius: var(--ls-radius-md) !important;
+ font-size: 14px !important;
+ font-weight: 400 !important;
+ line-height: 20px !important;
+ color: var(--ls-gray-500) !important;
+ display: block !important;
+ text-align: left !important;
+ width: 100% !important;
+ max-width: 100% !important;
+ box-sizing: border-box !important;
+ justify-content: flex-start !important;
+}
+
+html.dark #sidebar-group > li > button,
+html.dark ul#sidebar-group > li > button,
+html.dark #navigation-items li.space-y-px > button,
+html.dark #navigation-items li[class*="space-y"] > button {
+ color: var(--ls-gray-600) !important;
+}
+
+/* Hide the original SVG chevron */
+#sidebar-group > li > button > svg,
+ul#sidebar-group > li > button > svg,
+#navigation-items li.space-y-px > button > svg,
+#navigation-items li[class*="space-y"] > button > svg {
+ display: none !important;
+ visibility: hidden !important;
+}
+
+/* Create new chevron using CSS pseudo-element (Central Icons style) */
+#sidebar-group > li > button::after,
+ul#sidebar-group > li > button::after,
+#navigation-items li.space-y-px > button::after,
+#navigation-items li[class*="space-y"] > button::after {
+ content: "" !important;
+ position: absolute !important;
+ right: 12px !important;
+ top: 50% !important;
+ width: 6px !important;
+ height: 6px !important;
+ border-right: 1.5px solid var(--ls-gray-300) !important;
+ border-bottom: 1.5px solid var(--ls-gray-300) !important;
+ transform: translateY(-50%) rotate(-45deg) !important;
+ transition: transform 0.2s ease !important;
+}
+
+/* Chevron rotation when expanded (points down) */
+#sidebar-group > li > button[aria-expanded="true"]::after,
+ul#sidebar-group > li > button[aria-expanded="true"]::after,
+#navigation-items li.space-y-px > button[aria-expanded="true"]::after,
+#navigation-items li[class*="space-y"] > button[aria-expanded="true"]::after {
+ transform: translateY(-70%) rotate(45deg) !important;
+}
+
+/* Hover state for expandable groups - background only, no color change */
+#sidebar-group > li > button:hover,
+ul#sidebar-group > li > button:hover,
+#navigation-items li.space-y-px > button:hover,
+#navigation-items li[class*="space-y"] > button:hover {
+ background-color: rgba(0, 0, 0, 0.03) !important;
+}
+
+html.dark #sidebar-group > li > button:hover,
+html.dark ul#sidebar-group > li > button:hover,
+html.dark #navigation-items li.space-y-px > button:hover,
+html.dark #navigation-items li[class*="space-y"] > button:hover {
+ background-color: rgba(255, 255, 255, 0.05) !important;
+}
+
+/* Group buttons stay gray - only active page links get bold/dark styling */
+
+/* Nested items in API reference groups */
+#sidebar-group > li ul,
+ul#sidebar-group > li ul,
+#sidebar-group > li ul li,
+ul#sidebar-group > li ul li {
+ width: 100% !important;
+ display: block !important;
+}
+
+#sidebar-group > li ul a,
+ul#sidebar-group > li ul a,
+#navigation-items li.space-y-px ul a,
+#navigation-items li[class*="space-y"] ul a {
+ font-size: 14px !important;
+ text-align: left !important;
+ width: 100% !important;
+ max-width: 100% !important;
+ display: flex !important;
+ justify-content: flex-start !important;
+ align-items: center !important;
+ box-sizing: border-box !important;
+}
+
+/* Vertical indentation line for nested items in expandable groups */
+#sidebar-group > li > ul,
+ul#sidebar-group > li > ul,
+#navigation-items li.space-y-px > ul,
+#navigation-items li[class*="space-y"] > ul {
+ position: relative !important;
+ margin-left: 18px !important;
+ padding-left: 12px !important;
+ width: calc(100% - 18px) !important;
+ border-left: 0.5px solid var(--ls-black-10) !important;
+}
+
+html.dark #sidebar-group > li > ul,
+html.dark ul#sidebar-group > li > ul,
+html.dark #navigation-items li.space-y-px > ul,
+html.dark #navigation-items li[class*="space-y"] > ul {
+ border-left-color: var(--ls-white-06) !important;
+}
+
+/* ===========================================
+ API Reference Sidebar - Group Icons
+ =========================================== */
+
+/* Base icon styles for all API groups */
+#sidebar-group > li[data-title] > button,
+ul#sidebar-group > li[data-title] > button {
+ padding-left: 40px !important;
+}
+
+#sidebar-group > li[data-title] > button::before,
+ul#sidebar-group > li[data-title] > button::before {
+ content: "" !important;
+ position: absolute !important;
+ left: 8px !important;
+ top: 50% !important;
+ transform: translateY(-50%) !important;
+ width: 20px !important;
+ height: 20px !important;
+ background-size: contain !important;
+ background-repeat: no-repeat !important;
+ background-position: center !important;
+ filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(98%) contrast(87%) !important;
+ opacity: 1 !important;
+}
+
+/* Platform Configuration - settings gear */
+#sidebar-group > li[data-title="Platform Configuration"] > button::before,
+ul#sidebar-group > li[data-title="Platform Configuration"] > button::before {
+ background-image: url('/images/icons/settings-gear2.svg') !important;
+}
+
+/* Customers - people */
+#sidebar-group > li[data-title="Customers"] > button::before,
+ul#sidebar-group > li[data-title="Customers"] > button::before {
+ background-image: url('/images/icons/people.svg') !important;
+}
+
+/* Internal Accounts - wallet */
+#sidebar-group > li[data-title="Internal Accounts"] > button::before,
+ul#sidebar-group > li[data-title="Internal Accounts"] > button::before {
+ background-image: url('/images/icons/wallet1.svg') !important;
+}
+
+/* External Accounts - bank */
+#sidebar-group > li[data-title="External Accounts"] > button::before,
+ul#sidebar-group > li[data-title="External Accounts"] > button::before {
+ background-image: url('/images/icons/bank.svg') !important;
+}
+
+/* Same-Currency Transfers - horizontal expand arrows */
+#sidebar-group > li[data-title="Same-Currency Transfers"] > button::before,
+ul#sidebar-group > li[data-title="Same-Currency Transfers"] > button::before {
+ background-image: url('/images/icons/arrow-expand-hor.svg') !important;
+}
+
+/* Cross-Currency Transfers - left-right arrows */
+#sidebar-group > li[data-title="Cross-Currency Transfers"] > button::before,
+ul#sidebar-group > li[data-title="Cross-Currency Transfers"] > button::before {
+ background-image: url('/images/icons/arrow-left-right.svg') !important;
+}
+
+/* Transactions - receipt */
+#sidebar-group > li[data-title="Transactions"] > button::before,
+ul#sidebar-group > li[data-title="Transactions"] > button::before {
+ background-image: url('/images/icons/receipt-check.svg') !important;
+}
+
+/* Webhooks - bell */
+#sidebar-group > li[data-title="Webhooks"] > button::before,
+ul#sidebar-group > li[data-title="Webhooks"] > button::before {
+ background-image: url('/images/icons/bell.svg') !important;
+}
+
+/* Invitations - people add */
+#sidebar-group > li[data-title="Invitations"] > button::before,
+ul#sidebar-group > li[data-title="Invitations"] > button::before {
+ background-image: url('/images/icons/people-add.svg') !important;
+}
+
+/* Sandbox - sandbox icon */
+#sidebar-group > li[data-title="Sandbox"] > button::before,
+ul#sidebar-group > li[data-title="Sandbox"] > button::before {
+ background-image: url('/images/icons/sandbox.svg') !important;
+}
+
+/* Available UMA Providers - at symbol */
+#sidebar-group > li[data-title="Available UMA Providers"] > button::before,
+ul#sidebar-group > li[data-title="Available UMA Providers"] > button::before {
+ background-image: url('/images/icons/at.svg') !important;
+}
+
+/* API Tokens - key */
+#sidebar-group > li[data-title="API Tokens"] > button::before,
+ul#sidebar-group > li[data-title="API Tokens"] > button::before {
+ background-image: url('/images/icons/key2.svg') !important;
+}
+
+
+/* ===========================================
+ Main Content Area
+ =========================================== */
+
+#content-container,
+#content-area,
+#content,
+[class*="content-container"],
+main[class*="content"],
+div[class*="peer-"][class*="lg:flex"],
+div[class*="is-not-custom"] {
+ background-color: var(--ls-gray-050) !important;
+}
+
+div[class*="lg:flex-1"][class*="lg:min-w-0"],
+div[class*="lg:flex-1"][class*="overflow-x-clip"] {
+ background-color: var(--ls-gray-050) !important;
+}
+
+html.dark #content-container,
+html.dark #content-area,
+html.dark #content,
+html.dark [class*="content-container"],
+html.dark main[class*="content"],
+html.dark div[class*="peer-"][class*="lg:flex"],
+html.dark div[class*="is-not-custom"] {
+ background-color: var(--ls-gray-950) !important;
+}
+
+html.dark div[class*="lg:flex-1"][class*="lg:min-w-0"],
+html.dark div[class*="lg:flex-1"][class*="overflow-x-clip"] {
+ background-color: var(--ls-gray-950) !important;
+}
+
+/* Content images - override Mintlify's inline border-radius with tokens */
+#content img[style*="border-radius"] {
+ border-radius: var(--ls-radius-md) !important;
+}
+
+/* Main content wrapper - remove padding/margin to keep gap clean */
+#content-area {
+ padding-left: 0 !important;
+ padding-right: 0 !important;
+ margin-right: 0 !important;
+}
+
+/* Inner pages content + TOC gap */
+#content-container > div[class*="flex-row-reverse"] {
+ gap: 0 !important;
+}
+
+/* Table of contents sidebar width */
+#content-side-layout {
+ width: 280px !important;
+ min-width: 280px !important;
+ max-width: 280px !important;
+ padding-left: 0 !important;
+ margin-left: 0 !important;
+}
+
+/* Table of contents inner layout - 48px total gap from content */
+#table-of-contents-layout {
+ padding-left: 48px !important;
+}
+
+/* Content container - set width and centering */
+#content-container {
+ max-width: 1024px !important;
+ width: 100% !important;
+ margin-left: auto !important;
+ margin-right: auto !important;
+ padding-left: 48px !important;
+ padding-right: 48px !important;
+}
+
+/* Prose container - center the content with consistent margins */
+#content-area > article,
+#content-area > div > article,
+.prose {
+ margin-left: auto !important;
+ margin-right: auto !important;
+}
+
+/* Table of contents layout - ensure balanced spacing */
+#table-of-contents-layout,
+[class*="table-of-contents-layout"] {
+ padding-right: 24px !important;
+}
+
+/* Hide main footer completely */
+#footer {
+ display: none !important;
+}
+
+/* ===========================================
+ API Reference Page Fixes
+
+ These styles only apply to API reference pages
+ (pages with #api-playground-2-operation-page).
+ They should NOT affect the homepage or regular
+ content pages with TOC.
+ =========================================== */
+
+/* Wider layout for API reference pages only (max 1600px) */
+#content-container:has(#api-playground-2-operation-page) {
+ max-width: 1600px !important;
+ padding-right: 48px !important;
+}
+
+/* Override the inner max-w-5xl constraint on API reference pages */
+#content-container:has(#api-playground-2-operation-page) > div.max-w-5xl,
+#content-container:has(#api-playground-2-operation-page) > div[class*="max-w-5xl"] {
+ max-width: 100% !important;
+}
+
+/* Ensure code panel doesn't shrink on API reference pages */
+#content-container:has(#api-playground-2-operation-page) #content-side-layout {
+ flex-shrink: 0 !important;
+ min-width: 28rem !important;
+}
+
+/* Ensure content area is flexible on API reference pages */
+#content-container:has(#api-playground-2-operation-page) #content-area {
+ flex: 1 1 auto !important;
+ min-width: 0 !important;
+}
+
+/* Add gap between main content and code column ONLY on API reference pages */
+/* Uses :has() to scope the rule to pages containing the API playground */
+#content-container > div[class*="flex-row-reverse"]:has(#api-playground-2-operation-page) {
+ gap: 48px !important;
+}
+
+/* Override faint divider borders in API reference pages */
+#api-playground-2-operation-page [class*="border-gray-100"] {
+ border-color: var(--ls-black-10) !important;
+}
+
+html.dark #api-playground-2-operation-page [class*="border-gray-800"] {
+ border-color: var(--ls-white-06) !important;
+}
+
+/* Ensure API playground content is full width and left-aligned */
+#api-playground-2-operation-page {
+ width: 100% !important;
+ text-align: left !important;
+}
+
+#api-playground-2-operation-page .mdx-content,
+#api-playground-2-operation-page [class*="api-section"],
+#api-playground-2-operation-page [class*="api-section-heading"] {
+ width: 100% !important;
+ text-align: left !important;
+ align-items: flex-start !important;
+}
+
+/* Fix "Example:" row layout - these use flex with gap-1.5 */
+/* Target the specific flex containers that show "Example: value" pairs */
+#api-playground-2-operation-page div.flex[class*="prose"][class*="mt-6"],
+#api-playground-2-operation-page div.flex.prose.prose-sm {
+ justify-content: flex-start !important;
+ gap: 6px !important;
+ width: auto !important;
+}
+
+/* Ensure all prose paragraphs and text are full width and left-aligned */
+#api-playground-2-operation-page p,
+#api-playground-2-operation-page p.whitespace-pre-line {
+ width: 100% !important;
+ max-width: 100% !important;
+ text-align: left !important;
+ display: block !important;
+}
+
+/* Fix containers that wrap the prose content */
+#api-playground-2-operation-page [class*="space-y"],
+#api-playground-2-operation-page [class*="whitespace-normal"],
+#api-playground-2-operation-page [class*="overflow-wrap-anywhere"] {
+ width: 100% !important;
+ text-align: left !important;
+}
+
+/* Ensure section subtitles are full width */
+#api-playground-2-operation-page [class*="api-section-heading-subtitle"],
+#api-playground-2-operation-page [class*="api-section-heading-subtitle"] > div {
+ width: 100% !important;
+}
+
+/* ===========================================
+ Sidebar Footer
+ =========================================== */
+
+/* Sidebar footer section padding */
+#sidebar-content > div:last-of-type {
+ padding-left: 24px !important;
+ padding-right: 24px !important;
+}
+
+/* Add "(0, 0, 0)" text to the left of sidebar footer */
+#sidebar-content > div:last-of-type::before {
+ content: "(0, 0, 0)";
+ font-family: "Suisse Intl Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+ font-size: 10px;
+ color: var(--ls-gray-400);
+ margin-right: auto;
+ padding-left: 4px;
+}
+
+html.dark #sidebar-content > div:last-of-type::before {
+ color: var(--ls-gray-700);
+}
+
+/* ===========================================
+ Card Components
+ =========================================== */
+
+/* Card container - border radius and border */
+.card,
+.card-group .card,
+div.card {
+ border-radius: var(--ls-radius-md) !important; /* 8px */
+ border: 0.5px solid var(--ls-black-10) !important;
+}
+
+html.dark .card,
+html.dark .card-group .card,
+html.dark div.card {
+ background-color: var(--ls-gray-925) !important;
+ border-color: var(--ls-white-06) !important;
+}
+
+/* Card icons - invert for dark mode */
+html.dark .card img,
+html.dark .card-group .card img,
+html.dark div.card img {
+ filter: brightness(0) invert(1) !important;
+}
+
+/* Card description text - secondary color */
+.card .prose p,
+.card .prose span,
+.card [data-as="p"],
+.card-group .card .prose p,
+.card-group .card .prose span {
+ color: var(--ls-gray-500) !important;
+}
+
+/* Card icons - consistent sizing and stroke */
+.card svg,
+.card-group .card svg {
+ width: 20px !important;
+ height: 20px !important;
+}
+
+.card svg path,
+.card svg line,
+.card svg circle,
+.card svg rect,
+.card svg polyline,
+.card svg polygon,
+.card-group .card svg path,
+.card-group .card svg line,
+.card-group .card svg circle,
+.card-group .card svg rect,
+.card-group .card svg polyline,
+.card-group .card svg polygon {
+ stroke-width: 1.5px !important;
+}
+
+/* ===========================================
+ Callout Components
+ =========================================== */
+
+/* Callout container - 8px border radius */
+.callout,
+div.callout,
+[data-callout-type] {
+ border-radius: var(--ls-radius-md) !important;
+}
+
+/* ===========================================
+ API Reference - Code Groups
+ =========================================== */
+
+/* Code group container - 8px border radius, no padding, black-10 border */
+#content-side-layout .code-group {
+ border-radius: var(--ls-radius-md) !important;
+ padding: 0 !important;
+ border: 0.5px solid var(--ls-black-10) !important;
+}
+
+html.dark #content-side-layout .code-group {
+ border-color: var(--ls-white-06) !important;
+}
+
+/* Code group inner container - no border radius */
+#content-side-layout .code-group > div,
+#content-side-layout .code-group [class*="rounded"] {
+ border-radius: 0 !important;
+}
+
+/* Code group tab bar header */
+#content-side-layout .code-group [data-component-part="code-group-tab-bar"] {
+ height: fit-content !important;
+ background-color: var(--ls-gray-025) !important;
+ border-bottom: 0.5px solid var(--ls-black-10) !important;
+ padding-top: 4px !important;
+ padding-bottom: 4px !important;
+}
+
+/* Code group tab bar text - book weight */
+#content-side-layout .code-group [data-component-part="code-group-tab-bar"] {
+ font-weight: 450 !important;
+}
+
+#content-side-layout .code-group [data-component-part="code-group-tab-bar"] span,
+#content-side-layout .code-group [data-component-part="code-group-tab-bar"] button,
+#content-side-layout .code-group [data-component-part="code-group-tab-bar"] div {
+ font-weight: 450 !important;
+}
+
+/* Code group tab bar title - 2px left padding */
+#content-side-layout .code-group [data-component-part="code-group-tab-bar"] span.truncate {
+ padding-left: 4px !important;
+}
+
+html.dark #content-side-layout .code-group [data-component-part="code-group-tab-bar"] {
+ background-color: var(--ls-gray-975) !important;
+ border-bottom-color: var(--ls-white-06) !important;
+}
+
+/* Code block content area - darker in dark mode */
+html.dark #content-side-layout .code-group [data-component-part="code-block-root"],
+html.dark #content-side-layout .code-block-background,
+html.dark #content-side-layout [class*="bg-codeblock"],
+html.dark .code-group [class*="dark:bg-codeblock"] {
+ background-color: var(--ls-gray-975) !important;
+}
+
+/* ===========================================
+ API Reference - Endpoint Bar (GET /path)
+ =========================================== */
+
+/* Outer and inner containers - same background color */
+#api-playground-2-operation-page .border-standard.rounded-2xl,
+#api-playground-2-operation-page .border-standard.rounded-xl {
+ background-color: var(--ls-white) !important;
+ border: 0.5px solid var(--ls-black-10) !important;
+}
+
+#api-playground-2-operation-page .border-standard.rounded-2xl {
+ border-radius: var(--ls-radius-lg) !important;
+}
+
+#api-playground-2-operation-page .border-standard.rounded-xl {
+ border-radius: var(--ls-radius-sm) !important;
+}
+
+html.dark #api-playground-2-operation-page .border-standard.rounded-2xl,
+html.dark #api-playground-2-operation-page .border-standard.rounded-xl,
+html.dark #api-playground-2-operation-page .border-standard[class*="rounded-xl"],
+html.dark #api-playground-2-operation-page [class*="border-standard"][class*="rounded-xl"] {
+ background-color: var(--ls-gray-975) !important;
+ border-color: var(--ls-white-06) !important;
+}
+
+/* Try it button - 6px radius */
+#api-playground-2-operation-page .tryit-button {
+ border-radius: var(--ls-radius-sm) !important;
+}
+
+/* Expandable child attributes button */
+#api-playground-2-operation-page [data-component-part="expandable-button"] {
+ background-color: var(--ls-gray-025) !important;
+}
+
+html.dark #api-playground-2-operation-page [data-component-part="expandable-button"] {
+ background-color: var(--ls-white-06) !important;
+}
+
+/* Expandable details container when open */
+#api-playground-2-operation-page details.expandable,
+#api-playground-2-operation-page details.expandable[open],
+#api-playground-2-operation-page .expandable {
+ background-color: var(--ls-gray-025) !important;
+}
+
+html.dark #api-playground-2-operation-page details.expandable,
+html.dark #api-playground-2-operation-page details.expandable[open],
+html.dark #api-playground-2-operation-page .expandable {
+ background-color: var(--ls-white-06) !important;
+}
+
+/* Page description text - match body text size */
+#api-playground-2-operation-page header#header .text-lg,
+header#header .text-lg {
+ font-size: 16px !important;
+ line-height: 24px !important;
+}
+
+/* ===========================================
+ API Reference - Field Info Pills (chips)
+ =========================================== */
+
+/* Make chips one step darker */
+#api-playground-2-operation-page [data-component-part="field-info-pill"] {
+ background-color: var(--ls-gray-150) !important;
+}
+
+html.dark #api-playground-2-operation-page [data-component-part="field-info-pill"] {
+ background-color: var(--ls-white-06) !important;
+}
+
+/* Inline code styling */
+#content code:not(pre code),
+#content-area code:not(pre code),
+.prose code:not(pre code) {
+ background-color: var(--ls-gray-150) !important;
+ border: 0.5px solid var(--ls-black-10) !important;
+}
+
+html.dark #content code:not(pre code),
+html.dark #content-area code:not(pre code),
+html.dark .prose code:not(pre code) {
+ background-color: var(--ls-white-06) !important;
+ border-color: var(--ls-white-06) !important;
+}
+
+/* ===========================================
+ Content Area - Code Blocks
+ =========================================== */
+
+/* Code block container - 8px border radius, 0.5px border */
+#content .code-block,
+#content-area .code-block,
+.prose .code-block {
+ border-radius: var(--ls-radius-md) !important;
+ border: 0.5px solid var(--ls-black-10) !important;
+}
+
+html.dark #content .code-block,
+html.dark #content-area .code-block,
+html.dark .prose .code-block,
+html.dark #content .code-group,
+html.dark #content-area .code-group,
+html.dark .prose .code-group {
+ border: 0.5px solid var(--ls-white-06) !important;
+}
+
+/* Code block inner container - match outer radius */
+#content .code-block [data-component-part="code-block-root"],
+#content-area .code-block [data-component-part="code-block-root"],
+.prose .code-block [data-component-part="code-block-root"] {
+ border-radius: var(--ls-radius-md) !important;
+}
+
+/* ===========================================
+ Content Area - Code Blocks with Header
+ =========================================== */
+
+/* Code blocks with header - no padding, use overflow:hidden to clip corners */
+#content .code-block:has([data-component-part="code-block-header"]),
+#content-area .code-block:has([data-component-part="code-block-header"]),
+.prose .code-block:has([data-component-part="code-block-header"]),
+#content .code-group,
+#content-area .code-group,
+.prose .code-group {
+ border-radius: var(--ls-radius-md) !important;
+ padding: 0 !important;
+ overflow: hidden !important;
+ border: 0.5px solid var(--ls-black-10) !important;
+}
+
+/* Code block/group header - no border radius (clipped by parent) */
+#content .code-block [data-component-part="code-block-header"],
+#content-area .code-block [data-component-part="code-block-header"],
+.prose .code-block [data-component-part="code-block-header"],
+#content .code-group [data-component-part="code-group-tab-bar"],
+#content-area .code-group [data-component-part="code-group-tab-bar"],
+.prose .code-group [data-component-part="code-group-tab-bar"] {
+ background-color: var(--ls-gray-025) !important;
+ border-bottom: 0.5px solid var(--ls-black-10) !important;
+ font-weight: 450 !important;
+ border-radius: 0 !important;
+}
+
+html.dark #content .code-block [data-component-part="code-block-header"],
+html.dark #content-area .code-block [data-component-part="code-block-header"],
+html.dark .prose .code-block [data-component-part="code-block-header"],
+html.dark #content .code-group [data-component-part="code-group-tab-bar"],
+html.dark #content-area .code-group [data-component-part="code-group-tab-bar"],
+html.dark .prose .code-group [data-component-part="code-group-tab-bar"] {
+ background-color: var(--ls-gray-975) !important;
+ border-bottom-color: var(--ls-white-06) !important;
+}
+
+/* Code block/group content area - no border radius (clipped by parent) */
+#content .code-block:has([data-component-part="code-block-header"]) [data-component-part="code-block-root"],
+#content-area .code-block:has([data-component-part="code-block-header"]) [data-component-part="code-block-root"],
+.prose .code-block:has([data-component-part="code-block-header"]) [data-component-part="code-block-root"],
+#content .code-group [data-component-part="code-block-root"],
+#content-area .code-group [data-component-part="code-block-root"],
+.prose .code-group [data-component-part="code-block-root"] {
+ border-radius: 0 !important;
+}
+
+/* Code block/group content area - darker in dark mode */
+html.dark #content .code-block:has([data-component-part="code-block-header"]) [data-component-part="code-block-root"],
+html.dark #content-area .code-block:has([data-component-part="code-block-header"]) [data-component-part="code-block-root"],
+html.dark .prose .code-block:has([data-component-part="code-block-header"]) [data-component-part="code-block-root"],
+html.dark #content .code-group [data-component-part="code-block-root"],
+html.dark #content-area .code-group [data-component-part="code-block-root"],
+html.dark .prose .code-group [data-component-part="code-block-root"] {
+ background-color: var(--ls-gray-975) !important;
+}
+
+/* ===========================================
+ Pagination Navigation Buttons
+ =========================================== */
+
+#pagination a {
+ border-radius: var(--ls-radius-md) !important;
+ background-color: var(--ls-gray-025) !important;
+ border: 0.5px solid var(--ls-black-10) !important;
+ transition: background-color 0.15s ease !important;
+}
+
+#pagination a:hover {
+ background-color: var(--ls-gray-100) !important;
+}
+
+#pagination a,
+#pagination a * {
+ font-weight: 450 !important;
+}
+
+/* Pagination title - 15px font size */
+#pagination a .font-medium {
+ font-size: 15px !important;
+ line-height: 22px !important;
+}
+
+html.dark #pagination a {
+ background-color: var(--ls-gray-925) !important;
+ border-color: var(--ls-white-06) !important;
+}
+
+html.dark #pagination a:hover {
+ background-color: var(--ls-gray-900) !important;
+}
+
+/* ===========================================
+ Page Context Menu (Split Button Group)
+ =========================================== */
+
+/* Remove any border from parent container */
+#page-context-menu,
+div#page-context-menu {
+ border: none !important;
+ background: transparent !important;
+}
+
+/* Copy page button - rounded left corners, no right border */
+button#page-context-menu-button,
+#page-context-menu > button#page-context-menu-button {
+ background-color: var(--ls-gray-025) !important;
+ border: 0.5px solid var(--ls-black-10) !important;
+ border-right: none !important;
+ border-radius: 0 !important;
+ border-top-left-radius: var(--ls-radius-sm) !important;
+ border-bottom-left-radius: var(--ls-radius-sm) !important;
+}
+
+/* Chevron button - rounded right corners, left border is the divider */
+#page-context-menu > button:not(#page-context-menu-button) {
+ background-color: var(--ls-gray-025) !important;
+ border: 0.5px solid var(--ls-black-10) !important;
+ border-radius: 0 !important;
+ border-top-right-radius: var(--ls-radius-sm) !important;
+ border-bottom-right-radius: var(--ls-radius-sm) !important;
+}
+
+/* Hover state */
+button#page-context-menu-button:hover,
+#page-context-menu > button#page-context-menu-button:hover,
+#page-context-menu > button:not(#page-context-menu-button):hover {
+ background-color: var(--ls-gray-100) !important;
+}
+
+/* Dark mode */
+html.dark button#page-context-menu-button,
+html.dark #page-context-menu > button#page-context-menu-button {
+ background-color: var(--ls-gray-925) !important;
+ border-color: var(--ls-white-06) !important;
+ border-right: none !important;
+}
+
+html.dark #page-context-menu > button:not(#page-context-menu-button) {
+ background-color: var(--ls-gray-925) !important;
+ border-color: var(--ls-white-06) !important;
+}
+
+/* Dark mode hover */
+html.dark button#page-context-menu-button:hover,
+html.dark #page-context-menu > button#page-context-menu-button:hover,
+html.dark #page-context-menu > button:not(#page-context-menu-button):hover {
+ background-color: var(--ls-gray-850) !important;
+}
+
+/* ===========================================
+ Feature Cards (Product pages)
+ =========================================== */
+
+.feature-cards-grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 16px;
+}
+
+@media (max-width: 640px) {
+ .feature-cards-grid {
+ grid-template-columns: 1fr;
+ }
+}
+
+.feature-card {
+ background-color: var(--ls-white);
+ border: 0.5px solid var(--ls-black-10);
+ border-radius: var(--ls-radius-md);
+ padding: 24px;
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+}
+
+html.dark .feature-card {
+ background-color: var(--ls-gray-925);
+ border-color: var(--ls-white-06);
+}
+
+.feature-card-icon-wrapper {
+ background-color: var(--ls-gray-050);
+ border: 0.5px solid var(--ls-black-10);
+ border-radius: var(--ls-radius-xs);
+ padding: 8px;
+ width: fit-content;
+ pointer-events: none;
+}
+
+html.dark .feature-card-icon-wrapper {
+ background-color: var(--ls-white-06);
+ border-color: var(--ls-white-06);
+}
+
+.feature-card-icon {
+ width: 20px;
+ height: 20px;
+ pointer-events: none;
+}
+
+html.dark .feature-card-icon {
+ filter: brightness(0) invert(1);
+}
+
+.feature-card-title {
+ font-size: 15px;
+ line-height: 22px;
+ color: var(--ls-gray-950);
+}
+
+html.dark .feature-card-title {
+ color: var(--ls-gray-050);
+}
+
+.feature-card-desc {
+ font-size: 15px;
+ line-height: 22px;
+ color: var(--ls-gray-500);
+}
+
+/* Column variants */
+.feature-cards-cols-2 {
+ grid-template-columns: repeat(2, 1fr);
+}
+
+.feature-cards-cols-3 {
+ grid-template-columns: repeat(3, 1fr);
+}
+
+.feature-cards-cols-4 {
+ grid-template-columns: repeat(4, 1fr);
+}
+
+@media (max-width: 768px) {
+ .feature-cards-cols-4 {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+@media (max-width: 640px) {
+ .feature-cards-cols-2,
+ .feature-cards-cols-3,
+ .feature-cards-cols-4 {
+ grid-template-columns: 1fr;
+ }
+}
+
+/* Link card styles */
+.feature-card-anchor {
+ text-decoration: none;
+ display: block;
+}
+
+.feature-card-link {
+ transition: all 0.2s ease;
+}
+
+.feature-card-link:hover {
+ background-color: var(--ls-gray-025);
+ transform: scale(1.02);
+}
+
+html.dark .feature-card-link:hover {
+ background-color: var(--ls-gray-900);
+}
+
+/* Cards without icon */
+.feature-card-no-icon {
+ gap: 8px;
+}
+
+/* ===========================================
+ Image Cards (Use cases page)
+ =========================================== */
+
+.image-card {
+ background-color: var(--ls-white);
+ border: 0.5px solid var(--ls-black-10);
+ border-radius: var(--ls-radius-md);
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+html.dark .image-card {
+ background-color: var(--ls-gray-925);
+ border-color: var(--ls-white-06);
+}
+
+.image-card-img-wrapper {
+ width: 100%;
+ aspect-ratio: 1 / 1;
+ overflow: hidden;
+ border-radius: 0;
+}
+
+.image-card-img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ pointer-events: none;
+ border-radius: 0;
+}
+
+.image-card-content {
+ padding: 24px;
+ display: flex;
+ flex-direction: column;
+ gap: 0px;
+}
+
+.image-card-title {
+ font-size: 15px;
+ line-height: 22px;
+ color: var(--ls-gray-950);
+}
+
+html.dark .image-card-title {
+ color: var(--ls-gray-050);
+}
+
+.image-card-desc {
+ font-size: 15px;
+ line-height: 22px;
+ color: var(--ls-gray-500);
+}
+
+/* Link card styles */
+.image-card-anchor {
+ text-decoration: none;
+ display: block;
+ height: 100%;
+}
+
+.image-card-link {
+ transition: all 0.2s ease;
+}
+
+.image-card-link:hover {
+ background-color: var(--ls-gray-025);
+ transform: scale(1.02);
+}
+
+html.dark .image-card-link:hover {
+ background-color: var(--ls-gray-900);
+}
+
+/* ===========================================
+ Steps Component
+ =========================================== */
+
+/* Step number indicators - one step darker than default */
+.steps [class*="size-7"][class*="rounded-full"] {
+ background-color: var(--ls-gray-150) !important;
+ border: 0.5px solid var(--ls-black-10) !important;
+}
+
+html.dark .steps [class*="size-7"][class*="rounded-full"] {
+ background-color: var(--ls-white-10) !important;
+ border-color: var(--ls-white-06) !important;
+}
diff --git a/mintlify/styles/fonts.css b/mintlify/styles/fonts.css
index 945ca28e..9b989ae8 100644
--- a/mintlify/styles/fonts.css
+++ b/mintlify/styles/fonts.css
@@ -9,6 +9,9 @@
font-weight: 400;
font-style: normal;
font-display: block;
+ ascent-override: 85%;
+ descent-override: 15%;
+ line-gap-override: 0%;
}
/* Book (450) - Button text */
@@ -18,6 +21,9 @@
font-weight: 450;
font-style: normal;
font-display: block;
+ ascent-override: 85%;
+ descent-override: 15%;
+ line-gap-override: 0%;
}
/* Medium (500) - Bold/emphasis text */
@@ -27,6 +33,9 @@
font-weight: 500;
font-style: normal;
font-display: block;
+ ascent-override: 85%;
+ descent-override: 15%;
+ line-gap-override: 0%;
}
/* Map bold (700) to Medium for consistent typography */
@@ -36,6 +45,9 @@
font-weight: 700;
font-style: normal;
font-display: block;
+ ascent-override: 85%;
+ descent-override: 15%;
+ line-gap-override: 0%;
}
/* ===========================================
diff --git a/mintlify/styles/homepage.css b/mintlify/styles/homepage.css
new file mode 100644
index 00000000..cd8ae959
--- /dev/null
+++ b/mintlify/styles/homepage.css
@@ -0,0 +1,965 @@
+/* ===========================================
+ Homepage Styles
+
+ All styles specific to the documentation
+ homepage (index.mdx). Uses design tokens.
+ =========================================== */
+
+/* ===========================================
+ Homepage Element Hiding
+ Hide TOC, pagination, footer on homepage
+ =========================================== */
+
+html.is-homepage #table-of-contents,
+html.is-homepage [class*="table-of-contents"],
+html.is-homepage #table-of-contents-layout,
+html.is-homepage [class*="table-of-contents-layout"] {
+ display: none !important;
+}
+
+html.is-homepage #page-title,
+html.is-homepage #header {
+ display: none !important;
+ visibility: hidden !important;
+}
+
+html.is-homepage #page-context-menu,
+html.is-homepage #page-context-menu-button,
+html.is-homepage [class*="page-context-menu"] {
+ display: none !important;
+ visibility: hidden !important;
+}
+
+html.is-homepage .eyebrow,
+html.is-homepage [class*="eyebrow"] {
+ display: none !important;
+}
+
+html.is-homepage #pagination,
+body.is-homepage #pagination,
+html.is-homepage [class*="pagination"],
+body.is-homepage [class*="pagination"],
+html.is-homepage nav[aria-label*="pagination"],
+body.is-homepage nav[aria-label*="pagination"],
+html.is-homepage #content-area > #pagination,
+body.is-homepage #content-area > #pagination {
+ display: none !important;
+ visibility: hidden !important;
+ height: 0 !important;
+ overflow: hidden !important;
+ margin: 0 !important;
+ padding: 0 !important;
+}
+
+html.is-homepage footer,
+body.is-homepage footer,
+html.is-homepage #footer,
+body.is-homepage #footer,
+html.is-homepage [class*="footer"]:not(#sidebar-content *),
+body.is-homepage [class*="footer"]:not(#sidebar-content *) {
+ display: none !important;
+ visibility: hidden !important;
+ height: 0 !important;
+ overflow: hidden !important;
+ margin: 0 !important;
+ padding: 0 !important;
+}
+
+html.is-homepage #content-area {
+ max-width: 100%;
+}
+
+/* Fix content container width and centering on homepage */
+/* 1072px = 1024px content + 24px padding on each side */
+html.is-homepage #content-container {
+ max-width: 1072px !important;
+ width: 100% !important;
+ margin-left: auto !important;
+ margin-right: auto !important;
+ padding-left: 24px !important;
+ padding-right: 24px !important;
+}
+
+/* ===========================================
+ Homepage Content Container
+ Full control over styling without prose
+ =========================================== */
+
+.homepage-content {
+ font-size: 14px;
+ line-height: 1.5;
+ color: var(--ls-gray-950);
+}
+
+html.dark .homepage-content {
+ color: var(--ls-gray-100);
+}
+
+/* Section headings */
+.homepage-content h2 {
+ font-size: 21px;
+ font-weight: 400 !important;
+ line-height: 1.3;
+ letter-spacing: -0.2px;
+ margin: 0;
+ padding: 48px 0 24px 8px;
+ color: var(--ls-black);
+ font-feature-settings: "salt" 1, "case" 1;
+ display: inline;
+}
+
+html.dark .homepage-content h2 {
+ color: var(--ls-gray-100);
+}
+
+.homepage-content h2 + span,
+.homepage-content .section-subtitle {
+ font-size: 21px;
+ font-weight: 400 !important;
+ line-height: 1.3;
+ letter-spacing: -0.2px;
+ color: var(--ls-gray-400);
+ font-feature-settings: "salt" 1, "case" 1;
+ display: inline;
+ margin-left: 6px;
+}
+
+/* ===========================================
+ Section Headers
+ =========================================== */
+
+.section-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 48px 8px 16px 8px;
+ width: 100%;
+}
+
+.section-header-text {
+ display: flex;
+ align-items: baseline;
+ gap: 6px;
+ flex: 1;
+}
+
+.section-title {
+ font-size: 21px;
+ font-weight: 400 !important;
+ line-height: 1.3;
+ letter-spacing: -0.2px;
+ color: var(--ls-gray-950);
+ font-feature-settings: "salt" 1, "case" 1;
+ white-space: nowrap;
+}
+
+html.dark .section-title {
+ color: var(--ls-gray-100);
+}
+
+.section-header .section-subtitle {
+ margin-left: 0;
+}
+
+.section-header-arrow {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ border-radius: var(--ls-radius-sm);
+ color: var(--ls-gray-300);
+ background-color: transparent;
+ transition: background-color 0.15s ease, color 0.15s ease;
+ flex-shrink: 0;
+}
+
+.section-header-arrow:hover {
+ background-color: rgba(0, 0, 0, 0.05);
+ color: var(--ls-gray-950);
+}
+
+.section-header-arrow svg {
+ width: 20px;
+ height: 20px;
+}
+
+html.dark .section-header-arrow {
+ color: var(--ls-gray-300);
+}
+
+html.dark .section-header-arrow:hover {
+ background-color: var(--ls-white-06);
+ color: var(--ls-gray-100);
+}
+
+/* What you can build section */
+.section-what-you-can-build {
+ margin-top: 0;
+}
+
+.section-what-you-can-build .section-header {
+ padding-top: 48px;
+}
+
+/* ===========================================
+ Hero Header
+ =========================================== */
+
+.hero-header {
+ display: flex;
+ gap: 32px;
+ align-items: center;
+ margin-bottom: 48px;
+}
+
+@media (max-width: 768px) {
+ .hero-header {
+ flex-direction: column;
+ gap: 24px;
+ align-items: flex-start;
+ }
+}
+
+.hero-header-left {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ gap: 4px;
+ align-items: flex-start;
+}
+
+.hero-logo {
+ width: 90px;
+ height: 25px;
+ display: block;
+ margin-left: 3px;
+}
+
+html.dark .hero-logo {
+ filter: brightness(0) invert(1);
+}
+
+.hero-subtitle {
+ font-size: 32px;
+ font-weight: 400;
+ line-height: 1.2;
+ letter-spacing: -0.7px;
+ color: var(--ls-gray-950);
+ opacity: 0.5;
+ display: block;
+ font-feature-settings: "salt" 1, "case" 1;
+}
+
+html.dark .hero-subtitle {
+ color: var(--ls-white);
+ opacity: 0.5;
+}
+
+.hero-header-right {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ justify-content: center;
+}
+
+.hero-tagline {
+ font-size: 15px;
+ line-height: 1.625;
+ letter-spacing: 0px;
+ color: var(--ls-gray-950);
+ font-feature-settings: "salt" 1;
+}
+
+html.dark .hero-tagline {
+ color: var(--ls-gray-100);
+}
+
+/* ===========================================
+ Hero Banner (Sandbox CTA)
+ =========================================== */
+
+.hero-banner {
+ position: relative;
+ height: 84px;
+ border-radius: var(--ls-radius-md);
+ overflow: hidden;
+ margin-bottom: 16px;
+ display: flex;
+ align-items: center;
+ padding: 24px;
+ gap: 24px;
+ text-decoration: none;
+ cursor: pointer;
+}
+
+.hero-banner-bg {
+ position: absolute;
+ inset: 0;
+ background-image: url('/images/home/sand.png');
+ background-size: cover;
+ background-position: center center;
+ background-repeat: no-repeat;
+ transition: transform 0.4s ease, filter 0.3s ease;
+ z-index: 0;
+ transform: scale(1.03);
+}
+
+.hero-banner:hover .hero-banner-bg {
+ transform: scale(1);
+ filter: brightness(0.92);
+}
+
+.hero-banner-overlay {
+ position: relative;
+ z-index: 1;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ gap: 24px;
+}
+
+.hero-banner-text {
+ flex: 1;
+ color: var(--ls-gray-100);
+ font-size: 16px;
+ line-height: 24px;
+ font-feature-settings: "salt" 1;
+}
+
+.hero-banner-text-link {
+ color: var(--ls-white-50);
+}
+
+.hero-banner-button {
+ padding: 0 16px;
+ height: 36px;
+ min-width: 36px;
+ background: var(--ls-gray-050);
+ color: var(--ls-gray-950);
+ border-radius: var(--ls-radius-sm);
+ font-size: 14px;
+ font-weight: 450 !important;
+ line-height: 20px;
+ text-decoration: none;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: background 0.2s ease;
+ flex-shrink: 0;
+}
+
+.hero-banner-button:hover {
+ background: var(--ls-white);
+}
+
+html.dark .hero-banner-button {
+ background: var(--ls-gray-950);
+ color: var(--ls-gray-050);
+}
+
+html.dark .hero-banner-button:hover {
+ background: var(--ls-gray-900);
+}
+
+/* ===========================================
+ Info Cards (Understand Grid & Start Building)
+ =========================================== */
+
+.info-cards-grid {
+ display: flex;
+ gap: 16px;
+ padding-bottom: 8px;
+ margin-bottom: 0;
+}
+
+@media (max-width: 640px) {
+ .info-cards-grid {
+ flex-direction: column;
+ }
+}
+
+.info-card {
+ flex: 1 0 0;
+ background: var(--ls-white);
+ border: 0.5px solid var(--ls-black-10);
+ border-radius: var(--ls-radius-md);
+ padding: 24px;
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+}
+
+html.dark .info-card {
+ background: var(--ls-gray-925);
+ border-color: var(--ls-white-06);
+}
+
+.info-card-icon {
+ width: 24px;
+ height: 24px;
+}
+
+.info-card-content {
+ display: flex;
+ flex-direction: column;
+ gap: 0;
+}
+
+.info-card-title {
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 24px;
+ color: var(--ls-gray-950);
+ font-feature-settings: "salt" 1;
+}
+
+html.dark .info-card-title {
+ color: var(--ls-gray-050);
+}
+
+.info-card-desc {
+ font-size: 16px;
+ line-height: 24px;
+ color: var(--ls-gray-400);
+ font-feature-settings: "salt" 1;
+}
+
+.info-card-links {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.info-card-link {
+ font-size: 14px;
+ font-weight: 450 !important;
+ line-height: 20px;
+ text-decoration: none;
+ transition: opacity 0.2s ease;
+}
+
+.info-card-link:hover {
+ opacity: 0.7;
+}
+
+/* Understand Grid card - cyan links */
+.info-card:first-child .info-card-link {
+ color: var(--ls-sky-500);
+}
+
+/* Start building card - orange links */
+.info-card:last-child .info-card-link {
+ color: var(--ls-orange-500);
+}
+
+/* ===========================================
+ Capabilities Grid
+ =========================================== */
+
+.capabilities-grid {
+ display: grid;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ grid-template-rows: repeat(2, auto);
+ border: 0.5px solid var(--ls-black-10);
+ border-radius: var(--ls-radius-md);
+ overflow: hidden;
+ width: 100%;
+ margin-bottom: 8px;
+}
+
+html.dark .capabilities-grid {
+ border-color: var(--ls-white-06);
+}
+
+@media (max-width: 1024px) {
+ .capabilities-grid {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ grid-template-rows: repeat(4, auto);
+ }
+}
+
+@media (max-width: 640px) {
+ .capabilities-grid {
+ grid-template-columns: 1fr;
+ grid-template-rows: auto;
+ }
+}
+
+.capability-card {
+ display: flex;
+ flex-direction: column;
+ gap: 14px;
+ padding: 24px 24px 20px 24px;
+ background: var(--ls-white);
+ border-right: 0.5px solid var(--ls-black-10);
+ border-bottom: 0.5px solid var(--ls-black-10);
+}
+
+html.dark .capability-card {
+ background: var(--ls-gray-925);
+ border-color: var(--ls-white-06);
+}
+
+.capability-card {
+ transition: background-color 0.2s ease;
+}
+
+.capability-card:hover {
+ background: var(--ls-gray-025);
+}
+
+html.dark .capability-card:hover {
+ background: rgba(255, 255, 255, 0.02);
+}
+
+.capability-toggle rect:last-child {
+ transition: transform 0.3s ease;
+}
+
+.capability-card:hover .capability-toggle rect:last-child {
+ transform: translateX(-16px);
+}
+
+.capability-card:nth-child(4n) {
+ border-right: none;
+}
+
+.capability-card:nth-last-child(-n+4) {
+ border-bottom: none;
+}
+
+@media (max-width: 1024px) {
+ .capability-card:nth-child(4n) {
+ border-right: 0.5px solid var(--ls-black-10);
+ }
+ .capability-card:nth-child(2n) {
+ border-right: none;
+ }
+ .capability-card:nth-last-child(-n+4) {
+ border-bottom: 0.5px solid var(--ls-black-10);
+ }
+ .capability-card:nth-last-child(-n+2) {
+ border-bottom: none;
+ }
+
+ html.dark .capability-card:nth-child(4n) {
+ border-right: 0.5px solid var(--ls-white-06);
+ }
+ html.dark .capability-card:nth-last-child(-n+4) {
+ border-bottom: 0.5px solid var(--ls-white-06);
+ }
+}
+
+@media (max-width: 640px) {
+ .capability-card {
+ border-right: none;
+ border-bottom: 0.5px solid var(--ls-black-10);
+ }
+ .capability-card:last-child {
+ border-bottom: none;
+ }
+
+ html.dark .capability-card {
+ border-bottom: 0.5px solid var(--ls-white-06);
+ }
+ html.dark .capability-card:last-child {
+ border-bottom: none;
+ }
+}
+
+.capability-header {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.capability-toggle {
+ width: 32px;
+ height: 16px;
+ flex-shrink: 0;
+}
+
+.capability-title {
+ font-size: 14px;
+ font-weight: 450 !important;
+ line-height: 20px;
+ color: var(--ls-gray-950);
+ font-feature-settings: "salt" 1;
+}
+
+html.dark .capability-title {
+ color: var(--ls-gray-050);
+}
+
+.capability-desc {
+ font-size: 12px;
+ line-height: 18px;
+ color: var(--ls-gray-500);
+ font-feature-settings: "salt" 1;
+}
+
+/* ===========================================
+ Product Tiles (What you can build)
+ =========================================== */
+
+.product-tiles-container {
+ width: 100%;
+ background: var(--ls-white);
+ border: 0.5px solid var(--ls-black-10);
+ border-radius: var(--ls-radius-md);
+ overflow: hidden;
+}
+
+html.dark .product-tiles-container {
+ background: var(--ls-gray-925);
+ border-color: var(--ls-white-06);
+}
+
+/* Tabs header */
+.product-tiles-container > div:first-child {
+ padding: 12px !important;
+ border-bottom: 0.5px solid var(--ls-black-10);
+ gap: 2px !important;
+ margin-bottom: 0 !important;
+ display: flex;
+ flex-wrap: wrap;
+}
+
+html.dark .product-tiles-container > div:first-child {
+ border-color: var(--ls-white-06);
+}
+
+.product-tiles-tab {
+ height: 28px;
+ padding: 0 16px;
+ font-size: 14px;
+ font-weight: 450 !important;
+ line-height: 20px;
+ border-radius: var(--ls-radius-xs);
+ border: none;
+ background: transparent;
+ color: var(--ls-gray-500);
+ cursor: pointer;
+ transition: all 0.2s ease;
+ font-feature-settings: "salt" 1;
+}
+
+html.dark .product-tiles-tab {
+ color: var(--ls-gray-400);
+}
+
+.product-tiles-tab:hover {
+ background: rgba(0, 0, 0, 0.03);
+}
+
+html.dark .product-tiles-tab:hover {
+ background: rgba(255, 255, 255, 0.05);
+}
+
+.product-tiles-tab.active {
+ background: var(--ls-gray-025);
+ color: var(--ls-gray-950);
+ border: 0.5px solid var(--ls-black-10);
+ box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08);
+}
+
+html.dark .product-tiles-tab.active {
+ background: var(--ls-gray-800);
+ color: var(--ls-gray-050);
+ border-color: var(--ls-white-06);
+}
+
+.product-tiles-grid {
+ display: flex;
+ gap: 16px;
+ padding: 16px;
+ align-items: stretch;
+}
+
+@media (max-width: 1024px) {
+ .product-tiles-grid {
+ flex-direction: column;
+ }
+}
+
+.product-tiles-list {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 0;
+ overflow: hidden;
+}
+
+.product-tiles-item {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ padding: 16px;
+ border-radius: var(--ls-radius-xs);
+ background: transparent;
+ border: none;
+ cursor: pointer;
+ text-align: left;
+ transition: background 0.2s ease;
+ width: 100%;
+ text-decoration: none;
+ color: inherit;
+}
+
+.product-tiles-item:hover {
+ background: rgba(0, 0, 0, 0.02);
+}
+
+html.dark .product-tiles-item:hover {
+ background: rgba(255, 255, 255, 0.03);
+}
+
+.product-tiles-item.active {
+ background: var(--ls-gray-050);
+}
+
+html.dark .product-tiles-item.active {
+ background: rgba(255, 255, 255, 0.05);
+}
+
+.product-tiles-icon {
+ width: 24px;
+ height: 24px;
+ flex-shrink: 0;
+}
+
+/* Dark mode: invert icons to white */
+html.dark .product-tiles-icon {
+ filter: brightness(0) invert(1);
+}
+
+.product-tiles-item-content {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 0;
+}
+
+.product-tiles-item-title {
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 21px;
+ color: var(--ls-gray-950);
+ font-feature-settings: "salt" 1;
+}
+
+html.dark .product-tiles-item-title {
+ color: var(--ls-gray-050);
+}
+
+.product-tiles-item-desc {
+ font-size: 14px;
+ line-height: 21px;
+ color: var(--ls-gray-500);
+ font-feature-settings: "salt" 1;
+}
+
+.product-tiles-chevron {
+ flex-shrink: 0;
+ color: var(--ls-gray-400);
+ margin-left: auto;
+ display: none;
+}
+
+.product-tiles-item.active .product-tiles-chevron {
+ display: none !important;
+}
+
+.product-tiles-preview {
+ flex: 1;
+ background: var(--ls-gray-100);
+ border-radius: var(--ls-radius-xs);
+ overflow: hidden;
+ min-height: 300px;
+ align-self: stretch;
+ position: relative;
+}
+
+html.dark .product-tiles-preview {
+ background: var(--ls-gray-800);
+}
+
+.product-tiles-preview-img {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ opacity: 0;
+ transition: opacity 0.25s ease-in-out;
+}
+
+.product-tiles-preview-img.active {
+ opacity: 1;
+}
+
+.product-tiles-preview-placeholder {
+ color: var(--ls-gray-400);
+ font-size: 14px;
+}
+
+/* ===========================================
+ Resources Grid
+ =========================================== */
+
+.resources-grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 24px;
+ padding: 8px 8px 24px 8px;
+ margin-top: 24px;
+ width: 100%;
+}
+
+@media (max-width: 1024px) {
+ .resources-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+@media (max-width: 640px) {
+ .resources-grid {
+ grid-template-columns: 1fr;
+ gap: 32px;
+ }
+}
+
+.resources-column {
+ display: flex;
+ flex-direction: column;
+ gap: 0;
+}
+
+.resources-column-title {
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 18px;
+ letter-spacing: 0;
+ color: var(--ls-gray-400);
+ padding: 4px 0;
+ margin-bottom: 4px;
+ font-feature-settings: "salt" 1;
+}
+
+.resources-link {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 8px 0;
+ font-size: 14px;
+ font-weight: 450 !important;
+ line-height: 20px;
+ letter-spacing: 0;
+ color: var(--ls-gray-950);
+ text-decoration: none;
+ transition: opacity 0.2s ease;
+ font-feature-settings: "salt" 1;
+}
+
+html.dark .resources-link {
+ color: var(--ls-gray-050);
+}
+
+.resources-link:hover {
+ opacity: 0.7;
+}
+
+.resources-link-icon {
+ width: 20px;
+ height: 20px;
+ flex-shrink: 0;
+ color: var(--ls-gray-950);
+}
+
+.resources-link-icon path,
+.resources-link-icon line {
+ stroke-width: 1.5px;
+}
+
+html.dark .resources-link-icon {
+ color: var(--ls-gray-050);
+ filter: brightness(0) invert(1);
+}
+
+/* ===========================================
+ Trusted By Section
+ =========================================== */
+
+.trusted-by {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: auto;
+ width: 100%;
+ padding: 48px 8px 8px 8px;
+}
+
+@media (max-width: 768px) {
+ .trusted-by {
+ flex-wrap: wrap;
+ gap: 24px;
+ justify-content: flex-start;
+ }
+}
+
+.trusted-by-label {
+ font-size: 14px;
+ font-weight: 450;
+ line-height: 20px;
+ color: var(--ls-gray-400);
+ font-feature-settings: "salt" 1;
+ flex-shrink: 0;
+}
+
+.trusted-by-logos {
+ display: contents;
+ pointer-events: none;
+}
+
+@media (max-width: 768px) {
+ .trusted-by-logos {
+ display: flex;
+ gap: 24px;
+ flex-wrap: wrap;
+ }
+}
+
+.trusted-by-logo {
+ flex-shrink: 0;
+ pointer-events: none;
+ display: block;
+ height: 16px;
+ width: auto;
+}
+
+.trusted-by-logo[alt="SoFi"],
+.trusted-by-logo[alt="Nu"] {
+ height: 20px;
+}
+
+html.dark .trusted-by-logo {
+ filter: brightness(0) invert(0.6);
+}
+
+/* ===========================================
+ Divider
+ =========================================== */
+
+.homepage-divider {
+ width: 100%;
+ height: 0;
+ border-bottom: 0.5px solid var(--ls-black-10);
+ margin: 48px 0;
+}
+
+html.dark .homepage-divider {
+ border-color: var(--ls-white-06);
+}
diff --git a/mintlify/styles/styles.css b/mintlify/styles/styles.css
index 0b9e4a0d..2029d2a0 100644
--- a/mintlify/styles/styles.css
+++ b/mintlify/styles/styles.css
@@ -1,342 +1,15 @@
-/* Import design tokens */
-@import "./tokens.css";
-
/* ===========================================
- Custom Font Styles for Suisse Intl
+ Grid Documentation Styles
- Note: Base fonts (body/heading) are configured
- in docs.json using Mintlify's fonts config.
- This CSS handles additional customizations.
+ Main entry point for all custom styles.
+ Imports are ordered by specificity.
=========================================== */
-/* Global: Enable single-story 'a' (stylistic alternates) */
-* {
- font-feature-settings: "salt" on;
- text-shadow: none;
-}
-
-/* Headings & Bold: Use Medium weight (500), normal tracking */
-h1, h2, h3, h4, h5, h6,
-strong, b, th,
-.sidebar-group-header,
-.eyebrow,
-.font-semibold,
-[data-component-part="step-title"],
-[data-component-part="tab-button"] {
- font-weight: 500 !important;
- letter-spacing: normal !important;
-}
-
-/* Navigation tabs, navbar links & CTA button: Medium weight */
-.nav-tabs-item,
-.navbar-link a,
-#topbar-cta-button, #topbar-cta-button *,
-#page-context-menu-button, #page-context-menu-button *,
-#pagination a, #pagination a * {
- font-weight: 500 !important;
- text-shadow: none !important;
-}
-
-/* Active sidebar item only: Medium weight (has text-primary class) */
-a[class*="text-primary"]:not(.nav-tabs-item),
-a[class*="text-primary"]:not(.nav-tabs-item) *,
-button[class*="text-primary"],
-button[class*="text-primary"] * {
- font-weight: 500 !important;
-}
-
-/* Code: Use Suisse Intl Mono */
-code, pre, kbd, samp, .font-mono {
- font-family: "Suisse Intl Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
- font-feature-settings: "salt" on !important;
-}
-
-/* API field names: Mono Bold */
-[data-component-part="field-name"] {
- font-family: "Suisse Intl Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
- font-weight: 700 !important;
- font-feature-settings: "salt" on !important;
-}
-
-/* Homepage: Headings use Regular weight (400) */
-.hero h1, .hero h2, .hero h3,
-.hero .title, .hero .highlight,
-.usecase h2, .usecase .highlight,
-.hero-card h3, .card-content h3 {
- font-weight: 400 !important;
-}
-
-/* Hero title letter-spacing */
-.hero .title span {
- letter-spacing: -1.2px !important;
-}
-
-/* ===========================================
- Existing Styles
- =========================================== */
-
-html.light .hero {
- background: var(--ls-gray-100);
- background-image: radial-gradient(
- circle,
- var(--ls-black-10) 1px,
- transparent 1px
- );
- background-size: 24px 24px;
- background-position: 0 0;
- background-repeat: repeat;
- border-bottom: 1px solid var(--ls-black-10);
- border-top: 1px solid var(--ls-black-10);
-}
-
-html .hero {
- background: var(--ls-gray-950);
- background-image: radial-gradient(circle, var(--ls-gray-850) 1px, transparent 1px);
- background-size: 24px 24px;
- background-position: 0 0;
- background-repeat: repeat;
- border-bottom: 1px solid var(--ls-white-04);
- border-top: 1px solid var(--ls-white-04);
-}
-
-.blue-lines {
- background-image: url("/images/blue-lines-sm.svg");
- background-position: top left;
- background-repeat: no-repeat;
- background-size: 100% 100%;
- pointer-events: none;
-}
-
-@media (min-width: 640px) {
- .blue-lines {
- background-image: url("/images/blue-lines.svg");
- background-position: center center;
- background-size: auto;
- }
-}
-
-html.light .title {
- color: var(--ls-gray-950);
-}
-
-html .title {
- color: var(--ls-gray-050);
-}
-
-html.light .usecase {
- background: var(--ls-gray-050);
-}
-
-html.light .highlight {
- color: var(--ls-gray-950);
-}
-
-html .highlight {
- color: var(--ls-gray-050);
-}
-html.light .hero-card {
- background: var(--ls-white);
-}
-
-html.dark .hero-card {
- background: var(--ls-gray-950);
-}
-
-.hero .call-to-action {
- cursor: pointer;
- background: var(--ls-sky-500);
- color: var(--ls-gray-050);
- display: flex;
- height: 40px;
- padding: 8px 16px;
- justify-content: center;
- align-items: center;
- gap: 4px;
- border-radius: var(--ls-radius-xs);
- font-size: 16px;
- font-style: normal;
- font-weight: 500; /* Medium weight for buttons */
- line-height: 24px;
-}
-
-.hero {
- padding-top: 64px;
- padding-bottom: 64px;
- padding-left: 16px;
- padding-right: 16px;
- margin-bottom: 32px;
- gap: 32px;
-}
-
-@media (min-width: 640px) {
- .hero {
- padding-top: 96px;
- padding-bottom: 96px;
- padding-left: 32px;
- padding-right: 32px;
- margin-bottom: 48px;
- gap: 48px;
- }
-}
-
-@media (min-width: 1024px) {
- .hero {
- padding-top: 128px;
- padding-bottom: 128px;
- padding-left: 120px;
- padding-right: 120px;
- margin-bottom: 64px;
- gap: 64px;
- }
-}
-
-.hero .subtext {
- width: 100%;
- max-width: 538px;
- color: var(--ls-gray-400);
- text-align: center;
- font-feature-settings: "salt" on;
- font-size: 18px;
- font-style: normal;
- font-weight: 400;
- line-height: 20px;
- letter-spacing: -0.6px;
-}
-
-@media (min-width: 640px) {
- .hero .subtext {
- font-size: 18px;
- line-height: 22px;
- }
-}
-
-@media (min-width: 1024px) {
- .hero .subtext {
- font-size: 20px;
- line-height: 24px;
- }
-}
-
-.usecase {
- display: flex;
- padding: 32px 16px;
- flex-direction: column;
- align-items: flex-start;
- gap: 32px;
- align-self: stretch;
-}
-
-@media (min-width: 640px) {
- .usecase {
- padding: 48px 32px;
- gap: 40px;
- }
-}
-
-@media (min-width: 1024px) {
- .usecase {
- padding: 64px 120px;
- gap: 48px;
- }
-}
-
-.usecase h2 {
- font-size: 24px;
- font-style: normal;
- font-weight: 400;
- line-height: 32px; /* 133.333% */
- letter-spacing: -0.72px;
-}
-
-.section {
- display: flex;
- width: 100%;
- max-width: 1200px;
- flex-direction: column;
- align-items: flex-start;
- gap: 32px;
-}
-
-@media (min-width: 640px) {
- .section {
- gap: 40px;
- }
-}
-
-@media (min-width: 1024px) {
- .section {
- gap: 48px;
- }
-}
-
-.footer {
- display: flex;
- flex-direction: row;
- align-items: center;
- gap: 16px;
-}
-
-@media (min-width: 640px) {
- .footer {
- gap: 20px;
- }
-}
-
-@media (min-width: 1024px) {
- .footer {
- gap: 24px;
- }
-}
-
-.hero-card {
- display: flex;
- padding: 16px;
- flex-direction: column;
- align-items: flex-start;
- align-self: stretch;
- border-radius: var(--ls-radius-xs);
- min-height: 200px;
-}
-
-@media (min-width: 640px) {
- .hero-card {
- padding: 20px;
- min-height: 220px;
- }
-}
-
-@media (min-width: 1024px) {
- .hero-card {
- padding: 24px;
- min-height: 240px;
- }
-}
-
-.card-content {
- margin-top: 24px;
- font-size: 18px;
- font-style: normal;
- font-weight: 400;
- line-height: 24px;
- letter-spacing: -0.6px;
-}
-
-@media (min-width: 640px) {
- .card-content {
- margin-top: 20px;
- font-size: 18px;
- line-height: 22px;
- }
-}
+/* Design tokens (colors, spacing, radii) */
+@import "./tokens.css";
-@media (min-width: 1024px) {
- .card-content {
- margin-top: 24px;
- font-size: 20px;
- line-height: 24px;
- }
-}
+/* Base styles (typography, navbar, sidebar) */
+@import "./base.css";
-#footer > div.flex.items-center.justify-between > div > a {
- display: none;
-}
+/* Homepage-specific styles */
+@import "./homepage.css";
diff --git a/mintlify/styles/tokens.css b/mintlify/styles/tokens.css
index 27de4858..ff2f59df 100644
--- a/mintlify/styles/tokens.css
+++ b/mintlify/styles/tokens.css
@@ -88,3 +88,26 @@
--ls-radius-4xl: 40px;
--ls-radius-round: 999px;
}
+
+/* ===========================================
+ Figma-Matched Radii (Squircle Support)
+
+ When corner-shape: squircle is supported,
+ multiply radii by 1.8 to match Figma's
+ corner smoothing algorithm.
+ =========================================== */
+
+@supports (corner-shape: squircle) {
+ :root {
+ --ls-radius-2xs: 3.6px; /* 2 × 1.8 */
+ --ls-radius-xs: 7.2px; /* 4 × 1.8 */
+ --ls-radius-sm: 10.8px; /* 6 × 1.8 */
+ --ls-radius-md: 14.4px; /* 8 × 1.8 */
+ --ls-radius-lg: 21.6px; /* 12 × 1.8 */
+ --ls-radius-xl: 28.8px; /* 16 × 1.8 */
+ --ls-radius-2xl: 43.2px; /* 24 × 1.8 */
+ --ls-radius-3xl: 57.6px; /* 32 × 1.8 */
+ --ls-radius-4xl: 72px; /* 40 × 1.8 */
+ /* --ls-radius-none and --ls-radius-round unchanged */
+ }
+}
diff --git a/package-lock.json b/package-lock.json
index f5a8dead..8edfb997 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,10 @@
"mint": "^4.2.105"
},
"devDependencies": {
+ "@central-icons-react/all": "^1.1.109",
"markdownlint-cli": "^0.44.0",
+ "react": "^19.2.4",
+ "react-dom": "^19.2.4",
"widdershins": "^4.0.1"
}
},
@@ -199,6 +202,17 @@
"node": ">=6.9.0"
}
},
+ "node_modules/@central-icons-react/all": {
+ "version": "1.1.109",
+ "resolved": "https://registry.npmjs.org/@central-icons-react/all/-/all-1.1.109.tgz",
+ "integrity": "sha512-+nBCSA0inw5vPPH/Z5Bj/jUIVRNJxw9h1hoqVeOn4h0muXU57UmjbnDGdfqQQI0yMbwcn73zhnYTh2TssnQsow==",
+ "dev": true,
+ "hasInstallScript": true,
+ "license": "SEE LICENSE IN LICENSE.md",
+ "peerDependencies": {
+ "react": ">=14.0.0 <= 19"
+ }
+ },
"node_modules/@emnapi/runtime": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.5.0.tgz",
@@ -11820,26 +11834,32 @@
}
},
"node_modules/react": {
- "version": "19.1.1",
- "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz",
- "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==",
+ "version": "19.2.4",
+ "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
+ "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/react-dom": {
- "version": "19.1.1",
- "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz",
- "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==",
+ "version": "19.2.4",
+ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
+ "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
"license": "MIT",
"dependencies": {
- "scheduler": "^0.26.0"
+ "scheduler": "^0.27.0"
},
"peerDependencies": {
- "react": "^19.1.1"
+ "react": "^19.2.4"
}
},
+ "node_modules/react-dom/node_modules/scheduler": {
+ "version": "0.27.0",
+ "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+ "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+ "license": "MIT"
+ },
"node_modules/react-is": {
"version": "18.3.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
diff --git a/package.json b/package.json
index cfcfe505..d695eba0 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
"version": "1.0.0",
"description": "Grid API Schema and Documentation",
"scripts": {
+ "build:icons": "CENTRAL_LICENSE_KEY=$CENTRAL_LICENSE_KEY node scripts/export-icons.js",
"build:openapi": "npx @redocly/cli bundle openapi/openapi.yaml -o openapi.yaml && cp openapi.yaml mintlify/openapi.yaml",
"prelint:openapi": "npm run build:openapi",
"lint:openapi": "npx @redocly/cli bundle openapi/openapi.yaml -o openapi.yaml && npx @redocly/cli lint openapi.yaml && cp openapi.yaml mintlify/openapi.yaml",
@@ -17,8 +18,13 @@
},
"devDependencies": {
"markdownlint-cli": "^0.44.0",
+ "react": "^19.2.4",
+ "react-dom": "^19.2.4",
"widdershins": "^4.0.1"
},
+ "optionalDependencies": {
+ "@central-icons-react/all": "^1.1.109"
+ },
"author": "Lightspark Group",
"license": "Apache-2.0"
}
diff --git a/scripts/export-icons.js b/scripts/export-icons.js
new file mode 100644
index 00000000..8190f768
--- /dev/null
+++ b/scripts/export-icons.js
@@ -0,0 +1,143 @@
+#!/usr/bin/env node
+
+/**
+ * Export Central Icons as SVG files for use in Mintlify docs.
+ *
+ * Usage: CENTRAL_LICENSE_KEY=your-key node scripts/export-icons.js
+ *
+ * Icons exported with:
+ * - Style: round
+ * - Fill: outlined
+ * - Radius: 3 (as specified in design requirements)
+ * - Stroke: 1.5 (as specified in design requirements)
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+// Icons to export based on the Figma design mapping
+const ICONS_TO_EXPORT = [
+ // Overview section
+ 'IconSquareInfo', // What is Grid?
+ 'IconBlocks', // Capabilities
+ 'IconLightBulb', // Use cases
+ 'IconBubbleQuestion', // FAQ (using BubbleQuestion instead of CircleQuestionmark)
+
+ // Quickstart section
+ 'IconPaperPlaneTopRight', // Send a payout
+ 'IconArrowInbox', // On-ramp to crypto
+ 'IconGift1', // Send Bitcoin rewards
+ 'IconAt', // Send to UMA address
+
+ // Core concepts section
+ 'IconAgent', // Entities & Relationships
+ 'IconReceiptCheck', // Quote System
+ 'IconWallet1', // Account Model
+ 'IconArrowsRepeatCircle', // Transaction Lifecycle
+ 'IconCoins', // Currencies & Payment Rails
+ 'IconSettingsGear2', // Configuration
+
+ // What you can build section
+ 'IconCarFrontView', // Gig worker payments
+ 'IconStore4', // Marketplace payouts
+ 'IconShipping', // Supplier payments
+ 'IconMultiMedia', // Creator earnings
+
+ // Resources section
+ 'IconGithub', // GitHub
+ 'IconHammer', // Tools
+ 'IconBubbleAnnotation5', // Contact support
+ 'IconKey2', // Request sandbox access
+ 'IconCalendar2', // Talk to sales
+ 'IconGlobe', // Network/Global
+ 'IconLinkedin', // LinkedIn
+
+ // Additional icons for other tabs
+ 'IconFileText', // Documentation
+ 'IconCode', // Code/API
+ 'IconShield', // Security
+ 'IconCreditCard1', // Payments
+ 'IconBanknote1', // Money/Fiat
+ 'IconPeople', // Users/Customers
+ 'IconCheckmark1', // Success/Check
+ 'IconRepeat', // Repeat/Loop
+ 'IconLock', // Security/Lock
+ 'IconLightning', // Fast/Instant
+ 'IconBank', // Bank
+
+ // API Reference sidebar icons
+ 'IconSandbox', // Sandbox
+ 'IconPeopleAdd', // Invitations
+ 'IconArrowExpandHor', // Same-Currency Transfers
+ 'IconArrowLeftRight', // Cross-Currency Transfers
+ 'IconBell', // Webhooks
+
+ // Use case icons (homepage ProductTiles)
+ 'IconSuitcaseWork', // Payroll & contractors
+ 'IconBitcoin', // Buy BTC
+ 'IconMoneyHand', // Sell BTC
+ 'IconCryptoWallet', // Wallet funding
+];
+
+// Icon style configuration (matching design requirements)
+const ICON_STYLE = 'round-outlined-radius-3-stroke-1.5';
+const ICON_SIZE = 20;
+
+async function exportIcons() {
+ const { centralIcons } = require('@central-icons-react/all/icons');
+
+ const outputDir = path.join(__dirname, '..', 'mintlify', 'images', 'icons');
+
+ // Create output directory if it doesn't exist
+ if (!fs.existsSync(outputDir)) {
+ fs.mkdirSync(outputDir, { recursive: true });
+ }
+
+ let exported = 0;
+ let failed = 0;
+
+ for (const iconName of ICONS_TO_EXPORT) {
+ const iconKey = `${ICON_STYLE}/${iconName}`;
+ const iconPath = centralIcons[iconKey];
+
+ if (!iconPath) {
+ console.warn(`⚠ Warning: Icon ${iconName} not found with key ${iconKey}`);
+ // Try to find similar keys
+ const similarKeys = Object.keys(centralIcons).filter(k => k.includes(iconName)).slice(0, 3);
+ if (similarKeys.length > 0) {
+ console.warn(` Similar keys found: ${similarKeys.join(', ')}`);
+ }
+ failed++;
+ continue;
+ }
+
+ try {
+ // Wrap the path in a full SVG element
+ const svgString = ``;
+
+ // Convert icon name from PascalCase to kebab-case for filename
+ const filename = iconName
+ .replace(/^Icon/, '')
+ .replace(/([a-z])([A-Z])/g, '$1-$2')
+ .replace(/([A-Z])([A-Z][a-z])/g, '$1-$2')
+ .toLowerCase() + '.svg';
+
+ const filepath = path.join(outputDir, filename);
+
+ // Write the SVG file
+ fs.writeFileSync(filepath, svgString);
+ console.log(`✓ Exported ${iconName} -> ${filename}`);
+ exported++;
+ } catch (error) {
+ console.error(`✗ Failed to export ${iconName}: ${error.message}`);
+ failed++;
+ }
+ }
+
+ console.log(`\nDone! Exported ${exported} icons, ${failed} failed.`);
+ console.log(`Output directory: ${outputDir}`);
+}
+
+exportIcons().catch(console.error);
-
+
{/* End not-prose homepage-content */}
diff --git a/mintlify/logo/grid-logo.svg b/mintlify/logo/grid-logo.svg
new file mode 100644
index 00000000..bbdf066c
--- /dev/null
+++ b/mintlify/logo/grid-logo.svg
@@ -0,0 +1,8 @@
+
diff --git a/mintlify/payouts-and-b2b/depositing-funds/depositing-funds.mdx b/mintlify/payouts-and-b2b/depositing-funds/depositing-funds.mdx
index d7fde2ac..6c88ca9b 100644
--- a/mintlify/payouts-and-b2b/depositing-funds/depositing-funds.mdx
+++ b/mintlify/payouts-and-b2b/depositing-funds/depositing-funds.mdx
@@ -1,6 +1,7 @@
---
title: "Depositing Funds"
description: "Depositing funds into internal accounts"
+icon: "/images/icons/arrow-inbox.svg"
---
import DepositingFunds from '/snippets/depositing-funds.mdx';
diff --git a/mintlify/payouts-and-b2b/depositing-funds/external-accounts.mdx b/mintlify/payouts-and-b2b/depositing-funds/external-accounts.mdx
index d5736b41..c4237e96 100644
--- a/mintlify/payouts-and-b2b/depositing-funds/external-accounts.mdx
+++ b/mintlify/payouts-and-b2b/depositing-funds/external-accounts.mdx
@@ -1,28 +1,24 @@
---
title: "External Accounts"
description: "Add and manage external bank accounts, wallets, and payment destinations for withdrawals and payouts"
+icon: "/images/icons/bank.svg"
---
import ExternalAccounts from '/snippets/external-accounts.mdx';
+import { FeatureCard, FeatureCardGrid } from '/snippets/feature-card.mdx';
+
+
+
+{/* Trusted By Section */}
+
+
+
+
+ What you can build
+ Combine primitives, ship products
+
+
+
+ Building on Grid
+
+
+{/* Divider Section */}
+
+
+## Resources
+
+
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Tools and sandbox
+ 
+ Postman collection
+
+With {payToBankProductName}, you can send and receive low cost real-time payments to bank accounts worldwide through a single, simple API. {topLevelProductName} automatically routes each payment across its network of {topLevelProductName} switches, handling FX, blockchain settlement, and instant banking off-ramps for you.
-
+
+
Grid is a low-level payment infrastructure API that enables modern financial institutions, businesses, or any developer to send, receive, and settle value globally across fiat currencies, stablecoins, and Bitcoin. With a single, simple API, you can build applications that move money instantly across borders without the complexity of orchestrating multiple payment rails or currencies.
## Features
@@ -11,7 +28,7 @@ Grid is a low-level payment infrastructure API that enables modern financial ins
| Move money anywhere. Fiat to fiat, crypto to fiat, or the other way around, all through a single API. | |
Send and receive across 65+ countries using local instant rails or global crypto rails. | |
Instant, 24/7/365. Powered by Bitcoin and local payment networks. | -|
We handle all the on-chain logic, wallet ops, and conversions so you don’t have to. | +|
We handle all the on-chain logic, wallet ops, and conversions so you don't have to. | ## What to build @@ -47,44 +64,20 @@ Whether you're receiving Bitcoin or sending dollars as pesos to a bank account, ## Next steps -
With Grid, you can seamlessly convert between fiat currencies and cryptocurrencies through a single, simple API. The {topLevelProductName} automatically handles currency conversion, compliance, and instant settlement via the Lightning Network.
-
With {rewardsProductName}, you can send instant Bitcoin rewards to your **users' self-custody wallets** worldwide through a single, simple API. {topLevelProductName} automatically handles the entire process, managing the fiat-to-crypto conversion, compliance checks, and instant delivery for you.
-
+ {icon && (
+
+ );
+ return href ? {card} : card;
+};
+
+export const FeatureCardGrid = ({ cols = 3, children }) => (
+
+ 
+
+ )}
+
+
+ {title}
+ {children}
+
+ {children}
+
+);
+
+export const ImageCard = ({ img, title, children, href }) => {
+ const card = (
+
+
+ );
+ return href ? {card} : card;
+};
diff --git a/mintlify/snippets/postman-collection.mdx b/mintlify/snippets/postman-collection.mdx
index 649d368e..71799e54 100644
--- a/mintlify/snippets/postman-collection.mdx
+++ b/mintlify/snippets/postman-collection.mdx
@@ -1,9 +1,11 @@
+import { FeatureCard, FeatureCardGrid } from '/snippets/feature-card.mdx';
+
+ 
+
+
+
+ {title}
+ {children}
+
+ {/* Category tabs */}
+
+ );
+};
+
+{/* Data for Grid docs "What you can build" section */}
+
+export const gridCategories = [
+ {
+ id: 'payouts',
+ label: 'Payouts',
+ items: [
+ {
+ id: 'gig-workers',
+ title: 'Gig worker payments',
+ description: 'Pay drivers, couriers, and freelancers instantly',
+ icon: '/images/icons/car-front-view.svg',
+ image: '/images/home/payout-preview.png',
+ href: '/payouts-and-b2b'
+ },
+ {
+ id: 'marketplace',
+ title: 'Marketplace payouts',
+ description: 'Settle with sellers in their local currency',
+ icon: '/images/icons/store4.svg',
+ image: '/images/home/payout-preview.png',
+ href: '/payouts-and-b2b'
+ },
+ {
+ id: 'suppliers',
+ title: 'Supplier payments',
+ description: 'Pay vendors and suppliers across borders',
+ icon: '/images/icons/shipping.svg',
+ image: '/images/home/payout-preview.png',
+ href: '/payouts-and-b2b'
+ },
+ {
+ id: 'creators',
+ title: 'Creator earnings',
+ description: 'Distribute revenue to creators worldwide',
+ icon: '/images/icons/multi-media.svg',
+ image: '/images/home/payout-preview.png',
+ href: '/payouts-and-b2b'
+ }
+ ]
+ },
+ {
+ id: 'ramps',
+ label: 'Ramps',
+ items: [
+ {
+ id: 'on-ramp',
+ title: 'On-ramp',
+ description: 'Convert fiat to crypto for your users',
+ icon: '/images/icons/arrow-inbox.svg',
+ image: '/images/home/payout-preview.png',
+ href: '/ramps'
+ },
+ {
+ id: 'off-ramp',
+ title: 'Off-ramp',
+ description: 'Convert crypto to fiat instantly',
+ icon: '/images/icons/banknote1.svg',
+ image: '/images/home/payout-preview.png',
+ href: '/ramps'
+ },
+ {
+ id: 'stablecoin',
+ title: 'Stablecoin bridge',
+ description: 'Bridge between different stablecoin networks',
+ icon: '/images/icons/arrows-repeat-circle.svg',
+ image: '/images/home/payout-preview.png',
+ href: '/ramps'
+ },
+ {
+ id: 'self-custody',
+ title: 'Self-custody',
+ description: 'Enable users to maintain their own wallets',
+ icon: '/images/icons/wallet1.svg',
+ image: '/images/home/payout-preview.png',
+ href: '/ramps'
+ }
+ ]
+ },
+ {
+ id: 'rewards',
+ label: 'Rewards',
+ items: [
+ {
+ id: 'cashback',
+ title: 'Cashback',
+ description: 'Reward customers with instant Bitcoin cashback',
+ icon: '/images/icons/gift1.svg',
+ image: '/images/home/payout-preview.png',
+ href: '/rewards'
+ },
+ {
+ id: 'loyalty',
+ title: 'Loyalty programs',
+ description: 'Build loyalty programs with crypto rewards',
+ icon: '/images/icons/repeat.svg',
+ image: '/images/home/payout-preview.png',
+ href: '/rewards'
+ },
+ {
+ id: 'referrals',
+ title: 'Referrals',
+ description: 'Incentivize referrals with programmable rewards',
+ icon: '/images/icons/people.svg',
+ image: '/images/home/payout-preview.png',
+ href: '/rewards'
+ },
+ {
+ id: 'gaming',
+ title: 'Gaming',
+ description: 'Distribute in-game rewards and winnings',
+ icon: '/images/icons/lightning.svg',
+ image: '/images/home/payout-preview.png',
+ href: '/rewards'
+ }
+ ]
+ },
+ {
+ id: 'global-p2p',
+ label: 'Global P2P',
+ items: [
+ {
+ id: 'remittances',
+ title: 'Remittances',
+ description: 'Send money across borders with low fees',
+ icon: '/images/icons/globe.svg',
+ image: '/images/home/payout-preview.png',
+ href: '/global-p2p'
+ },
+ {
+ id: 'bill-pay',
+ title: 'Bill pay',
+ description: 'Enable users to pay bills internationally',
+ icon: '/images/icons/receipt-check.svg',
+ image: '/images/home/payout-preview.png',
+ href: '/global-p2p'
+ },
+ {
+ id: 'peer-transfers',
+ title: 'Peer transfers',
+ description: 'Facilitate person-to-person payments globally',
+ icon: '/images/icons/paper-plane-top-right.svg',
+ image: '/images/home/payout-preview.png',
+ href: '/global-p2p'
+ },
+ {
+ id: 'uma',
+ title: 'UMA',
+ description: 'Accept payments via Universal Money Addresses',
+ icon: '/images/icons/at.svg',
+ image: '/images/home/payout-preview.png',
+ href: '/global-p2p'
+ }
+ ]
+ }
+];
diff --git a/mintlify/snippets/uma-test-wallet.mdx b/mintlify/snippets/uma-test-wallet.mdx
index b5a70cb6..85b9fc68 100644
--- a/mintlify/snippets/uma-test-wallet.mdx
+++ b/mintlify/snippets/uma-test-wallet.mdx
@@ -1,14 +1,15 @@
-The UMA Test Wallet is an external tool that demonstrates UMA payment flows end to end and gives you a realistic counterparty for development and QA. It helps you understand flows through hands-on interaction, explore recommended UX patterns, and develop against a live UMA FI.
+import { FeatureCard, FeatureCardGrid } from '/snippets/feature-card.mdx';
-
+ {categories.map((cat) => (
+
+ ))}
+
+
+ {/* Content grid: items on left, preview on right */}
+
+ {/* Left side: list of items */}
+
+
+ {currentCategory?.items.map((item) => (
+
+ ))}
+
+
+ {/* Right side: preview image */}
+
+ {currentItem?.image ? (
+ <>
+ 
+ 
+
+ ) : (
+
+
+
+
+ ) : (
+
+ Preview
+
+ )}
+