MongoDB
MongoDB's design-token palette, sourced from the open-source LeafyGreen UI library (`mongodb/leafygreen-ui`) — the React component library and design system that backs MongoDB Atlas, Compass, the MongoDB.com marketing surface, and the documentation portal. The palette is anchored on MongoDB Green (#00ED64, the brand-defining signature) and a deep MongoDB Black (#001E2B, a blue-black canvas color, NOT pure black). Six chromatic families (Green, Blue, Yellow, Red, Purple, plus Gray) each ship in a base value with light1/light2/light3 and dark1/dark2/dark3 variants — the "base" is the canonical brand stop, lighter for backgrounds, darker for text/contrast.
40 swatches 15 light roles 15 dark roles
Swatches
white
#FFFFFF
black
#001E2B
MongoDB Black — a blue-black, NOT pure black; the brand canvas.
gray-dark4
#112733
gray-dark3
#1C2D38
Dark surface in dark mode.
gray-dark2
#3D4F58
gray-dark1
#5C6C75
Secondary text on light surfaces.
gray-base
#889397
gray-light1
#C1C7C6
Default border on light surfaces.
gray-light2
#E8EDEB
gray-light3
#F9FBFA
Light surface — subtle elevation.
green-dark3
#023430
Deepest green ground.
green-dark2
#00684A
Green hover/active variant on light.
green-dark1
#00A35C
Accessible interactive green on light surfaces (AA-compliant against white).
green-base
#00ED64
MongoDB Green — the brand-defining vivid signature; used as the primary interactive on dark surfaces and as the brand accent on hero surfaces.
green-light1
#71F6BA
green-light2
#C0FAE6
green-light3
#E3FCF7
blue-dark3
#0C2657
blue-dark2
#083C90
blue-dark1
#1254B7
Info / link on light surfaces.
blue-base
#016BF8
Blue accent base.
blue-light1
#0498EC
blue-light2
#C3E7FE
blue-light3
#E1F7FF
red-dark3
#5B0000
red-dark2
#970606
Error on light surfaces.
red-base
#DB3030
Red accent base.
red-light1
#FF6960
red-light2
#FFCDC7
red-light3
#FFEAE5
yellow-dark3
#4C2100
yellow-dark2
#944F01
Warning on light surfaces.
yellow-base
#FFC010
yellow-light2
#FFEC9E
yellow-light3
#FEF7DB
purple-dark3
#2D0B59
purple-dark2
#5E0C9E
purple-base
#B45AF2
purple-light2
#F1D4FD
purple-light3
#F9EBFF
Mode role mappings
Light mode (15 roles)
accent
→ green-base accent-hover
→ green-dark1 background
→ white border
→ gray-light1 error
→ red-dark2 primary
→ green-dark2 primary-hover
→ green-dark3 success
→ green-dark2 surface
→ gray-light3 surface-elevated
→ white text-primary
→ black text-secondary
→ gray-dark1 text-tertiary
→ gray-base warning
→ yellow-dark2 warning-hover
→ yellow-dark3 Dark mode (15 roles)
accent
→ green-base accent-hover
→ green-light1 background
→ black border
→ gray-dark2 error
→ red-light1 primary
→ green-base primary-hover
→ green-light1 success
→ green-base surface
→ gray-dark3 surface-elevated
→ gray-dark2 text-primary
→ gray-light2 text-secondary
→ gray-light1 text-tertiary
→ gray-base warning
→ yellow-base warning-hover
→ yellow-light2 Provenance
- Source
- https://github.com/mongodb/leafygreen-ui/blob/main/packages/palette/src/palette.ts
- License
Apache-2.0- Attribution
- MongoDB LeafyGreen UI palette, Copyright MongoDB Inc., licensed under Apache-2.0. Hex values mirrored from `packages/palette/src/palette.ts` on the `main` branch. MongoDB, Atlas, Compass, LeafyGreen, and the green-leaf mark are trademarks of MongoDB Inc.
- Imported
-
2026-05-19(upstream version mongodb/leafygreen-ui main@2026-05) - Notes
- MongoDB's Black is a blue-black (#001E2B) — distinct from pure black — that LeafyGreen uses as the dark-mode canvas and as the primary text color in light mode. MongoDB Green base (#00ED64) is the vivid signature; dark1 (#00A35C) is the accessible on-light interactive variant, dark2 (#00684A) and dark3 (#023430) are the deeper grounds. The Gray scale runs dark4 → light3 (eight stops); chromatic families ship base plus three light and (typically) three dark variants.