MongoDB design system

What font does MongoDB use?

MongoDB’s website uses Sohne Condensed for headings and Söhne for body text. Sohne Condensed is not on Google Fonts; the closest free match is Inter Tight; Söhne is not on Google Fonts; the closest free match is Inter Tight.

MongoDB colour palette

MongoDB’s home page is dark (#061621 background, #FFFFFF text) and uses #F3F5E6 for its main actions. Its palette: #FDFEEC, #765CF8, #001E2B, #061621, #404F54, #081B28.

• #FDFEEC
  27.5% · backgrounds
• #765CF8
  22.5% · drawings
• #001E2B
  17.4% · backgrounds
• #061621
  12.9% · backgrounds
• #404F54
  4.9% · drawings
• #081B28
  2.7% · backgrounds
• #00684A
  2% · backgrounds, drawings
• #00ED64
  1.9% · drawings
• #05B861
  1.8% · drawings
• #F3F5E6
  1.6% · backgrounds

Type scale

Each size the page sets text in, with its weight and line height. MongoDB’s largest type is 86.4px at weight 700.

Spacing and shape

Spacing sits on a 4px grid: 4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 40px, 44px, 48px, 56px.

Corner radii: 2px, 4px, 8px, 12px, 16px, 24px, 32px, pill. 5 shadow levels measured.

What makes MongoDB look like MongoDB

Mostly neutral: 68% of the page is #FDFEEC and #001E2B and other neutrals.

#765CF8 is an accent: 22.5% of the page, used for drawings only. Don't fill large areas with it.

#00684A is an accent: 2% of the page, used for backgrounds and drawings and small fills such as buttons. Don't fill large areas with it.

The largest type (86.4px Sohne Condensed) is bold (700), tracked to -0.01em, in capitals.

MongoDB DESIGN.md for Claude Code, Cursor and Lovable

A DESIGN.md is the brief an AI coding tool reads before it writes UI. This one carries everything on this page as rules a model follows: the allowed colours and what each is for, the fonts with free stand-ins, the type scale, spacing, corners, and the things MongoDB’s design never does.

Put it in your project root and ask your tool to follow it: “Read DESIGN.md and build [your product] in this design language.” It describes a style, not MongoDB’s product, so use your own name, words and images.

Download MongoDB DESIGN.md · View it as text

As CSS variables

The measured values as CSS custom properties, with free fonts standing in for licensed ones. Use them to learn from or to start a project in a similar style; MongoDB’s name, logo, words and images are theirs.

@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400&display=swap");

:root {
  --color-background: #061621; /* Background */
  --color-text: #FFFFFF; /* Text */
  --color-text-muted: #B8C4C2; /* Text muted */
  --color-border: #404F54; /* Border */
  --color-action: #F3F5E6; /* Action */
  --color-positive: #00ED64; /* Positive */
  --color-fdfeec: #FDFEEC; /* 27.5% of the page, as fills */
  --color-765cf8: #765CF8; /* 22.5% of the page, as drawings */
  --color-001e2b: #001E2B; /* 17.4% of the page, as fills */
  --color-081b28: #081B28; /* 2.7% of the page, as fills */
  --color-00684a: #00684A; /* 2% of the page, as fills */
  --color-05b861: #05B861; /* 1.8% of the page, as drawings */
  --color-00c2eb: #00C2EB; /* 1.3% of the page, as drawings */
  --color-023430: #023430; /* 1.3% of the page, as drawings */
  --color-b1ff05: #B1FF05; /* 0.9% of the page, as drawings */
  --font-body: "Sohne", "Inter Tight", sans-serif; /* Sohne on the site; Inter Tight renders */
  --font-display: "Sohne Condensed", "Inter Tight", sans-serif; /* Sohne Condensed on the site; Inter Tight renders */
  --font-code: "Sohne Mono", "Inter Tight", monospace; /* Sohne Mono on the site; Inter Tight renders */
  --font-interface: "MongoDB Value Serif", "Source Serif 4", serif; /* MongoDB Value Serif on the site; Source Serif 4 renders */
  --type-display-1: 86.4px; /* Display 1, weight 700 */
  --type-display-1-leading: 82.08px;
  --type-display-1-tracking: -0.01em;
  --type-display-2: 64px; /* Display 2, weight 700 */
  --type-display-2-leading: 64px;
  --type-display-3: 58px; /* Display 3, weight 700 */
  --type-display-3-leading: 55.1px;
  --type-display-3-tracking: -0.01em;
  --type-display-4: 48.96px; /* Display 4, weight 700 */
  --type-display-4-leading: 46.512px;
  --type-display-4-tracking: -0.01em;
  --type-display-5: 40px; /* Display 5, weight 400 */
  --type-display-5-leading: 64px;
  --type-display-6: 36px; /* Display 6, weight 400 */
  --type-display-6-leading: normal;
  --type-headline: 24px; /* Headline, weight 700 */
  --type-headline-leading: 22.8px;
  --type-title-large: 20px; /* Title Large, weight 500 */
  --type-title-large-leading: 32px;
  --type-title-small: 18px; /* Title Small, weight 400 */
  --type-title-small-leading: 27.9px;
  --type-body-large: 16px; /* Body Large, weight 400 */
  --type-body-large-leading: 24px;
  --type-body-medium: 15px; /* Body Medium, weight 600 */
  --type-body-medium-leading: normal;
  --type-body-small: 14px; /* Body Small, weight 400 */
  --type-body-small-leading: normal;
  --type-label: 12px; /* Label, weight 400 */
  --type-label-leading: 16px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;

How this was measured

PikSpec’s scanner read the mongodb.com home page in Chrome at 1440px wide on 15 October 2026: the computed styles of its elements, the fonts that rendered and how much of the page each colour covers. Websites change; capture the page yourself with PikSpec for today’s values, any page, and exports in five formats.

MongoDB is a trademark of its owner. This page is an independent measurement and is not affiliated with or endorsed by MongoDB.

Similar dark designs: Aesop · Bolt · Descript · DigitalOcean · Discord · Framer

Contact PikSpec

Email support@pikspec.com for support, privacy requests or content reports.