Skip to content

Mintlify Design System

Mintlify's mint #00d4a4 accent, Inter and Geist Mono as a DESIGN.md file, with tokens and a large set of components for React, Next.js and Claude.

Get ProDownload DESIGN.md
Primary color
#0a0a0a
Typeface
Inter
Shape
Mixed
Base radius
8px
Colors
32
Type tokens
20
Components
51
Spacing values
12

About Mintlify DESIGN.md

Curated by Dov Azencot, updated May 12, 2026. Source mintlify.com (opens in a new tab).

Mintlify sits at the seam between polished SaaS marketing and developer-grade documentation density. The homepage opens with a cinematic sky-gradient hero (a cloud illustration backdrop washing from "#87a8c8" sky-blue to "#f5e9d8" cream) and the startups page swaps in a dark teal-to-mint band with a rocket-launch illustration cutting across "#1a3d4a" to "#2d5a4f". Then the deeper surfaces collapse into a strict 3-column documentation grid — left sidebar nav at 240px, center prose capped at 720px, right table of contents at 200px. Inter carries every UI surface and Geist Mono shows up only for code blocks, inline references, and type signatures. The signature mint "#00d4a4" appears sparingly: hero "Get started" pill, green checkmarks on features, the 2px featured-pricing border, sidebar active indicators.

This page packages the full Mintlify spec as a single DESIGN.md file using the Google Labs DESIGN.md format. Inside: 32 colors tokens (brand mint plus deep "#00b48a" and soft "#7cebcb" variants, plus testimonial coral "#f55a3c", documentation tag blue "#3772cf", and the hero atmospheric gradient stops), 22 typography tokens spanning a 72px hero display down to 11px uppercase micro labels, an 8px-base spacing scale running through 12 tokens up to 120px hero padding, a 7-step border-radius scale, and 51 components covering buttons, cards, inputs, badges, code surfaces, sidebar and TOC navigation, hero bands, and the FAQ accordion.

Feed the file to Claude, Cursor, or GitHub Copilot when building documentation portals, developer landing pages, or API reference surfaces. The agent reads token references directly — `{colors.brand-green}`, `{rounded.full}`, `{typography.code-md}` — and writes React components and Tailwind classes that match Mintlify's voice instead of a generic shadcn theme. Or use the file as a reference audit: drop it next to your own design tokens and run a diff against discipline that already works. The system is worth studying because it solves the rare problem of presenting marketing atmosphere and developer density in the same brand language without either surface feeling diluted.

What makes it distinct

5 highlights

  1. Dual-mode aestheticAtmospheric sky-gradient marketing heroes paired with dense 3-column developer documentation surfaces
  2. Signature mint #00d4a4 reserved for accent CTAs, active states, and feature checkmarksNever on body text
  3. Inter + Geist Mono pairingInter carries all UI prose, Geist Mono surgically marks code blocks, type signatures, and inline references
  4. Black-pill primary buttons with rounded.full (9999px) corners dominate marketing; white pills invert on dark hero bands
  5. Tight 14px body type with 1.50 line-height anchors documentation reading; hero displays push to 72px / weight 600

Live at mintlify.com

Mintlify in production, as captured. Scroll the window to see the whole page.

Visit mintlify.com (opens in a new tab)
Mintlify's website at mintlify.com

32 colors

Mintlify's system runs on #0a0a0a as its primary voltage, used in 5 of 51 components. Type is set in Inter across 20 tokens from 11px to 72px, weights 400–600. Shape language is mixed across 51 components, blending pills, soft rounds, and squarer corners.

Brand & Accent

Sparing, CTA-only voltage · 9

Surface

Page and card backgrounds · 5

Text

Headlines, body, captions · 5

Borders & Hairlines

Dividers, outlines, rules · 3

Other

Specialty colors · 10

20 type tokens

Set in Inter across 20 tokens, from 11px to 72px, weights 400–600. Shown in its own stack: where the font isn't installed, the fallback the file names stands in.

  • hero-display72px · weight 600 · lh 1.05 · tracking -2pxThe quick brown fox jumps over the lazy dog
  • display-lg56px · weight 600 · lh 1.1 · tracking -1.5pxThe quick brown fox jumps over the lazy dog
  • heading-148px · weight 600 · lh 1.1 · tracking -1pxThe quick brown fox jumps over the lazy dog
  • heading-236px · weight 600 · lh 1.2 · tracking -0.5pxThe quick brown fox jumps over the lazy dog
  • heading-328px · weight 600 · lh 1.25The quick brown fox jumps over the lazy dog
  • heading-422px · weight 600 · lh 1.3The quick brown fox jumps over the lazy dog
  • heading-518px · weight 600 · lh 1.4The quick brown fox jumps over the lazy dog
  • subtitle18px · weight 400 · lh 1.5The quick brown fox jumps over the lazy dog
  • body-md16px · weight 400 · lh 1.5The quick brown fox jumps over the lazy dog
  • body-md-medium16px · weight 500 · lh 1.5The quick brown fox jumps over the lazy dog
  • body-sm14px · weight 400 · lh 1.5The quick brown fox jumps over the lazy dog
  • body-sm-medium14px · weight 500 · lh 1.5The quick brown fox jumps over the lazy dog
  • caption13px · weight 400 · lh 1.4The quick brown fox jumps over the lazy dog
  • caption-bold13px · weight 600 · lh 1.4The quick brown fox jumps over the lazy dog
  • micro12px · weight 500 · lh 1.4The quick brown fox jumps over the lazy dog
  • micro-uppercase11px · weight 600 · lh 1.4 · tracking 0.5pxThe quick brown fox jumps over the lazy dog
  • button-md14px · weight 500 · lh 1.3The quick brown fox jumps over the lazy dog
  • code-md14px · weight 400 · lh 1.5The quick brown fox jumps over the lazy dog
  • code-sm13px · weight 400 · lh 1.4The quick brown fox jumps over the lazy dog
  • code-inline13px · weight 500 · lh 1.3The quick brown fox jumps over the lazy dog

Radii and spacing

7 corner radii and 12 spacing values. Shape language: mixed, on a 8px base radius.

Radii7

  • xs4px
  • sm6px
  • md8px
  • lg12px
  • xl16px
  • xxl24px
  • full9999px

Spacing12

  • xxs4px
  • xs8px
  • sm12px
  • md16px
  • lg20px
  • xl24px
  • xxl32px
  • xxxl40px
  • section-sm48px
  • section64px
  • section-lg96px
  • hero120px

51 components

Each rendered from its tokens (color, type, radius, padding) on Mintlify's own canvas.

  • Button Primary
    Button Primarybutton-primary
  • Button Primary Pressed
    Button Primary Pressedbutton-primary-pressed
  • Button Primary Disabled
    Button Primary Disabledbutton-primary-disabled
  • Button Accent Green
    Button Accent Greenbutton-accent-green
  • Button On Dark
    Button On Darkbutton-on-dark
  • Button Secondary
    Button Secondarybutton-secondary
  • Button Ghost
    Button Ghostbutton-ghost
  • Button Link
    Button Linkbutton-link
  • Button Icon Circularbutton-icon-circular
  • Card Base
    Card Basecard-base
  • Card Feature
    Card Featurecard-feature
  • Card Help
    Card Helpcard-help
  • Card Startup Perk
    Card Startup Perkcard-startup-perk
  • Pricing Card
    Pricing Cardpricing-card
  • Pricing Card Featured
    Pricing Card Featuredpricing-card-featured
  • Testimonial Card Feature
    Testimonial Card Featuretestimonial-card-feature
  • Testimonial Card Quote
    Testimonial Card Quotetestimonial-card-quote
  • Type here…
    Text Inputtext-input
  • Type here…
    Text Input Focusedtext-input-focused
  • Search Pill
    Search Pillsearch-pill
  • Segmented Tab
    Segmented Tabsegmented-tab
  • Segmented Tab Active
    Segmented Tab Activesegmented-tab-active
  • Pill Tab
    Pill Tabpill-tab
  • Pill Tab Active
    Pill Tab Activepill-tab-active
  • Toggle Monthly Yearly
    Toggle Monthly Yearlytoggle-monthly-yearly
  • Badge Discount
    Badge Discountbadge-discount
  • Badge Required
    Badge Requiredbadge-required
  • Badge Type
    Badge Typebadge-type
  • Badge Tag
    Badge Tagbadge-tag
  • Promo Banner
    Promo Bannerpromo-banner
  • Code Block
    Code Blockcode-block
  • Code Block Header
    Code Block Headercode-block-header
  • Code Inline
    Code Inlinecode-inline
  • Property Row
    Property Rowproperty-row
  • Feature Comparison Table
    Feature Comparison Tablefeature-comparison-table
  • Feature Comparison Row
    Feature Comparison Rowfeature-comparison-row
  • Sidebar Nav Item
    Sidebar Nav Itemsidebar-nav-item
  • Sidebar Nav Item Active
    Sidebar Nav Item Activesidebar-nav-item-active
  • Sidebar Section Header
    Sidebar Section Headersidebar-section-header
  • Doc Toc Item
    Doc Toc Itemdoc-toc-item
  • Doc Toc Item Active
    Doc Toc Item Activedoc-toc-item-active
  • Copy Code Button
    Copy Code Buttoncopy-code-button
  • Hero Band Sky
    Hero Band Skyhero-band-sky
  • Hero Band Dark
    Hero Band Darkhero-band-dark
  • Hero Product Mockup
    Hero Product Mockuphero-product-mockup
  • Logo Wall Item
    Logo Wall Itemlogo-wall-item
  • Faq Accordion Item
    Faq Accordion Itemfaq-accordion-item
  • Footer Region
    Footer Regionfooter-region
  • Footer Link
    Footer Linkfooter-link
  • Startup Program Card
    Startup Program Cardstartup-program-card
  • Founder Quote Card
    Founder Quote Cardfounder-quote-card

The system, in use

Mintlify's tokens on the kind of product it builds.

Marketing heroThe homepage: its nav, a headline and the main call to action.
Mintlify
Get started

Plan, build and ship in one place

Bring your team's work together, from the first idea to the final release.

Get startedBook a demo
MintlifyA
Active users12,489
Projects342
Tasks done8,921
Avg. response1.8h
ActivityLast 30 days

Mintlify design system FAQ

Mintlify's tokens, its components and how to use this DESIGN.md in your project.

Related reading

Specs, directories and component libraries that pair with this design system.

Use Mintlify in your project

One machine-readable file. Drop it into Claude Code, Cursor, VS Code or any AI tool that reads DESIGN.md.

Download DESIGN.md

  1. Download the DESIGN.md

    One machine-readable file: every color, type, radius, spacing, and component token of Mintlify.

  2. Feed it to your AI tool

    Drop it into Claude, Cursor, or GitHub Copilot. The agent writes React components and Tailwind classes that match Mintlify's visual language.

  3. Reference the tokens directly

    Or paste the values into your Tailwind config, CSS variables, or component library: every color, size and radius is a quoted, ready-to-copy value.

Read the full DESIGN.md overview, rationale, do’s and don’ts

Overview

Mintlify positions itself at the intersection of polished marketing presentation and developer-grade documentation density. The home and startups pages open with cinematic atmospheric heroes — soft sky-gradient backdrops with cloud illustrations on the homepage, dark teal-to-mint gradients with a rocket launch on the startups page — that feel more like a SaaS landing aesthetic than a developer tool. Then the deeper surfaces (pricing comparison, live documentation pages) collapse into dense, high-information layouts where Inter body type carries 14–16px copy across long-form prose, syntax-highlighted code blocks, and 3-column documentation grids.

The brand's signature mint green ({colors.brand-green}) appears sparingly but decisively — on the hero "Get started" pill button, the green checkmark icons inside feature lists, the "Featured" pricing tier border, and active state indicators inside docs UI. Black-pill primary buttons dominate the marketing flow; white-on-dark inversions appear on dark hero bands. The signature pairing of Inter (body, headings) with Geist Mono (code blocks, inline references, type signatures) reinforces the developer-tool DNA without requiring a third typeface.

Key Characteristics:

  • Atmospheric gradient hero bands (sky-blue to cream on homepage; teal-to-mint on startups) provide cinematic marketing presentation
  • Signature Mintlify mint green ({colors.brand-green}) reserved for accent CTAs, active states, and feature confirmations
  • Black-pill primary buttons ({colors.primary} + {rounded.full}) for marketing CTAs
  • Inter for all UI prose; Geist Mono for code blocks, inline code, and type/property signatures
  • 3-column documentation layout (sidebar / prose / TOC) with dense 14px body type for long-form developer reading
  • Tightly-controlled radius scale: marketing uses {rounded.lg} (12px), pill buttons use {rounded.full} — no in-between corner softening
  • Vibrant testimonial card ({colors.testimonial-orange}) breaks color rhythm intentionally for emotional impact

Known Gaps

  • Specific dark-mode token values for canvas, surface, ink, and hairline are not surfaced on these pages; the brand has not yet shipped a published dark-mode palette
  • Animation/transition timings are not extracted; recommend 150–200ms ease for hover/focus state transitions
  • Form validation success state is not explicitly captured beyond defaults — implement following standard green-border + success badge patterns
  • Code syntax highlighting palette inside docs is not formalized; documentation samples carry their own twoslash-style annotation system tokens (e.g. {colors.brand-tag}, {colors.brand-annotate}, {colors.brand-warn}) but the full highlight scheme is not enumerated

More systems like this

Cohere, Dropbox, Logseq and 5 more in Documentation & Knowledge: each brand's colors, type and components in one file your AI agent builds from.

All 9 in Documentation & Knowledge

Build it with Pro

The DESIGN.md files are free. Pro adds 6,000+ blocks, premium templates and the MCP server, so your AI editor builds in your system for you.

See full pricing

4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.

Billed once a year in USD. Cancel anytime.

Individual

For personal projects & open source

$32instead of $49/mo

$389 billed yearly

  • How many people can use the license.Seats: 1 seat
  • Client work, SaaS products and anything you charge for.Commercial use: Personal & open source only
  • Page sections in 56 categories, from heroes and pricing tables to dashboards and settings, on every framework and UI library, in your theme.Blocks: All 6,181 blocks
  • Complete Next.js sites for startups, SaaS, agencies and portfolios, every page designed, ready to ship.Templates: All 14 templates
  • Your AI agent searches, previews and installs any component, block, icon or DESIGN.md from a prompt: 22 tools in Claude Code, Cursor, VS Code and 35 more clients.MCP server: 38 AI clients
  • Buttons with motion and states of their own, from an arrow that slides in to a burst of confetti.Animated buttons: All 35 buttons
  • Typewriters, scrambles, counters and more, for headlines, labels and numbers.Text effects: All 97 effects
  • Animated backgrounds for heroes, sections and cards, from a soft aurora to a flock that flees the cursor. Most are pure CSS.Backgrounds: All 100 backgrounds
  • WebGPU shaders, from a slow aurora to a black hole, each drawing only while it's on screen.Shaders: All 100 shaders
  • One design and one theme on all four: the components, blocks and effects are built for each framework.Frameworks: React, Vue, Svelte, Solid
  • React on Base UI, Radix UI, React Aria or Ark UI: install the version for the library your project already uses. Vue, Svelte and Solid run on Ark UI.UI libraries: Base UI, Radix, Aria, Ark
  • From a button to a date picker, a color picker or a guided tour: accessible, typed in TypeScript, each with live demos.Components: All 174 components
  • Real-world patterns built from the components, in 53 galleries: forms, tables, menus, dialogs and more.Examples: All 1,103 examples
  • Area, bar, line, pie, radar and radial charts on TanStack Charts, on every framework. React also gets the Recharts originals.Charts: All 70 charts
  • Debounce, local storage, media queries and more: each hook is one typed file you own.React hooks: All 35 hooks
  • From 222 libraries, Lucide, Heroicons, Tabler and Material Symbols among them, as SVG or a React component in one command.Icons: 294k+ icons
  • Stripe, Linear, Apple and 497 more: a brand's colors, typography and components in one file your AI agent builds from.DESIGN.md files: All 500 brands
  • Restyle every component and block at once: 8 styles, 8 grays, 18 colors and 5 radii, shared as a shadcn preset code.Theme builder: 8 styles × 18 colors
  • Priority requests are answered first.Support: Standard

Team

Most popular

For freelancers, agencies & startups

$66instead of $99/mo

$789 billed yearly · ≈ $13/dev/mo

Everything in Individual, plus

  • How many people can use the license.Seats: Up to 5 seats
  • Client work, SaaS products and anything you charge for.Commercial use: Included
  • Priority requests are answered first.Support: Priority

Organization

For companies with larger teams

$132instead of $199/mo

$1,589 billed yearly

Everything in Team, plus

  • How many people can use the license.Seats: Unlimited seats
  • Secure checkout via Stripe
  • Code lives in your repo
  • Keep what you've shipped if you cancel
  • License terms

4.9 out of 5 from 150+ developers

Your system, built for you

Every block, template and icon, installed by your AI agent in your design system. The DESIGN.md files stay free.

Get Pro
  • Cancel anytime
  • Keep what you've shipped