MongoDB
Design System · Generated 15/04/2026 · 28 colors · 48 type tokens · 30 spacing steps · 10 motion tokens
April 2026
Color Palette
Background Colors
Black
#000000 · ×1955
Dark Cyan (Page)
#001E2B · ×414
Dark Blue (Card)
#21313C · ×116
Dark Cyan 3 (Elevated)
#3D4F58 · ×43
Dark Cyan 2 (Brand tint)
#00684A · ×66
Dark Blue 2 (Deepest)
#061621 · ×6
Blue
#006CFA · ×508
Light Surfaces & Brand
White
#FFFFFF · ×658
White 2
#F5F7FA · ×35
Light Gray 2
#E7EEEC · ×39
Green (Brand)
#00ED64 · ×318
Green 2
#B1FF05 · ×1
Text Colors
Light Gray
#B8C4C2 · ×171
Blue 2 (Link)
#0000EE · ×118
Blue 3 (Brand text)
#009FFD · ×46
Dark Cyan 4
#014E3D · ×11
Light Green
#E9FF99 · ×3
Gradient Fill Colors
Cyan
#00E97A
Cyan 2
#00D4EB
Cyan 3
#53E9F6
Green 3
#12C86A
Green 4
#0AE85D
Green 5
#17B659
Blue 4
#0066FF
Typography
PRIMARY UI · EUCLID CIRCULAR A
Euclid Circular A
The world's leading modern data platform. Build faster, build smarter.
Light · 300 Regular · 400 Medium · 500 Semibold · 600
BRAND SERIF · MONGODB VALUE SERIF
MongoDB Value Serif
Editorial headings, pull quotes, brand voice — proprietary MongoDB typeface.
Serif · editorial Source Code Pro · mono Akzidenz-Grotesk · alt sans
MongoDB
Display 64px · Light 300 · line-height: 72px · letter-spacing: +0.16px
The Data Platform
Display 56px · Light · line-height: 64px
Build what matters
Hero 40px · Regular · line-height: 48px
Atlas · Compass · Charts
Heading 32px · Regular · line-height: 40px
Flexible. Scalable. Trusted.
Heading 24px · Medium · line-height: 32px
Store, query, and analyze your data with MongoDB's flexible document model.
Body 18px · Regular · line-height: 30px · letter-spacing: +0.5px
Last synced 2 minutes ago · Atlas M10 cluster · 99.99% uptime SLA
Body 14px · Regular · line-height: 20px
DOCS · TUTORIALS · COMMUNITY
Label 11px · Semibold · letter-spacing: +3px (max) · uppercase
db.collection.find({"status": "active"})
Code · Source Code Pro · 13.33px · line-height: 20px
Line Heights — 16 tokens
Tight
12px
Snug
14px
Normal
15px
Relaxed
16px
Loose
18px
LH-6
20px
LH-7
24px
LH-8
30px
LH-9
32px
LH-10
36px
LH-11
37px
LH-12
40px
LH-13
48px
LH-14
56px
LH-15
64px
LH-16
72px
Letter Spacing — All Positive (0.16px → 3px)
Display
--letter-spacing-tight
+0.16px · display, headings (minimum expansion)
Body copy
--letter-spacing-normal
+0.5px · body text, comfortable reading
LABELS
--letter-spacing-wider
+2px · uppercase labels, section headers
CAPS MICRO
--letter-spacing-ls-6
+3px · maximum · all-caps micro labels
Spacing
Spacing Scale
30 tokens — 1px → 105px (plus 1 outlier at 398.5px)
1
2
4
5
6
7
8
10
12
14
15
16
18
20
23
24
30
32
40
48
50
55
56
60
64
70
78
80
105
398.5
Borders
Border Radii — 19 tokens (all asymmetric & geometric)
sm (bottom)
0/0/96/96px
md (right)
0/8/8/0px
lg (bottom)
0/0/100/100px
xl (bottom)
0/0/16/16px
2xl (top-right)
0/72/0/0px
r7
2px · ×24
r8
4px · ×25
r9
8px · ×43
r10 (left)
8/0/0/8px
r12
16px · ×47
r13
24px · ×9
r15
32px · ×8
r16 (circle)
50%
r17
50px
r18
104px
r19 (pill)
999px · ×4
Notable: 6 of 19 tokens apply directional curves only — bottom-rounded panels (0/0/96/96px, 0/0/100/100px), right-side only (0/8/8/0px), top-right accent (0/72/0/0px). MongoDB's geometric organic shapes are baked into individual tokens.
Border Widths
--border-width-hairline
1px · ×154
--border-width-thin
2px · ×54 — focus rings, selected states, CTAs
--border-width-base
6px · ×8 — accent side borders, callout blocks, feature highlights
Shadow / Elevation
Shadow Tokens
4 tokens — all pure black, 15% opacity max
sm — Soft lift
×28
15% black · 3px offset, 9px spread — standard cards, panels, nav items
md — Wide spread
×4
15% black · 3px offset, 20px spread — dropdowns, floating menus
lg — Same as sm
×2
Identical to sm token — used in different semantic contexts (hover state vs resting)
xl — Deep lift
×2
13% black · 7px offset, 12px spread — modal dialogs, floating cards
Z-Index
10 layers — starting at −1 (background), running through 9999 (absolute top). Three values cluster near 100 (99/100/101) for fine-grained nav layering.
LayerValueUsage
z-1 (Below)-1Decorative background elements, pseudo-elements below content
z-2 (Base)1Base content layer, positioned elements at rest
z-3 (Raised)2Slightly elevated inline cards, hover states
z-4 (Navigation)10Sticky sub-navigation, floating labels
z-5 → z-7 (Nav cluster)99 / 100 / 101Pre/mid/post primary navigation — allows fine-grained layering within nav
z-8 (Modal)999Modal dialogs, overlay sheets, drawers
z-9 (Toasts)1000Toast notifications, critical alerts above modals
z-10 (Absolute top)9999Tooltips, loading overlays, critical global elements
Breakpoints
MongoDB defines 34 breakpoints — 1px → 2500px — the most in this series. Includes an opening xs = 1px anchor, fine-grained desktop steps (1065, 1079, 1080, 1280, 1281), and ultra-wide targets reaching 2300px and 2500px — built for 4K displays and editorial content layouts.
◾
XS
1px
📱
SM/MD
460/500
📲
LG/XL
767/768
📲
2XL/3XL
820/844
💻
BP-8/9
896/1000
💻
BP-10/11/12
1023–1025
💻
BP-13/14/15
1065–1080
🖥️
BP-17/18/19
1200–1281
🖥️
BP-20/21/22
1300–1366
🖥️
BP-23/24/25
1400–1416
🖥️
BP-26/27/28
1440–1500
📺
BP-30/31/32
1600–1800
📺
BP-33
2300
📺
BP-34 (Max)
2500
Opacity
Opacity Tokens
3 tokens — 0.05 · 0.45 · 0.75 (minimal set)
--opacity-5
5% · ×1 (ghost)
--opacity-45
45% · ×6 (mid dim)
--opacity-75
75% · ×2 (near-solid)
The most minimal opacity set in this series — only 3 tokens. Skips the common 10%, 50%, 80% range entirely. The 5% ghost and 45% mid-dim are used for glassmorphism overlays and disabled states respectively.
Accessibility
WCAG 2.1: AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1
Text ColorBackground ColorRatioWCAG Rating
#B8C4C2 (Light Gray)#000000 (Black)11.71:1AAA
#B8C4C2 (Light Gray)#FFFFFF (White)1.79:1Fail
#B8C4C2 (Light Gray)#001E2B (Dark Cyan)9.6:1AAA
#B8C4C2 (Light Gray)#00ED64 (Green)1.14:1Fail
#0000EE (Blue 2)#FFFFFF (White)9.4:1AAA
#0000EE (Blue 2)#00ED64 (Green)5.95:1AA
#009FFD (Blue 3)#000000 (Black)7.38:1AAA
#009FFD (Blue 3)#001E2B (Dark Cyan)6.04:1AA
#014E3D (Dark Cyan 4)#FFFFFF (White)9.73:1AAA
#808080 (Mid Gray)#000000 (Black)5.32:1AA
#808080 (Mid Gray)#FFFFFF (White)3.95:1AA Large
#808080 (Mid Gray)#001E2B (Dark Cyan)4.36:1AA Large
CSS Variables Reference
Background Colors
Black--color-black#000000 · ×1955
Dark Cyan (Page)--color-dark-cyan#001E2B · ×414
Dark Blue (Card)--color-dark-blue#21313C · ×116
Dark Cyan 3 (Elevated)--color-dark-cyan-3#3D4F58 · ×43
Dark Cyan 2 (Tint)--color-dark-cyan-2#00684A · ×66
Dark Blue 2--color-dark-blue-2#061621 · ×6
Blue--color-blue#006CFA · ×508
White--color-white#FFFFFF · ×658
White 2--color-white-2#F5F7FA · ×35
Light Gray 2--color-light-gray-2#E7EEEC · ×39
Green (Brand Primary)--color-green#00ED64 · ×318
Green 2 (Neon)--color-green-2#B1FF05 · ×1
Text & Gradient Colors
Light Gray (Body text)--color-light-gray#B8C4C2 · ×171
Blue 2 (Links)--color-blue-2#0000EE · ×118
Blue 3 (Brand text)--color-blue-3#009FFD · ×46
Dark Cyan 4--color-dark-cyan-4#014E3D · ×11
Mid Gray--color-mid-gray#808080 · ×4
Light Green--color-light-green#E9FF99 · ×3
Cyan--color-cyan#00E97A
Cyan 2--color-cyan-2#00D4EB
Cyan 3--color-cyan-3#53E9F6
Green 3--color-green-3#12C86A
Green 4--color-green-4#0AE85D
Green 5--color-green-5#17B659
Typography
Times (base/canvas)--font-family-baseTimes
Source Code Pro (mono)--font-family-2Source Code Pro
Euclid Circular A (UI)--font-family-3Euclid Circular A
Arial (fallback)--font-family-4Arial
Akzidenz-Grotesk Std--font-family-5Akzidenz-Grotesk Std
MongoDB Value Serif (proprietary)--font-family-6MongoDB Value Serif
Light--font-weight-light300
Regular--font-weight-regular400
Medium--font-weight-medium500
Semibold--font-weight-semibold600
9px → 64px (16 sizes)2xs → 64px
Tight (all positive!)--letter-spacing-tight+0.16px
Normal--letter-spacing-normal+0.5px
Wide--letter-spacing-wide+1px
Wider--letter-spacing-wider+2px
Widest--letter-spacing-widest+2.5px
Max (caps)--letter-spacing-ls-6+3px
Motion, Opacity & Layers
Instant (100ms)--duration-instant0.1s · ×3
Fast (150ms)--duration-fast0.15s · ×34
Normal (200ms)--duration-normal0.2s · ×37
Slow (250ms)--duration-slow0.25s · ×73
Slower (300ms) — most used--duration-slower0.3s · ×218
Slow-reveal (500ms)--duration-duration-60.5s · ×1
Ease Out--easing-ease-outease-out · ×44
Ease In-Out--easing-ease-in-outease-in-out · ×15
Ease In--easing-ease-inease-in · ×10
Linear--easing-linearlinear · ×3
Ghost (5%)--opacity-50.05 · ×1
Mid Dim (45%)--opacity-450.45 · ×6
Near-Solid (75%)--opacity-750.75 · ×2
Below canvas--z-1−1
Base / Raised--z-2 / z-31 / 2
Navigation--z-410
Nav cluster--z-5 / z-6 / z-799 / 100 / 101
Modal--z-8999
Toast--z-91000
Absolute top--z-109999
MongoDB Design System · Generated 15/04/2026 · 28 color tokens · 6 font families · 4 font weights · 16 font sizes · 16 line heights · 6 letter-spacing (all positive) · 30 spacing steps · 19 radius · 3 border widths · 4 shadows · 6 durations · 4 easings · 10 z-index layers · 34 breakpoints · 3 opacity tokens