Mintlify · Full Page
Mintlify
Modern dev-docs platform that carries a brand without raising its voice — warm-paper canvas, emerald lab-indicator accent, Inter + Arizona Flare serif + Paper Mono.

Editorial disclaimer
Editorial noteThis entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm — do not reproduce brand identity, logo, product copy, or proprietary features.
Curator verdict
Why we catalogued it?
Mintlify is the cleanest argument we've seen that developer documentation can carry a brand without raising its voice. We catalogued it because it solves a problem most docs platforms never even attempt — being unmistakably warm and editorial while staying so quiet that the content always wins. If you are designing anything content-first for a technical audience in the AI-search era — docs, knowledge bases, changelogs, reference sites — this is the page to keep open while you work.
Design decisions observed
- A warm paper canvas instead of clinical white — the background is a barely-off ivory rather than #fff, which softens long-form reading and quietly separates Mintlify from every cold, blue-gray docs competitor.
- An editorial serif display paired with a workhorse sans — Mintlify reaches for ABC Arizona Flare on its biggest headings while Inter carries the body. That single move makes a docs platform read like a magazine, not a control panel.
- Emerald as a laboratory indicator, not a coat of paint — the brand green appears on a tiny fraction of the surface, reserved for the moments that actually need to be found. The page is almost monochrome until it deliberately isn't.
- Borders do the structural speaking — a relentless 1px hairline defines cards, sections, and tables before any shadow is considered. Structure is drawn, not floated.
- A micro-mono voice for labels and metadata — Paper Mono at 12px with positive letter-spacing handles eyebrows and captions, lending a technical, terminal-adjacent texture exactly where docs audiences expect it.
- Motion tuned for reading, not spectacle — short 150ms color fades and a longer 700ms expressive reveal curve coexist, so the page feels alive on scroll yet never interrupts a sentence you're mid-way through.
What to study
- How a serif display font earns its place on a technical site — Arizona Flare is used only at heading scale, never in body, so it reads as editorial confidence rather than decoration. Steal the discipline of reserving your character font for the largest type only.
- The warm-neutral palette engineering — study how #fefdfb, #faf8f5, and the cool-gray text descenders (#121715 → #717d79 → #969e9b) build an entire reading system before a single accent color appears.
- The three-family type system without chaos — Inter for body, Arizona Flare for display, Paper Mono for micro-labels. Learn how each family owns one job, so adding a third font reads as intentional rather than indecisive.
- Border-first elevation — almost everything is delimited by a 1px hairline at single-digit-opacity black, with the heaviest captured shadow being a near-invisible layered stack. It's the cheapest, most reliable way to look composed.
What to avoid
- Don't pull Arizona Flare (or any serif display) down into body or UI copy — Mintlify's editorial feel depends on the serif staying at heading scale only. Spread it everywhere and you get a wedding invitation, not a docs platform.
- Don't read the warm paper background as 'white' and substitute #ffffff — the entire reading warmth lives in that #fefdfb / #faf8f5 pairing. Flatten it to pure white and the page goes cold and generic.
- Don't escalate the emerald accent into fills and buttons-everywhere — its power is scarcity. The moment green covers more than a sliver of the surface, the laboratory-indicator effect collapses into noise.
Taste notes
The page feels like a beautifully set print manual that happens to live on the web — paper-warm background, a confident serif headline, and hairline rules doing the work that boxes and shadows do on lesser sites. Type is the architecture; color is punctuation. Emerald and the rare amber appear like annotations in a margin, never as wallpaper. You come away trusting the platform precisely because it never tried to dazzle you — it just made the words easy to read and easy to find.
Lineage & references
- The standard-bearer of the AI-native documentation generation — alongside Fern and the modern ReadMe, Mintlify treats docs as a product surface and an agent-queryable knowledge base, not an afterthought bolted onto a marketing site.
- Sits in the warm-editorial branch of dev-tool design (Vercel's serif moments, Resend, Linear's typographic rigor) — companies proving a technical brand can feel crafted and human without sacrificing density.
- Part of the post-GitBook docs renaissance — the cohort (GitBook, ReadMe, Docusaurus-on-steroids) that re-taught the category documentation can be a brand asset, with Mintlify pushing hardest on the warm, content-first, AI-search end of that spectrum.
Design language brief
Paste-ready for your agent.
A typed design system transfer brief — philosophy, tokens, rules, techniques, and fitness checks. Your agent reads the whole language, not just the pixels.
Philosophy
Light-first warm-paper minimalism in service of long-form reading. The canvas is a near-ivory #fefdfb / #faf8f5 pairing, never pure white. Voice is carried by three families with strict jobs: Inter Variable for body and UI, ABC Arizona Flare (serif) for display headings only, and Paper Mono for 12px eyebrows and metadata. Text descends through a cool-gray ladder (#121715 → #717d79 → #969e9b) for de-emphasis. Structure is drawn with relentless 1px hairline borders before any shadow. Emerald #0c8c5e is the laboratory indicator — present on under ~2% of the surface, never a fill. Content over chrome, structure over decoration.
Main prompt
Use this capture as a design language transfer brief for my project. Adopt the warm light-first palette (near-ivory #fefdfb / #faf8f5 backgrounds + near-black #121715 foreground + cool-gray text descenders + homeopathic emerald #0c8c5e accent), the three-family typographic system (Inter Variable body/UI, ABC Arizona Flare serif for display headings only, Paper Mono for 12px micro-labels and metadata), the 4px-base spacing scale, border-first elevation (1px hairlines before any shadow), the tight cubic-bezier(0, 0, 0.2, 1) interactive motion with a cubic-bezier(0.22, 1, 0.36, 1) reveal curve, and a content-first, lazy-image strategy across every page and component I ship. Treat this as my project's constitution — any new component I author should pass as if crafted in the same studio. Apply the language, not the source brand's specific copy or identity. When I ask you to build a page or component, enforce these rules by default, and call out any decision that deviates.
Overview
- Layout
- Editorial
- Content width
- Bounded
- Framing
- Flat
- Grid strength
- Soft
Color philosophy
Warm light-first canvas — #fefdfb primary background paired with #faf8f5 invert/section panel and #121715 near-black foreground doing the dominant reading work. Secondary text descends through cool grays: #717d79 (tertiary) → #969e9b (muted) → #cfcdca (neutral-300) for progressive de-emphasis. Accent is emerald #0c8c5e (the single brand-tier color, measured 41 occurrences) with amber #ffb100 as a rare secondary highlight — both appearing as small indicators and never as broad fills. Inline links use a measured blue #476cff.
- Near-ivory background pair #fefdfb (body) + #faf8f5 (sections/panels) — never pure #ffffff; the warmth is the brand
- Near-black #121715 foreground (Inter weight 400/500) handling the dominant reading layer at 4.5+ contrast on the paper canvas
- Cool-gray descender #717d79 → #969e9b → #cfcdca for metadata, captions, de-emphasized labels and placeholder text
- Emerald #0c8c5e is the single brand-tier accent — reserved for active states, key links and emphasis; surface area kept under ~2%
- Amber #ffb100 as a rare secondary accent (measured 11 occurrences); inline prose links use blue #476cff. Neither is decorative wallpaper
Gradients (paste-ready)
linear-gradient(106deg, rgba(68, 174, 255, 0.5) 0%, rgba(24, 226, 153, 0.5) 35%, rgba(186, 255, 36, 0.5) 65%, rgba(24, 226, 153, 0.5) 100%) linear-gradient(rgba(0, 0, 0, 0) 55%, lab(100 0 0) 96%) linear-gradient(to right, lab(100 0 0) 0%, rgba(0, 0, 0, 0) 71%)
Typography rules
- Three families with strict jobs. Body/UI: Inter Variable (self-hosted, preloaded /_next/static/media/InterVariable.ttf). Display headings: ABC Arizona Flare (serif, .otf) — headings ONLY, never body. Micro-labels: Paper Mono (.woff2) at 12px. Code/kbd: Geist Mono.
- Weight ladder is narrow: 400 (reading) / 500 (UI labels, dense controls, medium emphasis). Mintlify uses no 600/700 in the captured set — do not introduce them.
- Display headings use Arizona Flare at 36px (line-height 40px, tracking -0.72px) and Inter at heading scale: 50px hero (Arizona Flare, line-height 52px, tracking -2px), 35-36px (tracking -0.35 / -0.72px), 24px (tracking -0.24px).
- Body is Inter 16px / line-height 24px / letter-spacing normal. Secondary body 14-18px. Headings tighten tracking as size grows (negative px); body stays at normal tracking.
- Eyebrows, captions and metadata are Paper Mono 12px / weight 500 / line-height 16px with POSITIVE letter-spacing 0.24px — the technical micro-label voice. Never set body in mono.
- No italic for emphasis — shift weight 400→500 instead. The serif (Arizona Flare) carries editorial character at display scale; it is not a substitute for italic.
- Paragraph max ~60-70 ch at body 16px for comfortable docs reading; mono labels stay short (single line) at 12px.
Spacing rules
- 4px base unit. Scale (measured): 4 / 6 / 8 / 10 / 12 / 14 / 16 / 20 / 24 / 28 / 32 / 40 px. The 16px step is the workhorse (highest frequency), 4 / 8 / 12 dominate micro-rhythm.
- Container max-widths are tiered: 432px (narrow content clusters) / 664px (prose column) / 1024px (primary page rail). Content-first means the 664px reading column is sacred — do not stretch prose to full width.
- Section vertical rhythm leans on 32 / 40px blocks on desktop; tighten to 20-24px on mobile. Driven by content density, not fixed section count.
- Card/panel padding: 16-24px desktop, 12-16px mobile. Always pick from the scale; no magic numbers.
- Gutter values for flex/grid: 4 / 8 / 12 / 16 / 24 / 32 px (measured). Grid columns commonly gap at 16px; tight flex clusters at 4-8px.
Design tokens
Palette, type, and space — all agent-readable.
15 colors · hex / rgb / hsl / oklch
- foregroundcolor-border-muted67%
- HEX
#000000 - RGB
rgb(0, 0, 0) - HSL
hsl(0, 0%, 0%) - OKLCH
oklch(0.00% 0.0000 0.00)
- HEX
- foregroundcolor-foreground-primary11%
- HEX
#121715 - RGB
rgb(18, 23, 21) - HSL
hsl(156, 12%, 8%) - OKLCH
oklch(19.85% 0.0086 169.32)
- HEX
- backgroundcolor-background-transparent9%
- HEX
#FFFFFF - RGB
rgb(255, 255, 255) - HSL
hsl(0, 0%, 100%) - OKLCH
oklch(100.00% 0.0000 89.76)
- HEX
- foregroundcolor-foreground-muted5%
- HEX
#969E9B - RGB
rgb(150, 158, 155) - HSL
hsl(157, 4%, 60%) - OKLCH
oklch(69.19% 0.0101 171.65)
- HEX
- accentcolor-brand-202%
- HEX
#0C8C5E - RGB
rgb(12, 140, 94) - HSL
hsl(158, 84%, 30%) - OKLCH
oklch(56.65% 0.1234 161.01)
- HEX
- backgroundcolor-foreground-invert2%
- HEX
#FAF8F5 - RGB
rgb(250, 248, 245) - HSL
hsl(36, 33%, 97%) - OKLCH
oklch(97.98% 0.0045 78.30)
- HEX
- backgroundcolor-background-primary1%
- HEX
#FEFDFB - RGB
rgb(254, 253, 251) - HSL
hsl(40, 60%, 99%) - OKLCH
oklch(99.43% 0.0028 84.56)
- HEX
- accent1%
- HEX
#FFB100 - RGB
rgb(255, 177, 0) - HSL
hsl(42, 100%, 50%) - OKLCH
oklch(81.42% 0.1704 76.91)
- HEX
- foregroundcolor-neutral-3001%
- HEX
#CFCDCA - RGB
rgb(207, 205, 202) - HSL
hsl(36, 5%, 80%) - OKLCH
oklch(84.90% 0.0047 78.30)
- HEX
Inspector
Tab through the captured artifacts.
Six observable layers — page structure, fonts, breakpoints, z-index, gradients, motion — kept paste-ready alongside the tokens above.
Page structure
Semantic hierarchy at a glance.
Depth-first walk of meaningful sections — header, navigation, main regions, articles, footer. 8 nodes captured; depth capped at 6 for readability.
- body
- ├─ Header
- │ └─ div
- │ └─ Nav
- ├─ Main
- │ └─ Section (×9)
- ├─ Footer
- └─ div
Accessibility
WCAG contrast matrix.
162 combinations · 52 pass AA · 34 pass AAA · APCA Lc shown alongside WCAG 2.1 ratio for draft WCAG 3 awareness.
| Preview | fg | bg | Ratio | Normal | Large | APCA Lc | Context |
|---|---|---|---|---|---|---|---|
Aa | #000000 | #FFFFFF | 21.00 | AAA | AAA | +106 | foreground on background |
Aa | #FFFFFF | #000000 | 21.00 | AAA | AAA | -108 | background on foreground |
Aa | #000000 | #FEFDFB | 20.66 | AAA | AAA | +105 | foreground on background |
Aa | #FEFDFB | #000000 | 20.66 | AAA | AAA | -107 | background on foreground |
Aa | #000000 | #FAF8F5 | 19.81 | AAA | AAA | +102 | foreground on background |
Aa | #FAF8F5 | #000000 | 19.81 | AAA | AAA | -103 | background on foreground |
Aa | #121715 | #FFFFFF | 18.12 | AAA | AAA | +105 | foreground on background |
Aa | #FFFFFF | #121715 | 18.12 | AAA | AAA | -107 | background on foreground |
Aa | #121715 | #FEFDFB | 17.82 | AAA | AAA | +104 | foreground on background |
Aa | #FEFDFB | #121715 | 17.82 | AAA | AAA | -106 | background on foreground |
Image strategy
Asset loading & format policy.
Observable image posture — total count, lazy-loading ratio, and format mix. Hero image is measured above the fold.
Hero image
https://www.mintlify.com/images/docs-preview/preview-light.svg- Format
- SVG
- Dimensions
- 1080×656
- Loading
- auto
- srcset
- no
- Full Page
- developer-tools
- saas
- light
- 2026-06-23
Editorial credit
Featured Sponsor slot — your brand here
Dedicated logo placement — no rotation, on every export.
COMPARE THIS WITH
Side-by-side reads sharing this design signal.
See also


