Skip to content
shadcn.io

MongoDB Design System

MongoDB's design system as a DESIGN.md file. Brand green #00ed64, deep teal #001e2b, Euclid Circular A, 44 components. For React, Next.js, and AI tools.

Get ProDownload DESIGN.md

Add shadcn.io to your AI agent. · Pro It installs blocks, icons and templates in your design system from a prompt, with Pro.

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

About

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

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

mongodb.com

Live at mongodb.com

A snapshot of the brand in production. Scroll the frame to see the whole page.

Visit mongodb.com (opens in a new tab)
MongoDB's website at mongodb.com

Colors

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

Typography

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

Layout

Radii and spacing

7 corner radii and 12 spacing values. Shape language: mixed.

Radii

  • xs4px
  • sm6px
  • md8px
  • lg12px
  • xl16px
  • xxl24px
  • full9999px

Spacing

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

Components

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

In use

The system, in use

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

Build something people actually use.

A short paragraph of marketing copy that previews how the brand's display tier and body tier read together. Two sentences is usually enough.

Get startedLearn more
Marketing heroHeadline, sub-copy, primary CTA — the universal homepage opener.

FAQ

MongoDB design system FAQ

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

Read next

Related reading

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

Use it

Use MongoDB in your project

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

Download DESIGN.md

  1. Download the DESIGN.md

    One machine-readable file: every color, type, radius, spacing, and component token of MongoDB.

  2. 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.

  3. 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

Backend, Database & DevOps

More systems like this

More DESIGN.md files in Backend, Database & DevOps.

All 37 in Backend, Database & DevOps

Pricing

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.

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
  • Production-ready React sections: hero, pricing, features, dashboards and more.Pro blocks: 6,000+ blocks
  • Complete multi-page sites you can ship as they are.Templates: All 14 templates
  • React icons from every major library, installable with one command.React icons: 294k+ icons
  • Presets that restyle every block, in light and dark.Themes: All 59 themes
  • Lets your AI editor search, preview and install blocks for you.MCP server: Basic usage
  • Priority requests are answered first.Support: Standard

Team

Most popular

For freelancers, agencies & startups

$66instead of $99/mo

$789 billed yearly · ≈ $13/dev/mo

Everything in Individual, plus

  • How many people can use the license.Seats: Up to 5 seats
  • Client work, SaaS products and anything you charge for.Commercial use: Included
  • Lets your AI editor search, preview and install blocks for you.MCP server: High usage
  • Priority requests are answered first.Support: Priority

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
  • Lets your AI editor search, preview and install blocks for you.MCP server: Unlimited usage
  • Secure checkout via Stripe
  • Code lives in your repo
  • Keep what you've shipped if you cancel
  • License terms

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