---
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"
agent:
  tokenBudget: 750
---

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

# Ledger Theme

Apply Ledger through `ledger` from `@farming-labs/theme/ledger`, `theme: ledger()`, and `@import "@farming-labs/theme/ledger/css"` in the global CSS file.
Inspect tab-like navigation, pill search controls, deep navy code blocks in dark mode, the `#5f6cf6` light-mode primary, and the 820px/292px content-sidebar layout; documented adjustments include `ui.colors.primary`, `ui.layout.sidebarWidth`, and `ui.layout.tocWidth`.
If the product-doc shell is missing, first align the `/ledger/css` entrypoint with the `ledger()` factory.

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).