Tang
The default theme. Mintlify-Mint inspired — sans-serif, warm off-white surface, mandarin accent.
~ 2 min read
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 reads better. If they fit on one page, pip is leaner.
Set it
{ "theme": "tang" }This is the default. You can omit the field entirely — same result.
Token table
From 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:
{
"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.
:root {
--tangly-sidebar-width: 20rem;
--tangly-content-max-width: 52rem;
}