What are the color tokens in the MongoDB DESIGN.md?

MongoDB's DESIGN.md has 34 color tokens: primary (#00ed64), primary-deep (#00b545), primary-pressed (#008c34), on-primary (#001e2b), brand-green (#00ed64), brand-green-dark (#00684a) and 28 more. Every value is a quoted hex you can copy.

What is MongoDB's primary color hex code?

The color token `primary` is #00ed64. The surface behind it is `canvas` (#ffffff).

How do I use MongoDB's colors in Tailwind CSS?

Map the tokens to your CSS variables: `primary` (#00ed64) to `--primary`, `canvas` (#ffffff) to `--background`, `accent-pink` (#f06bb8) to `--foreground`. shadcn/ui's Tailwind setup maps them to classes such as `bg-primary` and `text-foreground`, so they then use MongoDB's palette.

What is MongoDB's primary brand color?

MongoDB's brand color is the bright green at '#00ed64' — the unmistakable pill-CTA fill that appears on every primary action across homepage, Atlas, Community, University, AI, and pricing pages. A darker variant at '#00684a' carries inline link text and segmented-tab actives, and a pale mint at '#c3f0d2' tints the featured pricing tier and success badges. Bright green is reserved for CTAs and small accents — it never floods large surfaces.

Does MongoDB's design system have a dark mode?

MongoDB runs a hybrid rather than a true dark mode. Hero bands, footer, code mockups, and CTA banners use the deep teal '#001e2b' canvas with white text, while documentation, pricing tiers, course tiles, and form surfaces stay on stark white '#ffffff'. The two surface modes coexist on the same page rather than toggling via a theme switcher. Specific dark-mode token values for documentation surfaces are not surfaced in the public spec — see Known Gaps.

What fonts does MongoDB use?

MongoDB's DESIGN.md sets its type in Euclid Circular A and Source Code Pro. The first family is the one most tokens use.

What is MongoDB's type scale?

18 type tokens, such as `hero-display`, from 11px to 72px, in weights 400 to 600. Each token carries its family, size, weight, line height and letter spacing.

What can I use if I don't have MongoDB's font?

Euclid Circular A is MongoDB's main family and may be proprietary or need its own license. Keep the sizes, weights, line heights and letter spacing from the file and swap the family for an open font of similar proportions, such as a font from Google Fonts, set in `--font-sans`.

What typography does MongoDB use, and what should I use if Euclid isn't available?

MongoDB runs Euclid Circular A across every UI surface — display, body, navigation, captions, and microcopy. The face is contemporary geometric with confident proportions and a slight technical edge. The scale walks 16 tokens from a 72px hero display at weight 500 down to 11px uppercase eyebrows at weight 600. Source Code Pro appears only inside terminal-aesthetic code mockups. Inter is the closest open-source substitute for Euclid; for code, JetBrains Mono or IBM Plex Mono match Source Code Pro's proportions cleanly.

Which components does the MongoDB DESIGN.md define?

44 components, among them `button-primary`, `button-primary-pressed`, `button-primary-disabled`, `button-secondary` and `button-on-dark`. Each lists properties such as its background, text color, type token and corner radius as references to the other tokens.

What corner radius and spacing does MongoDB use?

7 corner radii: xs (4px), sm (6px), md (8px), lg (12px), xl (16px) and 2 more. 12 spacing values: xxs (4px), xs (8px), sm (12px), md (16px), lg (20px) and 7 more. The file reads as a mix of pills, soft rounds and squarer corners.

What is MongoDB's shape language?

Pills and 12px cards. Every button — primary, secondary, on-dark, and badge — uses '{rounded.full}' (9999px), making the pill the brand signature across all six pages. Cards, pricing tiers, and course tiles use '{rounded.lg}' (12px). Inputs and code blocks step down to '{rounded.md}' (8px), course category tags to '{rounded.xs}' (4px), and featured product showcases up to '{rounded.xxl}' (24px). Hard corners appear nowhere — even the comparison table uses 8px outer rounding.

How do I apply the MongoDB design system to a shadcn/ui project?

Copy the color and radius tokens into your `globals.css`: MongoDB's `primary` (#00ed64) becomes `--primary`, and `md` (8px) becomes `--radius`. The shadcn/ui components read those variables, so they change with the file.

How do I use the MongoDB DESIGN.md with Claude Code or Cursor?

Download MongoDB's DESIGN.md (or copy it as Markdown) and put it in your project, or paste it into the chat. Then ask Claude Code, Cursor or another agent to build a page "in the style of the MongoDB DESIGN.md": it reads the tokens and writes matching components.

Is the MongoDB DESIGN.md free to download?

Yes. The file is free to download or copy, with no account, from the buttons at the top and bottom of this page. The raw Markdown is also at `/design/mongodb/raw`.

How was the MongoDB DESIGN.md made?

MongoDB's page describes the look of its public website (www.mongodb.com), curated from what is visible there: the colors, type and components. It is an interpretation.

Is the MongoDB DESIGN.md official?

No. The MongoDB DESIGN.md describes the look of a public website. It is not official, and MongoDB has not endorsed or reviewed it. The name and logo belong to MongoDB.

Can I use this DESIGN.md to build my own React developer-tool site in the MongoDB design system?

Yes — the file is structured to feed Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce MongoDB's restraint (single green voltage, dark hero bands, universal pill buttons, locked category accents) rather than a generic shadcn theme. You can also paste the tokens straight into a Tailwind config or CSS variables. Every color, typography token, radius, and spacing value is a quoted hex or pixel value that maps cleanly to a Tailwind theme key.

What's missing from this DESIGN.md spec in the MongoDB design system?

Four items documented in the Known Gaps section: specific dark-mode token values for documentation surfaces beyond hero bands, animation and transition timings (recommend 150–200ms ease as a default), form validation success state styling, and the course-tile category color mappings (purple, orange, pink, blue) which are observation-based rather than confirmed brand documentation. The spec captures the visible six-page surface area at roughly 95% fidelity.

MongoDB Design System

MongoDB's brand green #00ed64 on deep teal #001e2b with Euclid Circular A, as a DESIGN.md with colors, type and components for React and AI tools.

Get Pro Download DESIGN.md

Primary color: #00ed64
Typeface: Euclid Circular A
Shape: Mixed
Base radius: 8px
Colors: 34
Type tokens: 18
Components: 44
Spacing values: 12

About MongoDB DESIGN.md

Curated by Dov Azencot, updated May 12, 2026. Source mongodb.com (opens in a new tab).

MongoDB's design system runs on a tight two-mode contract. Deep teal "#001e2b" hero bands frame primary CTAs in bright MongoDB green "#00ed64", and the rest of the page drops to stark white "#ffffff" for documentation, pricing, and course catalogs. The brand has refined this contrast since the rebrand era, and today every surface — homepage, Atlas product page, Community Edition, MongoDB University, AI use cases, and the 3-tier pricing page — uses the same dark-band-plus-green-pill pattern. The pill button is the brand signature: 9999px radius applied universally to primary, secondary, on-dark, ghost, and badge CTAs. There is no rounded-rectangle button anywhere in the system. Euclid Circular A is the geometric sans-serif that holds the entire typographic scale, and Source Code Pro shows up only inside terminal-styled code mockup cards.

This page packages MongoDB's full specification into a single DESIGN.md file aligned with the Google Labs spec. Inside: 34 colors tokens (brand green ramp, deep teal palette, four category accents, surface and hairline neutrals, full text scale), 16 typography tokens at sizes from 11px micro-uppercase to 72px hero display, a 7-step rounded scale topping out at the universal 9999px pill, 13 spacing tokens running from 4px through a 120px hero band, and 44 components definitions covering buttons, cards, pricing tiers, course tiles, code mockups, inputs, tabs, badges, comparison tables, and the dark teal footer region.

Feed the file to Claude, Cursor, GitHub Copilot, or any AI coding tool that reads structured tokens. The agent will reproduce the deep-teal-and-green discipline rather than substitute a generic shadcn theme — green stays scoped to CTAs and inline links, dark hero bands frame primary actions, and category accents stay locked to course tags. The token names map cleanly onto Tailwind config keys or CSS variables. MongoDB is worth studying because the system proves a developer-tool brand can stay both stark and warm — the deep teal is serious, the bright green is human, and the discipline of holding only two saturated colors across six product surfaces is rare.

What makes it distinct

5 highlights

Dual-mode identityDeep teal #001e2b hero bands paired with bright #00ed64 green pill CTAs, no third surface mode
Universal pill buttonsEvery primary, secondary, on-dark, and badge CTA renders at 9999px radius across all six pages
Category-coded course tagsPurple #7b3ff2, orange #fa6e39, pink #f06bb8, and blue #3d4f9f appear only on MongoDB University tiles
Euclid Circular A across 18 type tokensFrom 72px hero display at weight 500 down to 11px uppercase eyebrows at weight 600
Source Code Pro reserved for terminal-aesthetic code mockups on dark #001e2b canvas, never for prose

Live at mongodb.com

MongoDB in production, as captured. Scroll the window to see the whole page.

Visit mongodb.com

34 colors

MongoDB's system anchors on #00ed64 (primary) as its primary color. Type is set in Euclid Circular A across 18 tokens from 11px to 72px, weights 400–600. Shape language is mixed across 44 components, blending pills, soft rounds, and squarer corners.

Brand & Accent

Sparing, CTA-only voltage · 14

Surface

Page and card backgrounds · 5

Text

Headlines, body, captions · 6

Borders & Hairlines

Dividers, outlines, rules · 4

Semantic

Status, errors, success, links · 1

Other

Specialty colors · 4

18 type tokens

Set in Euclid Circular A across 18 tokens, from 11px to 72px, weights 400–600. Shown in its own stack: where the font isn't installed, the fallback the file names stands in.

hero-display72px · weight 500 · lh 1.1 · tracking -1.5pxThe quick brown fox jumps over the lazy dog
display-lg56px · weight 500 · lh 1.15 · tracking -1pxThe quick brown fox jumps over the lazy dog
heading-148px · weight 500 · lh 1.2 · tracking -0.5pxThe quick brown fox jumps over the lazy dog
heading-236px · weight 500 · lh 1.25 · tracking -0.5pxThe quick brown fox jumps over the lazy dog
heading-328px · weight 500 · lh 1.3The quick brown fox jumps over the lazy dog
heading-422px · weight 500 · lh 1.35The quick brown fox jumps over the lazy dog
heading-518px · weight 600 · lh 1.4The quick brown fox jumps over the lazy dog
subtitle18px · weight 400 · lh 1.5The quick brown fox jumps over the lazy dog
body-md16px · weight 400 · lh 1.55The quick brown fox jumps over the lazy dog
body-md-medium16px · weight 500 · lh 1.55The quick brown fox jumps over the lazy dog
body-sm14px · weight 400 · lh 1.5The quick brown fox jumps over the lazy dog
body-sm-medium14px · weight 500 · lh 1.5The quick brown fox jumps over the lazy dog
caption13px · weight 400 · lh 1.4The quick brown fox jumps over the lazy dog
caption-bold13px · weight 600 · lh 1.4The quick brown fox jumps over the lazy dog
micro12px · weight 500 · lh 1.4The quick brown fox jumps over the lazy dog
micro-uppercase11px · weight 600 · lh 1.4 · tracking 1pxThe quick brown fox jumps over the lazy dog
button-md14px · weight 600 · lh 1.3The quick brown fox jumps over the lazy dog
code-md14px · weight 400 · lh 1.55The quick brown fox jumps over the lazy dog

Radii and spacing

7 corner radii and 12 spacing values. Shape language: mixed, on a 8px base radius.

Radii7

xs4px
sm6px
md8px
lg12px
xl16px
xxl24px
full9999px

Spacing12

xxs4px
xs8px
sm12px
md16px
lg20px
xl24px
xxl32px
xxxl40px
section-sm48px
section64px
section-lg96px
hero120px

44 components

Each rendered from its tokens (color, type, radius, padding) on MongoDB's own canvas.

Button Primary
Button Primarybutton-primary
Button Primary Pressed
Button Primary Pressedbutton-primary-pressed
Button Primary Disabled
Button Primary Disabledbutton-primary-disabled
Button Secondary
Button Secondarybutton-secondary
Button On Dark
Button On Darkbutton-on-dark
Button Secondary On Dark
Button Secondary On Darkbutton-secondary-on-dark
Button Ghost
Button Ghostbutton-ghost
Button Link
Button Linkbutton-link
Card Base
Card Basecard-base
Card Feature
Card Featurecard-feature
Card Product Deploy
Card Product Deploycard-product-deploy
Card Feature Dark
Card Feature Darkcard-feature-dark
Card Course
Card Coursecard-course
Card Cert
Card Certcard-cert
Pricing Card
Pricing Cardpricing-card
Pricing Card Featured
Pricing Card Featuredpricing-card-featured
Type here…
Text Inputtext-input
Type here…
Text Input Focusedtext-input-focused
Search Pill
Search Pillsearch-pill
Search Pill Large
Search Pill Largesearch-pill-large
Pill Tab
Pill Tabpill-tab
Pill Tab Active
Pill Tab Activepill-tab-active
Segmented Tab
Segmented Tabsegmented-tab
Segmented Tab Active
Segmented Tab Activesegmented-tab-active
Badge Green
Badge Greenbadge-green
Badge Green Soft
Badge Green Softbadge-green-soft
Badge Purple
Badge Purplebadge-purple
Badge Orange
Badge Orangebadge-orange
Badge Popular
Badge Popularbadge-popular
Promo Banner
Promo Bannerpromo-banner
Hero Band Dark
Hero Band Darkhero-band-dark
Hero Platform Card
Hero Platform Cardhero-platform-card
Cta Banner Dark
Cta Banner Darkcta-banner-dark
Code Block
Code Blockcode-block
Code Mockup Card
Code Mockup Cardcode-mockup-card
Comparison Table
Comparison Tablecomparison-table
Comparison Row
Comparison Rowcomparison-row
Service Tile
Service Tileservice-tile
Why Card
Why Cardwhy-card
Customer Testimonial Card
Customer Testimonial Cardcustomer-testimonial-card
Logo Wall Item
Logo Wall Itemlogo-wall-item
Faq Accordion Item
Faq Accordion Itemfaq-accordion-item
Footer Region
Footer Regionfooter-region
Footer Link
Footer Linkfooter-link

The system, in use

MongoDB's tokens on the kind of product it builds.

Marketing heroThe homepage: its nav, a headline and the main call to action.

MongoDB

The fastest way to build and ship software

Deploy from git in seconds, scale on demand and keep every environment in sync.

Start deployingRead the docs

MongoDBA

Requests2.4M

Deployments148

Error rate0.08%

p95 latency182ms

RequestsLast 30 days

MongoDB design system FAQ

MongoDB's tokens, its components and how to use this DESIGN.md in your project.

Specs, directories and component libraries that pair with this design system.

Use MongoDB in your project

One machine-readable file. Drop it into Claude Code, Cursor, VS Code or any AI tool that reads DESIGN.md.

Download DESIGN.md

Download the DESIGN.md
One machine-readable file: every color, type, radius, spacing, and component token of MongoDB.
Feed it to your AI tool
Drop it into Claude, Cursor, or GitHub Copilot. The agent writes React components and Tailwind classes that match MongoDB's visual language.
Reference the tokens directly
Or paste the values into your Tailwind config, CSS variables, or component library: every color, size and radius is a quoted, ready-to-copy value.

Read the full DESIGN.md overview, rationale, do’s and don’ts

Overview

MongoDB carries a strong dual-mode visual identity — dark deep-teal hero bands at "#001e2b" paired with bright MongoDB green "#00ed64" CTA pills, sitting alongside stark white "#ffffff" documentation and pricing surfaces. The homepage opens with "One data platform. Unlimited AI potential." headline over a deep navy hero, the green pill at the visual center as the primary CTA. Lower on the page, embedded code mockup cards with terminal aesthetic sit on the dark hero band, breaking out into white feature cards below. The pricing page renders a 3-tier comparison (Free / Flex / Dedicated) with a featured tier highlighted in soft mint "#e3fcef" background and a 2px "#00ed64" border. The MongoDB University page presents a course catalog grid where each tile carries a colored category tag — purple "#7b3ff2", orange "#fa6e39", pink "#f06bb8", and blue "#3d4f9f" — the only place outside the brand green where saturated color appears in the system.

The system uses Euclid Circular A as its display face. The face is contemporary geometric — confident but not overly playful — and pairs naturally with both the developer-tool aesthetic of the database product and the educational positioning of the learning surfaces. Cards use 12px corners; buttons use 9999px pills universally. The brand-teal palette at "#001e2b" anchors hero bands, footer, code mockups, and the dark CTA banners. Source Code Pro is scoped strictly to terminal-styled code mockup content — it never appears in prose, headers, or UI labels.

Key Characteristics:

Deep navy/teal hero bands at "#001e2b" with bright MongoDB green "#00ed64" CTA pills
Stark white "#ffffff" pricing and documentation surfaces with colored category tags for course tiles (purple, orange, pink, blue)
Euclid Circular A across every UI surface from 11px micro-uppercase to 72px hero display
Pill-shaped buttons (9999px) universal across primary, secondary, on-dark, ghost, and badge CTAs
3-tier pricing comparison (Free / Flex / Dedicated) with featured-mint highlight tier at "#e3fcef" + green border
Code mockup cards with terminal-aesthetic dark canvas at "#001e2b"

Known Gaps

Specific dark-mode token values for canvas and surface beyond hero bands not surfaced in the public spec
Animation and transition timings not extracted; recommend 150–200ms ease as a working default
Form validation success state not explicitly captured — only focus and error/disabled documented
Course-tile category color mappings (purple for Database & Security, orange for Search, pink and blue variants) are observation-based rather than confirmed brand documentation

More systems like this

Biome, CircleCI, ClickHouse and 33 more in Backend, Database & DevOps: each brand's colors, type and components in one file your AI agent builds from.

All 37 in Backend, Database & DevOps

Build it with Pro

The DESIGN.md files are free. Pro adds 6,000+ blocks, premium templates and the MCP server, so your AI editor builds in your system for you.

See full pricing

4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.

Billing

Billed once a year in USD. Cancel anytime.

Yearly-33%MonthlyLifetimePay once

How many people can use the license.
Client work, SaaS products and anything you charge for.
Page sections in 56 categories, from heroes and pricing tables to dashboards and settings, on every framework and UI library, in your theme.
Complete Next.js sites for startups, SaaS, agencies and portfolios, every page designed, ready to ship.
Your AI agent searches, previews and installs any component, block, icon or DESIGN.md from a prompt: 22 tools in Claude Code, Cursor, VS Code and 35 more clients.
Buttons with motion and states of their own, from an arrow that slides in to a burst of confetti.
Typewriters, scrambles, counters and more, for headlines, labels and numbers.
Animated backgrounds for heroes, sections and cards, from a soft aurora to a flock that flees the cursor. Most are pure CSS.
WebGPU shaders, from a slow aurora to a black hole, each drawing only while it's on screen.
One design and one theme on all four: the components, blocks and effects are built for each framework.
React on Base UI, Radix UI, React Aria or Ark UI: install the version for the library your project already uses. Vue, Svelte and Solid run on Ark UI.
From a button to a date picker, a color picker or a guided tour: accessible, typed in TypeScript, each with live demos.
Real-world patterns built from the components, in 53 galleries: forms, tables, menus, dialogs and more.
Area, bar, line, pie, radar and radial charts on TanStack Charts, on every framework. React also gets the Recharts originals.
Debounce, local storage, media queries and more: each hook is one typed file you own.
From 222 libraries, Lucide, Heroicons, Tabler and Material Symbols among them, as SVG or a React component in one command.
Stripe, Linear, Apple and 497 more: a brand's colors, typography and components in one file your AI agent builds from.
Restyle every component and block at once: 8 styles, 8 grays, 18 colors and 5 radii, shared as a shadcn preset code.
Priority requests are answered first.

Individual

For personal projects & open source

$32instead of $49/mo

$389 billed yearly

Seats: 1 seat
Commercial use: Personal & open source only
Blocks: All 6,181 blocks
Templates: All 14 templates
MCP server: 38 AI clients
Animated buttons: All 35 buttons
Text effects: All 97 effects
Backgrounds: All 100 backgrounds
Shaders: All 100 shaders
Frameworks: React, Vue, Svelte, Solid
UI libraries: Base UI, Radix, Aria, Ark
Components: All 174 components
Examples: All 1,103 examples
Charts: All 70 charts
React hooks: All 35 hooks
Icons: 294k+ icons
DESIGN.md files: All 500 brands
Theme builder: 8 styles × 18 colors
Support: Standard

Team

Organization

For companies with larger teams

$132instead of $199/mo

$1,589 billed yearly

Seats: Unlimited seats
Commercial use: Included
Blocks: All 6,181 blocks
Templates: All 14 templates
MCP server: 38 AI clients
Animated buttons: All 35 buttons
Text effects: All 97 effects
Backgrounds: All 100 backgrounds
Shaders: All 100 shaders
Frameworks: React, Vue, Svelte, Solid
UI libraries: Base UI, Radix, Aria, Ark
Components: All 174 components
Examples: All 1,103 examples
Charts: All 70 charts
React hooks: All 35 hooks
Icons: 294k+ icons
DESIGN.md files: All 500 brands
Theme builder: 8 styles × 18 colors
Support: Priority

Billed once a year in USD. Cancel anytime.

Individual

For personal projects & open source

$32instead of $49/mo

$389 billed yearly

How many people can use the license.Seats: 1 seat
Client work, SaaS products and anything you charge for.Commercial use: Personal & open source only
Page sections in 56 categories, from heroes and pricing tables to dashboards and settings, on every framework and UI library, in your theme.Blocks: All 6,181 blocks
Complete Next.js sites for startups, SaaS, agencies and portfolios, every page designed, ready to ship.Templates: All 14 templates
Your AI agent searches, previews and installs any component, block, icon or DESIGN.md from a prompt: 22 tools in Claude Code, Cursor, VS Code and 35 more clients.MCP server: 38 AI clients
Buttons with motion and states of their own, from an arrow that slides in to a burst of confetti.Animated buttons: All 35 buttons
Typewriters, scrambles, counters and more, for headlines, labels and numbers.Text effects: All 97 effects
Animated backgrounds for heroes, sections and cards, from a soft aurora to a flock that flees the cursor. Most are pure CSS.Backgrounds: All 100 backgrounds
WebGPU shaders, from a slow aurora to a black hole, each drawing only while it's on screen.Shaders: All 100 shaders
One design and one theme on all four: the components, blocks and effects are built for each framework.Frameworks: React, Vue, Svelte, Solid
React on Base UI, Radix UI, React Aria or Ark UI: install the version for the library your project already uses. Vue, Svelte and Solid run on Ark UI.UI libraries: Base UI, Radix, Aria, Ark
From a button to a date picker, a color picker or a guided tour: accessible, typed in TypeScript, each with live demos.Components: All 174 components
Real-world patterns built from the components, in 53 galleries: forms, tables, menus, dialogs and more.Examples: All 1,103 examples
Area, bar, line, pie, radar and radial charts on TanStack Charts, on every framework. React also gets the Recharts originals.Charts: All 70 charts
Debounce, local storage, media queries and more: each hook is one typed file you own.React hooks: All 35 hooks
From 222 libraries, Lucide, Heroicons, Tabler and Material Symbols among them, as SVG or a React component in one command.Icons: 294k+ icons
Stripe, Linear, Apple and 497 more: a brand's colors, typography and components in one file your AI agent builds from.DESIGN.md files: All 500 brands
Restyle every component and block at once: 8 styles, 8 grays, 18 colors and 5 radii, shared as a shadcn preset code.Theme builder: 8 styles × 18 colors
Priority requests are answered first.Support: Standard

Team

Organization

For companies with larger teams

$132instead of $199/mo

$1,589 billed yearly

Everything in Team, plus

How many people can use the license.Seats: Unlimited seats

Secure checkout via Stripe
Code lives in your repo
Keep what you've shipped if you cancel
License terms

4.9 out of 5 from 150+ developers

Your system, built for you

Every block, template and icon, installed by your AI agent in your design system. The DESIGN.md files stay free.

Get Pro

Cancel anytime
Keep what you've shipped

Explore UI

Popular

Frameworks

Built On

Explore Blocks

Marketing

Application

Explore Charts

Popular

Frameworks

Explore Examples

More Galleries

Explore Icons

More Libraries

Browse

Explore Templates

Categories

Community

Explore Design Systems

Categories

More

Explore Tools

Categories

Explore MCP

Set Up In

Help

Explore Pro

Resources

Legal

MongoDB Design System

About MongoDB DESIGN.md

What makes it distinct

Live at mongodb.com

34 colors

Brand & Accent

Surface

Text

Borders & Hairlines

Semantic

Other

18 type tokens

Radii and spacing

Radii7

Spacing12

44 components

The system, in use

MongoDB design system FAQ

What are the color tokens in the MongoDB DESIGN.md?

What is MongoDB's primary color hex code?

How do I use MongoDB's colors in Tailwind CSS?

What is MongoDB's primary brand color?

Does MongoDB's design system have a dark mode?

What fonts does MongoDB use?

What is MongoDB's type scale?

What can I use if I don't have MongoDB's font?

What typography does MongoDB use, and what should I use if Euclid isn't available?

Which components does the MongoDB DESIGN.md define?

What corner radius and spacing does MongoDB use?

What is MongoDB's shape language?

How do I apply the MongoDB design system to a shadcn/ui project?

How do I use the MongoDB DESIGN.md with Claude Code or Cursor?

Is the MongoDB DESIGN.md free to download?

How was the MongoDB DESIGN.md made?

Is the MongoDB DESIGN.md official?

Can I use this DESIGN.md to build my own React developer-tool site in the MongoDB design system?

What's missing from this DESIGN.md spec in the MongoDB design system?

Related reading

Use MongoDB in your project

Download the DESIGN.md

Feed it to your AI tool

Reference the tokens directly

Overview

Known Gaps

More systems like this

Build it with Pro

Individual

Team

Organization

Individual

Team