Mintlify
Design system for Mintlify, documentation platform for developers. Brand green that shifts between themes (#0c8c5e light / #18e299 dark), Inter + ABC Arizona Flare typography, warm off-white philosophy.
Quick Reference
Colors
Typography
Light/Dark
Light + Dark
Design Philosophy
Design system with brand green that shifts hue across themes, warm off-white surfaces, Inter for UI and ABC Arizona Flare for editorial display.
Live Preview
Fictitious landing page inspired by this design system — not affiliated with the brand.
DESIGN.md
# Mintlify Design
> Mintlify builds documentation that drives growth.
## Overview
Mintlify helps companies create beautiful documentation. The design system emphasizes warmth, clarity, and developer-friendliness.
## Brand Colors
| Token | Light | Dark | Usage |
|-------|-------|------|-------|
| Primary | `#0c8c5e` | `#18e299` | CTAs, links |
| Surface | `#ffffff` | `#0d0d0f` | Backgrounds |
| Text | `#0d0d0f` | `#fafafa` | Body text |
| Border | `#e4e4e7` | `#27272a` | Dividers |
The primary green shifts hue between modes: deeper forest-like in light, brighter in dark.
## Typography
| Role | Family |
|------|--------|
| Primary Sans | Inter |
| Display | ABC Arizona Flare |
| Monospace | Fira Code |
### Scale
| Role | Size | Weight |
|------|------|--------|
| Display | 48px | 500 |
| H1 | 36px | 600 |
| H2 | 30px | 600 |
| Body | 16px | 400 |
## Spacing
8px base: xs=4px, sm=8px, md=16px, lg=24px, xl=32px
## Components
- **Primary Button**: Green background, white text
- **Cards**: 12px radius, subtle shadow on hover
- **Code Blocks**: Syntax highlighting, copy button
## Do's and Don'ts
### Do's
- Use green sparingly for CTAs
- Maintain generous whitespace
- Ensure 4.5:1 contrast
### Don'ts
- Don't use green for body text
- Don't use pure black in dark mode
## Resources
- [mintlify.com](https://mintlify.com)
Extracted from: https://mintlify.com/design.md
Extracted: 7/18/2025
This site is not affiliated with, endorsed by, or sponsored by any of the listed brands. Design tokens shown were extracted exclusively from publicly accessible information (CSS visible in browsers). No copyrighted content is reproduced. If you are a trademark owner and wish to request removal, see our Privacy Policy — Section 9.