Design System

Build what
matters,
faster.

A clean developer canvas with the signature Atlas Green accent. Precise typography and compact spacing for data-dense UIs.

17 color tokens 8 type steps 4px grid 4 surface levels
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

Light neutrals with Atlas Green as the primary accent. 17 tokens spanning text, surfaces, interaction states, and semantic feedback.

White
#ffffff
Primary page background
Pale Cloud
#f9fbfa
Secondary sections
Leaf Dark
#e3ecf0
Borders, dividers
Stone
#b8c4c2
Disabled, placeholders
Slate
#6b7680
Secondary text
Pine Dark
#3d4f58
Body text
Night Sky
#001e2b
Headings, primary text
Atlas Green
#00ed64
Primary CTA, success
Forest
#00684a
Hover green, dark success
Evergreen
#003c2b
Active states
Glade
#d7f5e3
Success backgrounds
Mint
#e8fae1
Hover highlights
Ember
#e5432c
Error, destructive
Amber
#f5a623
Warning states
Blueprint
#006cbc
Links, info states
Charcoal
#002232
Code panels, terminals
Typography

Type Scale

DM Sans as primary UI typeface with Georgia for display moments. IBM Plex Mono for code and technical content.

Display Build what matters 64px / 1.1 / -0.02em
Heading-lg Ship faster 40px / 1.15 / -0.015px
Heading Section heading 24px / 1.3 / -0.01px
Heading-sm Subsection heading 20px / 1.4 / 0
Body Default body text for readable content 16px / 1.6 / 0
Body-sm Dense data, table cells, comparison rows 13px / 1.5 / 0.01px
Caption Meta info · Footer · Labels 12px / 1.5 / 0.02px

Fonts

Display MongoDB Value Serif 400-700 · 32-64px
Primary MongoDB Plex Sans 400-700 · 12-24px
Mono MongoDB Plex Mono 400-500 · 12-16px · Code only
Layout

Spacing & Shapes

Base unit 4px. Compact density for information-rich developer UIs. 13-step spacing scale, 6 border radius values.

Spacing Scale (4px base)

44px
88px
1212px
1616px
2424px
3232px
4848px
9696px

Border Radius

sm 4px
md 6px
lg 8px
cards 12px
pill 9999px
Elevation

Depth & Surfaces

Border differentiation over shadow. Light surfaces with dark code panels for contrast. 4 distinct surface levels.

Depth Levels

White
Base page background — the canvas
Level 0
Pale Cloud
Secondary sections, alternating content areas
Level 1
Card
Elevated cards with border differentiation
Level 2
Charcoal
Code panels, terminal UI, dark overlays
Level 3

Surface System

White #ffffff
Pale Cloud #f9fbfa
Card #ffffff + border
Charcoal #002232
Components

UI Components

Atlas Green for primary actions, Night Sky for text hierarchy, Charcoal for code presentation. Clear interaction states.

Primary Action Button
Main call to action — deploy, create, connect
.btn-primary
Atlas Green (#00ed64) background, Night Sky text, 6px radius. Use exclusively for the single most important action per viewport.
Secondary Button
Less prominent actions, navigation
.btn-secondary
Night Sky text, White background, Leaf Dark border. For actions that need visibility without competing with primary.
Ghost Button
Tertiary actions, cancel, back
.btn-ghost
Slate text, transparent background. Minimal visual weight for low-priority actions.
Status Badges
Cluster state, connection status, health
.badge
Running Failed Pending
Pill-shaped indicators. Glade/Forest for success, Ember tint for error, Amber tint for warning.
Code Block
Connection strings, shell commands, queries
.code-block
// Connect to MongoDB Atlas
const { MongoClient } = require('mongodb');
const uri = "mongodb+srv://cluster0.mongodb.net/";
const client = new MongoClient(uri);
Charcoal background, IBM Plex Mono, 13px. Green for keywords, amber for strings, slate for comments.
Input Field
Search, connection strings, form data
input
White background, Leaf Dark border, 6px radius. Focus state uses Blueprint border.
Guidelines

Do's & Don'ts

Do
  • White (#ffffff) as primary background for all content
  • Night Sky (#001e2b) for headings and primary text
  • Atlas Green (#00ed64) for primary CTAs only
  • Blueprint (#006cbc) for all text links
  • 6px radius for buttons, 12px for cards
  • IBM Plex Mono for all code content
  • Border differentiation over heavy shadows
Don't
  • Atlas Green for text on white — insufficient contrast
  • Pine Dark for headings — lacks hierarchy weight
  • Dark backgrounds outside code/terminal panels
  • Multiple primary green buttons per viewport
  • Dense layouts without breathing room
  • Serif fonts outside display moments
  • Decorative use of status colors