---
name: Mongodb
description: "Worth including as a prime example of modern developer tool aesthetics: clean, authoritative, and highly readable with a disciplined accent color."
version: alpha

colors:
  background: "#001e2b"
  primary: "#ffffff"
  secondary: "#000000"
  tertiary: "#00ed64"
  neutral: "#b8c4c2"
  bg-soft: "#21313c"
  bg-quiet: "#f5f7fa"
  muted-soft: "#001e2b"
  line: "rgba(255,255,255,0.15)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 72px
    lineHeight: 1.05
    fontWeight: 500
    letterSpacing: "-1px"
  h2:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.15
    fontWeight: 500
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.4
    fontWeight: 500
    letterSpacing: "2px"

rounded:
  sm: 4px
  md: 8px
  lg: 16px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A clean, developer-centric data platform UI balancing dark technical authority with approachable green accents.

*A precision-engineered Swiss watch for data: clean, reliable, and built for serious work.*

## Colors

High contrast dark-mode dominance with a single high-chroma neon green accent for primary actions.

- **Background (`#001e2b`)** — uses `bg` token
- **Primary text (`#ffffff`)** — uses `ink` token
- **Secondary text (`#000000`)** — uses `ink-soft` token
- **Accent (`#00ed64`)** — uses `accent` token
- **Muted (`#b8c4c2`)** — uses `muted` token
- **Borders (`rgba(255,255,255,0.15)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospaced

- Headlines use geometric-sans at weight 500 for a technical yet approachable feel.
- Body text uses humanist-sans at weight 400 for maximum readability.
- Monospaced fonts are reserved strictly for code snippets and technical indicators.
- Strict uppercase tracking is applied to small labels to maintain hierarchy.

## Layout

Full-width sections alternating between deep dark and light neutral backgrounds.

*Rhythm:* Consistent 8px baseline grid with generous 96px+ vertical padding for major sections.

## Elevation & Depth

- 0px 3px 9px 0px rgba(0,0,0,0.15)
- 0px 7px 13px 0px rgba(0,0,0,0.13)
- 0px 26px 44px 0px rgba(0,30,43,0.12)
- Borders: Subtle 1px borders using rgba(255,255,255,0.15) on dark or rgba(0,0,0,0.1) on light.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 16px
- `pill`: 999px

## Components

- **button:** Primary: pill-shaped (#00ed64) with dark text; Secondary: dark pill with white border.
- **card:** Light background cards with generous padding (24px) and subtle rounded corners (16px).
- **chip:** Experience selector uses a pill-shaped segmented control with a green active state.
- **input:** Search and assistant inputs feature pill-shaped dark containers with subtle borders.
- **hero:** Large central headline split between white and green text over a dark gradient background.

## Do's and Don'ts

**Don't:**
- Don't use vibrant multi-color gradients — screenshot shows a restrained palette of dark blues, whites, and a single green accent.
- Don't use decorative serif fonts for headlines — screenshot shows a geometric-sans for all display text.
- Don't use sharp square corners on primary buttons — screenshot shows fully rounded pill shapes.
- Don't hide primary actions in dark backgrounds — screenshot uses a high-chroma green for main CTAs.
- Don't use heavy drop shadows for depth — screenshot relies on subtle shadows and flat surfaces.
- Don't crowd the layout with elements — screenshot shows generous whitespace and a clear visual hierarchy.

---

## System Prompt (paste into AI agent)

```
This is a developer-focused SaaS platform for data infrastructure. The design utilizes a deep dark blue (#001e2b) background paired with a vibrant neon green (#00ed64) accent for primary calls to action. Typography is strictly geometric and humanist sans-serif, maintaining a technical but readable aesthetic. Critical design constraints include avoiding multi-color gradients, utilizing pill-shaped buttons instead of sharp rectangles, and maintaining generous whitespace to emphasize a clean, professional hierarchy. The UI balances dark-mode technical authority with approachable, high-contrast green highlights.
```