Typography
scale ratio 1.199- Intercss: interdisplay + body400 50092%
- Arizona Flarecss: arizonaFlareother400 5008%
- Paper Monocss: paperMonomono5000%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Arizona Flare | 50px | 400 | 1.04 | -0.04em |
| headline | Inter | 36px | 500 | 1.111 | -0.02em |
| title | Inter | 16px | 500 | 1.5 | 0em |
| body | Inter | 14px | 400 | 1.429 | 0em |
| body-sm | Inter | 12px | 500 | 1.333 | 0.02em |
| label | Inter | 16px | 400 | 1.5 | 0em |
| mono | Paper Mono | 12px | 500 | 1.333 | 0.02em |
Type scale
Aa12Aa14Aa16Aa18Aa24Aa32Aa35Aa36Aa50
- Body size
- 14px / 1.429
- Display size
- 50px
- Display tracking
- -0.04em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 19.93:1
- Muted on bg
- 4.28:1
- Accent on bg
- 4.26:1
- Dark mode
- follows system
Declared accent tokens
- --color-brand#0C8C5Epainted
- --color-brand-base#0C8C5Epainted
- --color-brand-vivid#1FA77Apainted
- --consent-widget-branding-link-color#0C8C5Epainted
Space, shape & depth
Spacing scale (base 4px)
- 4
- 6
- 8
- 10
- 12
- 16
- 20
- 24
- 28
- 32
- 40
- 176
Corner radii
24612
Shadows (0)
none
- Borders
- hairline, 1px
- Section padding
- 40px
Components
exact computed valuesbutton-primary
Contact sales
- backgroundColor
- #08090A
- textColor
- #FFFFFF
- rounded
- 4px
- padding
- 8px 14px
- height
- 34px
- fontFamily
- Inter
- fontSize
- 14px
- fontWeight
- 500
button-secondary
Sign up with Google
- textColor
- #08090A
- rounded
- 4px
- padding
- 12px 16px
- height
- 42px
- fontFamily
- Inter
- fontSize
- 14px
- fontWeight
- 500
- border
- 1px solid #08090A12
card
- rounded
- 6px
- padding
- 16px
- backgroundColor
- #FAF8F5
Layout & motion
- Container
- 1088px
- Grid columns
- 20
- Hero
- split
- Navigation
- top-sticky
- Page height
- 9,230px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 100ms 150ms 200ms 700ms
- Transitions
- 166
- Keyframes
- 3
- Stack
- next.js, tailwind, radix-ui, shadcn/ui, mintlify, vercel
Page sections (11)
section labels are heuristic
01nav
02hero
03logosJoin of the world's most ambitious companies building for agents.
04features?One platform for your entire knowledge stack.
05features?Powering businesses of all sizes.
06feature detail?Built to scale with the agent web.
07feature detail?Enabling the next generation of startups.
08testimonialsTrusted by teams building for agents.
09feature detail?Latest updates
10features?The knowledge platform built for agents
11footerLegal
How Mintlify compares
- Body text
- 14px: smaller than 82% of indexed sites (median 16px).
- Largest heading
- 50px: smaller than 66% of indexed sites (median 60px).
- Type scale
- 1.20×: flatter than 82% of indexed sites (median 1.28×).
- Container
- 1088px: narrower than 77% of indexed sites (median 1242px).
- Text contrast
- 19.9:1: higher than 75% of indexed sites (median 17.6:1).
- Page length
- 9,230px: longer than 61% of indexed sites (median 8,217px).
- Corner radius
- Mostly 4px, shared by 24 of 274 indexed sites (9%).
- Inter
- One of 58 indexed sites that load Inter (21%).
- Arizona Flare
- The only site in the index that loads Arizona Flare.
- Color scheme
- Light by default, like 75% of indexed sites. It is one of 49 sites (18%) that switch with the system dark mode setting.
In short
What font does Mintlify use?
Mintlify uses Inter (loaded as "inter") for headings and body text. Arizona Flare (loaded as "arizonaFlare") is used for other. Paper Mono (loaded as "paperMono") is used for code.
What are Mintlify's brand colors?
Mintlify's website uses a light scheme: background #FFFFFF, surface #FAF8F5, text #08090A, muted text #717D79 and borders #F1F0EE.
How is Mintlify's website laid out?
The most common corner radius is 4px, body text is 14px with 1.429 line height, and the page container is 1088px wide.
