Dark Mode

Design System
Inspired by MongoDB

A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.

Try Free Contact Sales
01 / Colors

Color Palette

Brand
Forest Black
#001e2b
Dark background
MongoDB Green
#00ed64
Brand accent
Dark Green
#00684a
Buttons, links
Action Blue
#006cfa
Links, interactive
Neutral Scale
Deep Teal
#1c2d38
Dark buttons
Teal Gray
#3d4f58
Dark borders
Cool Gray
#5c6c75
Muted text
Silver Teal
#b8c4c2
Light borders
02 / Typography

Typography Scale

Display Hero
Display — 96px / 400 / 1.20 / MongoDB Value Serif
Section Heading
Section — 36px / 500 / 1.33 / Euclid Circular A
Sub-heading
Sub — 24px / 500 / 1.33 / Euclid Circular A
Body Light — Build faster with MongoDB. The developer data platform for modern applications.
Body — 16px / 300 / 1.50 / Euclid Circular A
DATABASE COLLECTION
Code Label — 14px / uppercase / +2px / Source Code Pro
db.collection.find({ status: "active" })
Code Body — 16px / 400 / Source Code Pro
AGGREGATION PIPELINE
Code Micro — 9px / 600 / uppercase / +2.5px / Source Code Pro
03 / Buttons

Button Variants

Try Free
Green Pill
Explore
Dark Teal
Learn More
Outlined
Dark Context
Dark Outlined
04 / Cards

Card Examples

Atlas

Document Model

Map your data naturally with flexible documents. No rigid schemas, no complex joins.

Search

Full-text Search

Build rich search experiences using the same data you already have in Atlas.

Elevated

Vector Search

Build AI-powered applications with native vector search. Forest-tinted shadow elevation.

05 / Forms

Form Elements

Default
Focus (blue ring)
Error
06 / Spacing

Spacing Scale

4
8
12
16
20
24
32
07 / Radius

Border Radius Scale

4px
Inputs
8px
Links
16px
Cards
24px
Panels
48px
Hero cards
pill
Buttons
08 / Elevation

Elevation & Depth

Level 0
Flat — no shadow
Subtle
Light lift
Standard
General elevation
Forest
Teal-tinted primary