Acd Data Dense Mongodb Design

---
name: acd-data-dense-mongodb-design
description: Reference DESIGN.md for developer database UIs: forest-green leaf brand, deep slate chrome, dashboard-first density with marketing surfaces in light editorial. Use when building UI components, applying design tokens, or implementing visual styles for data dense mongodb.
license: CC-BY-NC-SA-4.0
metadata:
  risk: unknown
  source: community
  kind: mode
  category: design-systems
  tags: [design-system, ui, data-dense, claude-design]
---

# MongoDB — Data-Dense Atlas Design Mode

You are an expert in the MongoDB — Data-Dense Atlas aesthetic from the awesome-claude-design library. Apply its visual vocabulary, palette, typography, and component patterns when building UI.

## Source DESIGN.md

Reference DESIGN.md for developer database UIs: forest-green leaf brand, deep slate chrome, dashboard-first density with marketing surfaces in light editorial.

## 1. Visual Theme & Atmosphere

The cluster is the page. Marketing reads like a developer brochure — light backgrounds, generous whitespace, code panels framed as the hero. The Atlas console flips to deep slate so collection counts, IOPS sparklines, and shard maps stay legible across long on-call windows. One forest-green leaf earns the brand moment; everything else is slate, ink, or a measured chart hue.

Mood: technical, enterprise-trustworthy, never decorative.

## 2. Color Palette & Roles

```
/* marketing surface — light */
--bg:              #ffffff
--bg-alt:          #f9fafb
--surface:         #f3f5f4   /* tinted leaf wash */
--text:            #001e2b   /* slate ink */
--text-muted:      #5d6c74
--border:          #e1e7e4

/* in-app shell — slate */
--bg-app:          #001e2b   /* MongoDB slate */
--bg-app-alt:      #023430
--surface-app:     #0a3a3f
--surface-app-2:   #112c33
--text-app:        #ffffff
--text-app-muted:  #c1c7c6
--border-app:      #1c4a4f

/* brand */
--accent:          #00ed64   /* leaf green, primary CTA + brand */
--accent-hover:    #00c757
--accent-deep:     #00684a   /* forest, ink-on-light variant */
--accent-soft:     #c0fae6   /* tinted callouts */

/* status */
--status-ok:       #00684a
--status-warn:     #b45309
--status-error:    #db3030
--status-info:     #016bf8

/* categorical chart palette — preserve order */
--chart-1: #00684a   /* forest */
--chart-2: #016bf8   /* electric blue */
--chart-3: #b45309   /* amber */
--chart-4: #889397   /* slate gray */
--chart-5: #00d2ff   /* cyan */
--chart-6: #db3030   /* error red */
--chart-7: #5d4caf   /* indigo */
--chart-8: #00ed64   /* leaf — reserve for highlight */
```

Rule: leaf green is reserved for primary action and the brand mark. On dashboards, the deep `--accent-deep` carries text that needs to read as "MongoDB-flavored" without screaming. Status hues are reserved for state; never reuse for arbitrary series.

## 3. Typography Rules

- **UI + body:** `Euclid Circular A`, fallback `Inter`, fallback system. Weight 400/500/700.
- **Headlines:** Euclid weight 500–700. Marketing display tops out near 64px.
- **Numerals:** tabular figures globally on metric tiles, query rows, alert tables.
- **Code + query language:** `Source Code Pro`, fallback `JetBrains Mono`, `SF Mono`. Used for query syntax, log lines, document JSON, shell prompts.

Scale: 11 / 12 / 14 / 16 / 18 / 22 / 28 / 36 / 48 / 64.

Body lines hold a measure of 65–72 characters on marketing pages; in-app rows ignore measure and let tables breathe to viewport.

## 4. Component Stylings

**Buttons**
- Primary: leaf fill `--accent`, slate text, radius 6px, padding 10/18, weight 500.
- Secondary on light: white fill, 1px `--border`, slate text. Hover: `--surface`.
- Secondary on dark shell: transparent fill, 1px `--text-app-muted`, white text.
- Destructive: `--status-error` fill, white text, only on confirm modals.

**Cards / dashboard tiles**
- Marketing: white fill, 1px `--border`, radius 8px, 24px padding.
- App: `--surface-app` fill, 1px `--border-app`, radius 6px, 16px padding. Eyebrow in 11px uppercase tracked +4%.
- Hover: 1px `--accent` border on app tiles. No shadow, no lift.

**Inputs**
- 1px border, radius 6px, padding 10/12. Focus: 2px `--accent` ring with 1px offset.
- Code inputs (Compass shell, Atlas query bar) use `--bg-app-alt` fill on light surfaces — terminal-in-page treatment.

**Tables**
- 32px row height. Hairline border separators. Sticky header in 12px uppercase mono. Tabular numerals throughout. Right-align numerics, left-align strings, center status pills.

**Charts**
- 1px tick marks, axis labels in `--text-app-muted` 11px. Gridlines `--border-app` at 30% opacity.
- Series rendered in `--chart-1..8` declared order. Legend chips top-right with 8px swatch.
- Tooltips: `--bg-app` fill, white text, 1px `--accent-deep` border, radius 4px.

## 5. Layout Principles

- App shell uses 100% viewport. Left nav 240px, content fills.
- Marketing 1200px max, 24px gutter, 12-column.
- 4px base. 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64.
- Dashboards default to 12-column draggable grid; tiles snap to 6/4/3/2 widths.

## 6. Depth & Elevation

Flat. Border + tonal shift only. Modals get `0 16px 48px rgba(0, 30, 43, 0.32)` over a 60% slate scrim. Tooltips lift via 1px accent border, not shadow. Marketing cards get a single `0 1px 2px rgba(0, 30, 43, 0.04)` for soft definition only.

## 7. Do's and Don'ts

**Do**
- Render every metric in tabular Euclid numerals.
- Lock chart series to the declared categorical palette order across all dashboards — colors carry meaning.
- Keep the in-app shell on slate `#001e2b`. Light marketing only.
- Use code panels in the hero — show a `db.collection.aggregate(...)` block, not stock photography.

**Don't**
- Use leaf green for body text or as a tint behind paragraphs.
- Soften corners past 8px on marketing, 6px in-app.
- Replace tabular figures with proportional figures inside metric tiles.
- Add gradient fills under area charts. Solid fills with 30% opacity only.
- Introduce a second brand color "for variety". Leaf is the only branded hue.

## 8. Responsive Behavior

- Left nav collapses to 56px icon rail at 1280px, hidden behind hamburger below 768px.
- Dashboard tiles reflow 12 → 6 → 3 → 1 column at 1440 / 1024 / 768.
- Tables become stacked KV cards below 640px, numbers retained in tabular.
- Code panels in marketing become horizontally scrollable (no soft-wrap of JSON).
- Hero headline scales 64 → 32 on mobile.

## 9. Agent Prompt Guide

Bias: deep slate `#001e2b` app shell paired with light marketing, leaf green `#00ed64` primary action, Euclid Circular A with tabular numerals, 6–8px radii, eight-color categorical chart palette in declared order, dense 32px table rows, persistent left nav, hairline-only borders, code panels as the hero artifact.

Reject: light-mode dashboards, multi-color brand palettes, gradient chart fills, rounded "bubble" tiles, proportional numerals on metrics, hero illustrations in place of code, decorative emoji in chrome, "growth-marketing" pastel washes.

## When to Use This Mode

- When user references **mongodb** or the **data-dense** family as inspiration
- When building UI in the data-dense aesthetic
- When applying this brand's color palette, typography, or layout patterns
- When critiquing UI for adherence to this aesthetic