mongodb.com

DESIGN.md

Narrative design system document — paste directly into Claude Code, Cursor, or Bolt.

---
version: alpha
name: mongodb.com
description: "Dark-canvas product system built on #061621 with #00ed64 as the single brand accent. Type anchored in MongoDB Value Serif at 64px / weight 400. Extracted automatically from https://mongodb.com/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
narrative: |
  mongodb.com is built on a near-black canvas (rgb(6, 22, 33)).
  The system uses rgb(0, 237, 100) as the high-saturation accent for primary actions.
  Crisp CTAs (4px radius) reinforce a precise, technical aesthetic alongside editorial serif type (MongoDB Value Serif) — voice of authority.
  MongoDB Value Serif is paired with Noto Sans KR for secondary roles.
  A layered elevation system (6 distinct shadows) building a clear front-to-back hierarchy.
  Motion is a first-class concern — 24 keyframe animations plus transition-driven interactions.

colors:
  canvas: "#061621"
  surface-1: "#001e2b"
  surface-2: "#21313c"
  ink: "#ffffff"
  ink-muted: "#ffffff"
  ink-subtle: "#b8c4c2"
  primary: "#00ed64"
  on-primary: "#111111"
  primary-hover: "#00684a"
  hairline: "#5d6c74"

typography:
  display-xl:
    fontFamily: "MongoDB Value Serif, Georgia, 'Times New Roman', serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.13
    letterSpacing: 0
  body:
    fontFamily: "Euclid Circular A, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: 0
  body-sm:
    fontFamily: "Euclid Circular A, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 14px
    fontWeight: 300
    lineHeight: 2.64
    letterSpacing: 0
  button:
    fontFamily: "Euclid Circular A, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: 0
  eyebrow:
    fontFamily: "Source Code Pro, 'SF Mono', 'JetBrains Mono', Menlo, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: normal
    letterSpacing: 2px
  mono:
    fontFamily: "Akzidenz-Grotesk Std, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 1
    letterSpacing: 0

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 30px
  pill: 999px

spacing:
  xxs: 2px
  xs: 6px
  sm: 15px
  md: 18px
  lg: 24px
  xl: 28px
  xxl: 64px

components:
  button-light--invert:
    backgroundColor: "{colors.ink-muted}"
    textColor: "#3d4f58"
    typography: "{typography.body-sm}"
    rounded: "{rounded.xs}"
    padding: 1px 6px 1px 0px
  button-dark--solid:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.button}"
    rounded: "{rounded.xs}"
    padding: 14px
  button-primary-brand:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface-1}"
    typography: "{typography.button}"
    rounded: "{rounded.xs}"
    padding: 15px 24px
  card-standard-card:
    backgroundColor: "{colors.canvas}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
  input-text-input:
    backgroundColor: "{colors.ink-muted}"
    textColor: "{colors.surface-2}"
    typography: "{typography.button}"
    rounded: "{rounded.xs}"
    padding: 15px
  search-bar-search-bar:
    backgroundColor: "transparent"
    textColor: "#000000"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 0px 24px 0px 16px
  cta-banner-full-width-cta:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface-1}"
    typography: "{typography.button}"
    rounded: "{rounded.xs}"
  tab-pill-tab:
    backgroundColor: "{colors.ink-muted}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.sm}"
    padding: 2px
  tab-ghost-tab:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.sm}"
    padding: 7px 20px

extracted_at: "2026-06-11T05:45:34.743Z"
completeness: 84
scoreVersion: "v2"

---

# Design System — mongodb.com
> Extracted automatically by Prism from https://mongodb.com
> Date: 2026-06-11
> Viewport: Desktop 1440x900 + Mobile 390x844
> Values are extracted, not hand-written: rendered styles via getComputedStyle() + colors declared in CSS custom properties (token-only values are marked `(token)` and may not be painted).


## 0. Design DNA

**Density**: moderate  |  **Motion**: animated  |  **Weight**: medium  |  **Aesthetic**: editorial-minimal

| Dimension | Value | Signal |
|---|---|---|
| Canvas | dark | `#061621` |
| Type posture | serif-led (MongoDB Value Serif) | "Your AI Data Platform is Ready" |
| Color assertion | dual-accent | #00ed64 |
| Whitespace | moderate | section rhythm 48px |
| Interaction | animated | 24 keyframes, 14 transitions |
| Radius language | 4px-rounded | from token scale |

**Prism fingerprint**: `dark-canvas · serif-display · dual-accent · 4px-rounded · animated-motion`

> **🤖 TL;DR for AI agents** (read this first — saves you scanning the full doc):
>
> - **Canvas**: `rgb(6, 22, 33)` is the page background. Every component composits against this.
> - **Accent**: `rgb(0, 237, 100)` for primary CTAs ONLY. Never decorative.
> - **Body type**: 16px (token: `typography.body`). Default for ALL text not in a heading role.
> - **Section rhythm**: 48px between major bands. Card padding: 24px.
> - **Default radius**: 8px on buttons/inputs. Pills (`9999px`) only for icon-buttons or status chips.
>
> **Before generating UI**: import this DESIGN.md, scan §2 (Color Palette) + §4 (Components) + §10 (Agent Guide). Skip §11–12 unless extending.

## 1. Visual Theme & Atmosphere

**Signature:** a full-bleed image backdrop in the hero. This is the brand's most recognizable visual — reproduce it, don't replace it with a generic card or flat panel.

mongodb.com commits fully to dark-mode as the native medium, not as a toggled alternative. The canvas is a dark surface (`#061621`) where elevation is communicated through subtle white-opacity gradations rather than traditional shadows — semi-transparent white borders act as the primary depth indicator, like wireframes etched in moonlight. 

Headlines are set in **MongoDB Value Serif**, a serif display face (the dominant type signature, e.g. "Your AI Data Platform is Ready" at 64px). A second display voice — **Euclid Circular A** (sans) — appears in lower bands (e.g. "The modern, AI-ready data platform"), used for editorial accent. Body text is set in **Source Code Pro**. 

Body text reads in Pure White (`#ffffff`). **#00ed64** (`#00ed64`) is the single high-saturation color in the system — it earns its presence only on interactive elements, making CTAs and links the unmistakable focal points against the otherwise neutral palette. Elevation is built from multi-layer shadow stacks (6 distinct) — each combines several blurred layers at varying offsets to build a clear front-to-back hierarchy. 
Border radius varies from pill-shaped (fully rounded) to moderately rounded elements, creating visual rhythm. Motion design uses smooth easing curves for polished state transitions. 

**Key Characteristics:**
- Background: Deep Navy (`#061621`)
- Primary typeface: Akzidenz-Grotesk Std
- Primary text: #b1ff05 (`#b1ff05`)
- Accent: #00ed64 (`#00ed64`)
- Display: 64px weight 400
- Shadow system: 6 distinct elevation levels
- Custom fonts loaded: Akzidenz-Grotesk Std, Euclid Circular A, MongoDB Value Serif, Source Code Pro

## 2. Color Palette & Roles

### Background & Surface
- **Deep Navy** (`#061621`): Page background (primary)
- **Pure Black** (`#000000`): Surface / elevated background
- **#0000ee** (`#0000ee`): Surface / elevated background
- **#00684a** (`#00684a`): Surface / elevated background
- **Deep Navy** (`#001e2b`): Surface / elevated background

### Text & Content
- **Pure Black** (`#000000`): Primary body text
- **#b1ff05** (`#b1ff05`): Secondary text
- **Silver** (`#b8c4c2`): Secondary text
- **#00ed64** (`#00ed64`): Secondary text
- **Medium Gray** (`#889397`): Secondary text

### Accent & Interactive
- **Charcoal** (`#21313c`): Interactive / accent
- **Slate** (`#3d4f58`): Interactive / accent
- **#006cfa** (`#006cfa`): Interactive / accent
- **Dim Gray** (`#5d6c74`): Interactive / accent
- **Sky Bright** (`#009ffd`): Interactive / accent
- **Charcoal** (`#1c2d38`): Interactive / accent
- **Dim Gray** (`#5c6c75`): Interactive / accent

### Full Extracted Palette
**40 colors rendered on the page** + **2** more declared in design tokens (CSS custom properties — not necessarily painted). (16 categorized above + 26 additional below.)
Rendered values are read via `getComputedStyle()`; token values come from CSS variable declarations. Third-party logo colors are filtered out.

- `#ffffff` — Pure White
- `#e9ff99` — #e9ff99
- `#e7eeec` — Whitesmoke
- `#e8edeb` — Whitesmoke
- `#c1c7c6` — Light Grey
- `#0498ec` — Sky Bright
- `rgba(245, 247, 250, 0.03)` — Translucent Ghost White (3%)
- `#014e3d` — #014e3d
- `#e3fcf7` — Light Gray
- `#00ff00` — #00ff00
- `#f3461f` — Vermillion
- `#ffe212` — Gold
- `#00aa57` — #00aa57
- `#d38ff0` — Plum
- `#53e9f6` — #53e9f6
- `#9fa1a2` — Grey
- `#0d427c` — #0d427c
- `#01ec64` — #01ec64
- `#b55df4` — #b55df4
- `#b760f5` — #b760f5
- `#b55cf3` — #b55cf3
- `#00d2ff` — #00d2ff
- `#0066ff` — #0066ff
- `#767676` — Slate Grey
- `#023430` — Navy Blue *(token)*
- `rgba(59, 130, 246, 0.5)` — Translucent Ring Blue (50%) *(token)*

### CSS Custom Properties (Design Tokens)

**Shadow Token**
- `--tw-ring-offset-shadow`: `0 0 #0000`
- `--tw-ring-shadow`: `0 0 #0000`
- `--tw-drop-shadow`: ``
- `--tw-shadow`: `0 0 #0000`

**Spacing Token**
- `--tw-numeric-spacing`: ``
- `--tw-border-spacing-x`: `0`
- `--slider-padding`: `48px 0 104px 0`
- `--tw-border-spacing-y`: `0`

**Other tokens**
- `--tw-ring-color`: `rgba(59,130,246,.5)`
- `--tw-ring-offset-color`: `#fff`

## 3. Typography Rules

### Font Families
- **Primary**: `MongoDB Value Serif`
- **Secondary**: `Akzidenz-Grotesk Std`
- **Font 3**: `Noto Sans SC`
- **Font 4**: `Noto Sans KR`
- **Font 5**: `Noto Sans JP`

### Custom Fonts Loaded
- **Akzidenz-Grotesk Std** weight 300 (normal)
- **Akzidenz-Grotesk Std** weight 500 (normal)
- **Noto Sans SC** weight 100 (normal)
- **Noto Sans SC** weight 200 (normal)
- **Noto Sans SC** weight 300 (normal)
- **Noto Sans SC** weight 400 (normal)
- **Noto Sans SC** weight 500 (normal)
- **Noto Sans SC** weight 600 (normal)
- **Noto Sans SC** weight 700 (normal)
- **Noto Sans SC** weight 800 (normal)
- **Noto Sans SC** weight 900 (normal)
- **Noto Sans KR** weight 100 (normal)
- **Noto Sans KR** weight 200 (normal)
- **Noto Sans KR** weight 300 (normal)
- **Noto Sans KR** weight 400 (normal)
- **Noto Sans KR** weight 500 (normal)
- **Noto Sans KR** weight 600 (normal)
- **Noto Sans KR** weight 700 (normal)
- **Noto Sans KR** weight 800 (normal)
- **Noto Sans KR** weight 900 (normal)
- **Noto Sans JP** weight 100 (normal)
- **Noto Sans JP** weight 200 (normal)
- **Noto Sans JP** weight 300 (normal)
- **Noto Sans JP** weight 400 (normal)
- **Noto Sans JP** weight 500 (normal)
- **Noto Sans JP** weight 600 (normal)
- **Noto Sans JP** weight 700 (normal)
- **Noto Sans JP** weight 800 (normal)
- **Noto Sans JP** weight 900 (normal)
- **Euclid Circular A** weight normal (normal)
- **Euclid Circular A** weight 500 (normal)
- **MongoDB Value Serif** weight normal (normal)
- **MongoDB Value Serif** weight 500 (normal)
- **MongoDB Value Serif** weight bold (normal)
- **Source Code Pro** weight normal (normal)
- **Source Code Pro** weight 500 (normal)

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | MongoDB Value Serif | 64px | 400 | 1.13 | normal | Main headline (h1) |
| Card Title | Akzidenz-Grotesk Std | 16px | 400 | normal | normal | Card headings |
| Button Large | Euclid Circular A | 16px | 500 | 1 | normal | Button label (16px) |
| Button Large | Euclid Circular A | 16px | 300 | 2 | normal | Button label (16px) |
| Input Large | Akzidenz-Grotesk Std | 16px | 300 | 1 | normal | Form input (16px) |
| Input Large | Euclid Circular A | 16px | 400 | 1.25 | normal | Form input (16px) |
| Link | Euclid Circular A | 14px | 300 | 2.64 | normal | Link (14px) — Decoration: underline |
| Eyebrow / Overline | Source Code Pro | 14px | 400 | normal | 2px | Label above heading, uppercase tag |
| Button | Akzidenz-Grotesk Std | 13.3333px | 300 | normal | normal | Button label (13.3333px) |
| Button | Akzidenz-Grotesk Std | 13.3333px | 400 | normal | normal | Button label (13.3333px) |
| Nav Link | Euclid Circular A | 12px | 500 | 1 | normal | Navigation anchor |

### Full Font Size Scale

Sizes detected in the design (descending): `64px`, `40px`, `36px`, `28px`, `24px`, `20px`, `18px`, `16px`, `14px`, `13.33px`, `12px`, `11px`, `9px`

> 8 size(s) detected outside the sampled hierarchy (40px, 36px, 28px, 24px, 20px, 18px, 11px, 9px). These appear on elements not in the sampled set — likely additional display sizes, marketing-section overrides, or third-party-widget styles.

### OpenType & Variable Font Features

The typography uses these OpenType features intentionally — this is a sophisticated type system, not a default fallback:

- **ligatures** — common letter pairs replaced with refined glyphs (fi, fl, etc.)

**Clone instruction:** Enable these in your CSS:
```css
body {
  font-feature-settings: "clig", "liga";
}
```

## 4. Component Stylings

### Buttons

**Light / Invert**
- Background: `#ffffff` `{colors.ink-muted}`
- Text: `#3d4f58`
- Padding: 1px 6px 1px 0px
- Radius: 4px
- Border: 1px solid rgb(184, 196, 194)
- Font: 13.3333px weight 300
- Use: Bright CTA on dark sections

**Dark / Solid**
- Background: `#001e2b` `{colors.surface-1}`
- Text: `#ffffff` `{colors.ink-muted}`
- Padding: 14px
- Radius: 4px
- Border: 1px solid rgb(255, 255, 255)
- Font: 16px weight 500
- Use: Solid dark CTA

**Primary Brand**
- Background: `#00ed64` `{colors.primary}`
- Text: `#001e2b` `{colors.surface-1}`
- Padding: 15px 24px
- Radius: 4px
- Border: 1px solid rgb(0, 30, 43)
- Font: 16px weight 500
- Use: Primary CTA / brand action

### Cards & Containers

**Standard Card**
- Background: `#061621` `{colors.canvas}`
- Padding: 0px
- Radius: 16px
- Shadow: `rgba(0, 0, 0, 0.13) 0px 7px 12px 0px`
- Use: Content containers, listing items

### Inputs & Forms

**Text Input**
- Background: `#ffffff` `{colors.ink-muted}`
- Text: `#21313c` `{colors.surface-2}`
- Padding: 15px
- Radius: 4px
- Border: 1px solid rgb(184, 196, 194)
- Font: 16px weight 300
- Use: Text fields, search inputs

### Search Bar

**Search Bar**
- Background: `transparent`
- Text: `#000000`
- Padding: 0px 24px 0px 16px
- Radius: 0px
- Font: 16px weight 300
- Use: Inline search form

### CTA Banners

**Full-width CTA**
- Background: `#00ed64` `{colors.primary}`
- Text: `#001e2b` `{colors.surface-1}`
- Padding: 0px
- Radius: 4px
- Font: 16px weight 500
- Use: Full-width conversion strip with headline + button

### Tabs

**Pill Tab**
- Background: `rgba(255, 255, 255, 0.4)` `{colors.ink-muted}`
- Text: `#ffffff` `{colors.ink-muted}`
- Padding: 2px
- Radius: 10px
- Border: 1px solid rgba(255, 255, 255, 0.3)
- Font: 14px weight 400
- Use: Navigation tabs, filter tabs

**Ghost Tab**
- Background: `transparent`
- Text: `#ffffff` `{colors.ink-muted}`
- Padding: 7px 20px
- Radius: 8px 0px 0px 8px
- Font: 14px weight 500
- Use: Navigation tabs, filter tabs


## 4b. Component Behaviors (State Matrix)

### Interaction State Narrative


*State transitions extracted via Playwright simulation — exact values in the YAML matrix below.*

```yaml
component-behaviors:
  button:
    default:
      bg: "rgb(255, 255, 255)"
      fg: "rgb(61, 79, 88)"
      border: "1px solid rgb(184, 196, 194)"
  input:
    default:
      bg: "rgb(255, 255, 255)"
      fg: "rgb(33, 49, 60)"
      border: "1px solid rgb(184, 196, 194)"
  link:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(0, 0, 238)"
  card:
    default:
      bg: "rgb(6, 22, 33)"
      fg: "rgb(255, 255, 255)"
      shadow: "rgba(0, 0, 0, 0.13) 0px 7px 12px 0px"
  navLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(0, 0, 238)"
  tab:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(255, 255, 255)"
  footerLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(0, 0, 238)"
```

**Agent usage**: Validate generated components against this matrix. If your output's `:hover` state changes properties not listed here, you are off-brand.


## 4c. Component Vocabulary (Closed System)

*This brand uses ONLY the following component vocabulary. Introducing new variants without justification breaks the system's tonal coherence.*

### Buttons
- **3 shape(s)** in this system: `Light / Invert`, `Dark / Solid`, `Primary Brand`
- **DO NOT introduce new buttons variants** without justification

### Cards & Containers
- **1 shape(s)** in this system: `Standard Card`
- **DO NOT introduce new cards & containers variants** without justification

### Inputs & Forms
- **1 shape(s)** in this system: `Text Input`
- **DO NOT introduce new inputs & forms variants** without justification

### Search Bar
- **1 shape(s)** in this system: `Search Bar`
- **DO NOT introduce new search bar variants** without justification

### CTA Banners
- **1 shape(s)** in this system: `Full-width CTA`
- **DO NOT introduce new cta banners variants** without justification

### Tabs
- **2 shape(s)** in this system: `Pill Tab`, `Ghost Tab`
- **DO NOT introduce new tabs variants** without justification

## 5. Layout Principles

### Layout Type
**top-nav + content**

### Grid
Single column, centered content

### Max Width
1200px

### Spacing System
Compact spacing — information density prioritized

| Token | Value |
|-------|-------|
| xxs | 2px |
| xs | 6px |
| sm | 15px |
| md | 18px |
| base | 21px |
| lg | 24px |
| xl | 28px |
| 2xl | 48px |
| 3xl | 64px |

### Border Radius Scale
| Name | Value | Use |
|------|-------|-----|
| None | 0px | No rounding |
| Xs | 4px | Tiny corners (badges, micro elements) |
| Sm | 8px | Buttons, inputs, small elements |
| Md | 16px | Cards, containers |
| Lg | 24px | Large rounded elements, pill segments |
| Xl | 30px | Category strips, featured containers |
| Full | 999px | Pills, avatars, circular elements |

### Shape Language

| Component | Border Radius |
|-----------|---------------|
| Buttons | `4px` |
| Cards & Containers | `16px` |
| Inputs & Forms | `4px` |
| Search Bar | `0px` |
| CTA Banners | `4px` |
| Tabs | `10px` |
| Page Body | `0px` |
| Navigation | `0px` |
| Primary Input | `4px` |

**Shape Personality**: Generously Rounded — Soft, friendly corners (8px+). Approachable, consumer-facing feel.

**Full Radius Spectrum**: 0px, 2px, 4px, 8px, 10px, 16px, 24px, 25px (from `allBorderRadii` scan)


## 5b. Spacing Rhythm Names

**Measured section padding**: bands use ~56px internal vertical padding (up to 68px) — **standard**. (Distinct from the gap *between* sections above.) Reproduce this generous vertical breathing room; cramped spacing is the #1 tell of a cheap clone.

*Named spacing tokens with explicit use cases. Use these names in YOUR code instead of raw pixels for consistency.*

| Name | Value | Use case |
|------|-------|----------|
| **hero** | `64px` | Top/bottom of full-bleed hero sections |
| **section** | `28px` | Between major bands (color change, content shift) |
| **subsection** | `24px` | Within a section, between content groups |
| **card** | `18px` | Card padding, list-item spacing |
| **compact** | `15px` | Form fields, tight clusters, badge padding |
| **micro** | `6px` | Icon-text gap, tag inner padding |

**Agent rule**: NEVER hardcode raw pixel values for spacing in generated UI. Always reference these named tokens (`spacing-rhythm.section`, etc.).

## 5c. Widget & Structure Library

Structural patterns extracted from the page DOM — these are the **blueprints** an agent should follow to reproduce the page architecture (not just CSS values).

**4/8 structural patterns detected.**

### Hero Pattern

- **Composition:** centered — Centered composition — heading + subheading + CTAs stacked vertically, content centered horizontally. Common for SaaS marketing pages.
- **Viewport coverage:** 144px tall (not full-viewport)
- **Heading:** "One data platform.Unlimited AI potential." — 64px center-aligned
- **CTAs:** none detected in hero (unusual — agent should verify)
- **Clone instruction:** Reproduce the **centered** layout. Use the heading font-size token at the documented size. Pair the centered text with the hero’s decorative visual (gradient / SVG / hero image — see §9b), not bare text.

### Navigation Pattern

- **Position:** static (scrolls with page)
- **Layout:** unknown — Layout not classified
- **Height:** 95px
- **Logo:** ✓ present
- **Nav links:** 4 primary items
- **CTAs in nav:** 0 (no buttons — links only)
- **Clone instruction:** Build a static unknown navigation. Link-only — no button styling needed.

### Card Grid Pattern

- **Card count:** 13 cards detected
- **Columns (desktop):** 1-up grid
- **Card dimensions:** 1440×760px (aspect 1.9:1)
- **Gap:** 638px between cards
- **Content:** ✓ image + CTA
- **Image position:** top
- **Clone instruction:** Build a 1-column grid (desktop) with cards at ~1.9:1 aspect ratio. Each card has an image at the top.

### Footer Pattern

- **Columns:** 1
- **Links:** 26 total
- **Height:** 620px
- **Includes:** ✗ no newsletter | ✓ social icons | ✓ language switcher ✓ copyright
- **Clone instruction:** Build a 1-column footer with ~26 links per column, social media links, and a copyright line.

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page background, content blocks |
| Layered (Level 1) | <br>`rgba(0, 0, 0, 0.15) 0px 3px 9px 0px` | Cards, elevated surfaces |
| Layered (Level 2) | <br>`rgba(0, 0, 0, 0.15) 0px 3px 20px 0px` | Cards, elevated surfaces |
| Layered (Level 3) | <br>`rgba(0, 0, 0, 0.13) 0px 7px 12px 0px` | Cards, elevated surfaces |
| Layered (Level 4) | <br>`rgba(0, 0, 0, 0.13) 0px 7px 13px 0px` | Cards, elevated surfaces |

**Shadow Philosophy**: Multi-layered shadow system creating natural, atmospheric depth. Each shadow level combines multiple layers for realistic elevation.

## 7. Motion & Interaction

### Dominant Easing Curves

| Curve | Semantic Name |
|-------|---------------|
| `ease` | CSS ease — Default |
| `ease-in` | Ease In — Accelerating |
| `ease-in-out` | Ease In-Out — Symmetric |

### Duration Scale

| Value | Tier | Typical Use |
|-------|------|-------------|
| `150ms` | Fast | Hover states, micro-interactions |
| `200ms` | Normal | Panel open/close, navigation |
| `250ms` | Normal | Panel open/close, navigation |
| `300ms` | Normal | Panel open/close, navigation |
| `850ms` | Cinematic | Splash, marketing reveals |

### Copy-Paste Transition Snippets

**Opacity**
```css
transition: opacity 0.3s;
```

**All Props**
```css
transition: 0.85s ease-in-out;
```

**Background**
```css
transition: background-color 0.3s;
```

**Opacity**
```css
transition: opacity 0.25s;
```

### Keyframe Animation Catalog

| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `animation-1relhzy` | Rotate / Spin | transform | UI transition |
| `animation-bkodse` | Custom | content | UI transition |
| `fadeUp` | Fade + Move | opacity, transform | UI transition |
| `fadeIn` | Fade | opacity | Element entrance |
| `shimmer` | Custom | background-position-x, background-position-y | Loading placeholder |
| `fadeInLeft` | Fade + Move | opacity, transform | Element entrance |
| `fadeInRight` | Fade + Move | opacity, transform | Element entrance |
| `fadeInAnimation` | Fade | opacity | Element entrance |
| `fade-in-down` | Fade + Move | opacity, transform | Element entrance |
| `fade-in-up` | Fade + Move | opacity, transform | Element entrance |
| `scroll-x` | Slide | transform | UI transition |
| `fade-out` | Fade | opacity | Element exit |
| `fade-in` | Fade | opacity | Element entrance |
| `progress-bar` | Custom | width | UI transition |
| `fade-in-left` | Fade + Move | opacity, transform | Element entrance |
| `fade-in-right` | Fade + Move | opacity, transform | Element entrance |
| `color` | Color Pulse | color | UI transition |
| `runTitle` | Custom | left | UI transition |
| `runLink` | Custom | left | UI transition |
| `animation-1w559i1` | Fade | opacity | UI transition |

> *4 additional animations omitted (repetitive variants). See raw keyframes in `raw-css.json`.*

### Motion Fingerprint

- **Speed Character**: Balanced Pacing (median duration: `250ms`)
- **Dominant Easing**: custom cubic-bezier curves
- **Animation Library**: 24 unique animations (24 total including variants)

> This design moves with balanced pacing timing using custom cubic-bezier curves, creating a UI that feels natural and fluid.

## 8. Do's and Don'ts

### Do
- Use dark background (`#061621`) as the foundation — this is a dark-mode-native design
- Keep font weights between 300-500 — the system uses a narrow weight range for subtle hierarchy
- Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
- Use full-pill radius (9999px) only for specific elements (avatars, pills, toggles)
- Use #00ed64 (`#00ed64`) as the primary accent — it's the brand's signature interactive color
- Use small 4px radius for buttons — this design system uses subtle rounding, not pill shapes
- Use 16px border-radius on cards — consistent with the grid card corners
- Style form inputs with a `1px solid rgb(184, 196, 194)` border — use border-based inputs, not floating labels or underline-only
- Maintain nav height at 95px — consistent vertical space for the navigation bar
- Each card includes a top image — imagery is part of the card identity, not optional

### Don't
- Don't use light backgrounds — the dark canvas is the native medium
- Don't use weight 700 (bold) or above — 500 is the maximum weight in this system
- Don't invent new shadow values — use only the extracted shadow levels
- Don't apply pill radius on rectangular buttons or cards — it's reserved for specific interactive elements
- Don't introduce additional saturated accent colors — the palette is intentionally controlled
- Don't over-round buttons with pill or large radius — the system uses restrained, sharp-ish corners
- Don't remove the input border — the border is the primary affordance indicator for form fields
- Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence
- Don't make the nav sticky — this design lets it scroll away to maximize content focus
- Don't put a CTA button in the nav — this design uses links only at the top


## 7b. Enforceable Brand Rules

*Structured Do/Don't with reasoning and validation tests. Agents can programmatically verify generated UI.*

```yaml
rules:
  - id: brand-canvas-001
    type: do
    rule: "Always use the page background `rgb(6, 22, 33)` as the base canvas"
    why: "Every component is designed to composit against this exact tone"
    test: "document.body.style.backgroundColor === 'rgb(6, 22, 33)'"
  - id: brand-accent-001
    type: do
    rule: "Reserve `rgb(0, 237, 100)` for primary CTAs and brand-mark signals only"
    why: "Single chromatic assertion device — overuse dilutes meaning"
    test: "querySelectorAll('[style*=\"rgb(0, 237, 100)\"]').length <= 3 per fold"
```

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | 400px | Single column, compact spacing |
| Mobile | 460px | Single column, compact spacing |
| Mobile Large | 640px | Expanded mobile layout |
| Mobile Large | 767px | Expanded mobile layout |
| Tablet | 1000px | Multi-column grids begin |
| Desktop | 1280px | Full feature layout |
| Large Desktop | 1440px | Maximum content width |

### Token Diff — Desktop vs Mobile

| Element | Property | Desktop | Mobile |
|---------|----------|---------|--------|
| heading | font-size | `64px` | `40px` |
| heading | line-height | `72px` | `56px` |
| nav | height | `95px` | `56px` |

### Collapsing Strategy
- Headlines: 64px → 40px on mobile
- Navigation: horizontal links → hamburger menu on mobile
- Cards: multi-column → stacked vertical on mobile
- Footer: multi-column → stacked single column on mobile

### Touch Targets
- Buttons: 1px 6px 1px 0px padding
- Navigation: adequate spacing between items
- Interactive elements: minimum 44px touch target recommended

### Collapsing Narrative

How the structural patterns adapt from desktop to mobile (extracted from both viewport extractions):

- **Navigation collapses to hamburger** — 4 links visible on desktop, 0 on mobile (the rest hide behind a menu toggle).


## 7c. Visual Effects & Dynamic Behavior

*The live/dynamic layer beyond static CSS — reproduce these, not flat substitutes. This is often what separates a faithful clone from a wireframe.*

- **Canvas / 2D rendering** — animated/interactive canvas (charts, graphs, particle fields). Reproduce as live data-viz (e.g. an animated SVG/Canvas line chart), NOT a static image.
- **Glassmorphism** — 1 frosted/blur layer(s) (e.g. `blur(15px)`).
- **Clip-path shapes** — 8 non-rectangular cut(s).

> **Motion fingerprint**: Canvas 2D, glassmorphism (1 layers), non-rectangular shapes (10)

## 9b. Visual Tone & Photography

**Tone:** Mixed photography + illustration

A balanced mix of photographic content and vector graphics. Photos likely carry product/lifestyle context while SVG handles icons, logos, and decorative accents.

**Canonical Brand Image (OG):**
- https://images.contentstack.io/v3/assets/blt7151619cb9560896/bltfe3bee7877352896/Meta_Generic.png
  *This is the image shown when the site is shared on social media — represents the brand visual essence.*

**Hero Image (above-fold dominant visual):**
- Aspect: 2.66:1 (ultra-wide cinematic)
- Rendered size: 1060×399px
- *Use this aspect ratio + composition for your clone's hero — mimicking the proportion preserves the visual hierarchy.*

**Aspect Ratio Distribution:**
- Landscape (1.15–2.3): 2 (33%)
- Portrait (<0.87): 0 (0%)
- Square (0.87–1.15): 0 (0%)
- Ultra-wide (>2.3): 4 (67%)

**Media Format Mix:**
- PNG: 5 (logos, transparent UI elements, mockups)
- SVG: 3 (icons, illustrations, decorative geometry)

**Average rendered image size:** 338×151px
**Above-fold image count:** 0 / 6

**Decorative Patterns Detected:**
- 2 multi-stop linear gradients (mesh-like, 3+ color stops) — the brand leans on rich color transitions for visual depth
- 2 large decorative SVG shapes (≥200×200px, non-icon) — likely blob/illustration accents
- 2 background patterns (non-photo url() backgrounds) — textures/illustrations as backdrops
- **Glassmorphism** detected (`backdrop-filter: blur`) — layered transparent surfaces with blur, modern OS-like aesthetic

**Clone instruction for decorative work:** Glassmorphism is a brand signature — use `backdrop-filter: blur(20px)` on overlapping surfaces.

**Imagery Guidance for clones:**
- Mix photography and illustration intentionally: photos for product/context, vectors for icons + decorative accents.
- Respect the format split — replacing JPGs with illustrations (or vice versa) will shift the brand tone.

## 10. Agent Prompt Guide

### Quick Reference
- Background: Deep Navy (`#061621`)
- Primary text: Pure White (`#ffffff`)
- Accent: #00ed64 (`#00ed64`)
- Border: Dim Gray (`#5d6c74`)
- Font: Akzidenz-Grotesk Std
- Body: 16px weight 400

### Example Component Prompts
- "Create a hero section on Deep Navy background (#061621). Headline at 64px Akzidenz-Grotesk Std weight 400, line-height 1.13, color #ffffff."
- "Create the primary CTA button: `#00ed64` background, `#001e2b` text, 4px border-radius, 15px 24px padding, 500 weight, Akzidenz-Grotesk Std font."
- "Design a card on `#061621` background. Border: none. Radius: 16px. Shadow: use extracted shadow. Padding: 0px."
- "Build navigation: relative on `#061621`. Akzidenz-Grotesk Std 16px weight 400 for links."

### Iteration Guide
1. **Canvas**: Set the dark canvas to Deep Navy (`#061621`) — every component is composited against this exact base.
2. **Typography**: All type in Akzidenz-Grotesk Std, weight range 300–500. Never exceed 500 — heavier weights break the brand's tonal restraint.
3. **Accent**: #00ed64 (`#00ed64`) is the sole interactive color. On hover → #00684a (`#00684a`). Use CSS transitions, not opacity/brightness filters.
4. **Shape**: CTAs at `4px`, cards at `16px`. Apply border-radius from the extracted scale only — don't invent intermediate values.
5. **Spacing**: Use the `--ca-space-*` token scale (6px–28px). All padding, margin, and gap values are multiples from this scale — no magic numbers.
6. **Tokens**: Import from §11 CSS Export (`--ca-*` vars). Never hardcode hex values — always reference a token so theming remains consistent.

## 11. CSS Design Tokens Raw Export

*Copy-paste ready `:root {}` block — all values extracted directly from the live site.*

```css
/* Colors */
:root {
  --ca-canvas: #061621;
  --ca-surface-1: #001e2b;
  --ca-surface-2: #21313c;
  --ca-ink-muted: #ffffff;
  --ca-ink-subtle: #b8c4c2;
  --ca-primary: #00ed64;
  --ca-on-primary: #111111;
  --ca-primary-hover: #00684a;
  --ca-hairline: #5d6c74;
}

/* Typography */
:root {
  --ca-font-primary: "MongoDB Value Serif", system-ui, sans-serif;
  --ca-text-display: 64px;
  --ca-text-body: 12px;
  --ca-text-small: 14px;
  --ca-text-button: 16px;
  --ca-text-mono: 16px;
}

/* Spacing & Radius */
:root {
  --ca-space-xxs: 2px;
  --ca-space-xs: 6px;
  --ca-space-sm: 15px;
  --ca-space-md: 18px;
  --ca-space-base: 21px;
  --ca-space-lg: 24px;
  --ca-space-xl: 28px;
  --ca-space-2xl: 48px;
  --ca-space-3xl: 64px;
  --ca-radius-none: 0px;
  --ca-radius-xs: 4px;
  --ca-radius-sm: 8px;
  --ca-radius-md: 16px;
  --ca-radius-lg: 24px;
  --ca-radius-xl: 30px;
  --ca-radius-full: 999px;
}
```


## 13. Page Structure Skeleton

*The actual layout the source site uses. Reproduce these sections in order to match the site structure.*

```yaml
page-skeleton:
  - section: hero
    tag: div
    classes: ["expReady"]
    height: 5937px
    width: full-bleed
    layout: block
    children: 2
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
  - section: feature-section
    tag: main
    height: 5937px
    width: full-bleed
    layout: block
    children: 5
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
  - section: logo-strip
    tag: div
    classes: ["sticky", "top-inc00", "z-[9999]", "w-full"]
    height: 95px
    width: full-bleed
    layout: block
    children: 1
  - section: navigation
    tag: nav
    height: 95px
    width: full-bleed
    layout: block
    children: 2
  - section: unknown
    tag: div
    classes: ["helper-section-item"]
    height: 173px
    width: 208px
    layout: flex-column justify=center
    children: 3
    padding: "24px 24px 18px"
  - section: unknown
    tag: div
    classes: ["helper-section-item"]
    height: 157px
    width: 208px
    layout: flex-column justify=center
    children: 3
    padding: "24px 24px 18px"
  - section: unknown
    tag: div
    classes: ["helper-section-item"]
    height: 139px
    width: 208px
    layout: flex-column justify=center
    children: 3
    padding: "24px 24px 18px"
  - section: hero
    tag: div
    classes: ["relative", "overflow-hidden"]
    height: 1383px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgb(0, 30, 43)"
    tone: dark
    vertical-padding: ~40px
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
  - section: feature-section
    tag: div
    classes: ["p13n-hp-hero"]
    height: 1383px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgb(6, 22, 33)"
    tone: dark
    vertical-padding: ~40px
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
    padding: "40px"
  - section: unknown
    tag: div
    classes: ["hero-bg"]
    height: 1383px
    width: full-bleed
    layout: block
    children: 1
    bg-treatment: image
  - section: unknown
    tag: div
    classes: ["helper-section-item"]
    height: 139px
    width: 208px
    layout: flex-column justify=center
    children: 3
    vertical-padding: ~24px
    padding: "24px"
  - section: feature-section
    tag: div
    height: 520px
    width: 1360px
    layout: flex-column justify=normal
    children: 2
  - section: unknown
    tag: div
    classes: ["helper-section-item"]
    height: 157px
    width: 208px
    layout: flex-column justify=center
    children: 3
    padding: "24px 24px 18px"
  - section: unknown
    tag: div
    classes: ["helper-section-item"]
    height: 173px
    width: 208px
    layout: flex-column justify=center
    children: 3
    padding: "24px 24px 18px"
  - section: testimonials
    tag: div
    classes: ["hero-animate", "is-enter"]
    height: 484px
    width: 669px
    layout: flex-column justify=normal
    children: 4
  - section: unknown
    tag: div
    classes: ["helper-section-item"]
    height: 157px
    width: 208px
    layout: flex-column justify=center
    children: 3
    vertical-padding: ~24px
    padding: "24px"
  - section: unknown
    tag: div
    classes: ["helper-section-item"]
    height: 173px
    width: 208px
    layout: flex-column justify=center
    children: 3
    vertical-padding: ~24px
    padding: "24px"
  - section: unknown
    tag: div
    classes: ["hero-description"]
    height: 120px
    width: 581px
    layout: block
    children: 1
  - section: unknown
    tag: div
    height: 469px
    width: 1360px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["spotlight-content-wrapper"]
    height: 399px
    width: 1060px
    layout: flex-row justify=center
    children: 1
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
  - section: unknown
    tag: div
    classes: ["spotlight-rive-wrapper"]
    height: 399px
    width: 1060px
    layout: block
    children: 2
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
  - section: content-section
    tag: div
    height: 843px
    width: full-bleed
    layout: block
    children: 2
    vertical-padding: ~68px (generous)
  - section: content-section
    tag: div
    height: 843px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgb(0, 30, 43)"
    tone: dark
    vertical-padding: ~68px (generous)
    padding: "80px 0px 55px"
  - section: content-section
    tag: div
    classes: ["ddp-section-bg"]
    height: 708px
    width: full-bleed
    layout: block
    children: 1
  - section: content-section
    tag: div
    height: 708px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgb(0, 30, 43)"
    tone: dark
    padding: "0px 48px"
```

**Agent rule**: rebuild sections in this order (sorted by vertical position). Match the layout primitive (grid N-col / flex direction / block).


## 14. Copy Library (Real Content from Source)

*Actual text content extracted from the live page. Use these strings verbatim when reproducing the site — they carry the brand voice.*

```yaml
copy:
  section-headings:
    - "Loved by builders, trusted by enterprises"
    - "Deploy Your Way"
    - "MongoDB Atlas"
    - "MongoDB Community Edition"
    - "MongoDB Enterprise Advanced"
  ctas:
    - "Products"
    - "Eng"
    - "Get Started"
    - "Builder"
    - "Business Leader"
    - "MongoDB 8.3: Now with the best price-performance"
  navigation:
    - "Pricing"
    - "Support"
    - "Sign In"
    - "Get Started"
  footer-links:
    - "Careers"
```

**Agent rule**: reuse these exact strings when generating UI. Do NOT translate or rephrase — brand voice is preserved through the original wording.


## 15. Asset Inventory (Image Roles & Ratios)

*Image inventory classified by role and aspect ratio. When reproducing the site, allocate this number of assets per role.*

```yaml
assets:
  logo:
    count: 14
    avg-ratio: 3.70
    common-aspect: "~16:6 banner"
    sample-alts:
      - "MongoDB logo"
  hero:
    count: 1
    avg-ratio: 2.66
    common-aspect: "~16:6 banner"
  thumbnail:
    count: 19
    avg-ratio: 1.00
    common-aspect: "~1:1 square"
    sample-alts:
      - "search icon"
      - "atlas_product_family"
      - "atlas_database"
  icon:
    count: 5
    avg-ratio: 0.65
    common-aspect: "~9:16 portrait"
    sample-alts:
      - "general_action_read"
```

**Agent rule**: when generating placeholder images, match these counts and aspect ratios. Use neutral placeholder backgrounds for `product` (e.g. `#f5f5f5`), full-color photography hints for `hero` and `editorial`.


## 16. Component HTML Templates

*Suggested HTML markup for reproducing the key components — based on what was detected in the source DOM.*

### Button (primary action)
```html
<button class="btn btn-primary">
  Action
</button>
```
_Source pattern detected: padding `1px 6px 1px 0px` · radius `4px` · weight `300`_

### Generic Card
```html
<div class="card">
  <!-- content -->
</div>
```
_Source pattern detected: padding `0px` · radius `16px` · shadow `rgba(0, 0, 0, 0.13) 0px 7px 12px 0px`_

**Agent rule**: use these markup skeletons as the structural baseline. Apply tokens from §2-3 for visual styling.


## 17. Content Architecture & Resources (Links by Purpose)

*The page's links classified by purpose — the information architecture to reproduce. Categories, featured images, devices and projects are extracted from the rendered DOM, not guessed.*

**By purpose:** **nav** 2 · **cta** 1 · **auth** 1 · **product** 13 · **pricing** 1 · **docs** 5 · **social** 1 · **legal** 2 · **footer** 14 · **other** 20

**Primary actions (conversion path):**
- Account access — "Sign In" (login/signup) → `https://account.mongodb.com/account/login`
- Primary call-to-action — "Get Started" (the conversion path) → `https://www.mongodb.com/cloud/atlas/register`

**Projects / case studies detected** (clustered by URL + featured image):

*Ecosystem* — medium confidence, 10 items:

| Title | Featured image | Link |
|---|---|---|
| confluent logo | `kzpulv998d4x9q545-logo-confluent.svg` (ar 6.17) | https://cloud.mongodb.com/ecosystem/confluent |
| databricks logo | `databricks.svg` (ar 6.52) | https://cloud.mongodb.com/ecosystem/databricks |
| Hashicorp logo | `HashiCorp_PrimaryLogo_Black_RGB.svg` (ar 4.29) | https://cloud.mongodb.com/ecosystem/hashicorp |
| TCS logo | `TCS.svg` (ar 3.6) | https://cloud.mongodb.com/ecosystem/tcs-experiential-digital-commerce-platform |
| Tech Mahindra logo | `TechM_Logo_1.svg` (ar 3.62) | https://cloud.mongodb.com/ecosystem/tech-mahindra |
| Datadog logo | `Datadog_-_horizontal_color_logo.svg` (ar 3.94) | https://cloud.mongodb.com/ecosystem/datadog |
| Cohere logo | `cohere.svg` (ar 6) | https://cloud.mongodb.com/ecosystem/cohere |
| LangChain logo | `LangChain-logo.svg` (ar 5.54) | https://cloud.mongodb.com/ecosystem/langchain |

*Products* — medium confidence, 8 items:

| Title | Featured image | Link |
|---|---|---|
| MongoDB 8.3: Now with the best price-perform | — | https://www.mongodb.com/products/updates/mongodb-8-3/ |
| AWS logo | `lgwpl72akptbke7gp-AWS_logo_RGB.svg` (ar 1.67) | https://www.mongodb.com/products/platform/atlas-cloud-providers/aws |
| Google Cloud logo | `google_cloud.svg` (ar 4.65) | https://www.mongodb.com/products/platform/atlas-cloud-providers/google-cloud |
| Microsoft azure logo | `Microsoft-Azure-Logo.png` (ar 5.99) | https://www.mongodb.com/products/platform/atlas-cloud-providers/azure |
| Learn More | — | https://www.mongodb.com/products/platform/atlas-database |
| Learn More | — | https://www.mongodb.com/products/platform/atlas-vector-search |
| Trust Center | — | https://www.mongodb.com/products/platform/trust |
| Product Updates | — | https://www.mongodb.com/products/updates/ |

*Solutions* — medium confidence, 5 items:

| Title | Featured image | Link |
|---|---|---|
| Case Study | `mjitnsb5c6dvgfxoa-Fireworks.svg?auto` (ar 9) | https://www.mongodb.com/solutions/customer-case-studies/fireworks-ai |
| Case Study | `mfe3zm6fqtnmg53st-Coinbase_Wordmark_` (ar 5.56) | https://www.mongodb.com/solutions/customer-case-studies/coinbase |
| View all customer stories | `Victoria_s-Secret-VS&Co-Logo_Primary` (ar 3.03) | https://www.mongodb.com/solutions/customer-case-studies |
| Read Case Study | `Victoria_s-Secret-VS&Co-Logo_Primary` (ar 3.03) | https://www.mongodb.com/solutions/customer-case-studies/victorias-secret?tck=hp_case_study |
| MongoDB for Retail | `Victoria_s-Secret-VS&Co-Logo_Primary` (ar 3.03) | https://www.mongodb.com/solutions/industries/retail?tck=hp_case_study |

**Signals:** 26/60 links carry a featured image · device mockups detected: laptop ×1 · dominant link roles: footer-link (19), logo-link (15), content-card (12).


---
## Extraction Completeness: 84/100 (B)

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 24 | 25 | 17 named colors |
| Typography | 20 | 20 | 11 roles defined |
| Components | 20 | 20 | 6 specs extracted |
| Motion & Interaction | 12 | 15 | Keyframes |
| CSS Custom Properties | 3 | 10 | 66 vars |
| Responsive Breakpoints | 5 | 5 | 7 breakpoints |
| Variable Fonts | 0 | 5 | None detected |

## 12. Known Gaps & Confidence

Explicit list of what this extraction could NOT capture. Agents should not invent values for these — either skip the feature or use the documented baseline + heuristic fallback.

| Category | What's missing | Fallback strategy |
|----------|----------------|-------------------|
| **Dark mode** | Dark surface is the canonical medium; no separate light-mode variables detected | The dark canvas IS the design — reproduce it as the default. Do not generate a light-mode variant unless explicitly requested |

### Per-section confidence

| Section | Confidence | Reason |
|---------|------------|--------|
| §1 Visual Theme | High | Body bg extracted via getComputedStyle() |
| §2 Colors | High | 66 CSS vars (semantic naming requires ≥20 for high) |
| §3 Typography | High | 11 typography roles inferred |
| §4 Components | High | 6 component variants captured |
| §7 Motion | High | Keyframes + transitions |
| §8 Do's/Don'ts | High | 20 rules generated; design-decisions.json has evidence per rule |
| §9 Responsive | High | 7 breakpoints detected |
| §9b Photography | High | 6 images, hero present |

## 11.1 CSS Implementation Guide (CSS Interception Engine v2.15+)

*Ready-to-use CSS from Prism's CSS Interception Engine — intercepted directly from the site's CSS files (bypasses CORS). Copy-paste into your `<style>` block.*

### Keyframe Animations (Intercepted from CSS)

**10 @keyframes found** — these are the real animation definitions:

```
@keyframes fadeInAnimation { ... }
@keyframes fade-in-down { ... }
@keyframes fade-in-up { ... }
@keyframes scroll-x { ... }
@keyframes fade-out { ... }
@keyframes fade-in { ... }
@keyframes progress-bar { ... }
@keyframes fade-in-left { ... }
@keyframes fade-in-right { ... }
@keyframes onetrust-fade-in { ... }
```

<details><summary>Full keyframes CSS (10 animations)</summary>

```css
@keyframes fadeInAnimation{0%{opacity:0}
@keyframes fade-in-down{0%{opacity:0;transform:translateY(-50px)}
@keyframes fade-in-up{0%{opacity:0;transform:translateY(50px)}
@keyframes scroll-x{0%{transform:translateX(0)}
@keyframes fade-out{0%{opacity:1}
@keyframes fade-in{0%{opacity:0}
@keyframes progress-bar{0%{width:0}
@keyframes fade-in-left{0%{opacity:0;transform:translateX(-50px)}
@keyframes fade-in-right{0%{opacity:0;transform:translateX(50px)}
@keyframes onetrust-fade-in{0%{opacity:0}100%{opacity:1}}
```
</details>

### Hover State CSS (Intercepted)

**2 hover rule lines** captured from CSS files. Key interactive transitions from real CSS (not inferred):

```css
.scrollbar::-webkit-scrollbar-track:hover{background-color:var(--scrollbar-track-hover,var(--scrollbar-track))}

.scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover,var(--scrollbar-thumb))}

.scrollbar::-webkit-scrollbar-corner:hover{background-color:var(--scrollbar-corner-hover,var(--scrollbar-corner))}

.scrollbar-thin::-webkit-scrollbar-track:hover{background-color:var(--scrollbar-track-hover,var(--scrollbar-track))}

.scrollbar-thin::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover,var(--scrollbar-thumb))}

.scrollbar-thin::-webkit-scrollbar-corner:hover{background-color:var(--scrollbar-corner-hover,var(--scrollbar-corner))}

.group:hover .group-hover\:bg-blue60{--tw-bg-opacity:1;background-color:rgb(0 108 250/var(--tw-bg-opacity,1))}

.group:hover .group-hover\:bg-container-light{--tw-bg-opacity:1;background-color:rgb(245 247 250/var(--tw-bg-opacity,1))}

.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

.hover\:bg-container:hover{--tw-bg-opacity:1;background-color:rgb(250 251 252/var(--tw-bg-opacity,1))}

.hover\:bg-inverse-body:hover{--tw-bg-opacity:1;background-color:rgb(0 30 43/var(--tw-bg-opacity,1))}

.hover\:\!text-green50:hover{--tw-text-opacity:1!important;color:rgb(0 170 87/var(--tw-text-opacity,1))!important}

.hover\:text-on-bg:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}

.hover\:text-primary:hover{--tw-text-opacity:1;color:rgb(0 30 43/var(--tw-text-opacity,1))}

.hover\:shadow-level-4:hover{--tw-shadow:0px 6px 30px 0px rgba(0,0,0,.15);--tw-shadow-colored:0px 6px 30px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}

.hover\:grayscale-0:hover{--tw-grayscale:grayscale(0);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}

.hover\:pause:hover{animation-play-state:paused}
```

> **Note**: All values above are extracted from the live site's CSS files. The font files are saved locally by Prism and embedded in the output HTML. Use them as-is for maximum fidelity.

## 11.2 Measured Reality (CDP Engine)

Captured directly from Chrome's engine across **all 3285 rendered nodes** — not a sample. These are the values the page *actually paints*, weighted by how often they appear.

### Real Responsive Breakpoints
**41 breakpoints** read from the live `@media` rules (not guessed) — 14 most relevant:
`400px` · `426px` · `460px` · `500px` · `530px` · `550px` · `767px` · `768px` · `812px` · `813px` · `820px` · `844px` · `896px` · `1000px` … (+27 more)

### Measured Design Scale
**Type scale by usage** (× = paint count): `16px`×2885 · `14px`×162 · `12px`×108 · `13.3333px`×54 · `18px`×18 · `36px`×10 · `24px`×10 · `64px`×9

**Radius scale** (× = paint count): `8px`×45 · `16px`×34 · `4px`×15 · `100%`×10 · `2px`×10 · `50%`×8 · `999px`×7 · `10px`×4

**Weights** (× = paint count): `400`×2576 · `500`×470 · `300`×203 · `600`×21 · `700`×7

**Layout gaps** (× = paint count): `8px`×17 · `24px`×11 · `16px`×1 · `40px`×1 · `64px`×1 · `56px`×1 · `20px`×1

**Elevation (real shadows)**:
```css
rgba(0, 0, 0, 0.15) 0px 3px 9px 0px
rgba(0, 30, 43, 0.12) 0px 26px 44px 0px, rgba(0, 0, 0, 0.13) 0px 7px 13px 0px
rgba(0, 0, 0, 0.15) 0px 3px 20px 0px
rgba(0, 0, 0, 0.13) 0px 7px 12px 0px
```

### Provenance — measured styles on key elements
Read from the live CSSOM (includes runtime-injected CSS). This is *what actually styles the page*, by element:

```css
h1 { font-family:MongoDB Value Serif; font-size:96px; font-weight:400 }
@media screen and (max-width: 1511px) h1 { font-size:64px }
h2 { font-family:Euclid Circular A; font-size:24px; font-weight:500 }
@media screen and (min-width: 1024px) h2 { font-size:36px }
button { border-radius:4px; font-weight:300; background-color:#ffffff; color:#3d4f58 }
input { background-color:#ffffff; color:#21313c }
input { font-size:16px; font-family:Akzidenz-Grotesk Std,Noto Sans KR,Noto Sans SC,Noto Sans JP; font-weight:300; border-radius:4px }
card { background-color:#061621; color:white; border-radius:16px; box-shadow:0px 7px 12px rgba(0, 0, 0, 0.13) }
```

> Selectors normalised to their semantic element — source class names are often build-hashed (`.bgDIHX`) and not reusable. The declarations + CSS vars are the transferable part.

---
*Generated by Prism — automated Playwright extraction + design analysis.*
*Source: https://mongodb.com | 2026-06-11T05:45:34.761Z*
*Values extracted via getComputedStyle() (rendered) + CSS custom properties (tokens, marked `(token)`). Token-only values may not be painted — verify against the live site before shipping.*