prismdinstrument

EXTRACTED · 10 SECTIONS · 38 COLORS · GRADE B

mongodb.com

Accent #00ed64 · Source Code Pro — every value below measured via getComputedStyle(), not asserted by hand.

colors

faces

shadows

keyframes

DESIGN.md tokens.json

real render · source of truth

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.

Color — roles, semantics & the full census

38 colors measured · click any swatch to copy

Canvas

#061621

AAA 18.35:1

Ink

#ffffff

AAA 18.35:1

Accent

#00ed64

AAA 11.62:1

Line

#5d6c74

AA·lg 3.38:1

Semantic states

No semantic state colors detected — this system signals state through weight & motion, not hue.

38 colors mined from the live renderexpand

Type — the ladder, in the real face

6 roles · rendered live in the real Times New Roman (captured woff2) · lines are editable, click any spec to copy

display xl

display-xl64px · 400

body

body12px · 500 · ×5.33

body sm

body-sm14px · 300 · ×0.86

button

button16px · 500 · ×0.88

eyebrow

eyebrow14px · 400 · ×1.14

mono

mono16px · 300 · ×0.88

Depth — elevation is extracted, not invented

6 box-shadows measured on the live page · click a tile to copy its raw value

shadow-1

shadow-2

shadow-3

shadow-4

shadow-5

Motion — easings, transitions & live keyframes

1 easing curve · 24 keyframes · hover a tile to preview

Easing & transitions

transition-3ease-in-out

24 keyframe animations extracted

animation-1relhzy

animation-bkodse

fadeUp

fadeIn

shimmer

fadeInLeft

fadeInRight

fadeInAnimation

fade-in-down

fade-in-up

scroll-x

fade-out

Spacing & radius, made spatial

9 spacing steps · 7 radii · bars are exact px widths

Spacing scale

xxs · 2px

xs · 6px

sm · 15px

md · 18px

base · 21px

lg · 24px

xl · 28px

2xl · 48px

3xl · 64px

Radius

none
0px

xs
4px

sm
8px

md
16px

lg
24px

xl
30px

full
999px

Components — the closed vocabulary

13 component families · 65 variants counted on the live DOM

Component	Variants found
buttons	×10
cards	×10
links	×9
nav Links	×8
tabs	×6
cta Banner	×6
heading H2	×5
inputs	×3
footer Links	×2
logo Tile	×2
eyebrow Labels	×2
search Bar	×1
heading H1	×1

Component style specs (§4)expand

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

Layout — structure & dimensions

4 layout metrics measured

max Width1200px

header Height64px

sidebar Width0px

container Padding0px

Responsive — real breakpoints

40 media-query stops read from the live CSS

40px

52px

64px

400px

426px

460px

500px

530px

550px

767px

768px

844px

896px

1000px

1023px

1024px

1025px

1065px

1079px

1080px

1180px

1200px

1280px

1281px

1300px

1320px

1350px

1374px

1400px

1410px

1416px

1440px

1450px

1500px

1511px

1600px

1680px

1800px

2300px

2500px

Do's & Don'ts

20 enforceable rules pulled verbatim from the spec

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

Agent guide & export

Paste-ready prompt + the real files behind this page

Build a UI in the mongodb.com design system. Canvas #061621 · ink #ffffff · accent #00ed64. Type: Source Code Pro — respect the size/weight ladder in §3. Radius, spacing, shadow: use only the extracted scales (no magic numbers). Full spec follows — paste the DESIGN.md below into your agent.

Every value above was getComputedStyle-verified.

$ npx prismd add mongodb

DESIGN.md · narrative spec tokens.json

A · Instrument B · Press