Mintlify design system
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.
Mintlify colors
The brand roles and neutrals mintlify.com renders, with how many elements use each one.
Brand colors
- Primary
#faf8f539 uses - Secondary
#004cff2 uses - Accent
#ff7a592 uses
Neutrals
#0000001,280 uses#ffffff246 uses#121715127 uses#969e9b66 uses#48545042 uses#717d798 uses#cfcdca8 uses
Backgrounds
#f9f6f3#ef6333#004cff#ff7a59#00a8e0#faf8f5#fefdfb
Text colors
#00000019.5:1 on #f9f6f3#0c8c5e3.96:1 on #f9f6f3#12171516.83:1 on #f9f6f3#717d793.97:1 on #f9f6f3#ffffff1.08:1 on #f9f6f3#969e9b2.55:1 on #f9f6f3#4854507.33:1 on #f9f6f3#cfcdca1.47:1 on #f9f6f3
Contrast checks (WCAG 2.1)
Text and background pairs found together on the page; 100% of them pass.
| Text | Background | Ratio | Result |
|---|---|---|---|
#121715 | #fefdfb | 17.82:1 | AAA |
Mintlify fonts and type scale
Every font family and size in use, read from computed styles rather than the CSS source.
Font families
- inter: sans, most text (1,121 elements)
- paperMono: mono, body (779 elements)
- arizonaFlare: sans, headings (2 elements)
Body text: 12px at weight 500, line height 16px.
Weights in use: 500, 400.
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 and radii
Spacing scale
Corner radii
- 2px
- 6px
- 12px
- 24px
Medium radii lead, with a few larger ones. 1 distinct box shadows.
Motion
The motion reads as springy.
Durations
instant: 55msxs: 100mssm: 165msmd: 280mslg: 500ms
Easing
- ease-out (179 uses):
cubic-bezier(0, 0, 0.2, 1) - custom (103 uses):
cubic-bezier(0.4, 0, 0.2, 1) - spring (1 uses):
cubic-bezier(0.34, 1.56, 0.64, 1)
Design system audit
designlang scores how consistently a site uses its own values. How the audit works.
Overall
Components found: buttons (16), cards (22), links (69), navigation (2), footer (4), modals (1).
By category
| 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 |
- 118 !important rules — prefer specificity over overrides
- 3329 duplicate CSS declarations
Download the tokens
The files designlang wrote for mintlify.com. Run it yourself for a fresh read: npx designlang mintlify.com.
The core values as CSS variables
: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;
}Read mintlify.com yourself
Run the free CLI to get these tokens, plus a Tailwind config, a shadcn theme and rules for Cursor and Claude.
Quick answers
What font does Mintlify use?
What are Mintlify's brand colors?
How do I use the Mintlify design system in my own app?
Is this the official design system?
Measured from the public pages of mintlify.com on 25 June 2026. Mintlify is a trademark of its owner; designlang is not affiliated with it. More: the full Mintlify brand kit, the token extraction guide and the markdown version of this page.