| 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. |
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
