Mintlify

version alpha

name Mintlify

description Mintlify presents documentation infrastructure with a dual-mode aesthetic — atmospheric sky-gradient marketing heroes (cloud illustration backdrops, soft cream-to-blue washes) paired with dense developer-grade documentation surfaces. The system uses Inter for UI prose, Geist Mono for code, and a signature Mintlify green ({colors.brand-green}) reserved for accent CTAs and active states. Black-pill primary buttons dominate marketing, white-on-dark inversions appear on dark hero bands, and a 3-column documentation layout (sidebar / prose / TOC) anchors the developer experience. Coverage spans homepage, startups program, pricing comparison, and the live tabs documentation page.

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" hero-sky-from: "#87a8c8" hero-sky-to: "#f5e9d8" hero-dark-from: "#1a3d4a" hero-dark-to: "#2d5a4f" testimonial-orange: "#f55a3c" testimonial-orange-deep: "#cc3a1f" canvas: "#ffffff" canvas-dark: "#0a0a0a" surface: "#f7f7f7" surface-soft: "#fafafa" surface-code: "#1c1c1e" hairline: "#e5e5e5" hairline-soft: "#ededed" hairline-dark: "#1f1f1f" ink: "#0a0a0a" charcoal: "#1c1c1e" slate: "#3a3a3c" steel: "#5a5a5c" stone: "#888888" muted: "#a8a8aa" on-dark: "#ffffff" on-dark-muted: "#b3b3b3"

typography hero-display: fontFamily: Inter fontSize: 72px fontWeight: 600 lineHeight: 1.05 letterSpacing: -2px display-lg: fontFamily: Inter fontSize: 56px fontWeight: 600 lineHeight: 1.10 letterSpacing: -1.5px heading-1: fontFamily: Inter fontSize: 48px fontWeight: 600 lineHeight: 1.10 letterSpacing: -1px heading-2: fontFamily: Inter fontSize: 36px fontWeight: 600 lineHeight: 1.20 letterSpacing: -0.5px heading-3: fontFamily: Inter fontSize: 28px fontWeight: 600 lineHeight: 1.25 heading-4: fontFamily: Inter fontSize: 22px fontWeight: 600 lineHeight: 1.30 heading-5: fontFamily: Inter fontSize: 18px fontWeight: 600 lineHeight: 1.40 subtitle: fontFamily: Inter fontSize: 18px fontWeight: 400 lineHeight: 1.50 body-md: fontFamily: Inter fontSize: 16px fontWeight: 400 lineHeight: 1.50 body-md-medium: fontFamily: Inter fontSize: 16px fontWeight: 500 lineHeight: 1.50 body-sm: fontFamily: Inter fontSize: 14px fontWeight: 400 lineHeight: 1.50 body-sm-medium: fontFamily: Inter fontSize: 14px fontWeight: 500 lineHeight: 1.50 caption: fontFamily: Inter fontSize: 13px fontWeight: 400 lineHeight: 1.40 caption-bold: fontFamily: Inter fontSize: 13px fontWeight: 600 lineHeight: 1.40 micro: fontFamily: Inter fontSize: 12px fontWeight: 500 lineHeight: 1.40 micro-uppercase: fontFamily: Inter fontSize: 11px fontWeight: 600 lineHeight: 1.40 letterSpacing: 0.5px button-md: fontFamily: Inter fontSize: 14px fontWeight: 500 lineHeight: 1.30 code-md: fontFamily: Geist Mono fontSize: 14px fontWeight: 400 lineHeight: 1.50 code-sm: fontFamily: Geist Mono fontSize: 13px fontWeight: 400 lineHeight: 1.40 code-inline: fontFamily: Geist Mono fontSize: 13px fontWeight: 500 lineHeight: 1.30

rounded xs: 4px sm: 6px md: 8px lg: 12px xl: 16px xxl: 24px full: 9999px

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

components button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: "10px 20px" button-primary-pressed: backgroundColor: "{colors.charcoal}" textColor: "{colors.on-primary}" button-primary-disabled: backgroundColor: "{colors.hairline}" textColor: "{colors.muted}" button-accent-green: backgroundColor: "{colors.brand-green}" textColor: "{colors.primary}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: "10px 20px" button-on-dark: backgroundColor: "{colors.on-dark}" textColor: "{colors.primary}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: "10px 20px" button-secondary: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: "10px 20px" border: "1px solid {colors.hairline}" button-ghost: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "8px 12px" button-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-sm-medium}" padding: "0" button-icon-circular: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.full}" size: 32px border: "1px solid {colors.hairline}" card-base: backgroundColor: "{colors.canvas}" rounded: "{rounded.lg}" padding: "{spacing.xl}" border: "1px solid {colors.hairline}" card-feature: backgroundColor: "{colors.surface}" rounded: "{rounded.lg}" padding: "{spacing.xxl}" card-help: backgroundColor: "{colors.canvas}" rounded: "{rounded.lg}" padding: "{spacing.xl}" border: "1px solid {colors.hairline}" card-startup-perk: backgroundColor: "{colors.canvas}" rounded: "{rounded.lg}" padding: "{spacing.xl}" border: "1px solid {colors.hairline}" pricing-card: backgroundColor: "{colors.canvas}" rounded: "{rounded.lg}" padding: "{spacing.xxl}" border: "1px solid {colors.hairline}" pricing-card-featured: backgroundColor: "{colors.canvas}" rounded: "{rounded.lg}" padding: "{spacing.xxl}" border: "2px solid {colors.brand-green}" shadow: "rgba(0, 212, 164, 0.08) 0px 8px 24px" testimonial-card-feature: backgroundColor: "{colors.testimonial-orange}" textColor: "{colors.on-dark}" rounded: "{rounded.lg}" padding: "{spacing.section}" testimonial-card-quote: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: "{spacing.xxl}" border: "1px solid {colors.hairline}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "{spacing.sm} {spacing.md}" border: "1px solid {colors.hairline}" height: 40px text-input-focused: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" border: "2px solid {colors.brand-green}" search-pill: backgroundColor: "{colors.surface}" textColor: "{colors.steel}" typography: "{typography.body-sm}" rounded: "{rounded.md}" padding: "{spacing.xs} {spacing.md}" height: 36px border: "1px solid {colors.hairline}" segmented-tab: backgroundColor: "transparent" textColor: "{colors.steel}" typography: "{typography.body-sm-medium}" padding: "{spacing.sm} {spacing.md}" border: "0 0 2px transparent solid" segmented-tab-active: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-sm-medium}" border: "0 0 2px {colors.ink} solid" pill-tab: backgroundColor: "{colors.canvas}" textColor: "{colors.steel}" typography: "{typography.body-sm-medium}" rounded: "{rounded.full}" padding: "8px 16px" border: "1px solid {colors.hairline}" pill-tab-active: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" rounded: "{rounded.full}" border: "1px solid {colors.primary}" toggle-monthly-yearly: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.full}" padding: "4px" badge-discount: backgroundColor: "{colors.brand-green}" textColor: "{colors.primary}" typography: "{typography.caption-bold}" rounded: "{rounded.full}" padding: "2px 8px" badge-required: backgroundColor: "{colors.brand-error}" textColor: "{colors.on-dark}" typography: "{typography.micro-uppercase}" rounded: "{rounded.sm}" padding: "2px 6px" badge-type: backgroundColor: "{colors.surface}" textColor: "{colors.steel}" typography: "{typography.code-sm}" rounded: "{rounded.sm}" padding: "2px 6px" badge-tag: backgroundColor: "rgba(55, 114, 207, 0.15)" textColor: "{colors.brand-tag}" typography: "{typography.caption-bold}" rounded: "{rounded.sm}" padding: "2px 8px" promo-banner: backgroundColor: "{colors.canvas-dark}" textColor: "{colors.on-dark}" typography: "{typography.body-sm-medium}" padding: "{spacing.sm} {spacing.md}" code-block: backgroundColor: "{colors.surface-code}" textColor: "{colors.on-dark}" typography: "{typography.code-md}" rounded: "{rounded.md}" padding: "{spacing.md}" code-block-header: backgroundColor: "{colors.surface-code}" textColor: "{colors.on-dark-muted}" typography: "{typography.caption}" padding: "{spacing.xs} {spacing.md}" border: "0 0 1px {colors.hairline-dark} solid" code-inline: backgroundColor: "{colors.surface}" textColor: "{colors.charcoal}" typography: "{typography.code-inline}" rounded: "{rounded.xs}" padding: "2px 6px" border: "1px solid {colors.hairline}" property-row: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-sm}" padding: "{spacing.md} 0" border: "0 0 1px {colors.hairline-soft} solid" feature-comparison-table: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.md}" border: "1px solid {colors.hairline}" feature-comparison-row: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" padding: "{spacing.md} {spacing.lg}" border: "0 0 1px {colors.hairline-soft} solid" sidebar-nav-item: backgroundColor: "transparent" textColor: "{colors.steel}" typography: "{typography.body-sm}" rounded: "{rounded.sm}" padding: "{spacing.xs} {spacing.md}" sidebar-nav-item-active: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body-sm-medium}" sidebar-section-header: backgroundColor: "transparent" textColor: "{colors.steel}" typography: "{typography.micro-uppercase}" padding: "{spacing.md} {spacing.md} {spacing.xs}" doc-toc-item: backgroundColor: "transparent" textColor: "{colors.steel}" typography: "{typography.body-sm}" padding: "{spacing.xxs} 0" doc-toc-item-active: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-sm-medium}" copy-code-button: backgroundColor: "transparent" textColor: "{colors.on-dark-muted}" typography: "{typography.caption}" rounded: "{rounded.sm}" padding: "{spacing.xxs} {spacing.xs}" border: "1px solid {colors.hairline-dark}" hero-band-sky: backgroundColor: "{colors.hero-sky-from}" textColor: "{colors.on-dark}" rounded: "0" padding: "{spacing.hero}" hero-band-dark: backgroundColor: "{colors.hero-dark-from}" textColor: "{colors.on-dark}" rounded: "0" padding: "{spacing.hero}" hero-product-mockup: backgroundColor: "{colors.canvas}" rounded: "{rounded.lg}" padding: "0" border: "1px solid {colors.hairline-soft}" shadow: "rgba(0, 0, 0, 0.12) 0px 24px 48px -8px" logo-wall-item: backgroundColor: "transparent" textColor: "{colors.steel}" typography: "{typography.body-md-medium}" padding: "{spacing.lg}" faq-accordion-item: backgroundColor: "{colors.canvas}" rounded: "{rounded.md}" padding: "{spacing.xl}" border: "1px solid {colors.hairline-soft}" footer-region: backgroundColor: "{colors.canvas}" textColor: "{colors.steel}" typography: "{typography.body-sm}" padding: "{spacing.section} {spacing.xxl}" border: "1px solid {colors.hairline}" footer-link: backgroundColor: "transparent" textColor: "{colors.steel}" typography: "{typography.body-sm}" padding: "{spacing.xxs} 0" startup-program-card: backgroundColor: "{colors.canvas}" rounded: "{rounded.lg}" padding: "{spacing.xxl}" border: "1px solid {colors.hairline}" founder-quote-card: backgroundColor: "{colors.testimonial-orange}" textColor: "{colors.on-dark}" rounded: "{rounded.lg}" padding: "{spacing.xxl}"

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 d