DESIGN.md — Mintlify

Overview

Mintlify's design system is meta — a documentation platform whose own docs exemplify its capabilities. A rich teal-green accent on clean light surfaces creates a trustworthy, polished feel. The system prioritizes readability, navigation clarity, and beautiful code rendering.

Colors

Primary Palette

Token	Hex	Usage
color-brand	#0D9373	Teal green, primary accent
color-bg-dark	#0F1117	Dark mode background
color-bg	#FFFFFF	Light mode background
color-surface	#F5F6F8	Code blocks, sidebar
color-muted	#6B7280	Secondary text

Typography

Role	Family	Size	Weight
Title	Inter	36px	700
Heading	Inter	24px	600
Body	Inter	16px	400
Code	Fira Code	14px	400

Components

Docs Navigation

• Left sidebar with grouped sections
• Active page: teal left border + bold text
• Collapsible groups with chevron

API Reference Card

• Method badge (GET green, POST blue, DELETE red)
• Endpoint path in monospace
• Parameter table with type, required, description

Code Block

• Multi-language tabs (cURL, Python, JavaScript)
• Copy button top-right
• Line numbers optional, syntax highlighted

Do's and Don'ts

Do

• Use teal for navigation active states and links
• Support both light and dark themes with proper tokens
• Keep body text at 16px minimum for reading comfort

Don't

• Don't override the user's preferred color scheme without a toggle
• Don't use code blocks without syntax highlighting
• Don't nest navigation deeper than 3 levels