---
title: "Command Grid"
description: "Mono-first paper-grid theme inspired by the better-cmdk landing page"
canonical_url: "https://docs.farming-labs.dev/docs/themes/command-grid"
markdown_url: "https://docs.farming-labs.dev/docs/themes/command-grid.md"
last_updated: "2018-10-20"
---

# Command Grid
URL: /docs/themes/command-grid
LLM index: /llms.txt
Description: Mono-first paper-grid theme inspired by the better-cmdk landing page

# Command Grid Theme

Use this page when the user asks about this topic: Mono-first paper-grid theme inspired by the better-cmdk landing page.
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 mono-first preset with a paper-grid light mode, lead-toned dark mode, sharper borders, and calmer surfaces inspired by the better-cmdk landing page.

## Usage

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

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

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

## Defaults

| Property      | Value                               |
| ------------- | ----------------------------------- |
| Primary       | `#141414`                           |
| Background    | `#f8f6ed` (light), `#121212` (dark) |
| Border radius | `0px`                               |
| Content width | 900px                               |
| Sidebar width | 304px                               |

## Style Notes

- Mono-first typography across the sidebar, TOC, and command surfaces
- Paper-grid background in light mode with a quieter dark-mode grid
- Sharper tables, callouts, search UI, and Ask AI surfaces
- Better-cmdk-inspired light/dark palette without the heavier concrete shadow treatment

## Customizing

```tsx title="customizing.tsx"
theme: commandGrid({
  ui: {
    colors: { accent: "#d9c9b4" },
    layout: { sidebarWidth: 320 },
  },
}),
```

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