# Mintlify Design System

> A crisp, monochrome documentation canvas anchored by sharp typography and generous pill-shaped geometry.

**Source:** https://mintlify.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Mintlify relies on a stark monochrome foundation to let documentation content breathe. The UI is defined by Inter at varying weights (400 to 600) with tight negative tracking on display sizes (-0.8px at 40px). Geometry heavily favors the pill shape (9999px) for buttons and badges, contrasting with 16px rounded cards. Shadows are exceptionally subtle (0.03 opacity on a 4px blur), keeping the interface feeling flat, lightweight, and highly technical.

## Signature DNA
1. **Monochrome Foundation** (Pure black `#000000` and white `#ffffff` drive the entire UI hierarchy, ensuring documentation content remains the focal point. Captured across 234 occurrences on all pages.)
2. **Pill-Dominant Geometry** (Buttons, badges, and tags universally adopt a `9999px` border radius, creating a soft, approachable interactive layer against structured text. Captured 136 times across all pages.)
3. **Tight Display Tracking** (Inter display typography pulls in tightly at `-0.8px` for 40px sizes, giving headings a dense, engineered feel suitable for developer tools.)

## Colors

### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--color-black` | `#000000` | Primary text, button backgrounds, borders | 234 | 1.0 | `css_variable:--color-black` |
| `--color-white` | `#ffffff` | Page backgrounds, inverse text | 7 | 1.0 | `css_variable:--color-white` |
| `--twoslash-border-color` | `#dbdfde` | Subtle borders and dividers | N/A | 1.0 | `css_variable:--twoslash-border-color` |
| `--twoslash-popup-bg` | `#f3f7f6` | Elevated surface backgrounds | N/A | 1.0 | `css_variable:--twoslash-popup-bg` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--twoslash-tag-bg` | `#3772cf` | Blue accent for specific code tags | N/A | 1.0 | `css_variable:--twoslash-tag-bg` |
| `--twoslash-tag-annotate-color` | `#1ba673` | Green accent for annotations | N/A | 1.0 | `css_variable:--twoslash-tag-annotate-color` |

### Semantic
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--twoslash-error-bg` | `#d45656` | Error states in code blocks | N/A | 1.0 | `css_variable:--twoslash-error-bg` |
| `--twoslash-warn-bg` | `#c37d0d` | Warning states and highlights | N/A | 1.0 | `css_variable:--twoslash-warn-bg` |

## Typography

### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Inter | 400, 500, 600 | Display, headings, body | Inter | SIL Open Font License |
| Geist Mono | 500, 600 | Code snippets, technical captions | Geist Mono | SIL Open Font License |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `display-lg` | 40px | 44px | -0.8px | 600 | Primary section titles | `h2.section-title` |
| `display-md` | 40px | 44px | -0.8px | 400 | Secondary large headers | `p.text-white.text-[2.5rem]` |
| `heading-sm` | 24px | 31.2px | -0.24px | 500 | Card titles, sub-sections | `h3.md:text-2xl.text-xl` |
| `heading-xs` | 20px | 26px | -0.2px | 500 | Minor section headers | `h4.text-text-main.text-xl` |
| `body-base` | 16px | 24px | normal | 400 | Default running text | `header.w-full.py-4` |
| `body-strong` | 16px | 24px | -0.24px | 500 | Emphasized body text | `span.text-text-main.text-base/6` |
| `body-sm` | 14px | 21px | normal | 500 | Secondary text, labels | `p.text-white.text-sm/[150%]` |
| `caption-mono` | 12px | 18px | 0.6px | 500 | Technical captions | `p.text-brand.font-mono` |

### Principles
* Display sizes require tight negative tracking (-0.8px) to maintain a compact, engineered aesthetic.
* Body text uses neutral tracking for maximum readability in long-form documentation.
* Monospace fonts (Geist Mono) are strictly reserved for technical annotations and code-adjacent captions, often paired with positive tracking (0.6px).

## Spacing
**Base unit:** 4px

| Token | Value | Occurrences |
|---|---|---|
| `spacing-1` | 4px | 38 |
| `spacing-1.5` | 6px | 93 |
| `spacing-2` | 8px | 25 |
| `spacing-3` | 12px | 116 |
| `spacing-4` | 16px | 21 |
| `spacing-6` | 24px | 17 |
| `spacing-8` | 32px | 11 |
| `spacing-18` | 72px | 6 |
| `spacing-24` | 96px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius-none` | 0px | Full-bleed sections, sharp containers | 398 occurrences |
| `radius-sm` | 4px | Form inputs, minor surfaces | 39 occurrences |
| `radius-md` | 14px | Inner card elements | 3 occurrences |
| `radius-lg` | 16px | Standard feature cards | 35 occurrences |
| `radius-xl` | 24px | Large elevated panels | 7 occurrences |
| `radius-pill` | 9999px | Buttons, badges, tags | 136 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `shadow-none` | `none` | Default flat surfaces | Explicitly defined on most components |
| `shadow-subtle` | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, lab(2.42579 -0.165291 -0.470081 / 0.03) 0px 2px 4px 0px` | Hovered cards, standard elevation | 16 occurrences |
| `shadow-strong` | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, lab(100 0 0 / 0.05) 0px 2px 4px 0px` | Dark mode or inverse elevated elements | 2 occurrences |

## Components

### Tier 1: Foundational

#### Pill Button
**Role:** Primary call to action.
**Pages observed:** https://mintlify.com, https://mintlify.com/pricing, https://mintlify.com/about
**Spec:** Background `rgba(0, 0, 0, 0)` (often relies on inherited black or transparent contexts) / Text `lab(100 0 0)` / Border `0px` / Radius `9999px` / Padding `4px 12px` / Typography `15px` / Shadow `none`
**States observed:** Default | Hover (not captured) | Focus (not captured) | Active (not captured) | Disabled: not captured

#### Pill / Badge
**Role:** Status indicators and tags.
**Pages observed:** https://mintlify.com, https://mintlify.com/pricing, https://mintlify.com/about
**Spec:** Background `rgba(0, 0, 0, 0)` / Text `lab(2.42579 -0.165291 -0.470081)` / Border `1px` / Radius `9999px` / Padding `6px 12px` / Typography `14px` / Shadow `none`
**States observed:** Default | Hover (not captured) | Focus (not captured) | Active (not captured) | Disabled: not captured

### Tier 2: Patterns

#### Standard Card
**Role:** Feature highlights and grid items.
**Pages observed:** https://mintlify.com, https://mintlify.com/pricing
**Spec:** Background `lab(100 0 0)` / Text `rgb(0, 0, 0)` / Border `lab(2.42579 -0.165291 -0.470081 / 0.15)` at `1px` / Radius `16px` / Padding `10px` / Typography `16px` / Shadow `lab(2.42579 -0.165291 -0.470081 / 0.03) 0px 2px 4px 0px`
**States observed:** Default | Hover (not captured) | Focus (not captured) | Active (not captured) | Disabled: not captured

#### Pill Card
**Role:** Compact inline feature or pricing toggle.
**Pages observed:** https://mintlify.com, https://mintlify.com/pricing
**Spec:** Background `lab(2.42579 -0.165291 -0.470081)` / Text `lab(100 0 0)` / Border `lab(2.42579 -0.165291 -0.470081)` at `1px` / Radius `9999px` / Padding `7px 24px` / Typography `16px` / Shadow `lab(2.42579 -0.165291 -0.470081 / 0.03) 0px 2px 4px 0px`
**States observed:** Default | Hover (not captured) | Focus (not captured) | Active (not captured) | Disabled: not captured

### Tier 3: Surface-specific

#### Minor Surface
**Role:** Input backgrounds or nested content areas.
**Pages observed:** https://mintlify.com, https://mintlify.com/pricing
**Spec:** Background `rgba(0, 0, 0, 0)` / Text `lab(2.42579 -0.165291 -0.470081 / 0.5)` / Border `0px` / Radius `4px` / Padding `0px` / Typography `15px` / Shadow `none`
**States observed:** Default | Hover (not captured) | Focus (not captured) | Active (not captured) | Disabled: not captured

#### Footer Panel
**Role:** Bottom page navigation and legal.
**Pages observed:** https://mintlify.com, https://mintlify.com/pricing, https://mintlify.com/about
**Spec:** Background `lab(2.42579 -0.165291 -0.470081 / 0.03)` / Text `rgb(0, 0, 0)` / Border `lab(2.42579 -0.165291 -0.470081 / 0.05)` at `1px` / Radius `0px` / Padding `0px` / Typography `16px` / Shadow `none`
**States observed:** Default | Hover (not captured) | Focus (not captured) | Active (not captured) | Disabled: not captured

## Layout
| Property | Value |
|---|---|
| Base unit | 4px |
| Section padding | 96px |
| Standard gap | 12px to 24px |
| Max width | Not explicitly captured (inferred ~1200px from standard practices) |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Stacked grids, full-width pill buttons. |
| Desktop | 1440px | Multi-column feature grids, inline nav. |

## Imagery & decoration
Mintlify contrasts its strict, monochrome UI with expansive, atmospheric hero illustrations (e.g., stylized clouds and skies). The UI itself remains entirely devoid of decorative color, relying on the background imagery to provide brand warmth and visual interest.

## Do's
* Do use pure black (`#000000`) for primary actions and text to maintain high contrast (21.0:1).
* Do apply a `9999px` border radius to all interactive buttons and badges.
* Do use tight negative tracking (`-0.8px`) on display typography (40px+).
* Do keep shadows extremely subtle (`0.03` opacity) to maintain a flat, modern aesthetic.
* Do use Geist Mono for technical annotations and code snippets.

## Don'ts
* Wrong: Using `#3772cf` for a primary button background. Right: Using `#000000` for the primary button. Reason: Mintlify is a monochrome parent brand; saturated colors are reserved for code syntax highlighting.
* Wrong: Applying a `4px` border radius to a primary CTA. Right: Applying `9999px` to the CTA. Reason: The pill shape is a core geometric signature of the brand.
* Wrong: Using loose tracking on large headlines. Right: Using `-0.8px` tracking on 40px headlines. Reason: Loose tracking breaks the dense, engineered feel of the typography.

## Similar brands
* Vercel
* Stripe
* Linear
* Raycast

## Quick start

**CSS Variables:**
```css
:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --twoslash-tag-bg: #3772cf;
  --twoslash-warn-bg: #c37d0d;
  --twoslash-tag-annotate-color: #1ba673;
  --twoslash-border-color: #dbdfde;
  --twoslash-error-bg: #d45656;
  --twoslash-popup-bg: #f3f7f6;
  
  --radius-pill: 9999px;
  --radius-card: 16px;
  
  --shadow-subtle: 0px 2px 4px 0px rgba(0, 0, 0, 0.03);
}
```

**Tailwind v4 @theme:**
```css
@theme {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-accent-blue: #3772cf;
  --color-accent-green: #1ba673;
  
  --radius-pill: 9999px;
  --radius-card: 16px;
  
  --shadow-subtle: 0px 2px 4px 0px rgba(0, 0, 0, 0.03);
  
  --font-sans: "Inter", sans-serif;
  --font-mono: "Geist Mono", monospace;
}
```

## Agent prompt examples
1. "Build a primary call-to-action button using the Mintlify design system. It must have a pure black background (`#000000`), white text, a `9999px` border radius, and use Inter at 15px."
2. "Create a feature card with a white background, a 1px border using `#dbdfde`, a `16px` border radius, and the subtle `0.03` opacity shadow defined in the system."
3. "Generate a hero section heading using Inter at 40px with `-0.8px` letter spacing and a font weight of 600."

## Known gaps
Interactive states (hover, focus, active) were not captured in the source data. Mobile-specific typography scaling rules are inferred rather than explicitly tokenized.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://mintlify.com | Desktop 1440px, Mobile 390px | 2026-06-06T05:01:05.453Z |
| Pricing | https://mintlify.com/pricing | Desktop 1440px | 2026-06-06T05:01:05.453Z |
| About | https://mintlify.com/about | Desktop 1440px | 2026-06-06T05:01:05.453Z |