MongoDB AI Hub is now live. Build smarter with vector search. Learn more →

# Design System Inspiration of MongoDB

MongoDB carries a strong dual-mode visual identity — dark deep-teal hero bands with bright MongoDB green CTAs paired with stark white documentation surfaces. The signature green pill is unmistakable across product, pricing, learning, and AI use-case surfaces.

## Color Palette

Bright MongoDB green ({colors.brand-green}) anchored by deep navy/teal hero bands. Category accent palette (purple, orange, pink, blue) reserved for course tags only.

### Brand & Accent

MongoDB Green
#00ed64
Primary CTA pill
Green Deep
#00b545
Pressed-state green
Green Dark
#00684a
Inline links
Green Mid
#00a35c
Atmospheric tints
Green Soft
#c3f0d2
Featured pricing tier
Brand Teal Deep
#001e2b
Hero bands, footer
Brand Teal
#003d4f
Mid-spectrum teal
Brand Teal Mid
#00684a
Hero platform card

### Category Accent (Course Tags)

Accent Purple
#7b3ff2
Database & Security
Accent Orange
#fa6e39
Search topics
Accent Pink
#f06bb8
Specialized topics
Accent Blue
#3d4f9f
Atlas/cloud topics

### Surface

Canvas White
#ffffff
Page + card background
Canvas Dark
#001e2b
Code mockups
Surface
#f9fbfa
Subtle background
Surface Feature
#e3fcef
Featured tier bg
Hairline
#e1e5e8
Borders

### Text

Ink
#001e2b
Headlines, body
Charcoal
#1c2d38
Body emphasis
Slate
#3d4f5b
Secondary text
Steel
#5c6c7a
Tertiary, captions
Stone
#7c8c9a
Muted labels
Muted
#a8b3bc
Disabled

## Typography Scale

Euclid Circular A across every UI surface — from 72px hero displays to 11px micro labels. Source Code Pro for code mockups.

hero-display72px / 500 / 1.10 / -1.5px
One data platform
display-lg56px / 500 / 1.15 / -1px
Build with MongoDB
heading-148px / 500 / 1.20 / -0.5px
MongoDB Pricing
heading-236px / 500 / 1.25 / -0.5px
Compare Atlas plans
heading-328px / 500 / 1.30
Card title
heading-518px / 600 / 1.40
Smaller card titles
subtitle18px / 400 / 1.50
Hero subtitle
body-md16px / 400 / 1.55
Primary body text used across documentation prose, marketing copy, and feature descriptions.
body-sm14px / 400 / 1.50
Secondary body, table cells, navigation
caption-bold13px / 600 / 1.40
BADGE / TAG
code-mdSource Code Pro / 14px / 1.55
db.collection.find({"$lt": 100})
button-md14px / 600 / 1.30
PILL BUTTON LABEL

## Button Variants

Pill-shaped everywhere. Bright MongoDB green is the dominant CTA across all surfaces.

button-primaryMongoDB green pill
button-secondaryOutlined pill
button-on-darkGreen pill on dark
button-secondary-on-darkOutlined on dark
button-ghostQuieter rect ghost
button-linkInline green link
button-primary-disabledDisabled state

## Badges & Status

Mix of green status indicators and category-encoding tag chips. Course tags use the colored accent palette.

New Free Most Popular Database & Security Search Specialized
MongoDB AI Hub is now live. Build smarter with vector search. Learn more →

promo-banner — sticky teal strip with green inline link

## Cards & Containers

White feature cards, dark teal callout cards, course tiles with category tags, and certification cards with leaf-icon zones.

#### Standard Card

White canvas with hairline border and 12px corners.

#### MongoDB Atlas

Fully managed cloud database with zero-downtime deployments and automatic scaling.

#### Atlas makes it easy

Vector search, encryption, and 100+ integrations included.

### Course Tiles (MongoDB University)

Popular Training

##### Relational to Document Model

How to model your data in document databases.

Database & Security

##### M0210: MongoDB Database & Security

MongoDB Atlas explores how to secure your MongoDB deployments.

Self-paced learning

##### Building AI-Powered Search with Vector Search

How to use MongoDB Atlas Vector Search for AI-powered search.

### Certification Cards

🌱

##### MongoDB Associate Developer Exam

Validate developer skills.

🌱

##### MongoDB Associate Data Modeler Exam

Validate data modeling expertise.

🌱

##### MongoDB Associate Atlas Administrator Exam

Atlas operations certification.

🌱

##### MongoDB Associate Database Administrator Exam

Database administration cert.

## Pricing Tiers

3-tier comparison (Free / Flex / Dedicated) with the featured tier highlighted in pale mint background and bright green border.

Free
$0/mo

Get started with MongoDB Atlas.

- 512 MB storage
- Shared infrastructure
- Community support

Most Popular
Flex
$0.011/hr

For development and growing teams.

- Auto-scaling storage
- Backups included
- Email support
- 5GB free monthly transfer

Dedicated
$0.08/hr

For production workloads.

- Dedicated infrastructure
- Advanced security
- 24/7 priority support
- SOC2 compliance

### Feature Comparison Table

Feature | Free | Flex | Dedicated
--- | --- | --- | ---
DATABASE FEATURES
Storage | 512 MB | Auto-scaling | Up to 4 TB
Vector Search | ✓ | ✓ | ✓
SECURITY
Encryption at rest | ✓ | ✓ | ✓
VPC peering | — | — | ✓
SUPPORT
Community support | ✓ | ✓ | ✓
Priority email | — | ✓ | ✓
24/7 phone support | — | — | ✓

## Forms & Inputs

44px-tall inputs with 8px rounded corners. Focus shifts to a 2px Green Dark border.

Email
Workspace name
API key
search-pill — 44px height

### Search Pill Large (MongoDB University)

🔍

## Tabs & Navigation

Underline-style segmented tabs with green active indicator. Pill tabs for top-level switching.

### Segmented Tabs

### Pill Tabs (Pricing)

## Code Mockup Card

Embedded terminal-aesthetic code mockup on hero bands. Dark canvas with syntax-highlighted snippets.

$ npm install mongodb $ mongo "mongodb+srv://cluster0.mongodb.net" --apikey → Connected
db.collection("users").find({ "active": true }) // Returns matching documents

## Service Tiles

"Customize your deployment with tools & services" — 6-up grid with green icon zones and short descriptions.

🔍

##### MongoDB Atlas Search

Full-text search built into your database.

📊

##### Atlas Charts

Visualize and explore your MongoDB data.

⚡

##### Atlas Stream Processing

Real-time data processing in MongoDB.

🔗

##### Atlas Data Federation

Query across data sources seamlessly.

📦

##### Atlas Data API

Build apps with HTTPS database access.

🛡

##### Online Archive

Auto-archive infrequently accessed data.

## Customer Testimonials

White testimonial cards with quote + author + title. Used inside product and use-case pages.

"MongoDB Atlas gave us the flexibility to scale our database alongside our customer growth — no manual provisioning, no downtime."

Verified buyer
Engineering Lead

"Vector Search inside Atlas eliminated the need for a separate vector database. Our AI features ship 3x faster now."

Customer Success
Tech Architect

## Logo Wall

Customer logo grid — wordmark presentation in trust-row sections.

Coinbase
Lyft
Adobe
Tata
Tech Mahindra
DataKO

## FAQ Accordion

Frequently-asked-questions panel. Collapsed by default; chevron toggle.

Is the Free tier available for production? ⌃
The Free tier is available for development, learning, and small projects. For production workloads, we recommend Flex or Dedicated tiers with backups and priority support.
How do I migrate from a self-managed deployment? ⌄
MongoDB provides Live Migration tooling for zero-downtime migration from self-managed clusters to Atlas.
Is MongoDB SOC 2 compliant? ⌄
Yes — MongoDB Atlas Dedicated tier includes SOC 2 Type II compliance plus additional enterprise security features.

## CTA Banner Dark

Page-bottom dark teal CTA banner with bright green primary CTA.

#### Ready to get started?

Launch a new cluster in MongoDB Atlas in minutes. No credit card required.

## Spacing Scale

4px base unit, 8px primary increment. Section rhythm runs from 48px to 120px.

4xxs
8xs
12sm
16md
20lg
24xl
32xxl
40xxxl
48section-sm
64section
96section-lg
120hero

## Border Radius Scale

Pill buttons (9999px), 12px standard cards, 8px inputs and code blocks.

4pxxs
6pxsm
8pxmd
12pxlg
16pxxl
24pxxxl
pillfull

## Elevation & Depth

Predominantly flat. Strategic depth on code mockup cards over hero bands.

Level 0 — Flatborder + hairline
Level 1 — Subtlergba(0,30,43,0.04) 0 1px 2px
Level 2 — Cardrgba(0,30,43,0.08) 0 4px 12px
Level 3 — Mockuprgba(0,30,43,0.12) 0 12px 24px -4px
Level 4 — Modalrgba(0,30,43,0.16) 0 16px 48px -8px

## Responsive Behavior

Hero scales from 72px → 36px on mobile. 3-tier pricing collapses to 1-up. Course catalog 3-up → 1-up.

Breakpoint | Width | Key Changes
--- | --- | ---
Mobile (small) | < 480px | Single column. Hero 36px. Pricing 1-up. Course catalog 1-up.
Mobile (large) | 480 – 767px | Course tiles 2-up. Hero 48px.
Tablet | 768 – 1023px | 2-column feature grids. Pill-tab nav returns. Hero 56px.
Desktop | 1024 – 1279px | 3-tier pricing card row. 3-up course catalog. Hero 64px.
Wide Desktop | ≥ 1280px | Full 72px hero presentation.

### Device Ladder

375px
480px
768px
1024px
1280+

### Touch Targets

- Pill buttons render at 40–44px height — at WCAG AAA floor.
- Form inputs render at 44px height.
- Search pill (large) renders at 56px.
- Pill tabs ~32px → 44px on mobile.

### Collapsing Strategy

- Promo banner stays full-width; truncates at < 480px.
- Top nav below 1024px collapses to hamburger.
- Hero band: code mockup card moves below text on mobile.
- Pricing tiers: 3-column → 2-column tablet → 1-column mobile.
- Course catalog: 3-up → 2-up tablet → 1-up mobile.
- Hero typography: 72px → 56px → 48px → 36px.
- Footer: 6-column desktop → 3-column tablet → accordion mobile.