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

Cluster Name
Default
Connection String
Focus (blue ring)
Database
Error
Query

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