# MongoDB — Design System
> A modern, AI-ready data platform for building scalable applications.
- **Canonical:** https://uiuxskills.com/library/mongodb
- **Source:** https://www.mongodb.com
- **Category:** Database & DevOps
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:14:43.754Z

---

---
version: alpha
name: MongoDB
description: A modern, AI-ready data platform for building scalable applications.
tone: Authoritative, technical, and forward-thinking.
color-scheme: light
colors:
  primary: "#00ED64"
  surface: "#FFFFFF"
  surface-container: "#F9F9F9"
  on-surface: "#001E2B"
  on-primary: "#001E2B"
  outline: "#D1D1D1"
  error: "#D32F2F"
  success: "#00684A"
  focus-ring: "#00ED64"
  neutral: "#707070"
typography:
  display-lg:
    fontFamily: Euclid Circular A
    fontSize: 3rem
  display-md:
    fontFamily: Euclid Circular A
    fontSize: 2.25rem
  headline-lg:
    fontFamily: Euclid Circular A
    fontSize: 1.875rem
  headline-md:
    fontFamily: Euclid Circular A
    fontSize: 1.5rem
  headline-sm:
    fontFamily: Euclid Circular A
    fontSize: 1.25rem
  body-md:
    fontFamily: Euclid Circular A
    fontSize: 1rem
  label-sm:
    fontFamily: Euclid Circular A
    fontSize: 0.75rem
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    width: auto
  button-primary-hover:
    backgroundColor: "#00C853"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#00C853"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "#FFFFFF"
  badge-error:
    backgroundColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-neutral:
    backgroundColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px rgba(0,0,0,0.08)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

MongoDB utilizes a clean, professional, and enterprise-focused aesthetic. The visual language is defined by high-contrast typography, a structured grid, and a focus on clarity to support developers and business leaders.

## Colors

The color palette is designed for high readability and technical precision, utilizing a signature brand green to draw attention to primary actions.

*   Primary (#00ED64): Brand green used for key CTAs and highlights.
*   Surface (#FFFFFF): Primary background color for page content.
*   Surface-container (inferred) (#F9F9F9): Light gray container background for section separation.
*   On-surface (#001E2B): Primary text color for high readability.
*   On-primary (inferred) (#001E2B): Text color for primary buttons.
*   Outline (#D1D1D1): Border color for cards and input fields.
*   Error (inferred) (#D32F2F): Semantic color for error states.
*   Success (inferred) (#00684A): Semantic color for success states.
*   Focus-ring (inferred) (#00ED64): Focus indicator color.
*   Neutral (inferred) (#707070): Secondary text and icon color.

## Typography

The typography system relies on the Euclid Circular A font family to maintain a modern, consistent, and authoritative technical voice.

*   Display-lg (inferred): Used for main hero headlines.
*   Headline-lg (inferred): Used for major section titles.
*   Body-md: Standard paragraph text for high legibility.
*   Label-sm (inferred): Small metadata, button text, and UI labels.

## Layout

The site employs a responsive grid system with a centered, max-width container to ensure consistent alignment across devices. Spacing follows a 4px-based scale, with {spacing.md} (16px) serving as the standard interval between major content sections. The page structure generally follows: nav, hero, customer-logos, features, case-study, cta, and footer. The hero pattern is consistently centered, featuring a primary headline, subhead, and dual CTA buttons.

## Elevation & Depth

Depth is used sparingly to maintain a clean, flat aesthetic, utilizing subtle single-layer shadows to distinguish interactive elements.
*   elevation.sm — card lift and subtle component separation.
*   elevation.md — popovers or active interactive states.
*   elevation.lg — modal or drawer overlays.
Values are inferred based on standard enterprise design patterns.

## Shapes

The brand employs a subtle, professional corner radius philosophy. Components use {rounded.sm} (4px) as the default to maintain a modern, crisp feel without appearing overly soft or rounded.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button Primary
An action-oriented component using {colors.primary} background and {colors.on-primary} text. Use for high-intent conversion points; it should always be paired with a secondary button for lower-intent actions.

### Card
A container using {colors.surface} background, {rounded.sm} corners, and {colors.outline} borders. Use to group related information or features; apply {elevation.sm} only when the card needs to be distinguished from the background.

### Input Field
A standard form element featuring {colors.surface} background and {colors.outline} borders. Upon interaction, the border should transition to {colors.focus-ring} to provide clear accessibility feedback.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.primary} for primary CTAs | Use {colors.primary} for body text |
| Apply {typography.headline-lg} for section titles | Use {typography.display-lg} for secondary labels |
| Use {rounded.sm} for cards and inputs | Use radii larger than {rounded.md} on cards |
| Maintain {spacing.md} between sections | Mix font families outside Euclid Circular A |
| Use {colors.on-surface} for body text | Use {colors.error} for non-destructive actions |
| Apply {colors.outline} for content dividers | Use excessive shadows for elevation |
| Use {colors.primary} for link states | Use {colors.neutral} for primary headlines |
| Apply {typography.label-sm} for button text | Use {colors.surface-container} for primary background |

## Content Style

CTA labels are action-oriented and use imperative verbs, such as "Get Started" or "Contact Us," keeping text concise and direct.

Headings are benefit-driven and declarative, designed to communicate value immediately to technical users and business decision-makers.

Copy density is optimized for scannability, utilizing short, punchy paragraphs and frequent headers to break up complex technical information.

## Imagery & Icons

The imagery style is mixed, combining clean, flat-style vector illustrations with high-quality partner logos. Icons are simple, stroke-based, and maintain a technical, minimal appearance that aligns with the brand's enterprise focus.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for MongoDB, an authoritative, enterprise-minimal data platform. Apply all visual design tokens from the spec exactly. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its token name — `{colors.primary}`, `{typography.body-md}`, `{rounded.sm}` — never hardcode hex values, font sizes, or pixel radii.
2. Use only components defined under `components:`. Do not invent variants (e.g., a `button-tertiary` or `card-hover` state) unless the spec lists them.
3. Follow the Layout section for page structure: nav → hero → content sections → CTA → footer. The hero must be centered with a headline, subhead, and dual CTAs.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it, surface the conflict before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source (component metadata, Storybook) exists for the product, those values take precedence.

## Output contract

**Must:**
- Use named tokens for every color, spacing, radius, and typography decision.
- Implement all spec-defined states: `button-primary-hover`, `input-field-focus`, `link-hover`, and disabled states using `{colors.neutral}`.
- Apply `{rounded.sm}` as the default radius for cards and inputs; never exceed `{rounded.md}` on cards.
- Apply `{typography.label-sm}` for all button text; `{typography.headline-lg}` for section titles.
- Use `{spacing.md}` as the standard interval between major content blocks, drawing from the 4px-base spacing scale throughout.
- Keep CTA copy action-oriented and imperative, per the Content Style section.

**Must NOT:**
- Invent colors, fonts, or radii absent from the spec.
- Use generic system defaults when a brand token exists.
- Use `{colors.primary}` for body text, decorative elements, or non-CTA/link purposes.
- Add emoji, filler copy, or marketing language.
- Rewrite, replace, or restructure page copy, headings, or navigation items.
- Apply `{elevation.lg}` outside modal or drawer contexts.

## When in doubt
- If the spec doesn't define a value, ask the product team before inventing one.
- For backgrounds, default to `{colors.surface}`; use `{colors.surface-container}` only for section separation, never as the primary page background.
- For text on any surface, default to `{colors.on-surface}`; use `{colors.neutral}` only for secondary labels or metadata.
- For unspecified breakpoints, apply mobile-first layout with one breakpoint at 768px, consistent with the Layout section's responsive grid guidance.
- Prefer composing existing components over introducing new tokens.