Mintlify — Design System (Light)

Color Palette

Background Colors

Black

#000000

Black 6

#070707

Near Black

#08090A

Black 5

#0A0A0A

Dark Gray

#0E0E0E

Brand

#0C8C5E

White (Canvas)

#FFFFFF

Semantic Light Surfaces (from :root)

--color-bg-main

#FFFFFF

bg-gray-subtle

#F9F8F7

bg-gray-emphasis

#E6E5E3

bg-soft (3%)

rgba(8,9,10,.03)

border-sub (7%)

rgba(8,9,10,.07)

border-soft (15%)

rgba(8,9,10,.15)

Brand & Accent Colors

Cyan Bright

#18E299

Dark Cyan 2

#0C8B5D

Cyan 3

#00DC8D

Dark Cyan 3

#20808D

Blue

#0070E0

Blue 3

#4B73FF

Pink

#FF66F4

Green

#80CC28

Neutral & Text Colors

Black 3 (Text Primary)

#080A0A

Mid Gray

#828383

Light Gray

#F2F2F2

Light Gray 2

#DDDDDD

White 2

#F7F7F7

Foreground Gray

#554b42

Vivid Fill Colors (Integration Logos)

Red (Salesforce)

#FF7A59

Orange

#F1511B

Yellow

#FBBC09

Blue 2 (Coinbase)

#0052FF

Dark Blue (PayPal)

#003087

Cyan 2

#00ADEF

Red 2

#FF0105

Orange 4

#FF4F00

Typography

Primary · Inter / ui-sans-serif

Inter

The intelligent documentation platform. Write docs that think for themselves.

Regular · 400 Medium · 500 Semibold · 600

Mono · Geist Mono

Geist Mono

npx mintlify dev --port 3000

Regular · 400 Medium · 500

Intelligent docs.

Display 6xl · 45.32px · Semibold · line-height: 52.118px · letter-spacing: −0.9064px

The knowledge platform

Heading 5xl · 40px · Semibold · line-height: 44px · letter-spacing: −0.8px

Documentation that works for you

Heading 4xl · 24px · Semibold · line-height: 32px · letter-spacing: −0.26px

Write once, share everywhere

Heading 3xl · 20px · Medium · line-height: 27px · letter-spacing: −0.24px

Mintlify turns your docs into an intelligent knowledge base, powered by AI search and real-time collaboration.

Body XL · 16px · Regular · line-height: 24px · letter-spacing: −0.2px

Connect your docs to your code. Automatically sync changelogs, keep references up to date.

Body Base · 14px · Regular · line-height: 21px

Last deployed 3 minutes ago · 248 pages indexed

Body XS · 12px · Regular · line-height: 18px

COMPONENTS · GUIDES · API REFERENCE

Label · 10px · Medium · uppercase · letter-spacing: +0.6px

Line Heights

Tight

15px

Snug

18px

Normal

19.5px

Relaxed

21px

Loose

22.5px

LH-6

24px

LH-7

26px

LH-8

27px

LH-9

31.2px

LH-10

32px

LH-11

44px

LH-12

52.118px

Letter Spacing — All Negative (except labels)

Mintlify

--letter-spacing-tight

−0.9064px · display hero, large headlines

Documentation

--letter-spacing-normal

−0.8px · large headings, section titles

Intelligent

--letter-spacing-widest

−0.2px · body text, descriptions

COMPONENTS

--letter-spacing-ls-6

+0.6px · uppercase labels only (positive exception)

Spacing

Spacing Scale

33 tokens — 0.8px → 203.94px

0.8

4.5

14.5

26.5

54.5

104

112

120

122

137.5

144

150

168

204

Borders

Border Radii

4px

8px

14px

16px

2xl (top)

24/24/0/0px

full

24px

50%

60px

r9 (Pill)

9999px

Border Widths

--border-width-hairline

0.5px · ×8 — sub-pixel hairline

--border-width-thin

1px · ×191 — standard border

--border-width-base

3px · ×3 — accent / highlight border

Mintlify's 0.5px hairline is the only sub-pixel border in this set — used in code blocks and the inline editor preview for ultra-fine dividers.

Shadow / Elevation

Shadow Tokens

2 tokens — adapted from CSS Lab() originals to light-surface equivalents

sm — Soft Lift

×8

Light-mode adaptation of lab(2.43 … / 3%) — cards, panels on white.

md — Medium Lift

×2

Light-mode adaptation of lab(100 0 0 / 5%) — elevated elements.

Z-Index

Layer	Value	Usage
z-1 (Deep Background)	-1000	Deeply buried decorative layers, particle effects, background animations
z-2 (Behind)	-1	Elements directly behind content, pseudo-element backgrounds
z-3 (Raised)	9	Slightly elevated content elements
z-4 (Sticky)	10	Sticky headers, navigation bars
z-5 (Overlay)	20	Dropdowns, popovers, floating menus
z-6 (Modal)	50	Modal dialogs, sidesheets, overlays
z-7 (Top)	100	Toasts, critical alerts, global banners

Breakpoints

📱

--breakpoint-xs

768px

Single breakpoint — layouts adapt at 768px (tablet / mobile threshold)

Opacity

Opacity Tokens

7 tokens — 0.01 → 0.7 (all values low-range: tint and hierarchy focused)

--opacity-1

--opacity-10

10% · ×5

--opacity-15

15%

--opacity-20

20% · ×14

--opacity-40

40% · ×4

--opacity-50

50% · ×15

--opacity-70

70% · ×3

Opacity tops out at 70% — the most restrained ceiling in the set. On light surfaces, these values drive text hierarchy via rgba(8,9,10, n) — the semantic token pattern from Mintlify's own --color-text-soft/sub/muted tokens.

Accessibility

WCAG 2.1 thresholds: AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1

Text Color	Background Color	Ratio	WCAG Rating
#080A0A (Black 3)	#000000	1.06:1	Fail
#080A0A (Black 3)	#FFFFFF	19.85:1	AAA
#080A0A (Black 3)	#F9F8F7 (Gray Subtle)	18.6:1	AAA
#080A0A (Black 3)	#0C8C5E (Brand)	4.66:1	AA
#080A0A (Black 3)	#0E0E0E (Dark Gray)	1.03:1	Fail
#08080A (Black 7)	#000000	1.05:1	Fail
#08080A (Black 7)	#FFFFFF	20.01:1	AAA
#08080A (Black 7)	#F9F8F7 (Gray Subtle)	18.75:1	AAA
#08080A (Black 7)	#0C8C5E (Brand)	4.7:1	AA
#08080A (Black 7)	#0E0E0E	1.04:1	Fail

CSS Variables Reference

Background Colors

White (Canvas)--color-bg-main#FFFFFF

Gray Subtle--color-bg-gray-subtle#F9F8F7

Gray Emphasis--color-bg-gray-emphasis#E6E5E3

BG Soft (3%)--color-bg-softrgba(8,9,10,.03)

Light Gray--color-light-gray#F2F2F2

Light Gray 2--color-light-gray-2#DDDDDD

White 2--color-white-2#F7F7F7

Brand--color-brand / --color-dark-cyan#0C8C5E

Text Colors (Semantic)

Text Main--color-text-main#08090A

Text Soft (80%)--color-text-softrgba(8,9,10,.8)

Text Sub (60%)--color-text-subrgba(8,9,10,.6)

Muted (50%)--color-mutedrgba(8,9,10,.5)

Tertiary (40%)--color-text-tertiaryrgba(8,9,10,.4)

Border Sub (7%)--color-border-subrgba(8,9,10,.07)

Border Surface (5%)--color-border-surfacergba(8,9,10,.05)

Border Soft (15%)--color-border-softrgba(8,9,10,.15)

Border Solid--color-border-solid#08090a

Foreground Gray--color-foreground-gray-subtle#554b42

Typography

Inter (Primary)--font-family-2inter

Geist Mono--font-family-3Geist Mono

Regular--font-weight-regular400

Medium--font-weight-medium500

Semibold--font-weight-semibold600

2xs → xs → sm → base10px → 12px → 13px → 14px

lg → xl → 2xl → 3xl15px → 16px → 18px → 20px

4xl → 5xl → 6xl (Display)24px → 40px → 45.32px

Display (tight)--letter-spacing-tight−0.9064px

Heading (normal)--letter-spacing-normal−0.8px

Body (widest)--letter-spacing-widest−0.2px

Labels (positive)--letter-spacing-ls-6+0.6px

Motion, Opacity & Layers

Instant--duration-instant100ms · ×75

Fast--duration-fast150ms · ×60

Normal--duration-normal200ms · ×21

Slow--duration-slow250ms · ×37

Slower--duration-slower300ms · ×20

Easing functions—None defined

Ghost (1%)--opacity-10.01

Near-invisible (10%)--opacity-100.1

Subtle (20%)--opacity-200.2

Dim (50%)--opacity-500.5

Muted (70%)--opacity-700.7

Deep Background--z-1−1000

Behind Content--z-2−1

Raised--z-39

Sticky / Nav--z-410

Dropdown / Popover--z-520

Modal / Sheet--z-650

Toast / Top Layer--z-7100

Borders & Radius

Hairline--border-width-hairline0.5px · ×8

Thin--border-width-thin1px · ×191

Base--border-width-base3px · ×3

sm--radius-sm4px

md--radius-md8px

lg--radius-lg14px

xl--radius-xl16px

full (24px)--radius-full24px

r7 (Circle)--radius-r750%

r9 (Pill)--radius-r99999px

Brand & Accent Colors

Brand / Dark Cyan--color-dark-cyan#0C8C5E

Dark Cyan 2--color-dark-cyan-2#0C8B5D

Cyan Bright--color-cyan#18E299

Cyan 3--color-cyan-3#00DC8D

Dark Cyan 3--color-dark-cyan-3#20808D

Blue--color-blue#0070E0

Blue 3--color-blue-3#4B73FF

Pink--color-pink#FF66F4

Red--color-red#FF7A59

Orange 2--color-orange-2#FBBC09

Mintlify Design System · Light Theme · Generated 15/04/2026 · 36 color tokens · 36 type tokens · 33 spacing steps · 9 border radii · 3 border widths · 2 shadows · 5 durations · 0 easing functions · 7 z-index layers · 1 breakpoint · 7 opacity tokens