Screenshot of Mintlify

Mintlify

mintlify.com

The reference for AI-documentation platform — cloud-gradient sky hero, mint-green CTA, modern lab()/oklab() colour science, real docs mockup with AI assistant chat.

Marketing Platform Ai Documentation Platform strong

Design tokens

white
black
mintGreen
deepNearBlack
overlay50
overlay30
overlay70
oklabOverlay
display
inter, 'inter Fallback'
body
inter, 'inter Fallback'
mono
'Geist Mono', 'Geist Mono Fallback'

Do / Don't

Reference it for

  • Painterly cloud-gradient sky hero background — warm golden + light blue + white painterly imagery
  • Mint-green lab(51.3415 -41.5657 15.3527) CTA pill — precise lab() colour
  • Modern lab() and oklab() colour formats in CSS for colour-science precision
  • Inter + Geist Mono with Fallback metric-matched variants
  • 3-weight discipline (400 / 500 / 600)
  • Email input + mint pill CTA as one-step sign-up hero affordance
  • Real Mintlify docs mockup in hero with Ask Assistant + sidebar + content
  • "Ask AI anything..." chat input in Assistant section

Do not copy

  • The Mintlify logotype (green leaf icon + wordmark)
  • The mint-green lab(51.3415 -41.5657 15.3527) exact hue
  • The painterly cloud-gradient hero illustration — bespoke imagery
  • The "Intelligent Knowledge Platform" copy
  • The Mintlify docs mockup data
  • The "intelligence age" framing unless the brand has comparable AI positioning

Signature moves

painterly cloud-gradient sky hero

a warm golden + light-blue + white painterly cloud-gradient sky background sits behind the hero, with an email input + mint pill CTA as a one-step sign-up affordance.

real product mockup in hero

a real docs mockup (sidebar + content + Ask Assistant chat input with a skeleton placeholder loading state) sits in the hero as the proof device.

Inter + Geist-Mono three-weight micro-rhythm

Inter + Geist Mono (with metric-matched fallbacks) at a 3-weight discipline (400/500/600), with a 6px workhorse gap (plus 4/8/24px) as the micro-rhythm.

Related references

Screenshot of Cal Com

Cal Com

strong

Developer Tool

The reference for open-source dev-tools brand at peak typographic confidence — Cal Sans 64px H1 on pure white, real booking widget in hero, prestige customer logos.
Screenshot of Jasper

Jasper

strong

Marketing Platform

The reference for AI-marketing brands with editorial-magazine-cutout aesthetic — ABC ROM serif at 80px, coral CTAs, photographic collage imagery on cream.
Screenshot of Stripe

Stripe

flagship

Fintech

the clarity benchmark - extreme product complexity made to feel calm, premium and effortless through a fully tokenised design system and restrained, confident CSS motion.
Screenshot of Adaline

Adaline

strong

Developer Tool

an AI-infra product site that swaps the genre's default dark-neon for a hand-built 3D Japanese-garden world, then runs warm earth tones, a grotesque/mono type pair and patient scroll-reveal motion over the top so a developer tool feels like a calm place.