Back to Library
M

MongoDB

MongoDB

Visit Website

文档数据库。绿叶品牌标识,开发者文档风格,绿色强调的技术感。

绿叶品牌开发者文档绿色强调技术感现代简约

Color Palette

primary
background
surface
text
muted
border

Typography

Heading FontEuclid Circular A, system-ui, sans-serif
Body FontEuclid Circular A, system-ui, sans-serif
Base Size16px
Line Height1.5
Weights300, 400, 500, 600

Heading Scale

h1MongoDB Heading
h2MongoDB Heading
h3MongoDB Heading
h4MongoDB Heading

DESIGN.md

# MongoDB Design System

## Visual Theme & Atmosphere
Fresh technical energy. The signature green (#00ED64) evokes growth and data. Clean documentation-focused layouts prioritize readability. The design feels like a well-maintained developer portal—professional, approachable, technically rigorous.

## Color Palette & Roles
| Token | Hex | Role |
|-------|-----|------|
| Primary | #00ED64 | Brand green, CTAs |
| Background | #FFFFFF | Clean white canvas |
| Surface | #F9FBFA | Subtle gray panels |
| Text | #001E2B | Dark navy text |
| Muted | #5D6C74 | Secondary text |
| Border | #E8EDEB | Light dividers |

## Typography Rules
- **Heading Font**: Euclid Circular A, system-ui, sans-serif
- **Body Font**: Euclid Circular A, system-ui, sans-serif
- **Base Size**: 16px
- **Line Height**: 1.5

## Component Stylings
- **Buttons**: Green bg, dark text, rounded
- **Code Blocks**: Dark surface, green accents
- **Cards**: White surface, subtle border

## Agent Prompt Guide
Use brand green accents, documentation-style layouts, developer-focused content structure, clean spacing.

Frequently Asked Questions

What is MongoDB's design style?

文档数据库。绿叶品牌标识,开发者文档风格,绿色强调的技术感。

What is MongoDB's primary color?

MongoDB uses #00ED64 as primary color, #FFFFFF for background, and #001E2B for text.

What fonts does MongoDB use?

Heading font: Euclid Circular A, system-ui, sans-serif. Body font: Euclid Circular A, system-ui, sans-serif. Base size: 16px.

How to use MongoDB design system in my project?

Click the Copy button above the DESIGN.md code block to copy the complete design specification. AI Coding tools like Cursor can directly read DESIGN.md to generate code matching MongoDB's style.

Explore More Design Systems

Discover 50+ curated design systems for your AI Coding projects.

View All Design Systems