📚 Mintlify is now in beta — Try it free

# Design System Inspiration of Mintlify

Mintlify presents documentation infrastructure with a dual-mode aesthetic — atmospheric sky-gradient marketing heroes paired with dense developer-grade documentation surfaces. Inter for UI prose, Geist Mono for code, signature mint green for accent CTAs.

## Color Palette

Stark monochrome anchored by black-and-white, accented surgically by Mintlify mint. Atmospheric gradient tokens carry the hero band aesthetic. Testimonial orange breaks color rhythm intentionally for emotional impact.

### Brand & Accent

Mintlify Mint
#00d4a4
Accent CTAs, active states
Deep Mint
#00b48a
Pressed CTA state
Soft Mint
#7cebcb
Success tints
Brand Tag
#3772cf
Doc tag references
Brand Annotate
#1ba673
Code annotation green
Brand Warn
#c37d0d
Code warning highlight
Brand Error
#d45656
Required labels, errors
Testimonial Orange
#f55a3c
Cursor testimonial card

### Hero Atmospheric Gradients

Hero Sky From
#87a8c8
Homepage hero top
Hero Sky To
#f5e9d8
Homepage hero bottom
Hero Dark From
#1a3d4a
Startups hero left
Hero Dark To
#2d5a4f
Startups hero right

### Surface

Canvas White
#ffffff
Page + card background
Canvas Dark
#0a0a0a
Promo banner, dark inversion
Surface
#f7f7f7
Section bg, search-pill
Surface Soft
#fafafa
Quieter sections, FAQ
Surface Code
#1c1c1e
Code block background
Hairline
#e5e5e5
Borders, dividers
Hairline Soft
#ededed
Quiet table dividers

### Text

Ink
#0a0a0a
Headlines, CTAs
Charcoal
#1c1c1e
Body text, code-inline
Slate
#3a3a3c
Secondary text
Steel
#5a5a5c
Tertiary, sidebar inactive
Stone
#888888
Captions, twoslash cursor
Muted
#a8a8aa
Disabled, de-emphasized

## Typography Scale

Inter for all UI prose; Geist Mono for code references and type signatures. Negative letter-spacing on display sizes; documentation-grade body leading at 1.50.

hero-display72px / 600 / 1.05 / -2px
Knowledge Platform
display-lg56px / 600 / 1.10 / -1.5px
Built for the intelligence age
heading-148px / 600 / 1.10 / -1px
Pricing on your terms
heading-236px / 600 / 1.20 / -0.5px
Apply to the Mintlify startup program
heading-328px / 600 / 1.25
Tabs
heading-422px / 600 / 1.30
Card titles
heading-518px / 600 / 1.40
Smaller feature headers
subtitle18px / 400 / 1.50
Hero subtitle and lead body type
body-md16px / 400 / 1.50
Primary body text used across documentation prose, marketing copy, and feature descriptions.
body-sm14px / 400 / 1.50
Secondary body, table cells, navigation, and table-of-contents items
body-sm-medium14px / 500 / 1.50
Active sidebar nav, button labels, tab labels
caption13px / 400 / 1.40
Helper text, fine print, code-block headers
micro-uppercase11px / 600 / 1.40 / 0.5px
SIDEBAR SECTION HEADER
code-md14px / 400 / Geist Mono
function Tabs() { return <div />; }
code-inline13px / 500 / Geist Mono
<Tabs> inline reference inside body prose

## Hero Bands

Two atmospheric hero modes — sky-gradient (homepage) and dark-teal (startups) — with cinematic backdrops.

## Built for startups and scaleups

Mintlify startups program for early-stage companies with Mintlify, building from your stack to deliver dollar valuations.

### Hero Product Mockup

Documentation page preview / code-editor mockup

## Button Variants

Pill-shaped everywhere. Mint accent for hero brand-emphasis CTAs. Black-pill for marketing dominance.

button-primaryBlack pill — marketing CTA
button-accent-greenMint accent CTA
button-on-darkWhite pill on dark hero
button-secondaryOutlined pill
button-ghostQuieter rect ghost
button-linkInline text link
button-icon-circular32×32 utility
button-primary-disabledDisabled state

## Badges & Status

Pill-shaped status indicators alongside small rect tags for documentation type signatures.

Save 20% REQUIRED string number boolean <Tabs>
📚 Mintlify is now in beta — Try it free

promo-banner — sticky black strip above the top nav

## Cards & Containers

White documentation cards, surface-tinted feature panels, startup perk grid, and the bright orange testimonial card that breaks the brand's monochrome rhythm.

### Standard Cards

##### Standard Doc Card

White canvas with hairline border and 12px corners. Used for documentation cards and quiet product callouts.

##### Feature Panel

Quieter section panel on light gray surface for grouped content.

##### Quickstart guide

Learn more about how to get started with our docs.

### Startup Perk Grid

💰

##### Discounts and credits

Special savings on Mintlify Pro and other selected partner services.

⚡

##### Priority support

Get expert help fast, when you need it most.

🎁

##### Startup pack

Access exclusive products from partners worth several thousand dollars.

🤝

##### Founder community

Connect with other early-stage founders building with Mintlify.

### Featured Testimonial Card

"Every YC batch we consistently see the top performing startups use Mintlify to build their docs."
— Cursor founder

### Testimonial Quote Card

From one founder to another. Supporting startups and empowering builders is in our DNA. We've been advocating for Mintlify since the early days of Combinator, and we're proud of the company we've built.
Sai & Hahnbi · Co-founders
"Mintlify saved our docs from drowning. We launched a product six weeks ago. Every team can now ship docs without engineering involvement."
— Cursor team

## Pricing Cards

3-tier pricing comparison with the featured tier highlighted in mint border + brand-tinted shadow.

FREE
$0/mo

Get started with Mintlify and explore.

- 1 user
- Basic features
- Community support
- Limited integrations

Lift Off
$150/mo

For growing teams who need more features and support.

- Up to 10 users
- Advanced features
- Priority email support
- Full integrations
- Advanced analytics
- Custom branding

Custom
Contact us

Enterprise plans tailored to your team's needs.

- Unlimited users
- Custom integrations
- Dedicated support
- Custom contracts
- SOC2 compliance

### Feature Comparison Table

Feature | FREE | Lift Off | Custom
--- | --- | --- | ---
CORE
Hosting & deployment | ✓ | ✓ | ✓
Custom domain | — | ✓ | ✓
Components library | ✓ | ✓ | ✓
API
API endpoints | 10 | 100 | Unlimited
API playground | ✓ | ✓ | ✓
SUPPORT
Community support | ✓ | ✓ | ✓
Priority email | — | ✓ | ✓
Dedicated CSM | — | — | ✓

## Forms & Inputs

40px-tall inputs with 8px rounded corners. Focus shifts to a 2px Mintlify Mint border — the brand's mint serves as the activation signal.

Email
Workspace name
API key
search-pill — 36px height, surface bg

## Tabs & Navigation

Underline-style segmented tabs (live in docs Tabs component) and pill tabs for top-level switching.

### Segmented Tabs (docs Tabs page)

### Pill Tabs (Pricing page)

## Code Components

Dark code blocks with syntax highlighting, header bar with copy button. Inline code chips inside body prose.

example.tsx
<Tabs>
<Tab title="First tab">
Welcome to the content that you can only see
inside the first tab.
</Tab>
<Tab title="Second tab">
Here's content that's only inside the second tab.
</Tab>
</Tabs>

Use the <Tabs> component to organize content into multiple panels. Use defaultIndex to set the default tab on render. The component synchronizes the active tab via the URL syncKey property.

## Documentation Components

Property rows, comparison tables, and the 3-column documentation layout (sidebar / prose / TOC).

### Property Rows

defaultIndex number REQUIRED
The index of the tab to display by default (zero-based). For example, set to 0 to show the second tab on page load.
sync boolean default: true
When true, this tab group will sync with other tabs and code groups on the page that have matching titles.
borderBottom boolean
Adds a bottom border and padding to the tabs container. Useful to visually separate tabbed content from the rest of the page, especially when tabs have matching titles.

### Documentation Layout (3-column)

### Tabs

Use the Tab component to organize content into switchable panels that users can switch between. You can add any number of tabs and include other components inside each tab.

Use tabs to organize content into multiple panels that users can switch between. You can add any number of tabs and include other components inside each tab.

## Logo Wall

Customer logo grid — 6-up wordmark presentation in trust-row sections.

ANTHROP\C
Cognition
▲ Vercel
React
Lovable
Stripe

## FAQ Accordion

Frequently-asked-questions panel. Collapsed by default; chevron toggle pattern.

How does Mintlify pricing work? ⌃
Mintlify offers a Free tier for individuals, a Lift Off tier for growing teams at $150/month, and Custom enterprise plans. Annual billing saves 20%.
Can I migrate my existing documentation to Mintlify? ⌄
Yes — Mintlify provides import tools for common documentation formats including Markdown, MDX, and OpenAPI specifications.
Is Mintlify SOC 2 compliant? ⌄
Yes — Mintlify is SOC 2 Type II certified. Custom enterprise plans include additional security and compliance features.

## Spacing Scale

4px base unit, 8px primary increment. Section rhythm runs from 48px to 120px.

4xxs
8xs
12sm
16md
20lg
24xl
32xxl
40xxxl
48section-sm
64section
96section-lg
120hero

## Border Radius Scale

Pill buttons (9999px), 12px standard cards, 8px inputs and code blocks. Tightly disciplined — no in-between values.

4pxxs
6pxsm
8pxmd
12pxlg
16pxxl
24pxxxl
pillfull

## Elevation & Depth

Predominantly flat. Strategic atmospheric depth on hero mockup; brand-tinted glow on featured pricing tier.

Level 0 — Flatborder + hairline
Level 1 — Subtlergba(0,0,0,0.04) 0 1px 2px
Level 2 — Cardrgba(0,0,0,0.08) 0 4px 12px
Level 3 — Mockuprgba(0,0,0,0.12) 0 24px 48px -8px
Level 4 — Brand-tintedrgba(0,212,164,0.08) 0 8px 24px

## Responsive Behavior

Hero scales from 72px → 36px on mobile. Pricing tiers stack 1-up. Documentation grid collapses to drawer + single column.

Breakpoint | Width | Key Changes
--- | --- | ---
Mobile (small) | < 480px | Single column. Hero 36px. Pricing tiers stack 1-up. Footer 1-column accordion.
Mobile (large) | 480 – 767px | Feature tiles 2-up. Hero 44px.
Tablet | 768 – 1023px | Pill-tab nav returns. Sidebar collapses to drawer. Hero 56px.
Desktop | 1024 – 1279px | 3-column docs grid. 3-tier pricing row. Hero 72px.
Wide Desktop | ≥ 1280px | Wider hero gutters. Fixed 240px sidebar.

### Device Ladder

375px
480px
768px
1024px
1280+

### Touch Targets

- Pill buttons render at 36–40px height — bumps to 44px on mobile.
- Circular icon buttons: 32×32px desktop → 44×44px mobile.
- Form inputs render at 40px height; bumps to 44px mobile.
- Sidebar nav items: ~32px → 44px on mobile drawers.

### Collapsing Strategy

- Promo banner stays full-width; truncates at < 480px.
- Top nav below 1024px collapses to hamburger.
- Hero band: 2-column hero stacks at < 1024px; mockup below text on mobile.
- Documentation grid: 3-column → sidebar-drawer at < 1024px → single-column at < 768px.
- Pricing: 3-tier desktop → 1-column stacked at < 768px; comparison table horizontal-scroll.
- Hero typography: 72px → 56px tablet → 44px mobile-large → 36px mobile-small.
- Logo wall: 6-up → 3-up tablet → 2-up mobile.