MongoDB

version alpha

name MongoDB

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"

Overview

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:

• Deep navy/teal hero bands ({colors.brand-teal-deep}) with bright MongoDB green ({colors.brand-green}) CTA pills

• Stark white pricing/documentation surfaces with colored category tags for cours