Design System

Beautiful docs,
effortlessly.

A clean, inviting documentation platform with crisp typography, generous whitespace, and a distinctive emerald accent that signals trust and clarity.

16 color tokens 11 type steps 4px grid 4 surface levels
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

Light neutrals with a single emerald accent. 16 tokens across surfaces, text hierarchy, interactive states, and semantic feedback.

Mint White
#ffffff
Primary page background
Snow
#f8fafb
Sidebar, code blocks
Cloud
#f1f5f7
Nested panels, callouts
Border Light
#e2e8f0
Borders, dividers
Border Medium
#cbd5e1
Active borders, emphasis
Slate
#64748b
Secondary text, labels
Iron
#374151
Body text, paragraphs
Charcoal
#1e293b
Headings, bold text
Mint Green
#0d9373
Primary accent, links, CTAs
Mint Light
#d1fae5
Accent backgrounds, pills
Mint Dark
#047857
Hover states, pressed
Mint Glow
#ecfdf5
Callouts, success states
Code Gray
#f4f4f5
Inline code, code surfaces
Code Text
#dc2626
Inline code text
Warning Amber
#f59e0b
Warning callouts
Error Red
#ef4444
Errors, destructive actions
Typography

Type Scale

Inter as the primary typeface with JetBrains Mono for code. Generous line-height (1.75) for comfortable long-form reading.

Display-lg Beautiful docs 40px / 1.2 / -0.025em
Display Page header 32px / 1.25 / -0.025em
Heading-lg Major section 28px / 1.3 / -0.02em
Heading Section heading 24px / 1.4 / -0.02em
Heading-sm Subsection 20px / 1.5 / -0.01em
Body Default body text for readable documentation content 15px / 1.75 / 0
Body-sm Dense content, table cells, secondary paragraphs 14px / 1.75 / 0
Code const docs = mintlify.create() 13px / 1.7 / mono
Caption Meta info · Labels · Helper text 12px / 1.5 / 0.025px

Fonts

Primary Inter 400-700 · 12-20px
Mono JetBrains Mono 400-700 · 13-14px · Code only
Layout

Spacing & Shapes

Base unit 4px. Comfortable density with generous whitespace. 13-step spacing scale, 5 border radius values.

Spacing Scale (4px base)

44px
88px
1212px
1616px
2424px
3232px
4848px
9696px

Border Radius

sm 4px
md 6px
lg 8px
xl 12px
full 9999px
Elevation

Surfaces

Border-driven hierarchy on a white canvas. 4 distinct surface levels using background color, not shadows.

Mint White #ffffff
Snow #f8fafb
Cloud #f1f5f7
Code Gray #f4f4f5
Components

Interactive Elements

Button variants, code blocks, callouts, and navigation patterns for documentation interfaces.

Primary Button
Main call to action
.btn-primary
Mint Green (#0d9373) background, white text, 6px radius. Hover darkens to Mint Dark (#047857).
Secondary Button
Secondary actions
.btn-secondary
White background, Charcoal text, 1px Border Light border. Hover adds Cloud fill.
Ghost Button
Tertiary actions
.btn-ghost
Transparent background, Mint Green text. Hover adds Mint Glow background.
Code Block
Code snippets and technical content
.code-block
javascript
import { Mintlify } from '@mintlify/sdk'; const docs = Mintlify.create({ theme: 'default', accent: '#0d9373', });
Snow background, 8px radius, JetBrains Mono at 13px. Header bar with Cloud background and language label.
Callout Blocks
Important notices, tips, warnings
.callout
ⓘ
Tip
Use theme.css for Tailwind v4 integration with all design tokens.
⚠
Warning
Mint Green should remain an accent, not a canvas. Avoid large background fills.
Mint Glow background with 3px left accent border. Info uses Mint Green, Warning uses Amber, Error uses Red.
Inline Code
Technical terms and short code references
code
Use the Mintlify.create() function to initialize your docs with theme: 'default'.
Code Gray background, Code Text color, JetBrains Mono at 13px, 4px radius.
Pill Badge
Status indicators, version labels
.pill
v2.0 New Beta
Mint Light fill with Mint Green text for default. Solid Mint Green for emphasis. Cloud for neutral.
Guidelines

Do's & Don'ts

Do — Embrace
  • Mint White (#ffffff) as the primary canvas background
  • Mint Green (#0d9373) for all interactive elements
  • Generous whitespace with 48px section gaps
  • Inter for content, JetBrains Mono for code only
  • 1.75 line-height for body text readability
  • Border-driven hierarchy over shadows
  • WCAG AA contrast ratios for all text
Don't — Avoid
  • Mint Green for large background areas
  • Colored text for body copy
  • Multiple accent colors for interactions
  • Dense packing without breathing room
  • Decorative drop shadows for elevation
  • Code Text (#dc2626) outside inline code
  • Font families outside Inter / JetBrains Mono