---
title: "GreenTree"
description: "Mintlify-inspired theme with emerald green accent and Inter typography"
canonical_url: "https://docs.farming-labs.dev/docs/themes/greentree"
markdown_url: "https://docs.farming-labs.dev/docs/themes/greentree.md"
last_updated: "2018-10-20"
agent:
  tokenBudget: 750
---

# GreenTree
URL: /docs/themes/greentree
LLM index: /llms.txt
Description: Mintlify-inspired theme with emerald green accent and Inter typography
Related: /docs/themes, /docs/themes/shiny, /docs/customization/colors, /docs/customization/typography

# GreenTree Theme

GreenTree's exact pairing is `greentree` from `@farming-labs/theme/greentree`, `theme: greentree()`, and `@farming-labs/theme/greentree/css` in `app/global.css`.
Success is an emerald `#0D9373` accent with Inter typography, a compact 240px sidebar, and a 56px header; use the shown `ui.colors.primary` and `ui.layout.sidebarWidth` overrides for variations.
If the layout stays at another preset's dimensions, check the exact lowercase `greentree` export and its matching CSS subpath.

Inspired by <HoverLink href="https://mintlify.com/docs" title="Mintlify Docs" description="A hosted docs platform known for compact navigation, clean typography, and strong product-doc presentation." linkLabel="Visit Mintlify" external>Mintlify</HoverLink> — a clean, modern design with an emerald green accent, Inter typography, and a compact sidebar.

## Usage

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

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

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

## Defaults

| Property      | Value               |
| ------------- | ------------------- |
| Primary       | `#0D9373` (Emerald) |
| Background    | `#fff`              |
| Muted         | `#505351`           |
| Border        | `#DFE1E0`           |
| Border radius | Standard            |
| Content width | 768px               |
| Sidebar width | 240px               |
| Header height | 56px                |

## Customizing

```tsx title="customizing.tsx"
theme: greentree({
  ui: {
    colors: { primary: "#2563eb" },
    layout: { sidebarWidth: 280 },
  },
}),
```

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