---
title: "Ledger"
description: "Stripe Docs-inspired theme with tabbed navigation, blue-violet actions, and deep code panels"
canonical_url: "https://docs.farming-labs.dev/docs/themes/ledger"
markdown_url: "https://docs.farming-labs.dev/docs/themes/ledger.md"
last_updated: "2018-10-20"
---

# Ledger
URL: /docs/themes/ledger
LLM index: /llms.txt
Description: Stripe Docs-inspired theme with tabbed navigation, blue-violet actions, and deep code panels

# Ledger Theme

Use this page when the user asks about this topic: Stripe Docs-inspired theme with tabbed navigation, blue-violet actions, and deep code panels.
Keep answers grounded in the exact options, routes, commands, and examples documented here.
If the request moves beyond this page, point to the closest related docs instead of inventing config.

A product-docs preset inspired by <HoverLink href="https://docs.stripe.com/" title="Stripe Docs" description="Stripe's documentation uses compact navigation, strong search affordances, crisp product links, and dark code examples." linkLabel="Visit Stripe Docs" external>Stripe Docs</HoverLink>, with neutral branding for @farming-labs/docs projects.

## Usage

```tsx title="docs.config.ts"
import { defineDocs } from "@farming-labs/docs";
import { ledger } from "@farming-labs/theme/ledger";

export default defineDocs({
  entry: "docs",
  theme: ledger(),
});
```

```css title="app/global.css"
@import "tailwindcss";
@import "@farming-labs/theme/ledger/css";
```

## Defaults

| Property      | Value                              |
| ------------- | ---------------------------------- |
| Primary       | `#5f6cf6`                          |
| Background    | `#f6f8fb` (light), `#0f1424` (dark) |
| Border        | `#dbe3ef`                          |
| Border radius | `0.5rem`                           |
| Content width | 820px                              |
| Sidebar width | 292px                              |
| Header height | 64px                               |

## Style Notes

- Compact tab-like navigation and pill search controls
- Light product-docs surfaces with subtle borders and restrained shadows
- Blue-violet active states for sidebar, TOC, tabs, and actions
- Deep navy code blocks designed to stand out from the light docs shell

## Customizing

```tsx title="customizing.tsx"
theme: ledger({
  ui: {
    colors: { primary: "#2563eb" },
    layout: { sidebarWidth: 304, tocWidth: 248 },
  },
}),
```

## Sitemap

See the full [sitemap](/sitemap.md) for all pages.
Docs-scoped sitemap: [/docs/sitemap.md](/docs/sitemap.md).
Well-known sitemap: [/.well-known/sitemap.md](/.well-known/sitemap.md).