MongoDB-design-analysisDESIGN.md alpha
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.
Color Palette
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Corner Radius
Spacing
Base: 4pxMongoDB 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.
Components
Buttons
badge-green
default
Cards
Card Title
Sample body text for the card component.
Inputs
Elevation & Depth
Do's & Don'ts
Do
Don't
Responsive Behavior
### Breakpoints
| 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. |
### Touch Targets
• Pill buttons render at 40–44px effective height
• 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
### Image Behavior
• Atmospheric AI imagery uses 16:9 ratio with full-bleed scaling
• Code mockup card content remains readable across breakpoints
• Customer logo wall: wordmarks at consistent 60–80px height
Iteration Guide
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
Known Gaps
• Specific dark-mode token values for canvas/surface beyond hero bands not surfaced
• Animation/transition timings not extracted; recommend 150–200ms ease
• Form validation success state not explicitly captured
• Course-tile category color mappings are observation-based
Use with MCP
Don't have the MCP? Install it here