URL: /guides/themes/tang

---
title: Tang
description: The default theme. Mintlify-Mint inspired — sans-serif, warm off-white surface, mandarin accent.
icon: "flame"
---

# Tang

Tang is what `tangly init` ships. Sans-serif everywhere, warm off-white background, mandarin orange accent. Sidebar to the left, two-row top bar (logo + tabs), right-rail TOC. Familiar to anyone coming from Mintlify Mint.

## When to use it

- General-purpose OSS docs.
- Dev-tool product sites.
- API references with a sidebar of grouped endpoints.
- Anything where you want zero design ambiguity.

If your docs are a long-form manuscript, [readable](/guides/themes/readable) reads better. If they fit on one page, [pip](/guides/themes/pip) is leaner.

## Set it

```json
{ "theme": "tang" }
```

This is the default. You can omit the field entirely — same result.

## Token table

From [`packages/theme-tang/src/styles/theme.css`](https://github.com/tanglydocs/tangly/blob/main/packages/theme-tang/src/styles/theme.css):

### Colors — light

| Token | Value | Role |
|---|---|---|
| `--tangly-color-primary` | `#ea580c` | Tang-600 — mandarin. Active nav, primary buttons. |
| `--tangly-color-primary-light` | `#f97316` | Tang-500. Hover states, gradient highlights. |
| `--tangly-color-primary-dark` | `#c2410c` | Tang-700. Active states. |
| `--tangly-color-bg` | `#fafaf7` | Paper — warm off-white surface. |
| `--tangly-color-bg-elevated` | `#f4f2ec` | Slightly recessed paper. Cards, code blocks. |
| `--tangly-color-fg` | `#0b0b0f` | Ink — primary text. |
| `--tangly-color-muted` | `#6b6b70` | Mute — secondary text. |
| `--tangly-color-border` | `#e6e4de` | Hairlines. |

### Colors — dark

The dark mode variant uses the same accents on a near-black surface (`#0b0b0f`) with darker hairlines (`#1f1f23`).

### Typography

| Token | Value |
|---|---|
| `--tangly-font-heading` | `Inter` (Google Fonts) → system fallback |
| `--tangly-font-body` | `Inter` |
| `--tangly-font-mono` | `JetBrains Mono` → ui-monospace |

### Layout

| Token | Value | Notes |
|---|---|---|
| `--tangly-sidebar-width` | `17rem` | |
| `--tangly-content-max-width` | `48rem` | |
| `--tangly-toc-width` | `15rem` | Right-rail TOC. |
| `--tangly-topnav-row1-height` | `3.75rem` | Logo row. |
| `--tangly-topnav-row2-height` | `2.5rem` | Tabs row. |

### Radii

| Token | Value |
|---|---|
| `--tangly-radius` | `0.5rem` |
| `--tangly-radius-sm` | `0.375rem` |
| `--tangly-radius-lg` | `0.75rem` |

## Customizing

Three layered options:

```json
{
  "theme": "tang",
  "colors": {
    "primary": "#0ea5e9",
    "light":   "#38bdf8",
    "dark":    "#0284c7"
  },
  "fonts": {
    "heading": { "family": "DM Sans" },
    "body":    { "family": "Inter" }
  }
}
```

For deeper changes (sidebar width, line heights, radii), drop a `theme/styles/theme.css` at your project root. The CSS file is concatenated after the bundled theme — your declarations win.

```css
:root {
  --tangly-sidebar-width: 20rem;
  --tangly-content-max-width: 52rem;
}
```

## Source

[`packages/theme-tang/src/styles/theme.css`](https://github.com/tanglydocs/tangly/blob/main/packages/theme-tang/src/styles/theme.css)