<!-- Generated by ExtractVibe — https://extractvibe.com/brand/mongodb.com -->
<!-- Extracted: 2026-05-03T16:49:54.435Z | Schema: v1 | Quality: 100/100 -->
---
version: alpha
name: "MongoDB"
description: "MongoDB projects a confident, developer-centric identity that balances enterprise reliability with modern innovation. The brand feels technical yet accessible, using a bold green accent to signal growth and speed against a clean, structured foundation."
colors:
  primary: "#00684a"
  tertiary: "#00ed64"
  neutral: "#001e2b"
  surface: "#ffffff"
  on-surface: "#000000"
  on-surface-secondary: "#001e2b"
  border: "#b8c4c2"
  link: "#00684a"
  surface-dark: "#061621"
typography:
  display-lg:
    fontFamily: "MongoDB Value Serif"
    fontSize: "64px"
    fontWeight: "400"
    lineHeight: "72px"
  headline-lg:
    fontFamily: "Euclid Circular A"
    fontSize: "36px"
    fontWeight: "500"
    lineHeight: "48px"
  headline-md:
    fontFamily: "Euclid Circular A"
    fontSize: "36px"
    fontWeight: "500"
    lineHeight: "48px"
  body-md:
    fontFamily: "Times New Roman"
    fontSize: "16px"
    fontWeight: "400"
rounded:
  sm: "4px"
  md: "100px"
  lg: "999px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-primary:
    backgroundColor: "#00ed64"
    textColor: "#001e2b"
    rounded: "4px"
    padding: "15px 24px"
    fontSize: "16px"
    fontWeight: "500"
    borderColor: "#001e2b"
    borderWidth: "1px"
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#3d4f58"
    rounded: "4px"
    padding: "1px 6px 1px 0px"
    fontSize: "13.3333px"
    fontWeight: "300"
    borderColor: "#b8c4c2"
    borderWidth: "1px"
  button-outline:
    textColor: "#006cfa"
    rounded: "0px"
    padding: "16px 16px 16px 32px"
    fontSize: "16px"
    fontWeight: "500"
    borderColor: "#5d6c74"
    borderWidth: "1px 0px 0px"
---

# MongoDB — Design System

## Overview

MongoDB's design system embodies the archetypes of The Creator and The Sage, projecting a developer-first identity that is both reliable and innovative. Our aesthetic aligns with comparable brands like Stripe, Vercel, Linear, and Notion, emphasizing clean structure, modern accessibility, and bold efficiency. The visual language is technical yet approachable, designed to empower developers with tools that feel robust and intuitive. We prioritize clarity and functionality, ensuring that every design choice supports a seamless user experience.

This design system is not whimsical or overly decorative. It avoids gradients, excessive ornamentation, and highly saturated secondary palettes. Instead, it leverages a precise, structured foundation with strategic use of a bold green accent to signify progress, growth, and speed. The emotional register is one of confident capability and forward momentum, reflecting MongoDB's position as a leader in data management. Our design communicates stability and cutting-edge performance, directly addressing the needs of a sophisticated technical audience.

**Key characteristics:**

- Vibe — developer-first, modern, reliable, innovative, structured, bold
- Archetypes — The Creator, The Sage
- Comparable to — Stripe, Vercel, Linear, Notion
- Design era — contemporary-minimal
- Emotional tone — confident-reliable
- Target audience — Software engineers, CTOs, and product builders looking for scalable, modern data solutions.
- Visual energy — 7/10 (high-energy/bold)

## Colors

The primary color, `#00684a`, is a bold green that signifies growth, innovation, and speed. It acts as a focal point, drawing attention to key actions and brand elements. The `surface color: #ffffff` provides a clean, expansive canvas, ensuring readability and a sense of open space. This limited palette signals a focused, modern, and reliable brand, avoiding visual clutter to maintain a professional and developer-centric aesthetic.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#00684a` | Dark Slate Gray |
| accent / tertiary | `#00ed64` | Spring Green |
| background | `#ffffff` | White |
| text | `#000000` | Black |
| secondary text | `#001e2b` | Near-Black |
| border | `#b8c4c2` | Silver |
| link | `#00684a` | Dark Slate Gray |
| muted | `#001e2b` | Near-Black |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| surface | `#061621` | Near-Black |

## Typography

Our type system employs a sophisticated blend of fonts: Times New Roman and MongoDB Value Serif for a classic, authoritative presence, complemented by Euclid Circular A and Arial for modern clarity and accessibility. This combination establishes a clear hierarchy, with serif fonts often used for headlines or prominent text to convey gravitas, and sans-serif fonts for body copy and UI elements to ensure legibility and a contemporary feel. The system communicates precision, reliability, and a forward-thinking approach.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Times New Roman | body | system | 400 |
| MongoDB Value Serif | heading | self-hosted | 400 |
| Euclid Circular A | heading | self-hosted | 500 |
| Arial | body | system | 300, 400 |
| Euclid Circular A | body | self-hosted | 400, 500 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | MongoDB Value Serif | 64px | 400 | 72px | — |
| Heading 2 | Euclid Circular A | 36px | 500 | 48px | — |
| Heading 3 | Euclid Circular A | 36px | 500 | 48px | — |
| Body | Times New Roman | 16px | 400 | — | — |

### Conventions

- Heading case — title-case

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| card | `rgba(0, 30, 43, 0.12) 0px 26px 44px 0px, rgba(0, 0, 0, 0.13) 0px 7px 13px 0px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.15) 0px 3px 9px 0px` |

### Gradients

- `linear-gradient(90deg, rgb(0, 233, 122) 0px, rgb(0, 212, 235) 25%, rgb(233, 255, 153) 50%, rgb(0, 233, 122) 75%, rgb(0, 212, 235))`
- `linear-gradient(90deg, rgb(0, 104, 74), rgba(0, 237, 100, 0.6) 50%, rgb(0, 120, 137))`

## Shapes

Border-radius scale:

- `sm` — 4px
- `md` — 100px
- `lg` — 999px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Primary**

- Background — `#00ed64`
- Text — `#001e2b`
- Radius — `4px`
- Padding — `15px 24px`
- Font size — `16px`
- Font weight — `500`
- Border — `1px solid #001e2b`
- Sample copy — "Get Started"

**Secondary**

- Background — `#ffffff`
- Text — `#3d4f58`
- Radius — `4px`
- Padding — `1px 6px 1px 0px`
- Font size — `13.3333px`
- Font weight — `300`
- Border — `1px solid #b8c4c2`
- Sample copy — "General Information"

**Outline**

- Text — `#006cfa`
- Radius — `0px`
- Padding — `16px 16px 16px 32px`
- Font size — `16px`
- Font weight — `500`
- Border — `1px 0px 0px solid #5d6c74`
- Sample copy — "View All ProductsExplore our full developer suitearrow-right"

## Do's and Don'ts

### Do

- Use Euclid Circular A (500 weight) for primary headings and body text, ensuring title-case formatting for all headings.
- Apply the primary brand green (#00ed64) exclusively to primary Call-to-Action buttons, paired with dark text (#001e2b) for high contrast.
- Implement multi-layer shadows on cards using rgba(0, 30, 43, 0.12) 0px 26px 44px 0px and rgba(0, 0, 0, 0.13) 0px 7px 13px 0px to create depth.
- Use 4px border-radius for primary buttons and small UI elements to maintain a sharp, precise aesthetic.
- Utilize the accent green (#00ed64) and primary green (#00684a) in linear gradients for background highlights or hero sections to signal innovation.
- Keep body copy concise and technical, using Euclid Circular A 400 weight with a clean, airy layout.
- Use outline buttons with 0px border-radius for secondary navigation or 'View All' actions, featuring blue text (#006cfa) and a subtle border (#5d6c74).
- Reserve Times New Roman for specific editorial or long-form body contexts if needed, but prioritize Euclid Circular A for digital interfaces.

### Don't

- Do not use emoji in marketing copy or UI elements; the brand maintains a professional, serious tone.
- Avoid exclamation marks in headlines and body copy; use strong, action-oriented imperative verbs instead.
- Do not use serif fonts (like MongoDB Value Serif) for body text or UI components; reserve them only for specific editorial headings if applicable.
- Avoid pill-shaped buttons (100px radius) for primary actions; stick to the 4px radius for a more technical, precise look.
- Do not use bright white backgrounds with low-contrast text; ensure high accessibility with #000000 or #001e2b text on white.
- Avoid flat, single-shadow designs; the brand uses layered shadows to create a sense of premium depth and hierarchy.
- Do not use random or vibrant accent colors outside the defined green (#00ed64, #00684a) and blue (#006cfa) palette.

*Source — merged*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 4/10 | formal |
| Playful ↔ Serious | 3/10 | playful |
| Enthusiastic ↔ Matter-of-fact | 6/10 | balanced |
| Respectful ↔ Irreverent | 2/10 | respectful |
| Technical ↔ Accessible | 7/10 | accessible |

### Copywriting style

- Avg. sentence length — 12 words
- Vocabulary — moderate
- Jargon — some
- CTA style — action-oriented imperative verbs
- Rhetorical devices — parallelism, antithesis, hyperbole

### Sample copy

> One data platform.Unlimited AI potential.

> Loved by builders, trusted by enterprises

> Get your ideas to market faster with a flexible, AI-ready database.

> Combine operational data, vectors, and streaming data in a unified platform.

> Deploy Your Way

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/mongodb.com) | 100% |
| primary | color | svg | [link](https://extractvibe.com/api/assets/brands/mongodb.com/logo-11.svg) | 80% |
| wordmark | — | svg | [link](https://extractvibe.com/api/assets/brands/mongodb.com/logo-1.svg) | 80% |
| wordmark | color | svg | [link](https://extractvibe.com/api/assets/brands/mongodb.com/logo-13.svg) | 80% |
| wordmark | color | svg | [link](https://extractvibe.com/api/assets/brands/mongodb.com/logo-7.svg) | 80% |
| wordmark | color | svg | [link](https://extractvibe.com/api/assets/brands/mongodb.com/logo-15.svg) | 80% |
| wordmark | color | svg | [link](https://extractvibe.com/api/assets/brands/mongodb.com/logo-10.svg) | 80% |
| wordmark | color | svg | [link](https://extractvibe.com/api/assets/brands/mongodb.com/logo-16.svg) | 80% |
| wordmark | color | svg | [link](https://extractvibe.com/api/assets/brands/mongodb.com/logo-9.svg) | 80% |
| wordmark | color | svg | [link](https://extractvibe.com/api/assets/brands/mongodb.com/logo-14.svg) | 80% |
| wordmark | color | svg | [link](https://extractvibe.com/api/assets/brands/mongodb.com/logo-12.svg) | 80% |
| wordmark | color | svg | [link](https://extractvibe.com/api/assets/brands/mongodb.com/logo-8.svg) | 80% |

## Sources

- Official brand guidelines — https://mongodb.com/brand-resources
- Live brand page — https://extractvibe.com/brand/mongodb.com
- Raw JSON — https://extractvibe.com/api/brand/mongodb.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/mongodb.com/design.md
- Extracted — 2026-05-03T16:49:54.435Z
- Generator — ExtractVibe vv1
- Quality score — 100/100