MongoDB Design System

---

version: alpha

name: MongoDB-design-analysis

description: MongoDB carries a strong dual-mode visual identity — dark deep-teal hero bands with bright MongoDB green ({colors.brand-green}) CTAs paired with stark white documentation surfaces. The signature green pill button is unmistakable across product, pricing, learning, and AI use-case surfaces. The system uses Euclid Circular A as its display face, anchors a 3-tier pricing comparison (Free / Flex / Dedicated), and presents extensive course catalogs in card grids with colored category tags. Coverage spans homepage, Atlas product page, Community Edition, MongoDB University, AI use cases, and pricing.

colors:

primary: "#00ed64"

primary-deep: "#00b545"

primary-pressed: "#008c34"

on-primary: "#001e2b"

brand-green: "#00ed64"

brand-green-dark: "#00684a"

brand-green-mid: "#00a35c"

brand-green-soft: "#c3f0d2"

brand-teal-deep: "#001e2b"

brand-teal: "#003d4f"

brand-teal-mid: "#00684a"

accent-purple: "#7b3ff2"

accent-orange: "#fa6e39"

accent-pink: "#f06bb8"

accent-blue: "#3d4f9f"

semantic-warning-bg: "#fff8e0"

semantic-warning-text: "#946f3f"

canvas: "#ffffff"

canvas-dark: "#001e2b"

surface: "#f9fbfa"

surface-soft: "#f4f7f6"

surface-feature: "#e3fcef"

hairline: "#e1e5e8"

hairline-soft: "#eceff1"

hairline-strong: "#c1ccd6"

hairline-dark: "#1c2d38"

ink: "#001e2b"

charcoal: "#1c2d38"

slate: "#3d4f5b"

steel: "#5c6c7a"

stone: "#7c8c9a"

muted: "#a8b3bc"

on-dark: "#ffffff"

on-dark-muted: "#a8b3bc"

typography:

hero-display:

fontFamily: Euclid Circular A

fontSize: 72px

fontWeight: 500

lineHeight: 1.10

letterSpacing: -1.5px

display-lg:

fontFamily: Euclid Circular A

fontSize: 56px

fontWeight: 500

lineHeight: 1.15

letterSpacing: -1px

heading-1:

fontFamily: Euclid Circular A

fontSize: 48px

fontWeight: 500

lineHeight: 1.20

letterSpacing: -0.5px

heading-2:

fontFamily: Euclid Circular A

fontSize: 36px

fontWeight: 500

lineHeight: 1.25

letterSpacing: -0.5px

heading-3:

fontFamily: Euclid Circular A

fontSize: 28px

fontWeight: 500

lineHeight: 1.30

heading-4:

fontFamily: Euclid Circular A

fontSize: 22px

fontWeight: 500

lineHeight: 1.35

heading-5:

fontFamily: Euclid Circular A

fontSize: 18px

fontWeight: 600

lineHeight: 1.40

subtitle:

fontFamily: Euclid Circular A

fontSize: 18px

fontWeight: 400

lineHeight: 1.50

body-md:

fontFamily: Euclid Circular A

fontSize: 16px

fontWeight: 400

lineHeight: 1.55

body-md-medium:

fontFamily: Euclid Circular A

fontSize: 16px

fontWeight: 500

lineHeight: 1.55

body-sm:

fontFamily: Euclid Circular A

fontSize: 14px

fontWeight: 400

lineHeight: 1.50

body-sm-medium:

fontFamily: Euclid Circular A

fontSize: 14px

fontWeight: 500

lineHeight: 1.50

caption:

fontFamily: Euclid Circular A

fontSize: 13px

fontWeight: 400

lineHeight: 1.40

caption-bold:

fontFamily: Euclid Circular A

fontSize: 13px

fontWeight: 600

lineHeight: 1.40

micro:

fontFamily: Euclid Circular A

fontSize: 12px

fontWeight: 500

lineHeight: 1.40

micro-uppercase:

fontFamily: Euclid Circular A

fontSize: 11px

fontWeight: 600

lineHeight: 1.40

letterSpacing: 1px

button-md:

fontFamily: Euclid Circular A

fontSize: 14px

fontWeight: 600

lineHeight: 1.30

code-md:

fontFamily: Source Code Pro

fontSize: 14px

fontWeight: 400

lineHeight: 1.55

rounded:

xs: 4px

sm: 6px

md: 8px

lg: 12px

xl: 16px

xxl: 24px

full: 9999px

spacing:

xxs: 4px

xs: 8px

sm: 12px

md: 16px

lg: 20px

xl: 24px

xxl: 32px

xxxl: 40px

section-sm: 48px

section: 64px

section-lg: 96px

hero: 120px

components:

button-primary:

backgroundColor: "{colors.brand-green}"

textColor: "{colors.on-primary}"

typography: "{typography.button-md}"

rounded: "{rounded.full}"

padding: "10px 22px"

button-primary-pressed:

backgroundColor: "{colors.primary-pressed}"

textColor: "{colors.on-primary}"

button-primary-disabled:

backgroundColor: "{colors.hairline}"

textColor: "{colors.muted}"

button-secondary:

backgroundColor: "transparent"

textColor: "{colors.ink}"

typography: "{typography.button-md}"

rounded: "{rounded.full}"

padding: "10px 22px"

border: "1px solid {colors.hairline-strong}"

button-on-dark:

backgroundColor: "{colors.brand-green}"

textColor: "{colors.on-primary}"

typography: "{typography.button-md}"

rounded: "{rounded.full}"

padding: "10px 22px"

button-secondary-on-dark:

backgroundColor: "transparent"

textColor: "{colors.on-dark}"

typography: "{typography.button-md}"

rounded: "{rounded.full}"

padding: "10px 22px"

border: "1px solid {colors.hairline-dark}"

button-ghost:

backgroundColor: "transparent"

textColor: "{colors.ink}"

typography: "{typography.button-md}"

rounded: "{rounded.md}"

padding: "8px 12px"

button-link:

backgroundColor: "transparent"

textColor: "{colors.brand-green-dark}"

typography: "{typography.body-sm-medium}"

padding: "0"

card-base:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.lg}"

padding: "{spacing.xl}"

border: "1px solid {colors.hairline}"

card-feature:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.lg}"

padding: "{spacing.xxl}"

border: "1px solid {colors.hairline}"

card-product-deploy:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.lg}"

padding: "{spacing.xxl}"

border: "1px solid {colors.hairline}"

card-feature-dark:

backgroundColor: "{colors.brand-teal-deep}"

textColor: "{colors.on-dark}"

rounded: "{rounded.lg}"

padding: "{spacing.xxl}"

card-course:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.lg}"

padding: "{spacing.xl}"

border: "1px solid {colors.hairline}"

card-cert:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.lg}"

padding: "{spacing.xl}"

border: "1px solid {colors.hairline}"

pricing-card:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.lg}"

padding: "{spacing.xxl}"

border: "1px solid {colors.hairline}"

pricing-card-featured:

backgroundColor: "{colors.surface-feature}"

rounded: "{rounded.lg}"

padding: "{spacing.xxl}"

border: "2px solid {colors.brand-green}"

text-input:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.md}"

padding: "{spacing.sm} {spacing.md}"

border: "1px solid {colors.hairline-strong}"

height: 44px

text-input-focused:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

border: "2px solid {colors.brand-green-dark}"

search-pill:

backgroundColor: "{colors.surface}"

textColor: "{colors.steel}"

typography: "{typography.body-md}"

rounded: "{rounded.md}"

padding: "{spacing.sm} {spacing.md}"

height: 44px

border: "1px solid {colors.hairline-strong}"

search-pill-large:

backgroundColor: "{colors.canvas}"

textColor: "{colors.steel}"

typography: "{typography.body-md}"

rounded: "{rounded.md}"

padding: "{spacing.md}"

height: 56px

border: "1px solid {colors.hairline-strong}"

pill-tab:

backgroundColor: "transparent"

textColor: "{colors.steel}"

typography: "{typography.body-sm-medium}"

rounded: "{rounded.full}"

padding: "{spacing.xs} {spacing.md}"

border: "1px solid {colors.hairline}"

pill-tab-active:

backgroundColor: "{colors.ink}"

textColor: "{colors.on-dark}"

rounded: "{rounded.full}"

border: "1px solid {colors.ink}"

segmented-tab:

backgroundColor: "transparent"

textColor: "{colors.steel}"

typography: "{typography.body-sm-medium}"

padding: "{spacing.sm} {spacing.md}"

border: "0 0 2px transparent solid"

segmented-tab-active:

backgroundColor: "transparent"

textColor: "{colors.brand-green-dark}"

typography: "{typography.body-sm-medium}"

border: "0 0 2px {colors.brand-green-dark} solid"

badge-green:

backgroundColor: "{colors.brand-green}"

textColor: "{colors.on-primary}"

typography: "{typography.caption-bold}"

rounded: "{rounded.sm}"

padding: "2px 8px"

badge-green-soft:

backgroundColor: "{colors.brand-green-soft}"

textColor: "{colors.brand-green-dark}"

typography: "{typography.caption-bold}"

rounded: "{rounded.full}"

padding: "4px 10px"

badge-purple:

backgroundColor: "{colors.accent-purple}"

textColor: "{colors.on-dark}"

typography: "{typography.caption-bold}"

rounded: "{rounded.sm}"

padding: "2px 8px"

badge-orange:

backgroundColor: "{colors.accent-orange}"

textColor: "{colors.on-dark}"

typography: "{typography.caption-bold}"

rounded: "{rounded.sm}"

padding: "2px 8px"

badge-popular:

backgroundColor: "{colors.brand-teal-deep}"

textColor: "{colors.brand-green}"

typography: "{typography.caption-bold}"

rounded: "{rounded.full}"

padding: "4px 10px"

promo-banner:

backgroundColor: "{colors.brand-teal-deep}"

textColor: "{colors.on-dark}"

typography: "{typography.body-sm-medium}"

padding: "{spacing.sm} {spacing.md}"

hero-band-dark:

backgroundColor: "{colors.brand-teal-deep}"

textColor: "{colors.on-dark}"

rounded: "0"

padding: "{spacing.hero}"

hero-platform-card:

backgroundColor: "{colors.brand-teal-mid}"

textColor: "{colors.on-dark}"

rounded: "{rounded.xl}"

padding: "{spacing.xxl}"

cta-banner-dark:

backgroundColor: "{colors.brand-teal-deep}"

textColor: "{colors.on-dark}"

rounded: "{rounded.lg}"

padding: "{spacing.section}"

code-block:

backgroundColor: "{colors.canvas-dark}"

textColor: "{colors.on-dark}"

typography: "{typography.code-md}"

rounded: "{rounded.md}"

padding: "{spacing.md}"

code-mockup-card:

backgroundColor: "{colors.canvas-dark}"

textColor: "{colors.on-dark}"

rounded: "{rounded.lg}"

padding: "{spacing.lg}"

comparison-table:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-sm}"

rounded: "{rounded.md}"

border: "1px solid {colors.hairline}"

comparison-row:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

padding: "{spacing.md} {spacing.lg}"

border: "0 0 1px {colors.hairline-soft} solid"

service-tile:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.lg}"

padding: "{spacing.xl}"

border: "1px solid {colors.hairline}"

why-card:

backgroundColor: "{colors.surface}"

rounded: "{rounded.lg}"

padding: "{spacing.xl}"

customer-testimonial-card:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.lg}"

padding: "{spacing.xxl}"

border: "1px solid {colors.hairline}"

logo-wall-item:

backgroundColor: "transparent"

textColor: "{colors.steel}"

typography: "{typography.body-md-medium}"

padding: "{spacing.lg}"

faq-accordion-item:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.md}"

padding: "{spacing.xl}"

border: "0 0 1px {colors.hairline} solid"

footer-region:

backgroundColor: "{colors.brand-teal-deep}"

textColor: "{colors.on-dark}"

typography: "{typography.body-sm}"

padding: "{spacing.section} {spacing.xxl}"

footer-link:

backgroundColor: "transparent"

textColor: "{colors.on-dark-muted}"

typography: "{typography.body-sm}"

padding: "{spacing.xxs} 0"

---

MongoDB carries a strong dual-mode visual identity — dark deep-teal hero bands with the unmistakable bright MongoDB green ({colors.brand-green}) CTA pill paired with stark white documentation and pricing surfaces. The homepage opens with "One data platform. Unlimited AI potential." headline over a deep navy hero, the green pill sitting at the visual center as the primary CTA. Lower on the page, embedded code mockup cards (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 background and bright green border. The MongoDB University page presents a course catalog grid where each tile carries a colored category tag (orange, purple, green, teal) — these are MongoDB's category-encoding accent colors and are the only place outside the brand green where saturated color appears.

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 `{rounded.lg}` (12px) corners; buttons use `{rounded.full}` pills universally. The brand-teal palette ({colors.brand-teal-deep}) anchors hero bands, footer, code mockups, and the dark CTA banners.

**Key Characteristics:**

> Source pages: mongodb.com/ (homepage), /products/platform/atlas-database (Atlas product), /products/self-managed/community-edition, learn.mongodb.com/ (MongoDB University), /solutions/use-cases/artificial-intelligence (AI), /pricing (3-tier comparison). Token coverage was identical across all six pages.

**Euclid Circular A** (primary): MongoDB's geometric sans-serif. Fallbacks: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif.

**Source Code Pro** (code): Monospace for code mockups. Fallbacks: 'SF Mono', Menlo, Consolas, monospace.

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.hero-display}` | 72px | 500 | 1.10 | -1.5px | Hero ("One data platform") |

| `{typography.display-lg}` | 56px | 500 | 1.15 | -1px | Major section openers |

| `{typography.heading-1}` | 48px | 500 | 1.20 | -0.5px | Page-level headlines |

| `{typography.heading-2}` | 36px | 500 | 1.25 | -0.5px | Subsection headlines |

| `{typography.heading-3}` | 28px | 500 | 1.30 | 0 | Card titles |

| `{typography.heading-4}` | 22px | 500 | 1.35 | 0 | Feature tile titles |

| `{typography.heading-5}` | 18px | 600 | 1.40 | 0 | Smaller card titles, FAQ questions |

| `{typography.subtitle}` | 18px | 400 | 1.50 | 0 | Hero subtitle, lead body |

| `{typography.body-md}` | 16px | 400 | 1.55 | 0 | Primary body text |

| `{typography.body-sm}` | 14px | 400 | 1.50 | 0 | Secondary body, table cells |

| `{typography.body-sm-medium}` | 14px | 500 | 1.50 | 0 | Active sidebar, button labels |

| `{typography.caption-bold}` | 13px | 600 | 1.40 | 0 | Badge labels |

| `{typography.micro-uppercase}` | 11px | 600 | 1.40 | 1px | Section eyebrows, course category tags |

| `{typography.button-md}` | 14px | 600 | 1.30 | 0 | Pill button labels |

| `{typography.code-md}` | 14px | 400 | 1.55 | 0 | Code mockups |

Marketing surfaces give content generous breathing room — `{spacing.hero}` (120px) hero padding for deep teal bands. Pricing/learn surfaces tighten dramatically.

| Level | Treatment | Use |

|---|---|---|

| 0 (flat) | No shadow; `{colors.hairline}` border | Default cards, table rows |

| 1 (subtle) | `rgba(0, 30, 43, 0.04) 0px 1px 2px 0px` | Hover-elevated tiles |

| 2 (card) | `rgba(0, 30, 43, 0.08) 0px 4px 12px 0px` | Feature cards |

| 3 (mockup) | `rgba(0, 30, 43, 0.12) 0px 12px 24px -4px` | Code mockup over hero |

| 4 (modal) | `rgba(0, 30, 43, 0.16) 0px 16px 48px -8px` | Modals, dropdowns |

| Token | Value | Use |

|---|---|---|

| `{rounded.xs}` | 4px | Course category tags |

| `{rounded.sm}` | 6px | Type badges, code chips |

| `{rounded.md}` | 8px | Inputs, search-pill, code blocks |

| `{rounded.lg}` | 12px | Cards, pricing tiers, course tiles |

| `{rounded.xl}` | 16px | Larger feature panels |

| `{rounded.xxl}` | 24px | Featured product showcases |

| `{rounded.full}` | 9999px | All buttons, status badges |

> Per the no-hover policy, hover states are NOT documented. Default and pressed/active states only.

**`button-primary`** — Bright MongoDB green pill primary CTA, the dominant action.

**`button-secondary`** — Outlined pill for secondary actions.

**`button-on-dark`** — Bright green pill on dark hero bands.

**`button-secondary-on-dark`** — Outlined pill on dark backgrounds.

**`button-ghost`** — Quieter rectangular ghost button.

**`button-link`** — Inline green text link.

**`card-base`** — Standard content card.

**`card-feature`** — Feature card with larger padding.

**`card-product-deploy`** — Product deployment card ("MongoDB Atlas / Community").

**`card-feature-dark`** — Dark teal feature card on hero band.

**`card-course`** — MongoDB University course tile.

**`card-cert`** — Certification card.

**`pricing-card`** — Standard pricing tier card.

**`pricing-card-featured`** — Featured pricing tier (Flex tier, mint background + green border).

**`text-input`** — Standard text field.

**`text-input-focused`** — Activated state.

**`search-pill`** — Standard 44px search bar.

**`search-pill-large`** — Large 56px search bar (top of MongoDB University catalog).

**`pill-tab`** + **`pill-tab-active`** — Pill-style tab nav (top of pricing: "MongoDB Atlas / Enterprise Advanced").

**`segmented-tab`** + **`segmented-tab-active`** — Underline-style tab navigation.

**`badge-green`** — Bright green badge for new product highlights.

**`badge-green-soft`** — Pale-mint pill for success/free indicators.

**`badge-purple`** — Purple course category tag.

**`badge-orange`** — Orange course category tag.

**`badge-popular`** — "Most Popular" tier indicator (dark teal pill with green text).

**`promo-banner`** — Dark teal sticky promo strip ABOVE the top nav.

**`code-block`** — Code container.

**`code-mockup-card`** — Embedded code mockup on hero band.

**`comparison-table`** — Pricing feature comparison table.

**`comparison-row`** — Individual feature row.

**`service-tile`** — Tile in "Customize your deployment" 6-up grid.

**`why-card`** — "Loved by builders" feature card.

**`customer-testimonial-card`** — Customer quote card.

**`logo-wall-item`** — Customer logo wordmark cell.

**`faq-accordion-item`** — FAQ panel.

**Top Navigation (Marketing)** — Sticky white bar.

**`hero-band-dark`** — Deep teal hero band with embedded code mockup.

**`hero-platform-card`** — Lighter-teal platform showcase card on dark hero.

**`cta-banner-dark`** — Dark CTA banner at the bottom of feature pages.

**`footer-region`** — Dark teal multi-column footer.

**`footer-link`** — Individual footer link.

| Name | 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. Hero 56px. |

| Desktop | 1024 – 1279px | 3-tier pricing card row. 3-up course catalog. Hero 64px. |

| Wide Desktop | ≥ 1280px | Full 72px hero presentation. |

1. Focus on ONE component at a time

2. Reference component names and tokens directly

3. Run `npx @google/design.md lint DESIGN.md` after edits

4. Add new variants as separate `components:` entries

5. Default to `{typography.body-md}` for body

6. Keep `{colors.brand-green}` as the primary CTA across all surfaces

7. Pill-shaped buttons (`{rounded.full}`) always

8. Dark-teal hero bands frame primary CTAs