MongoDB Design System

MongoDB's design system runs on a tight two-mode contract. Deep teal "#001e2b" hero bands frame primary CTAs in bright MongoDB green "#00ed64", and the rest of the page drops to stark white "#ffffff" for documentation, pricing, and course catalogs. The brand has refined this contrast since the rebrand era, and today every surface — homepage, Atlas product page, Community Edition, MongoDB University, AI use cases, and the 3-tier pricing page — uses the same dark-band-plus-green-pill pattern. The pill button is the brand signature: 9999px radius applied universally to primary, secondary, on-dark, ghost, and badge CTAs. There is no rounded-rectangle button anywhere in the system. Euclid Circular A is the geometric sans-serif that holds the entire typographic scale, and Source Code Pro shows up only inside terminal-styled code mockup cards.

This page packages MongoDB's full specification into a single DESIGN.md file aligned with the Google Labs spec. Inside: 35 color tokens (brand green ramp, deep teal palette, four category accents, surface and hairline neutrals, full text scale), 16 typography tokens at sizes from 11px micro-uppercase to 72px hero display, a 7-step rounded scale topping out at the universal 9999px pill, 13 spacing tokens running from 4px through a 120px hero band, and 38 component definitions covering buttons, cards, pricing tiers, course tiles, code mockups, inputs, tabs, badges, comparison tables, and the dark teal footer region.

Feed the file to Claude, Cursor, GitHub Copilot, or any AI coding tool that reads structured tokens. The agent will reproduce the deep-teal-and-green discipline rather than substitute a generic shadcn theme — green stays scoped to CTAs and inline links, dark hero bands frame primary actions, and category accents stay locked to course tags. The token names map cleanly onto Tailwind config keys or CSS variables. MongoDB is worth studying because the system proves a developer-tool brand can stay both stark and warm — the deep teal is serious, the bright green is human, and the discipline of holding only two saturated colors across six product surfaces is rare.