Mintlify Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

24tokens

12type steps

6radius steps

2pxspacing base

Mintlify, in one page

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

Do's and don'ts

Do

Reserve {colors.brand-green} (Mintlify mint) for accent CTAs and active state indicators only — even one accent button per viewport carries weight
Use {colors.primary} (black) as the dominant CTA on light backgrounds; switch to button-on-dark (white pill) on dark hero bands
Apply {rounded.full} to every button and pill; never soften pill corners
Pair Inter (UI prose) with Geist Mono (code) — never introduce a third typeface
Use atmospheric gradient hero bands sparingly (only the homepage and startups page); keep deeper surfaces flat and dense
Apply {rounded.lg} (12px) consistently on cards; use {rounded.md} (8px) only on compact UI like search pills and code blocks
Keep documentation prose at {typography.body-md} (16px) with 1.50 line-height — never compress

Don't

Don't use {colors.brand-green} on body text or large surfaces — it loses signal
Don't introduce additional accent colors beyond mint, tag-blue, error-red, and the testimonial orange
Don't apply heavy shadows on flat documentation cards; reserve elevation for the hero product mockup
Don't reduce documentation line-height below 1.50 — long-form readability suffers
Don't combine atmospheric gradients with multiple competing color accents in the same hero — the sky/dark gradient is the brand mood; let it breathe
Don't use Inter for code or Geist Mono for prose — the typeface assignment IS the brand voice

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Mintlify design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- primary: #0a0a0a
- on-primary: #ffffff
- brand-green: #00d4a4
- brand-green-deep: #00b48a
- brand-green-soft: #7cebcb
- brand-tag: #3772cf
- brand-warn: #c37d0d
- brand-annotate: #1ba673
- brand-error: #d45656
- brand-cursor: #888888

Type:
- families: Inter, Geist Mono
- scale: 11, 12, 13, 14, 16, 18, 22, 28, 36
- weights: 400, 500, 600

Shape:
- radius: 4, 6, 8, 12, 16, 24
- elevation: "rgba(0, 212, 164, 0.08) 0px 8px 24px" | "rgba(0, 0, 0, 0.12) 0px 24px 48px -8px"

Spacing: 2, 4, 8, 10, 12, 16, 20, 24, 32, 40

Rules:
- Reserve `{colors.brand-green}` (Mintlify mint) for accent CTAs and active state indicators only — even one accent button per viewport carries weight
- Use `{colors.primary}` (black) as the dominant CTA on light backgrounds; switch to `button-on-dark` (white pill) on dark hero bands
- Apply `{rounded.full}` to every button and pill; never soften pill corners
- Pair Inter (UI prose) with Geist Mono (code) — never introduce a third typeface
- Use atmospheric gradient hero bands sparingly (only the homepage and startups page); keep deeper surfaces flat and dense
- Apply `{rounded.lg}` (12px) consistently on cards; use `{rounded.md}` (8px) only on compact UI like search pills and code blocks

Avoid:
- Don't use `{colors.brand-green}` on body text or large surfaces — it loses signal
- Don't introduce additional accent colors beyond mint, tag-blue, error-red, and the testimonial orange
- Don't apply heavy shadows on flat documentation cards; reserve elevation for the hero product mockup
- Don't reduce documentation line-height below 1.50 — long-form readability suffers
- Don't combine atmospheric gradients with multiple competing color accents in the same hero — the sky/dark gradient is the brand mood; let it breathe
- Don't use Inter for code or Geist Mono for prose — the typeface assignment IS the brand voice

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

Source pages: mintlify.com/ (homepage), /startups (program page), /pricing (comparison), /docs/components/tabs (live documentation). Token coverage was identical across all four pages.

Brand & Accent

Mintlify Mint ({colors.brand-green}): Signature accent — used on hero "Get started" pill button, green checkmarks in feature lists, featured pricing tier border accent, sidebar active indicator dots.
Deep Mint ({colors.brand-green-deep}): Pressed/active variant of the mint accent.
Soft Mint ({colors.brand-green-soft}): Subtle background tint for success states and confirmation surfaces.
Brand Tag ({colors.brand-tag}): Documentation tag and reference color (used in <Tabs> JSX-style annotations and code-tag chips).
Brand Annotate ({colors.brand-annotate}): Inline code annotation green (used in twoslash code annotation system).
Brand Warn ({colors.brand-warn}): Code warning highlight (deprecated, caution).
Brand Error ({colors.brand-error}): Red used for required-field labels and error highlight.
Testimonial Orange ({colors.testimonial-orange}): Warm coral-orange used on the "Cursor" testimonial card and warm callout surfaces.

Surface

Canvas White ({colors.canvas}): Primary page and card background.
Canvas Dark ({colors.canvas-dark}): Promo banner, dark inversion surfaces, code editor wrapper.
Surface ({colors.surface}): Subtle section backgrounds, search-pill rest, code-inline background, sidebar active state.
Surface Soft ({colors.surface-soft}): Quieter section backgrounds and FAQ accordion.
Surface Code ({colors.surface-code}): Dark code-block wrapper background.
Hairline ({colors.hairline}): 1px borders and primary dividers.
Hairline Soft ({colors.hairline-soft}): Quieter table-row dividers and secondary section breaks.

Hero Atmospheric

Hero Sky From / To ({colors.hero-sky-from}, {colors.hero-sky-to}): Atmospheric sky-blue to soft cream gradient on the homepage hero.
Hero Dark From / To ({colors.hero-dark-from}, {colors.hero-dark-to}): Dark teal to mint gradient on the startups hero.

Text

Ink ({colors.ink}): Primary headlines and CTA text.
Charcoal ({colors.charcoal}): Body text, code-inline foreground.
Slate ({colors.slate}): Secondary text and metadata.
Steel ({colors.steel}): Tertiary text, table headers, sidebar inactive items, footer links.
Stone ({colors.stone}): Captions, twoslash cursor color, muted labels.
Muted ({colors.muted}): De-emphasized labels and disabled text.
On Dark ({colors.on-dark}): White text on dark surfaces (hero bands, code blocks, promo banner).
On Dark Muted ({colors.on-dark-muted}): Reduced-opacity white for code-block headers and metadata on dark.

Semantic

Error tones derive from {colors.brand-error} for input borders, required-field labels, and validation messaging.

Type scaleRead the full spec

Font Family

Inter (primary): Variable typeface optimized for UI legibility. Used across every UI surface — body, headings, navigation, button labels, captions. Fallbacks: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif.

Geist Mono (code): Monospace typeface used inside code blocks, inline code references, type signatures (e.g. string, number, boolean), and property names in API documentation. Fallbacks: 'SF Mono', Menlo, Consolas, 'Geist Mono Fallback', monospace.

The brand uses no italic variants of either face — emphasis comes from weight (500/600), color shift, or background highlighting (in code references).

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`{typography.hero-display}`	72px	600	1.05	-2px	Marketing hero display ("The intelligent Knowledge Platform")
`{typography.display-lg}`	56px	600	1.10	-1.5px	Major section opener ("Built for the intelligence age")
`{typography.heading-1}`	48px	600	1.10	-1px	Page-level headlines ("Pricing on your terms")
`{typography.heading-2}`	36px	600	1.20	-0.5px	Section headlines ("Apply to the Mintlify startup program")
`{typography.heading-3}`	28px	600	1.25	0	Subsection headers, "Tabs" docs page title
`{typography.heading-4}`	22px	600	1.30	0	Card titles, larger feature headers
`{typography.heading-5}`	18px	600	1.40	0	Smaller feature headers, FAQ question titles
`{typography.subtitle}`	18px	400	1.50	0	Hero subtitle, lead body
`{typography.body-md}`	16px	400	1.50	0	Primary body text
`{typography.body-md-medium}`	16px	500	1.50	0	Body emphasis
`{typography.body-sm}`	14px	400	1.50	0	Secondary body, table cells, navigation
`{typography.body-sm-medium}`	14px	500	1.50	0	Active sidebar nav, button labels, tab labels
`{typography.caption}`	13px	400	1.40	0	Helper text, fine print, code-block headers
`{typography.caption-bold}`	13px	600	1.40	0	Badge labels
`{typography.micro}`	12px	500	1.40	0	Footer microcopy, label chips
`{typography.micro-uppercase}`	11px	600	1.40	0.5px	Sidebar section headers, "REQUIRED" labels
`{typography.button-md}`	14px	500	1.30	0	Pill button labels
`{typography.code-md}`	14px	400	1.50	0	Code block content
`{typography.code-sm}`	13px	400	1.40	0	Smaller code, type signatures
`{typography.code-inline}`	13px	500	1.30	0	Inline `<Tabs>` references in body

Principles

Tight hero leading (1.05) creates magazine-grade display headlines on the 72px hero
Negative letter-spacing progresses inversely with size — display sizes use -2px to -1.5px; smaller headings relax to 0
Documentation-grade body (1.50 line-height on 14–16px) ensures comfortable long-form reading in dense docs surfaces
Inter / Geist Mono pairing — Inter for everything else, Geist Mono surgically for code references; the contrast between the two is the brand's developer-respect signal
Uppercase micro labels with +0.5px letter-spacing carry sidebar section headers and "REQUIRED" annotation tags

Components and layoutRead the full spec

Per the no-hover policy, hover states are NOT documented. Default and pressed/active states only.

Buttons

button-primary — Black pill primary CTA, the dominant action across all surfaces.

Background {colors.primary}, text {colors.on-primary}, typography {typography.button-md}, padding 10px 20px, rounded {rounded.full}.
Pressed state button-primary-pressed lifts to {colors.charcoal}.
Disabled state button-primary-disabled uses {colors.hairline} background and {colors.muted} text.

button-accent-green — Mint green pill for brand-emphasis CTAs (hero "Get started", featured pricing CTA).

Background {colors.brand-green}, text {colors.primary}, typography {typography.button-md}, padding 10px 20px, rounded {rounded.full}.

button-on-dark — White pill for use on dark hero bands (startups page "Get started").

Background {colors.on-dark}, text {colors.primary}, typography {typography.button-md}, padding 10px 20px, rounded {rounded.full}.

button-secondary — Outlined pill for secondary actions.

Background transparent, text {colors.ink}, border 1px solid {colors.hairline}, typography {typography.button-md}, padding 10px 20px, rounded {rounded.full}.

button-ghost — Quieter rectangular ghost button (sidebar action, tertiary nav).

Background transparent, text {colors.ink}, typography {typography.button-md}, padding 8px 12px, rounded {rounded.md}.

button-link — Inline text link styled as a subtle button.

Background transparent, text {colors.ink}, typography {typography.body-sm-medium}, padding 0. Underline appears on activation.

button-icon-circular — 32×32px circular utility button (close, copy, arrow).

Background {colors.canvas}, text {colors.ink}, border 1px solid {colors.hairline}, rounded {rounded.full}.

Cards & Containers

card-base — Standard documentation/feature card.

Background {colors.canvas}, rounded {rounded.lg}, padding {spacing.xl}, border 1px solid {colors.hairline}.

card-feature — Feature panel on light gray surface.

Background {colors.surface}, rounded {rounded.lg}, padding {spacing.xxl}.

card-help — "Need help?" CTA cards below the pricing comparison ("Quickstart guide", "Guide to technical writing", "Founder", "Sales").

Background {colors.canvas}, rounded {rounded.lg}, padding {spacing.xl}, border 1px solid {colors.hairline}.

card-startup-perk — Startup-program perk grid item ("Discounts and credits", "Priority support", "Startup pack", "Founder community").

Background {colors.canvas}, rounded {rounded.lg}, padding {spacing.xl}, border 1px solid {colors.hairline}. Carries an icon at top, heading {typography.heading-5}, description {typography.body-sm} {colors.steel}.

pricing-card — Standard pricing tier card.

Background {colors.canvas}, rounded {rounded.lg}, padding {spacing.xxl}, border 1px solid {colors.hairline}.
Title {typography.heading-3}, price {typography.display-lg}, feature list {typography.body-sm} with green checkmark icons.

pricing-card-featured — Highlighted pricing tier (Lift Off / featured plan).

Background {colors.canvas}, rounded {rounded.lg}, padding {spacing.xxl}, border 2px solid {colors.brand-green}, soft brand-tinted shadow rgba(0, 212, 164, 0.08) 0px 8px 24px.

testimonial-card-feature — Bright orange large testimonial card with photo + quote ("Cursor — Every YC batch we consistently see the top performing startups use Mintlify to build their docs.").

Background {colors.testimonial-orange}, text {colors.on-dark}, rounded {rounded.lg}, padding {spacing.section}. Photo on right, large quote in {typography.heading-3} left, attribution below in {typography.body-sm-medium}.

testimonial-card-quote — Smaller white testimonial card on the startups page.

Background {colors.canvas}, rounded {rounded.lg}, padding {spacing.xxl}, border 1px solid {colors.hairline}.

founder-quote-card — Cursor founder testimonial card variant on the orange surface.

Background {colors.testimonial-orange}, text {colors.on-dark}, rounded {rounded.lg}, padding {spacing.xxl}. Carries the specific founder portrait + quote treatment.

startup-program-card — Larger application/program card containing perks grid + apply CTA.

Background {colors.canvas}, rounded {rounded.lg}, padding {spacing.xxl}, border 1px solid {colors.hairline}.

Inputs & Forms

text-input — Standard text field.

Background {colors.canvas}, text {colors.ink}, border 1px solid {colors.hairline}, rounded {rounded.md}, padding {spacing.sm} {spacing.md}, height 40px.

text-input-focused — Activated state.

Border switches to 2px solid {colors.brand-green} — focus uses the brand mint as the activation signal.

search-pill — Documentation top-bar search.

Responsive behaviourRead the full spec

Breakpoints

Name	Width	Key Changes
Mobile (small)	< 480px	Single column. Hero scales to 36px. Pill nav collapses to hamburger. Pricing tiers stack 1-up. Footer 1-column accordion.
Mobile (large)	480 – 767px	Same as small but feature tiles render 2-up. Hero scales to 44px.
Tablet	768 – 1023px	2-column feature grids. Pill-tab nav returns. Documentation sidebar collapses to drawer. Hero scales to 56px.
Desktop	1024 – 1279px	Full 3-column docs grid (sidebar / body / TOC). 3-tier pricing card row. Hero at 72px.
Wide Desktop	≥ 1280px	Wider hero gutters, larger product mockup, fixed 240px sidebar.

Touch Targets

Pill buttons render at 36–40px effective height — bumps to 44px on mobile via padding override
Circular icon buttons: 32×32px desktop → 44×44px mobile
Form inputs render at 40px height; bumps to 44px mobile
Sidebar nav items render at ~32px tall — bump to 44px mobile drawers

Collapsing Strategy

Promo banner stays full-width; truncates at < 480px
Top nav below 1024px collapses to hamburger; horizontal links move into drawer
Hero band: 2-column hero (text + mockup) collapses to stacked at < 1024px; mockup rendered below text on mobile
Documentation grid: 3-column desktop → sidebar-drawer at < 1024px → single-column at < 768px
Pricing comparison: 3-column tiers → 1-column stacked at < 768px; comparison table becomes horizontal-scroll
Hero typography: {typography.hero-display} (72px) → 56px tablet → 44px mobile-large → 36px mobile-small
Customer logo wall: 6-up → 3-up at tablet → 2-up at mobile
Footer: 5-column desktop → 2-column tablet → accordion at mobile

Image Behavior

Hero illustrations (cloud, rocket) lazy-load with the hero band; remain crisp at all breakpoints (SVG-based)
Product mockup retains its aspect ratio across breakpoints; scales proportionally
Customer logos use SVG wordmarks; remain crisp on retina displays

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-mintlify {--page-bg: #ffffff;
  --page-bg-gradient: none;
  --text-color: #0a0a0a;
  --heading-color: #0a0a0a;
  --link-color: #0a0a0a;
  --link-hover-color: #000000;
  --border-color: #d3d3d3;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(10,10,10,0.06);
  --card-hover-shadow: 0 6px 18px rgba(10,10,10,0.12);
  --header-bg: #0a0a0a;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #ffffff;
  --footer-text-color: #606060;
  --button-bg: #0a0a0a;
  --button-text-color: #ffffff;
  --button-hover-bg: #000000;
  --button-border: none;
  --button-border-radius: 12px;
  --button-secondary-bg: #f0f0f0;
  --button-secondary-text-color: #0a0a0a;
  --button-secondary-hover-bg: #e2e2e2;
  --button-secondary-border: 1px solid #d3d3d3;
  --prompt-bg: #f3f3f3;
  --prompt-text-color: #0a0a0a;
  --base-font: var(--font-inter);
  --heading-font: var(--font-mono);
  --card-border-radius: 12px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

mongodb 84.6%
notion 83.6%
resend 79.8%
miro 78.5%
cal 77.9%

Where this came from

Source document: volt/design-md/mintlify/DESIGN.md · 42.8 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.