# Mintlify design system: colors, fonts and tokens

> Mintlify's website (mintlify.com) uses a light interface with #faf8f5 as its primary color and inter as the main typeface, with paperMono alongside it. designlang measured 9 font sizes from 12px to 50px, 12 spacing values, 4 corner radii.

Source: https://mintlify.com, captured 25 June 2026. Page: https://designlang.app/design-system/mintlify

## Colors

| Role | Hex | Uses |
|---|---|---|
| Primary | `#faf8f5` | 39 |
| Secondary | `#004cff` | 2 |
| Accent | `#ff7a59` | 2 |

Neutrals: `#000000`, `#ffffff`, `#121715`, `#969e9b`, `#485450`, `#717d79`, `#cfcdca`

Backgrounds: `#f9f6f3`, `#ef6333`, `#004cff`, `#ff7a59`, `#00a8e0`, `#faf8f5`, `#fefdfb`

## Fonts

- inter (sans), 1121 elements
- paperMono (mono), 779 elements
- arizonaFlare (sans), 2 elements

## Type scale

| Size | Weight | Line height | Tracking | Used on |
|---|---|---|---|---|
| 50px | 400 | 52px | -2px | h1 |
| 44px | 400 | 48px | -0.88px | p |
| 36px | 500 | 40px | -0.72px | h2, span, p |
| 35px | 500 | 40px | -0.35px | h3, span |
| 24px | 500 | 28px | -0.24px | h2, strong |
| 18px | 400 | 24px | normal | p, span |
| 16px | 400 | 24px | normal | html, head, meta, link |
| 14px | 500 | 16px | normal | button, svg, path, a |
| 12px | 500 | 16px | 0.24px | span |

## Spacing

4px, 40px, 48px, 64px, 80px, 93px, 104px, 128px, 160px, 266px, 290px, 298px

## Radii

2px, 6px, 12px, 24px

## Motion

Feel: springy. Durations: 55ms, 100ms, 165ms, 280ms, 500ms.

## Audit

Overall 92/100 (grade A).

- Color Discipline: 92/100
- Typography Consistency: 80/100
- Spacing System: 100/100
- Shadow Consistency: 100/100
- Border Radius Consistency: 100/100
- Accessibility: 100/100
- CSS Tokenization: 100/100

## CSS variables

```css
:root {
  --color-primary: #faf8f5;
  --color-secondary: #004cff;
  --color-accent: #ff7a59;
  --color-background: #f9f6f3;
  --color-text: #000000;
  --color-neutral-1: #000000;
  --color-neutral-2: #ffffff;
  --color-neutral-3: #121715;
  --color-neutral-4: #969e9b;
  --font-primary: "inter", sans-serif;
  --font-secondary: "paperMono", monospace;
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 12px;
}
```

## Downloads

- [W3C DTCG tokens](https://designlang.app/gallery/mintlify-com/mintlify-com-design-tokens.json)
- [Tailwind config (v3)](https://designlang.app/gallery/mintlify-com/mintlify-com-tailwind.config.js)
- [Tailwind v4 @theme](https://designlang.app/gallery/mintlify-com/mintlify-com-tailwind-v4.css)
- [CSS variables](https://designlang.app/gallery/mintlify-com/mintlify-com-variables.css)
- [shadcn/ui theme](https://designlang.app/gallery/mintlify-com/mintlify-com-shadcn-theme.css)
- [Figma variables](https://designlang.app/gallery/mintlify-com/mintlify-com-figma-variables.json)
- [DESIGN.md](https://designlang.app/gallery/mintlify-com/mintlify-com-DESIGN.md)

Regenerate: `npx designlang mintlify.com`