mintlify
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
colors
#0a0a0a #ffffff typography
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog — body text at reading size.
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog — body text at reading size.
design.md source
---
version: alpha
name: Mintlify-design-analysis
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:
… components
display headline
body copy from mintlify tokens — the default reading size for paragraphs and ui descriptions.
feature headline
a sample card surface with heading and body copy styled from component tokens.
what is in this design system?
colors, typography, spacing, and component patterns sourced from publicly visible brand tokens.
const theme = {
primary: "#0a0a0a",
font: ""Inter", system-ui, sans-serif",
};extracted from publicly visible design tokens. sourced via VoltAgent/awesome-design-md. no ownership claim on mintlify's visual identity.