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.
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.
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
defaultIndexnumberREQUIRED
The index of the tab to display by default (zero-based). For example, set to 0 to show the second tab on page load.
syncbooleandefault: true
When true, this tab group will sync with other tabs and code groups on the page that have matching titles.
borderBottomboolean
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.
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.