Mintlify

Mintlify

Documentation platform

A documentation platform for developer products, built around a clean, reading-optimized layout with a green accent.

mintlify.com

Color palette

Accent

Primary#0a0a0a

Primary brand color — key actions and emphasis.

Brand Green#00d4a4

Accent color used within the product's own UI.

Brand Green Deep#00b48a

Accent color used within the product's own UI.

Brand Green Soft#7cebcb

Accent color used within the product's own UI.

Brand Tag#3772cf

Accent color used within the product's own UI.

Brand Warn#c37d0d

Accent color used within the product's own UI.

Brand Annotate#1ba673

Accent color used within the product's own UI.

Brand Cursor#888888

Accent color used within the product's own UI.

Hero Sky From#87a8c8

Accent color used within the product's own UI.

Hero Sky To#f5e9d8

Accent color used within the product's own UI.

Hero Dark From#1a3d4a

Accent color used within the product's own UI.

Hero Dark To#2d5a4f

Accent color used within the product's own UI.

Testimonial Orange#f55a3c

Accent color used within the product's own UI.

Testimonial Orange Deep#cc3a1f

Accent color used within the product's own UI.

Charcoal#1c1c1e

Accent color used within the product's own UI.

Slate#3a3a3c

Accent color used within the product's own UI.

Steel#5a5a5c

Accent color used within the product's own UI.

Stone#888888

Accent color used within the product's own UI.

Semantic

Brand Error#d45656

Error and destructive state.

Neutral

On Primary#ffffff

Text and icon color on a solid primary fill.

Canvas#ffffff

Page background.

Canvas Dark#0a0a0a

Page background.

Surface#f7f7f7

Card and panel surfaces.

Surface Soft#fafafa

Card and panel surfaces.

Surface Code#1c1c1e

Card and panel surfaces.

Hairline#e5e5e5

Borders and dividers.

Hairline Soft#ededed

Borders and dividers.

Hairline Dark#1f1f1f

Borders and dividers.

Ink#0a0a0a

Primary text color.

Muted#a8a8aa

Secondary or muted text.

On Dark#ffffff

Text and icon color on a solid primary fill.

On Dark Muted#b3b3b3

Text and icon color on a solid primary fill.

Type scale

Hero Display
72px · 600 · 1.05
Display Lg
56px · 600 · 1.1
Heading 1
48px · 600 · 1.1
Heading 2
36px · 600 · 1.2
Heading 3
28px · 600 · 1.25
Heading 4
22px · 600 · 1.3
Heading 5
18px · 600 · 1.4
Subtitle
18px · 400 · 1.5
Body Md
16px · 400 · 1.5
Body Md Medium
16px · 500 · 1.5
Body Sm
14px · 400 · 1.5
Body Sm Medium
14px · 500 · 1.5
Button Md
14px · 500 · 1.3
Code Md
14px · 400 · 1.5
Caption
13px · 400 · 1.4
Caption Bold
13px · 600 · 1.4
Code Sm
13px · 400 · 1.4
Code Inline
13px · 500 · 1.3
Micro
12px · 500 · 1.4
Micro Uppercase
11px · 600 · 1.4

Fonts

PrimaryInterWeights 400, 500, 600
CodeGeist MonoWeights 400, 500

Spacing & shape

Xxs
4px
Xs
8px
Sm
12px
Md
16px
Lg
20px
Xl
24px
Xxl
32px
Xxxl
40px
Section Sm
48px
Section
64px
Section Lg
96px
Hero
120px
Xs
4px
Sm
6px
Md
8px
Lg
12px
Xl
16px
Xxl
24px
Full
9999px

Guidelines

  • Reserve Primary for primary actions and emphasis — it is the system's one accent color.
  • Keep type on the documented family set (Inter, Geist Mono).
  • Use one of the documented corner radii (4px, 6px, 8px, 12px, 16px, 24px, 9999px) rather than a one-off value.
  • Build spacing from the documented scale (4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 64px, 96px, 120px) instead of arbitrary padding.
  • Don't apply Primary as a full-page background or a large fill.
  • Don't introduce a second accent color alongside Primary.
  • Don't mix in an additional typeface beyond the ones documented here.