# Design System: MongoDB

Forest-dark teal-black (`#001e2b`) + neon green (`#00ed64`) + dual-mode (dark hero / light content). LeafyGreen component system. Three-font hierarchy: MongoDB Value Serif (hero) → Euclid Circular A (body/UI) → Source Code Pro (code/labels).

## Chapters

| # | File | Contents |
|---|------|----------|
| 1 | [01-visual-theme.md](01-visual-theme.md) | Brand atmosphere, key characteristics, dual-mode overview |
| 2 | [02-color-palette.md](02-color-palette.md) | All named colors with hex values and roles |
| 3 | [03-typography.md](03-typography.md) | Font families, full hierarchy table, type principles |
| 4 | [04-components.md](04-components.md) | Buttons, cards, inputs, navigation, image treatment, distinctive components |
| 5 | [05-layout.md](05-layout.md) | Spacing system, grid, whitespace philosophy, border radius scale |
| 6 | [06-depth-elevation.md](06-depth-elevation.md) | Shadow levels table, teal-tinted shadow philosophy |
| 7 | [07-dos-and-donts.md](07-dos-and-donts.md) | Usage rules — what to do and avoid |
| 8 | [08-responsive.md](08-responsive.md) | Breakpoints, touch targets, collapsing strategy, image behavior |
| 9 | [09-agent-prompt-guide.md](09-agent-prompt-guide.md) | Quick color reference, example component prompts, iteration guide |

## Quick Reference

**Dark mode:** `#001e2b` bg · `#00ed64` accent · `#3d4f58` borders · white text
**Light mode:** `#ffffff` bg · `#b8c4c2` borders · `#000000` text
**Shadows:** `rgba(0,30,43,0.12) 0px 26px 44px` (forest-tinted, primary)
**Buttons:** pill (100px radius) · `#00684a` primary · `#1c2d38` secondary
**Fonts:** MongoDB Value Serif (hero 96px) · Euclid Circular A (body wt 300) · Source Code Pro (labels uppercase 1–3px tracking)