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

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

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	—	—	✓

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

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.

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.

Design System Inspiration of MongoDB

Color Palette

Brand & Accent

Category Accent (Course Tags)

Surface

Text

Typography Scale

Button Variants

Badges & Status

Cards & Containers

Standard Card

MongoDB Atlas

Atlas makes it easy

Course Tiles (MongoDB University)

Relational to Document Model

M0210: MongoDB Database & Security

Building AI-Powered Search with Vector Search

Certification Cards

MongoDB Associate Developer Exam

MongoDB Associate Data Modeler Exam

MongoDB Associate Atlas Administrator Exam

MongoDB Associate Database Administrator Exam

Pricing Tiers

Feature Comparison Table

Forms & Inputs

Search Pill Large (MongoDB University)

Tabs & Navigation

Segmented Tabs

Pill Tabs (Pricing)

Code Mockup Card

Service Tiles

MongoDB Atlas Search

Atlas Charts

Atlas Stream Processing

Atlas Data Federation

Atlas Data API

Online Archive

Customer Testimonials

Logo Wall

FAQ Accordion

CTA Banner Dark

Ready to get started?

Spacing Scale

Border Radius Scale

Elevation & Depth

Responsive Behavior

Device Ladder

Touch Targets

Collapsing Strategy