W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
MongoDB
MongoDB Inc. (NASDAQ: MDB) is the company behind the document- oriented NoSQL database of the same name and MongoDB Atlas, the managed cloud database that runs across AWS, Google Cloud, and Azure. The brand voice is technical, builder-friendly, and unmistakably green: MongoDB Green (#00ED64) is the vivid signature, the "leaf" mark color, and the wordmark accent. MongoDB Black is a documented blue-black (#001E2B), not pure black — it serves as the dark-mode canvas, the dark wordmark, and the primary text color on light surfaces. The design system that backs MongoDB Atlas and Compass is LeafyGreen UI, the open-source React library that publishes the palette mirrored here. The proprietary typeface is Euclid Circular (with MongoDB-branded customizations); it is not publicly licensed, so this atom references Inter as the open rendering substitute.
1 palette 3 fonts 0 assets 10 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/mongodb/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/mongodb/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
MongoDB
MongoDB Inc. (NASDAQ: MDB) is the company behind the document- oriented NoSQL database of the same name and MongoDB Atlas, the managed cloud database that runs across AWS, Google Cloud, and Azure. The brand voice is technical, builder-friendly, and unmistakably green: MongoDB Green (#00ED64) is the vivid signature, the "leaf" mark color, and the wordmark accent. MongoDB Black is a documented blue-black (#001E2B), not pure black — it serves as the dark-mode canvas, the dark wordmark, and the primary text color on light surfaces. The design system that backs MongoDB Atlas and Compass is LeafyGreen UI, the open-source React library that publishes the palette mirrored here. The proprietary typeface is Euclid Circular (with MongoDB-branded customizations); it is not publicly licensed, so this atom references Inter as the open rendering substitute.
Tags: mongodb, leafygreen, atlas, database, nosql, design-system
Atoms
Palette
MongoDB · [email protected] · Apache-2.0
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.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
white |
White | #FFFFFF |
black |
Black | #001E2B |
gray-dark4 |
Gray Dark 4 | #112733 |
gray-dark3 |
Gray Dark 3 | #1C2D38 |
gray-dark2 |
Gray Dark 2 | #3D4F58 |
gray-dark1 |
Gray Dark 1 | #5C6C75 |
gray-base |
Gray Base | #889397 |
gray-light1 |
Gray Light 1 | #C1C7C6 |
gray-light2 |
Gray Light 2 | #E8EDEB |
gray-light3 |
Gray Light 3 | #F9FBFA |
green-dark3 |
Green Dark 3 | #023430 |
green-dark2 |
Green Dark 2 | #00684A |
green-dark1 |
Green Dark 1 | #00A35C |
green-base |
Green Base | #00ED64 |
green-light1 |
Green Light 1 | #71F6BA |
green-light2 |
Green Light 2 | #C0FAE6 |
green-light3 |
Green Light 3 | #E3FCF7 |
blue-dark3 |
Blue Dark 3 | #0C2657 |
blue-dark2 |
Blue Dark 2 | #083C90 |
blue-dark1 |
Blue Dark 1 | #1254B7 |
blue-base |
Blue Base | #016BF8 |
blue-light1 |
Blue Light 1 | #0498EC |
blue-light2 |
Blue Light 2 | #C3E7FE |
blue-light3 |
Blue Light 3 | #E1F7FF |
red-dark3 |
Red Dark 3 | #5B0000 |
red-dark2 |
Red Dark 2 | #970606 |
red-base |
Red Base | #DB3030 |
red-light1 |
Red Light 1 | #FF6960 |
red-light2 |
Red Light 2 | #FFCDC7 |
red-light3 |
Red Light 3 | #FFEAE5 |
yellow-dark3 |
Yellow Dark 3 | #4C2100 |
yellow-dark2 |
Yellow Dark 2 | #944F01 |
yellow-base |
Yellow Base | #FFC010 |
yellow-light2 |
Yellow Light 2 | #FFEC9E |
yellow-light3 |
Yellow Light 3 | #FEF7DB |
purple-dark3 |
Purple Dark 3 | #2D0B59 |
purple-dark2 |
Purple Dark 2 | #5E0C9E |
purple-base |
Purple Base | #B45AF2 |
purple-light2 |
Purple Light 2 | #F1D4FD |
purple-light3 |
Purple Light 3 | #F9EBFF |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
white |
#FFFFFF |
surface |
gray-light3 |
#F9FBFA |
surface-elevated |
white |
#FFFFFF |
text-primary |
black |
#001E2B |
text-secondary |
gray-dark1 |
#5C6C75 |
text-tertiary |
gray-base |
#889397 |
primary |
green-dark2 |
#00684A |
primary-hover |
green-dark3 |
#023430 |
accent |
green-base |
#00ED64 |
accent-hover |
green-dark1 |
#00A35C |
warning |
yellow-dark2 |
#944F01 |
warning-hover |
yellow-dark3 |
#4C2100 |
error |
red-dark2 |
#970606 |
success |
green-dark2 |
#00684A |
border |
gray-light1 |
#C1C7C6 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
black |
#001E2B |
surface |
gray-dark3 |
#1C2D38 |
surface-elevated |
gray-dark2 |
#3D4F58 |
text-primary |
gray-light2 |
#E8EDEB |
text-secondary |
gray-light1 |
#C1C7C6 |
text-tertiary |
gray-base |
#889397 |
primary |
green-base |
#00ED64 |
primary-hover |
green-light1 |
#71F6BA |
accent |
green-base |
#00ED64 |
accent-hover |
green-light1 |
#71F6BA |
warning |
yellow-base |
#FFC010 |
warning-hover |
yellow-light2 |
#FFEC9E |
error |
red-light1 |
#FF6960 |
success |
green-base |
#00ED64 |
border |
gray-dark2 |
#3D4F58 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
black |
#001E2B |
on-identity |
green-base |
#00ED64 |
primary |
green-dark2 |
#00684A |
primary-hover |
green-dark3 |
#023430 |
accent |
green-base |
#00ED64 |
accent-hover |
green-dark1 |
#00A35C |
mark |
green-base |
#00ED64 |
success |
green-dark2 |
#00684A |
warning |
yellow-dark2 |
#944F01 |
error |
red-dark2 |
#970606 |
text-primary-light |
black |
#001E2B |
text-primary-dark |
gray-light2 |
#E8EDEB |
background-light |
white |
#FFFFFF |
background-dark |
black |
#001E2B |
surface-light |
gray-light3 |
#F9FBFA |
surface-dark |
gray-dark3 |
#1C2D38 |
text-secondary-light |
gray-dark1 |
#5C6C75 |
text-tertiary-light |
gray-base |
#889397 |
border-light |
gray-light1 |
#C1C7C6 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (8)
colorChoice → roles.colors.mark
- allowed: green-base, green-dark1, green-dark2, white, black
- forbidden: blue-base, red-base, yellow-base, purple-base
The MongoDB leaf mark renders in Green base on dark canvases, Green Dark 1 or Dark 2 where contrast against light surfaces is required, or in solid white / solid black for monochrome treatments. Recoloring the leaf to blue, red, yellow, or purple violates MongoDB's documented brand-mark usage.
colorChoice → roles.colors.primary
- allowed: green-dark2, green-dark3, green-dark1, green-base
- forbidden: blue-base, red-base, purple-base, yellow-base
MongoDB's primary interactive color is documented as Green Dark 2 (#00684A) on light surfaces and Green base (#00ED64) on dark surfaces. The other chromatic base swatches are reserved for semantic and data-viz roles.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
LeafyGreen UI's published accessibility commitment targets WCAG 2.1 AA. MongoDB Black (#001E2B) on white clears AA at ~17:1; Gray Light 2 (#E8EDEB) on Black clears AA at ~14:1 — both modes' primary text/background pairs satisfy the floor.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, outlined, on-busy-photo, tilted
MongoDB's brand-resource guidelines prohibit stretching, rotating, recoloring, outlining, adding shadows, or applying decorative effects to the leaf mark and wordmark. The wordmark renders in Black on light surfaces and White on dark surfaces; the leaf renders in Green base or in the documented monochrome variants only.
contextRestriction → roles.colors.accent
- forbiddenContexts: body-text, small-text
- allowedContexts: brand-block, hero, cta, data-viz-positive, illustration
MongoDB Green base (#00ED64) is intentionally vivid and does NOT clear WCAG AA for body or small-text use against white. It is the brand accent for hero blocks, CTAs at button-text size, and illustration — not for paragraph or fine-print copy. Use Green Dark 2 for accessible text-weight uses.
contextRestriction → roles.colors.identity
- forbiddenContexts: product-of-competitor, merchandise, endorsement-implication, company-name-or-domain
MongoDB's trademark guidance forbids using the MongoDB name, the leaf mark, or the green-on-black brand treatment in third-party company names, domains, merchandise, or any context that implies affiliation or endorsement.
fontPairing → typography.display
- requires:
prose - minSizeRatio:
1.5
MongoDB's marketing and product surfaces maintain at least a 1.5× ratio between heading and body to preserve the type hierarchy LeafyGreen components depend on for scannability on dense data surfaces (Atlas dashboards, Compass).
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. LeafyGreen UI's published accessibility commitment treats AA as the floor for every MongoDB-branded component and the tokens that back them.
⚠️ warning (1)
enumMembership → typography.heading.fontWeight
- allowed: 400, 500, 600, 700
LeafyGreen UI's documented type ramp anchors on Regular (400), Medium (500), Semibold (600), and Bold (700) — the weights Euclid Circular and the documented sans substitute both ship. Lighter or heavier display cuts are not part of the defined system ramp.
💡 recommendation (1)
compositionConstraint → roles.colors.mark
- pairsWith: black, white, gray-light3, gray-dark3
- doesNotPairWith: red-base, purple-base, yellow-base
MongoDB Green is calibrated to read on the brand black canvas, on white, and on the documented neutral light/dark surfaces. Placing it adjacent to red-base, purple-base, or yellow-base at equal weight produces chromatic conflict and breaks the confident, builder-focused voice of the brand surface.
Provenance
- Source: https://www.mongodb.design/
- License:
Proprietary — All Rights Reserved (LeafyGreen tokens Apache-2.0) - Attribution: MongoDB LeafyGreen UI tokens are licensed Apache-2.0 (see the matching palette atom). The MongoDB green-leaf mark, the MongoDB wordmark, the Euclid Circular proprietary typeface, and the MongoDB, Atlas, and Compass trademarks are property of MongoDB Inc.
- Imported:
2026-05-19 - Notes: MongoDB Green base (#00ED64) is the vivid brand accent but does NOT clear WCAG AA against white at typical text sizes; the primary interactive role on light surfaces resolves to Green Dark 2 (#00684A) — the AA-readable variant LeafyGreen uses for buttons and links — while Green base carries the role on dark surfaces and on hero/identity blocks. Euclid Circular is not publicly licensed; Inter is referenced as the rendering substitute for sans (heading, body).
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by MongoDB
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
MongoDB
A clear hierarchy in MongoDB's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ green-base #00ED64 accent-hover
→ green-dark1 #00A35C background-dark
→ black #001E2B background-light
→ white #FFFFFF border-light
→ gray-light1 #C1C7C6 error
→ red-dark2 #970606 identity
→ black #001E2B mark
→ green-base #00ED64 on-identity
→ green-base #00ED64 primary
→ green-dark2 #00684A primary-hover
→ green-dark3 #023430 success
→ green-dark2 #00684A surface-dark
→ gray-dark3 #1C2D38 surface-light
→ gray-light3 #F9FBFA text-primary-dark
→ gray-light2 #E8EDEB text-primary-light
→ black #001E2B text-secondary-light
→ gray-dark1 #5C6C75 text-tertiary-light
→ gray-base #889397 warning
→ yellow-dark2 #944F01 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from mongodb)
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 Rules (10 typed constraints)
error · 8 rules
colorChoice roles.colors.mark allowed green-base, green-dark1, green-dark2, white, black forbidden blue-base, red-base, yellow-base, purple-base The MongoDB leaf mark renders in Green base on dark canvases, Green Dark 1 or Dark 2 where contrast against light surfaces is required, or in solid white / solid black for monochrome treatments. Recoloring the leaf to blue, red, yellow, or purple violates MongoDB's documented brand-mark usage.
colorChoice roles.colors.primary allowed green-dark2, green-dark3, green-dark1, green-base forbidden blue-base, red-base, purple-base, yellow-base MongoDB's primary interactive color is documented as Green Dark 2 (#00684A) on light surfaces and Green base (#00ED64) on dark surfaces. The other chromatic base swatches are reserved for semantic and data-viz roles.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA LeafyGreen UI's published accessibility commitment targets WCAG 2.1 AA. MongoDB Black (#001E2B) on white clears AA at ~17:1; Gray Light 2 (#E8EDEB) on Black clears AA at ~14:1 — both modes' primary text/background pairs satisfy the floor.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, outlined, on-busy-photo, tilted MongoDB's brand-resource guidelines prohibit stretching, rotating, recoloring, outlining, adding shadows, or applying decorative effects to the leaf mark and wordmark. The wordmark renders in Black on light surfaces and White on dark surfaces; the leaf renders in Green base or in the documented monochrome variants only.
contextRestriction roles.colors.accent forbiddenContexts body-text, small-text allowedContexts brand-block, hero, cta, data-viz-positive, illustration MongoDB Green base (#00ED64) is intentionally vivid and does NOT clear WCAG AA for body or small-text use against white. It is the brand accent for hero blocks, CTAs at button-text size, and illustration — not for paragraph or fine-print copy. Use Green Dark 2 for accessible text-weight uses.
contextRestriction roles.colors.identity forbiddenContexts product-of-competitor, merchandise, endorsement-implication, company-name-or-domain MongoDB's trademark guidance forbids using the MongoDB name, the leaf mark, or the green-on-black brand treatment in third-party company names, domains, merchandise, or any context that implies affiliation or endorsement.
fontPairing typography.display requires prose minSizeRatio 1.5 MongoDB's marketing and product surfaces maintain at least a 1.5× ratio between heading and body to preserve the type hierarchy LeafyGreen components depend on for scannability on dense data surfaces (Atlas dashboards, Compass).
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. LeafyGreen UI's published accessibility commitment treats AA as the floor for every MongoDB-branded component and the tokens that back them.
warning · 1 rule
enumMembership typography.heading.fontWeight allowed 400, 500, 600, 700 LeafyGreen UI's documented type ramp anchors on Regular (400), Medium (500), Semibold (600), and Bold (700) — the weights Euclid Circular and the documented sans substitute both ship. Lighter or heavier display cuts are not part of the defined system ramp.
recommendation · 1 rule
compositionConstraint roles.colors.mark pairsWith black, white, gray-light3, gray-dark3 doesNotPairWith red-base, purple-base, yellow-base MongoDB Green is calibrated to read on the brand black canvas, on white, and on the documented neutral light/dark surfaces. Placing it adjacent to red-base, purple-base, or yellow-base at equal weight produces chromatic conflict and breaks the confident, builder-focused voice of the brand surface.
Provenance
- Source
- https://www.mongodb.design/
- License
Proprietary — All Rights Reserved (LeafyGreen tokens Apache-2.0)- Attribution
- MongoDB LeafyGreen UI tokens are licensed Apache-2.0 (see the matching palette atom). The MongoDB green-leaf mark, the MongoDB wordmark, the Euclid Circular proprietary typeface, and the MongoDB, Atlas, and Compass trademarks are property of MongoDB Inc.
- Imported
2026-05-19- Notes
- MongoDB Green base (#00ED64) is the vivid brand accent but does NOT clear WCAG AA against white at typical text sizes; the primary interactive role on light surfaces resolves to Green Dark 2 (#00684A) — the AA-readable variant LeafyGreen uses for buttons and links — while Green base carries the role on dark surfaces and on hero/identity blocks. Euclid Circular is not publicly licensed; Inter is referenced as the rendering substitute for sans (heading, body).