update design md v2
This commit is contained in:
necatiozmen
+711
-210
@@ -1,266 +1,767 @@
|
||||
# Design System Inspired by MongoDB
|
||||
---
|
||||
version: alpha
|
||||
name: MongoDB
|
||||
description: MongoDB carries a strong dual-mode visual identity — dark deep-teal hero bands with bright MongoDB green ({colors.brand-green}) CTAs paired with stark white documentation surfaces. The signature green pill button is unmistakable across product, pricing, learning, and AI use-case surfaces. The system uses Euclid Circular A as its display face, anchors a 3-tier pricing comparison (Free / Flex / Dedicated), and presents extensive course catalogs in card grids with colored category tags. Coverage spans homepage, Atlas product page, Community Edition, MongoDB University, AI use cases, and pricing.
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
colors:
|
||||
primary: "#00ed64"
|
||||
primary-deep: "#00b545"
|
||||
primary-pressed: "#008c34"
|
||||
on-primary: "#001e2b"
|
||||
brand-green: "#00ed64"
|
||||
brand-green-dark: "#00684a"
|
||||
brand-green-mid: "#00a35c"
|
||||
brand-green-soft: "#c3f0d2"
|
||||
brand-teal-deep: "#001e2b"
|
||||
brand-teal: "#003d4f"
|
||||
brand-teal-mid: "#00684a"
|
||||
accent-purple: "#7b3ff2"
|
||||
accent-orange: "#fa6e39"
|
||||
accent-pink: "#f06bb8"
|
||||
accent-blue: "#3d4f9f"
|
||||
semantic-warning-bg: "#fff8e0"
|
||||
semantic-warning-text: "#946f3f"
|
||||
canvas: "#ffffff"
|
||||
canvas-dark: "#001e2b"
|
||||
surface: "#f9fbfa"
|
||||
surface-soft: "#f4f7f6"
|
||||
surface-feature: "#e3fcef"
|
||||
hairline: "#e1e5e8"
|
||||
hairline-soft: "#eceff1"
|
||||
hairline-strong: "#c1ccd6"
|
||||
hairline-dark: "#1c2d38"
|
||||
ink: "#001e2b"
|
||||
charcoal: "#1c2d38"
|
||||
slate: "#3d4f5b"
|
||||
steel: "#5c6c7a"
|
||||
stone: "#7c8c9a"
|
||||
muted: "#a8b3bc"
|
||||
on-dark: "#ffffff"
|
||||
on-dark-muted: "#a8b3bc"
|
||||
|
||||
MongoDB's website is a deep-forest-meets-terminal experience — a design system rooted in the darkest teal-black (`#001e2b`) that evokes both the density of a database and the depth of a forest canopy. Against this near-black canvas, a striking neon green (`#00ed64`) pulses as the brand accent — bright enough to feel electric, organic enough to feel alive. This isn't the cold neon of cyberpunk; it's the bioluminescent green of something growing in the dark.
|
||||
typography:
|
||||
hero-display:
|
||||
fontFamily: Euclid Circular A
|
||||
fontSize: 72px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.10
|
||||
letterSpacing: -1.5px
|
||||
display-lg:
|
||||
fontFamily: Euclid Circular A
|
||||
fontSize: 56px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.15
|
||||
letterSpacing: -1px
|
||||
heading-1:
|
||||
fontFamily: Euclid Circular A
|
||||
fontSize: 48px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.20
|
||||
letterSpacing: -0.5px
|
||||
heading-2:
|
||||
fontFamily: Euclid Circular A
|
||||
fontSize: 36px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.25
|
||||
letterSpacing: -0.5px
|
||||
heading-3:
|
||||
fontFamily: Euclid Circular A
|
||||
fontSize: 28px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.30
|
||||
heading-4:
|
||||
fontFamily: Euclid Circular A
|
||||
fontSize: 22px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.35
|
||||
heading-5:
|
||||
fontFamily: Euclid Circular A
|
||||
fontSize: 18px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.40
|
||||
subtitle:
|
||||
fontFamily: Euclid Circular A
|
||||
fontSize: 18px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.50
|
||||
body-md:
|
||||
fontFamily: Euclid Circular A
|
||||
fontSize: 16px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.55
|
||||
body-md-medium:
|
||||
fontFamily: Euclid Circular A
|
||||
fontSize: 16px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.55
|
||||
body-sm:
|
||||
fontFamily: Euclid Circular A
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.50
|
||||
body-sm-medium:
|
||||
fontFamily: Euclid Circular A
|
||||
fontSize: 14px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.50
|
||||
caption:
|
||||
fontFamily: Euclid Circular A
|
||||
fontSize: 13px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.40
|
||||
caption-bold:
|
||||
fontFamily: Euclid Circular A
|
||||
fontSize: 13px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.40
|
||||
micro:
|
||||
fontFamily: Euclid Circular A
|
||||
fontSize: 12px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.40
|
||||
micro-uppercase:
|
||||
fontFamily: Euclid Circular A
|
||||
fontSize: 11px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.40
|
||||
letterSpacing: 1px
|
||||
button-md:
|
||||
fontFamily: Euclid Circular A
|
||||
fontSize: 14px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.30
|
||||
code-md:
|
||||
fontFamily: Source Code Pro
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.55
|
||||
|
||||
The typography system is architecturally ambitious: MongoDB Value Serif for massive hero headlines (96px) creates an editorial, authoritative presence — serif type at database-company scale is a bold choice that says "we're not just another tech company." Euclid Circular A handles the heavy lifting of body and UI text with an unusually wide weight range (300–700), while Source Code Pro serves as the code and label font with distinctive uppercase treatments featuring very wide letter-spacing (1px–3px). This three-font system creates a hierarchy that spans editorial elegance → geometric professionalism → engineering precision.
|
||||
rounded:
|
||||
xs: 4px
|
||||
sm: 6px
|
||||
md: 8px
|
||||
lg: 12px
|
||||
xl: 16px
|
||||
xxl: 24px
|
||||
full: 9999px
|
||||
|
||||
What makes MongoDB distinctive is its dual-mode design: a dark hero/feature section world (`#001e2b` with neon green accents) and a light content world (white with teal-gray borders `#b8c4c2`). The transition between these modes creates dramatic contrast. The shadow system uses teal-tinted dark shadows (`rgba(0, 30, 43, 0.12)`) that maintain the forest-dark atmosphere even on light surfaces. Buttons use pill shapes (100px–999px radius) with MongoDB Green borders (`#00684a`), and the entire component system references the LeafyGreen design system.
|
||||
spacing:
|
||||
xxs: 4px
|
||||
xs: 8px
|
||||
sm: 12px
|
||||
md: 16px
|
||||
lg: 20px
|
||||
xl: 24px
|
||||
xxl: 32px
|
||||
xxxl: 40px
|
||||
section-sm: 48px
|
||||
section: 64px
|
||||
section-lg: 96px
|
||||
hero: 120px
|
||||
|
||||
components:
|
||||
button-primary:
|
||||
backgroundColor: "{colors.brand-green}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button-md}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "10px 22px"
|
||||
button-primary-pressed:
|
||||
backgroundColor: "{colors.primary-pressed}"
|
||||
textColor: "{colors.on-primary}"
|
||||
button-primary-disabled:
|
||||
backgroundColor: "{colors.hairline}"
|
||||
textColor: "{colors.muted}"
|
||||
button-secondary:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button-md}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "10px 22px"
|
||||
border: "1px solid {colors.hairline-strong}"
|
||||
button-on-dark:
|
||||
backgroundColor: "{colors.brand-green}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button-md}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "10px 22px"
|
||||
button-secondary-on-dark:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.button-md}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "10px 22px"
|
||||
border: "1px solid {colors.hairline-dark}"
|
||||
button-ghost:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "8px 12px"
|
||||
button-link:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.brand-green-dark}"
|
||||
typography: "{typography.body-sm-medium}"
|
||||
padding: "0"
|
||||
card-base:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.xl}"
|
||||
border: "1px solid {colors.hairline}"
|
||||
card-feature:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.xxl}"
|
||||
border: "1px solid {colors.hairline}"
|
||||
card-product-deploy:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.xxl}"
|
||||
border: "1px solid {colors.hairline}"
|
||||
card-feature-dark:
|
||||
backgroundColor: "{colors.brand-teal-deep}"
|
||||
textColor: "{colors.on-dark}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.xxl}"
|
||||
card-course:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.xl}"
|
||||
border: "1px solid {colors.hairline}"
|
||||
card-cert:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.xl}"
|
||||
border: "1px solid {colors.hairline}"
|
||||
pricing-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.xxl}"
|
||||
border: "1px solid {colors.hairline}"
|
||||
pricing-card-featured:
|
||||
backgroundColor: "{colors.surface-feature}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.xxl}"
|
||||
border: "2px solid {colors.brand-green}"
|
||||
text-input:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.sm} {spacing.md}"
|
||||
border: "1px solid {colors.hairline-strong}"
|
||||
height: 44px
|
||||
text-input-focused:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
border: "2px solid {colors.brand-green-dark}"
|
||||
search-pill:
|
||||
backgroundColor: "{colors.surface}"
|
||||
textColor: "{colors.steel}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.sm} {spacing.md}"
|
||||
height: 44px
|
||||
border: "1px solid {colors.hairline-strong}"
|
||||
search-pill-large:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.steel}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.md}"
|
||||
height: 56px
|
||||
border: "1px solid {colors.hairline-strong}"
|
||||
pill-tab:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.steel}"
|
||||
typography: "{typography.body-sm-medium}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "{spacing.xs} {spacing.md}"
|
||||
border: "1px solid {colors.hairline}"
|
||||
pill-tab-active:
|
||||
backgroundColor: "{colors.ink}"
|
||||
textColor: "{colors.on-dark}"
|
||||
rounded: "{rounded.full}"
|
||||
border: "1px solid {colors.ink}"
|
||||
segmented-tab:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.steel}"
|
||||
typography: "{typography.body-sm-medium}"
|
||||
padding: "{spacing.sm} {spacing.md}"
|
||||
border: "0 0 2px transparent solid"
|
||||
segmented-tab-active:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.brand-green-dark}"
|
||||
typography: "{typography.body-sm-medium}"
|
||||
border: "0 0 2px {colors.brand-green-dark} solid"
|
||||
badge-green:
|
||||
backgroundColor: "{colors.brand-green}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.caption-bold}"
|
||||
rounded: "{rounded.sm}"
|
||||
padding: "2px 8px"
|
||||
badge-green-soft:
|
||||
backgroundColor: "{colors.brand-green-soft}"
|
||||
textColor: "{colors.brand-green-dark}"
|
||||
typography: "{typography.caption-bold}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "4px 10px"
|
||||
badge-purple:
|
||||
backgroundColor: "{colors.accent-purple}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.caption-bold}"
|
||||
rounded: "{rounded.sm}"
|
||||
padding: "2px 8px"
|
||||
badge-orange:
|
||||
backgroundColor: "{colors.accent-orange}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.caption-bold}"
|
||||
rounded: "{rounded.sm}"
|
||||
padding: "2px 8px"
|
||||
badge-popular:
|
||||
backgroundColor: "{colors.brand-teal-deep}"
|
||||
textColor: "{colors.brand-green}"
|
||||
typography: "{typography.caption-bold}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "4px 10px"
|
||||
promo-banner:
|
||||
backgroundColor: "{colors.brand-teal-deep}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.body-sm-medium}"
|
||||
padding: "{spacing.sm} {spacing.md}"
|
||||
hero-band-dark:
|
||||
backgroundColor: "{colors.brand-teal-deep}"
|
||||
textColor: "{colors.on-dark}"
|
||||
rounded: "0"
|
||||
padding: "{spacing.hero}"
|
||||
hero-platform-card:
|
||||
backgroundColor: "{colors.brand-teal-mid}"
|
||||
textColor: "{colors.on-dark}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: "{spacing.xxl}"
|
||||
cta-banner-dark:
|
||||
backgroundColor: "{colors.brand-teal-deep}"
|
||||
textColor: "{colors.on-dark}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.section}"
|
||||
code-block:
|
||||
backgroundColor: "{colors.canvas-dark}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.code-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.md}"
|
||||
code-mockup-card:
|
||||
backgroundColor: "{colors.canvas-dark}"
|
||||
textColor: "{colors.on-dark}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.lg}"
|
||||
comparison-table:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.md}"
|
||||
border: "1px solid {colors.hairline}"
|
||||
comparison-row:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
padding: "{spacing.md} {spacing.lg}"
|
||||
border: "0 0 1px {colors.hairline-soft} solid"
|
||||
service-tile:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.xl}"
|
||||
border: "1px solid {colors.hairline}"
|
||||
why-card:
|
||||
backgroundColor: "{colors.surface}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.xl}"
|
||||
customer-testimonial-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.xxl}"
|
||||
border: "1px solid {colors.hairline}"
|
||||
logo-wall-item:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.steel}"
|
||||
typography: "{typography.body-md-medium}"
|
||||
padding: "{spacing.lg}"
|
||||
faq-accordion-item:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.xl}"
|
||||
border: "0 0 1px {colors.hairline} solid"
|
||||
footer-region:
|
||||
backgroundColor: "{colors.brand-teal-deep}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.body-sm}"
|
||||
padding: "{spacing.section} {spacing.xxl}"
|
||||
footer-link:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.on-dark-muted}"
|
||||
typography: "{typography.body-sm}"
|
||||
padding: "{spacing.xxs} 0"
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
MongoDB carries a strong dual-mode visual identity — dark deep-teal hero bands with the unmistakable bright MongoDB green ({colors.brand-green}) CTA pill paired with stark white documentation and pricing surfaces. The homepage opens with "One data platform. Unlimited AI potential." headline over a deep navy hero, the green pill sitting at the visual center as the primary CTA. Lower on the page, embedded code mockup cards (terminal-aesthetic) sit on the dark hero band, breaking out into white feature cards below. The pricing page renders a 3-tier comparison (Free / Flex / Dedicated) with a featured tier highlighted in soft mint background and bright green border. The MongoDB University page presents a course catalog grid where each tile carries a colored category tag (orange, purple, green, teal) — these are MongoDB's category-encoding accent colors and are the only place outside the brand green where saturated color appears.
|
||||
|
||||
The system uses Euclid Circular A as its display face. The face is contemporary geometric — confident but not overly playful — and pairs naturally with both the developer-tool aesthetic of the database product and the educational positioning of the learning surfaces. Cards use `{rounded.lg}` (12px) corners; buttons use `{rounded.full}` pills universally. The brand-teal palette ({colors.brand-teal-deep}) anchors hero bands, footer, code mockups, and the dark CTA banners.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Deep teal-black backgrounds (`#001e2b`) — forest-dark, not space-dark
|
||||
- Neon MongoDB Green (`#00ed64`) as the singular brand accent — electric and organic
|
||||
- MongoDB Value Serif for hero headlines — editorial authority at tech scale
|
||||
- Euclid Circular A for body with weight 300 (light) as a distinctive body weight
|
||||
- Source Code Pro with wide uppercase letter-spacing (1px–3px) for technical labels
|
||||
- Teal-tinted shadows: `rgba(0, 30, 43, 0.12)` — shadows carry the forest color
|
||||
- Dual-mode: dark teal hero sections + light white content sections
|
||||
- Pill buttons (100px radius) with green borders (`#00684a`)
|
||||
- Link Blue (`#006cfa`) and hover transition to `#3860be`
|
||||
- Deep navy/teal hero bands ({colors.brand-teal-deep}) with bright MongoDB green ({colors.brand-green}) CTA pills
|
||||
- Stark white pricing/documentation surfaces with colored category tags for course tiles (purple, orange, green, teal)
|
||||
- Euclid Circular A across every UI surface
|
||||
- Pill-shaped buttons ({rounded.full}) and 12px-rounded cards
|
||||
- 3-tier pricing comparison (Free / Flex / Dedicated) with featured-mint highlight tier
|
||||
- Code mockup cards with terminal-aesthetic dark canvas
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
## Colors
|
||||
|
||||
### Primary Brand
|
||||
- **Forest Black** (`#001e2b`): Primary dark background — the deepest teal-black
|
||||
- **MongoDB Green** (`#00ed64`): Primary brand accent — neon green for highlights, underlines, gradients
|
||||
- **Dark Green** (`#00684a`): Button borders, link text on light — muted green for functional use
|
||||
> Source pages: mongodb.com/ (homepage), /products/platform/atlas-database (Atlas product), /products/self-managed/community-edition, learn.mongodb.com/ (MongoDB University), /solutions/use-cases/artificial-intelligence (AI), /pricing (3-tier comparison). Token coverage was identical across all six pages.
|
||||
|
||||
### Interactive
|
||||
- **Action Blue** (`#006cfa`): Secondary accent — links, interactive highlights
|
||||
- **Hover Blue** (`#3860be`): All link hover states transition to this blue
|
||||
- **Teal Active** (`#1eaedb`): Button hover background — bright teal
|
||||
### Brand & Accent
|
||||
- **MongoDB Green** ({colors.brand-green}): The brand's most recognizable signal — bright pill-CTA color
|
||||
- **Green Dark** ({colors.brand-green-dark}): Inline link color, secondary green
|
||||
- **Green Mid** ({colors.brand-green-mid}): Mid-spectrum green for atmospheric tints
|
||||
- **Green Soft** ({colors.brand-green-soft}): Pale-mint background tint for success badges and featured pricing tier
|
||||
- **Brand Teal Deep** ({colors.brand-teal-deep}): Deep navy-teal for hero bands, footer
|
||||
- **Brand Teal** ({colors.brand-teal}): Mid-spectrum teal
|
||||
- **Brand Teal Mid** ({colors.brand-teal-mid}): Lighter teal for hero platform cards
|
||||
|
||||
### Neutral Scale
|
||||
- **Deep Teal** (`#1c2d38`): Dark button backgrounds, secondary dark surfaces
|
||||
- **Teal Gray** (`#3d4f58`): Dark borders on dark surfaces
|
||||
- **Dark Slate** (`#21313c`): Dark link text variant
|
||||
- **Cool Gray** (`#5c6c75`): Muted text on dark, secondary button text
|
||||
- **Silver Teal** (`#b8c4c2`): Borders on light surfaces, dividers
|
||||
- **Light Input** (`#e8edeb`): Input text on dark surfaces
|
||||
- **Pure White** (`#ffffff`): Light section background, button text on dark
|
||||
- **Black** (`#000000`): Text on light surfaces, darkest elements
|
||||
### Category Accent (Course Tags)
|
||||
- **Accent Purple** ({colors.accent-purple}): Course tag for "Database & Security"
|
||||
- **Accent Orange** ({colors.accent-orange}): Course tag for "Search"
|
||||
- **Accent Pink** ({colors.accent-pink}): Course tag variant
|
||||
- **Accent Blue** ({colors.accent-blue}): Course tag variant for atlas/cloud topics
|
||||
|
||||
### Shadows
|
||||
- **Forest Shadow** (`rgba(0, 30, 43, 0.12) 0px 26px 44px, rgba(0, 0, 0, 0.13) 0px 7px 13px`): Primary card elevation — teal-tinted
|
||||
- **Standard Shadow** (`rgba(0, 0, 0, 0.15) 0px 3px 20px`): General elevation
|
||||
- **Subtle Shadow** (`rgba(0, 0, 0, 0.1) 0px 2px 4px`): Light card lift
|
||||
### Surface
|
||||
- **Canvas White** ({colors.canvas}): Page background and primary card surface
|
||||
- **Canvas Dark** ({colors.canvas-dark}): Code-block backgrounds, dark mockup canvas
|
||||
- **Surface** ({colors.surface}): Subtle section backgrounds, search-pill rest
|
||||
- **Surface Soft** ({colors.surface-soft}): Quieter section divisions
|
||||
- **Surface Feature** ({colors.surface-feature}): Pale mint background for featured pricing tier
|
||||
- **Hairline** ({colors.hairline}): 1px borders and primary dividers
|
||||
- **Hairline Soft** ({colors.hairline-soft}): Quieter dividers
|
||||
- **Hairline Strong** ({colors.hairline-strong}): Stronger 1px border for inputs
|
||||
- **Hairline Dark** ({colors.hairline-dark}): Border on dark surfaces
|
||||
|
||||
## 3. Typography Rules
|
||||
### Text
|
||||
- **Ink** ({colors.ink}): Primary headlines and body text (deep navy-teal)
|
||||
- **Charcoal** ({colors.charcoal}): Body emphasis
|
||||
- **Slate** ({colors.slate}): Secondary text
|
||||
- **Steel** ({colors.steel}): Tertiary text, captions
|
||||
- **Stone** ({colors.stone}): Muted labels
|
||||
- **Muted** ({colors.muted}): Disabled, placeholders
|
||||
- **On Dark** ({colors.on-dark}): White text on dark surfaces
|
||||
- **On Dark Muted** ({colors.on-dark-muted}): Reduced-opacity white
|
||||
|
||||
### Font Families
|
||||
- **Display Serif**: `MongoDB Value Serif` — editorial hero headlines
|
||||
- **Body / UI**: `Euclid Circular A` — geometric sans-serif workhorse
|
||||
- **Code / Labels**: `Source Code Pro` — monospace with uppercase label treatments
|
||||
- **Fallbacks**: `Akzidenz-Grotesk Std` (with CJK: Noto Sans KR/SC/JP), `Times`, `Arial`, `system-ui`
|
||||
### Semantic
|
||||
- **Warning Background** ({colors.semantic-warning-bg}): Pale yellow callout bg
|
||||
- **Warning Text** ({colors.semantic-warning-text}): Warning state copy color
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Family
|
||||
**Euclid Circular A** (primary): MongoDB's geometric sans-serif. Fallbacks: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif.
|
||||
**Source Code Pro** (code): Monospace for code mockups. Fallbacks: 'SF Mono', Menlo, Consolas, monospace.
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | MongoDB Value Serif | 96px (6.00rem) | 400 | 1.20 (tight) | normal | Serif authority |
|
||||
| Display Secondary | MongoDB Value Serif | 64px (4.00rem) | 400 | 1.00 (tight) | normal | Serif sub-hero |
|
||||
| Section Heading | Euclid Circular A | 36px (2.25rem) | 500 | 1.33 | normal | Geometric precision |
|
||||
| Sub-heading | Euclid Circular A | 24px (1.50rem) | 500 | 1.33 | normal | Feature titles |
|
||||
| Body Large | Euclid Circular A | 20px (1.25rem) | 400 | 1.60 (relaxed) | normal | Introductions |
|
||||
| Body | Euclid Circular A | 18px (1.13rem) | 400 | 1.33 | normal | Standard body |
|
||||
| Body Light | Euclid Circular A | 16px (1.00rem) | 300 | 1.50–2.00 | normal | Light-weight reading text |
|
||||
| Nav / UI | Euclid Circular A | 16px (1.00rem) | 500 | 1.00–1.88 | 0.16px | Navigation, emphasized |
|
||||
| Body Bold | Euclid Circular A | 15px (0.94rem) | 700 | 1.50 | normal | Strong emphasis |
|
||||
| Button | Euclid Circular A | 13.5px–16px | 500–700 | 1.00 | 0.135px–0.9px | CTA labels |
|
||||
| Caption | Euclid Circular A | 14px (0.88rem) | 400 | 1.71 (relaxed) | normal | Metadata |
|
||||
| Small | Euclid Circular A | 11px (0.69rem) | 600 | 1.82 (relaxed) | 0.2px | Tags, annotations |
|
||||
| Code Heading | Source Code Pro | 40px (2.50rem) | 400 | 1.60 (relaxed) | normal | Code showcase titles |
|
||||
| Code Body | Source Code Pro | 16px (1.00rem) | 400 | 1.50 | normal | Code blocks |
|
||||
| Code Label | Source Code Pro | 14px (0.88rem) | 400–500 | 1.14 (tight) | 1px–2px | `text-transform: uppercase` |
|
||||
| Code Micro | Source Code Pro | 9px (0.56rem) | 600 | 2.67 (relaxed) | 2.5px | `text-transform: uppercase` |
|
||||
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|
||||
|---|---|---|---|---|---|
|
||||
| `{typography.hero-display}` | 72px | 500 | 1.10 | -1.5px | Hero ("One data platform") |
|
||||
| `{typography.display-lg}` | 56px | 500 | 1.15 | -1px | Major section openers |
|
||||
| `{typography.heading-1}` | 48px | 500 | 1.20 | -0.5px | Page-level headlines |
|
||||
| `{typography.heading-2}` | 36px | 500 | 1.25 | -0.5px | Subsection headlines |
|
||||
| `{typography.heading-3}` | 28px | 500 | 1.30 | 0 | Card titles |
|
||||
| `{typography.heading-4}` | 22px | 500 | 1.35 | 0 | Feature tile titles |
|
||||
| `{typography.heading-5}` | 18px | 600 | 1.40 | 0 | Smaller card titles, FAQ questions |
|
||||
| `{typography.subtitle}` | 18px | 400 | 1.50 | 0 | Hero subtitle, lead body |
|
||||
| `{typography.body-md}` | 16px | 400 | 1.55 | 0 | Primary body text |
|
||||
| `{typography.body-sm}` | 14px | 400 | 1.50 | 0 | Secondary body, table cells |
|
||||
| `{typography.body-sm-medium}` | 14px | 500 | 1.50 | 0 | Active sidebar, button labels |
|
||||
| `{typography.caption-bold}` | 13px | 600 | 1.40 | 0 | Badge labels |
|
||||
| `{typography.micro-uppercase}` | 11px | 600 | 1.40 | 1px | Section eyebrows, course category tags |
|
||||
| `{typography.button-md}` | 14px | 600 | 1.30 | 0 | Pill button labels |
|
||||
| `{typography.code-md}` | 14px | 400 | 1.55 | 0 | Code mockups |
|
||||
|
||||
### Principles
|
||||
- **Serif for authority**: MongoDB Value Serif at hero scale creates an editorial presence unusual in tech — it communicates that MongoDB is an institution, not a startup.
|
||||
- **Weight 300 as body default**: Euclid Circular A uses light (300) for body text, creating an airy reading experience that contrasts with the dense, dark backgrounds.
|
||||
- **Wide-tracked monospace labels**: Source Code Pro uppercase at 1px–3px letter-spacing creates technical signposts that feel like database field labels — systematic, structured, classified.
|
||||
- **Four-weight range**: 300 (light body) → 400 (standard) → 500 (UI/nav) → 700 (bold CTA) — a wider range than most systems, enabling fine-grained hierarchy.
|
||||
- Tight hero leading (1.10) on 72px display
|
||||
- Negative letter-spacing on display sizes (-1.5px to -0.5px)
|
||||
- 600 weight reserved for buttons and small emphasis (FAQ headings, badges)
|
||||
- Generous body leading (1.55) for technical documentation readability
|
||||
|
||||
## 4. Component Stylings
|
||||
## Layout
|
||||
|
||||
### Spacing System
|
||||
- **Base unit**: 4px (8px primary increment)
|
||||
- **Tokens**: `{spacing.xxs}` (4px) through `{spacing.hero}` (120px)
|
||||
- **Section rhythm**: Marketing pages use `{spacing.section-lg}` (96px); pricing tightens to `{spacing.section}` (64px)
|
||||
|
||||
### Grid & Container
|
||||
- 1280px max-width with 32px gutters
|
||||
- Pricing: 3-tier card row, dense feature comparison table below
|
||||
- Learn catalog: 3-up course tile grid, 4-up certification grid
|
||||
- AI use cases: 2-column hero with atmospheric illustration
|
||||
|
||||
### Whitespace Philosophy
|
||||
Marketing surfaces give content generous breathing room — `{spacing.hero}` (120px) hero padding for deep teal bands. Pricing/learn surfaces tighten dramatically.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|---|---|---|
|
||||
| 0 (flat) | No shadow; `{colors.hairline}` border | Default cards, table rows |
|
||||
| 1 (subtle) | `rgba(0, 30, 43, 0.04) 0px 1px 2px 0px` | Hover-elevated tiles |
|
||||
| 2 (card) | `rgba(0, 30, 43, 0.08) 0px 4px 12px 0px` | Feature cards |
|
||||
| 3 (mockup) | `rgba(0, 30, 43, 0.12) 0px 12px 24px -4px` | Code mockup over hero |
|
||||
| 4 (modal) | `rgba(0, 30, 43, 0.16) 0px 16px 48px -8px` | Modals, dropdowns |
|
||||
|
||||
### Decorative Depth
|
||||
- Dark teal hero bands carry atmospheric gradient depth
|
||||
- Code mockup cards on hero use canvas-dark surface with terminal aesthetic
|
||||
- Pale-mint pricing-feature tier uses brand-tinted shadow
|
||||
|
||||
## Shapes
|
||||
|
||||
### Border Radius Scale
|
||||
|
||||
| Token | Value | Use |
|
||||
|---|---|---|
|
||||
| `{rounded.xs}` | 4px | Course category tags |
|
||||
| `{rounded.sm}` | 6px | Type badges, code chips |
|
||||
| `{rounded.md}` | 8px | Inputs, search-pill, code blocks |
|
||||
| `{rounded.lg}` | 12px | Cards, pricing tiers, course tiles |
|
||||
| `{rounded.xl}` | 16px | Larger feature panels |
|
||||
| `{rounded.xxl}` | 24px | Featured product showcases |
|
||||
| `{rounded.full}` | 9999px | All buttons, status badges |
|
||||
|
||||
### Photography Geometry
|
||||
- Hero illustrations sit on full-bleed dark backgrounds
|
||||
- Course tile thumbnails use `{rounded.lg}` corners
|
||||
- Customer logos wall: wordmarks at consistent 60–80px height
|
||||
|
||||
## Components
|
||||
|
||||
> Per the no-hover policy, hover states are NOT documented. Default and pressed/active states only.
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary Green (Dark Surface)**
|
||||
- Background: `#00684a` (muted MongoDB green)
|
||||
- Text: `#000000`
|
||||
- Radius: 50% (circular) or 100px (pill)
|
||||
- Border: `1px solid #00684a`
|
||||
- Shadow: `rgba(0,0,0,0.06) 0px 1px 6px`
|
||||
- Hover: scale 1.1
|
||||
- Active: scale 0.85
|
||||
**`button-primary`** — Bright MongoDB green pill primary CTA, the dominant action.
|
||||
- Background `{colors.brand-green}`, text `{colors.on-primary}` (deep navy), typography `{typography.button-md}`, padding `10px 22px`, rounded `{rounded.full}`.
|
||||
- Pressed state `button-primary-pressed` deepens to `{colors.primary-pressed}`.
|
||||
- Disabled state `button-primary-disabled` uses `{colors.hairline}` background.
|
||||
|
||||
**Dark Teal Button**
|
||||
- Background: `#1c2d38`
|
||||
- Text: `#5c6c75`
|
||||
- Radius: 100px (pill)
|
||||
- Border: `1px solid #3d4f58`
|
||||
- Hover: background `#1eaedb`, text white, translateX(5px)
|
||||
**`button-secondary`** — Outlined pill for secondary actions.
|
||||
- Background transparent, text `{colors.ink}`, border `1px solid {colors.hairline-strong}`, typography `{typography.button-md}`, padding `10px 22px`, rounded `{rounded.full}`.
|
||||
|
||||
**Outlined Button (Light Surface)**
|
||||
- Background: transparent
|
||||
- Text: `#001e2b`
|
||||
- Border: `1px solid #b8c4c2`
|
||||
- Radius: 4px–8px
|
||||
- Hover: background tint
|
||||
**`button-on-dark`** — Bright green pill on dark hero bands.
|
||||
- Background `{colors.brand-green}`, text `{colors.on-primary}`, typography `{typography.button-md}`, padding `10px 22px`, rounded `{rounded.full}`.
|
||||
|
||||
**`button-secondary-on-dark`** — Outlined pill on dark backgrounds.
|
||||
- Background transparent, text `{colors.on-dark}`, border `1px solid {colors.hairline-dark}`, typography `{typography.button-md}`, padding `10px 22px`, rounded `{rounded.full}`.
|
||||
|
||||
**`button-ghost`** — Quieter rectangular ghost button.
|
||||
- Background transparent, text `{colors.ink}`, typography `{typography.button-md}`, padding `8px 12px`, rounded `{rounded.md}`.
|
||||
|
||||
**`button-link`** — Inline green text link.
|
||||
- Background transparent, text `{colors.brand-green-dark}`, typography `{typography.body-sm-medium}`, padding `0`.
|
||||
|
||||
### Cards & Containers
|
||||
- Light mode: white background with `1px solid #b8c4c2` border
|
||||
- Dark mode: `#001e2b` or `#1c2d38` background with `1px solid #3d4f58`
|
||||
- Radius: 16px (standard), 24px (medium), 48px (large/hero)
|
||||
- Shadow: `rgba(0,30,43,0.12) 0px 26px 44px` (forest-tinted)
|
||||
- Image containers: 30px–32px radius
|
||||
|
||||
**`card-base`** — Standard content card.
|
||||
- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}`, border `1px solid {colors.hairline}`.
|
||||
|
||||
**`card-feature`** — Feature card with larger padding.
|
||||
- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline}`.
|
||||
|
||||
**`card-product-deploy`** — Product deployment card ("MongoDB Atlas / Community").
|
||||
- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline}`.
|
||||
|
||||
**`card-feature-dark`** — Dark teal feature card on hero band.
|
||||
- Background `{colors.brand-teal-deep}`, text `{colors.on-dark}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`.
|
||||
|
||||
**`card-course`** — MongoDB University course tile.
|
||||
- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}`, border `1px solid {colors.hairline}`.
|
||||
- Top: colored category tag. Below: title `{typography.heading-5}`, description `{typography.body-sm}`, "Get Started →" link.
|
||||
|
||||
**`card-cert`** — Certification card.
|
||||
- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}`, border `1px solid {colors.hairline}`.
|
||||
|
||||
**`pricing-card`** — Standard pricing tier card.
|
||||
- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline}`.
|
||||
|
||||
**`pricing-card-featured`** — Featured pricing tier (Flex tier, mint background + green border).
|
||||
- Background `{colors.surface-feature}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `2px solid {colors.brand-green}`.
|
||||
|
||||
### Inputs & Forms
|
||||
- Textarea: text `#e8edeb`, padding 12px 12px 12px 8px
|
||||
- Borders: `1px solid #b8c4c2` on light, `1px solid #3d4f58` on dark
|
||||
- Input radius: 4px
|
||||
|
||||
**`text-input`** — Standard text field.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, border `1px solid {colors.hairline-strong}`, rounded `{rounded.md}`, padding `{spacing.sm} {spacing.md}`, height 44px.
|
||||
|
||||
**`text-input-focused`** — Activated state.
|
||||
- Border switches to `2px solid {colors.brand-green-dark}`.
|
||||
|
||||
**`search-pill`** — Standard 44px search bar.
|
||||
- Background `{colors.surface}`, text `{colors.steel}`, typography `{typography.body-md}`, rounded `{rounded.md}`, height 44px, border `1px solid {colors.hairline-strong}`.
|
||||
|
||||
**`search-pill-large`** — Large 56px search bar (top of MongoDB University catalog).
|
||||
- Background `{colors.canvas}`, text `{colors.steel}`, typography `{typography.body-md}`, rounded `{rounded.md}`, height 56px, border `1px solid {colors.hairline-strong}`.
|
||||
|
||||
### Tabs
|
||||
|
||||
**`pill-tab`** + **`pill-tab-active`** — Pill-style tab nav (top of pricing: "MongoDB Atlas / Enterprise Advanced").
|
||||
- Inactive: text `{colors.steel}`, border `1px solid {colors.hairline}`, padding `{spacing.xs} {spacing.md}`, rounded `{rounded.full}`.
|
||||
- Active: background `{colors.ink}`, text `{colors.on-dark}`.
|
||||
|
||||
**`segmented-tab`** + **`segmented-tab-active`** — Underline-style tab navigation.
|
||||
- Inactive: text `{colors.steel}`, no border. Active: text `{colors.brand-green-dark}`, 2px bottom border in `{colors.brand-green-dark}`.
|
||||
|
||||
### Badges & Status
|
||||
|
||||
**`badge-green`** — Bright green badge for new product highlights.
|
||||
- Background `{colors.brand-green}`, text `{colors.on-primary}`, typography `{typography.caption-bold}`, rounded `{rounded.sm}`, padding `2px 8px`.
|
||||
|
||||
**`badge-green-soft`** — Pale-mint pill for success/free indicators.
|
||||
- Background `{colors.brand-green-soft}`, text `{colors.brand-green-dark}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
|
||||
|
||||
**`badge-purple`** — Purple course category tag.
|
||||
- Background `{colors.accent-purple}`, text `{colors.on-dark}`, typography `{typography.caption-bold}`, rounded `{rounded.sm}`, padding `2px 8px`.
|
||||
|
||||
**`badge-orange`** — Orange course category tag.
|
||||
- Background `{colors.accent-orange}`, text `{colors.on-dark}`, typography `{typography.caption-bold}`, rounded `{rounded.sm}`, padding `2px 8px`.
|
||||
|
||||
**`badge-popular`** — "Most Popular" tier indicator (dark teal pill with green text).
|
||||
- Background `{colors.brand-teal-deep}`, text `{colors.brand-green}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
|
||||
|
||||
**`promo-banner`** — Dark teal sticky promo strip ABOVE the top nav.
|
||||
- Background `{colors.brand-teal-deep}`, text `{colors.on-dark}`, typography `{typography.body-sm-medium}`, padding `{spacing.sm} {spacing.md}`.
|
||||
|
||||
### Code
|
||||
|
||||
**`code-block`** — Code container.
|
||||
- Background `{colors.canvas-dark}`, text `{colors.on-dark}`, typography `{typography.code-md}`, rounded `{rounded.md}`, padding `{spacing.md}`.
|
||||
|
||||
**`code-mockup-card`** — Embedded code mockup on hero band.
|
||||
- Background `{colors.canvas-dark}`, text `{colors.on-dark}`, rounded `{rounded.lg}`, padding `{spacing.lg}`. Carries terminal-aesthetic code snippet.
|
||||
|
||||
### Tables
|
||||
|
||||
**`comparison-table`** — Pricing feature comparison table.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, typography `{typography.body-sm}`, rounded `{rounded.md}`, border `1px solid {colors.hairline}`.
|
||||
|
||||
**`comparison-row`** — Individual feature row.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.md} {spacing.lg}`, bottom border `1px solid {colors.hairline-soft}`.
|
||||
|
||||
### Documentation Components
|
||||
|
||||
**`service-tile`** — Tile in "Customize your deployment" 6-up grid.
|
||||
- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}`, border `1px solid {colors.hairline}`.
|
||||
|
||||
**`why-card`** — "Loved by builders" feature card.
|
||||
- Background `{colors.surface}`, rounded `{rounded.lg}`, padding `{spacing.xl}`.
|
||||
|
||||
**`customer-testimonial-card`** — Customer quote card.
|
||||
- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline}`.
|
||||
|
||||
**`logo-wall-item`** — Customer logo wordmark cell.
|
||||
- Background transparent, text `{colors.steel}`, typography `{typography.body-md-medium}`, padding `{spacing.lg}`.
|
||||
|
||||
**`faq-accordion-item`** — FAQ panel.
|
||||
- Background `{colors.canvas}`, rounded `{rounded.md}`, padding `{spacing.xl}`, bottom border `1px solid {colors.hairline}`.
|
||||
|
||||
### Navigation
|
||||
- Dark header on forest-black background
|
||||
- Euclid Circular A 16px weight 500 for nav links
|
||||
- MongoDB logo (leaf icon + wordmark) left-aligned
|
||||
- Green CTA pill buttons right-aligned
|
||||
- Mega-menu dropdowns with product categories
|
||||
|
||||
### Image Treatment
|
||||
- Dashboard screenshots on dark backgrounds
|
||||
- Green-accented UI elements in screenshots
|
||||
- 30px–32px radius on image containers
|
||||
- Full-width dark sections for product showcases
|
||||
**Top Navigation (Marketing)** — Sticky white bar.
|
||||
- Background `{colors.canvas}`, height ~64px, bottom border `1px solid {colors.hairline}`.
|
||||
- Left: MongoDB leaf logo + "Solutions / Resources / Company / Pricing" links.
|
||||
- Right: "Sign In" link + bright-green pill "Try Free" CTA.
|
||||
|
||||
### Distinctive Components
|
||||
### Signature Components
|
||||
|
||||
**Neon Green Accent Underlines**
|
||||
- `0px 2px 2px 0px solid #00ed64` — bottom + right border creating accent underlines
|
||||
- Used on feature headings and highlighted text
|
||||
- Also appears as `#006cfa` (blue) variant
|
||||
**`hero-band-dark`** — Deep teal hero band with embedded code mockup.
|
||||
- Background `{colors.brand-teal-deep}`, text `{colors.on-dark}`, padding `{spacing.hero}`.
|
||||
- Layout: centered headline `{typography.hero-display}`, subtitle, button row, `code-mockup-card` below.
|
||||
|
||||
**Source Code Label System**
|
||||
- 14px uppercase Source Code Pro with 1px–2px letter-spacing
|
||||
- Used as section category markers above headings
|
||||
- Creates a "database field label" aesthetic
|
||||
**`hero-platform-card`** — Lighter-teal platform showcase card on dark hero.
|
||||
- Background `{colors.brand-teal-mid}`, text `{colors.on-dark}`, rounded `{rounded.xl}`, padding `{spacing.xxl}`.
|
||||
|
||||
## 5. Layout Principles
|
||||
**`cta-banner-dark`** — Dark CTA banner at the bottom of feature pages.
|
||||
- Background `{colors.brand-teal-deep}`, text `{colors.on-dark}`, rounded `{rounded.lg}`, padding `{spacing.section}`.
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Scale: 1px, 4px, 7px, 8px, 10px, 12px, 14px, 15px, 16px, 18px, 20px, 24px, 32px
|
||||
**`footer-region`** — Dark teal multi-column footer.
|
||||
- Background `{colors.brand-teal-deep}`, padding `{spacing.section} {spacing.xxl}`.
|
||||
- 6-column link grid.
|
||||
- Section headings in `{typography.body-sm-medium}` `{colors.on-dark}`.
|
||||
|
||||
### Grid & Container
|
||||
- Max content width centered
|
||||
- Dark hero section with contained content
|
||||
- Light content sections below
|
||||
- Card grids: 2–3 columns
|
||||
- Full-width dark footer
|
||||
**`footer-link`** — Individual footer link.
|
||||
- Background transparent, text `{colors.on-dark-muted}`, typography `{typography.body-sm}`, padding `{spacing.xxs} 0`.
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Dramatic mode transitions**: The shift from dark teal sections to white content creates built-in visual breathing through contrast, not just space.
|
||||
- **Generous dark sections**: Dark hero and feature areas use extra vertical padding (80px+) to let the forest-dark background breathe.
|
||||
- **Compact light sections**: White content areas are denser, with tighter card grids and less vertical spacing.
|
||||
|
||||
### Border Radius Scale
|
||||
- Minimal (1px–2px): Small spans, badges
|
||||
- Subtle (4px): Inputs, small buttons
|
||||
- Standard (8px): Cards, links
|
||||
- Card (16px): Standard cards, containers
|
||||
- Toggle (20px): Switch elements
|
||||
- Large (24px): Large panels
|
||||
- Image (30px–32px): Image containers
|
||||
- Hero (48px): Hero cards
|
||||
- Pill (100px–999px): Buttons, navigation pills
|
||||
- Full (9999px): Maximum pill
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Flat (Level 0) | No shadow | Default surfaces |
|
||||
| Subtle (Level 1) | `rgba(0,0,0,0.1) 0px 2px 4px` | Light card lift |
|
||||
| Standard (Level 2) | `rgba(0,0,0,0.15) 0px 3px 9px` | Standard cards |
|
||||
| Prominent (Level 3) | `rgba(0,0,0,0.15) 0px 3px 20px` | Elevated panels |
|
||||
| Forest (Level 4) | `rgba(0,30,43,0.12) 0px 26px 44px, rgba(0,0,0,0.13) 0px 7px 13px` | Hero cards — teal-tinted |
|
||||
|
||||
**Shadow Philosophy**: MongoDB's shadow system is unique in that the primary elevation shadow uses `rgba(0, 30, 43, 0.12)` — a teal-tinted shadow that carries the forest-dark brand color into the depth system. This means even on white surfaces, shadows feel like they belong to the MongoDB color world rather than being generic neutral black.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
## Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use `#001e2b` (forest-black) for dark sections — not pure black
|
||||
- Apply MongoDB Green (`#00ed64`) sparingly for maximum electric impact
|
||||
- Use MongoDB Value Serif ONLY for hero/display headings — Euclid Circular A for everything else
|
||||
- Apply Source Code Pro uppercase with wide tracking (1px–3px) for technical labels
|
||||
- Use teal-tinted shadows (`rgba(0,30,43,0.12)`) for primary card elevation
|
||||
- Maintain the dark/light section duality — dramatic contrast between modes
|
||||
- Use weight 300 for body text — the light weight is the readable voice
|
||||
- Apply pill radius (100px) to primary action buttons
|
||||
- Use `{colors.brand-green}` (bright MongoDB green) for primary CTAs everywhere
|
||||
- Pair dark-teal hero bands with bright green CTA pills
|
||||
- Apply `{rounded.full}` to every button, every status badge
|
||||
- Apply `{rounded.lg}` (12px) to cards consistently
|
||||
- Use category accent colors (purple, orange, green, teal) ONLY for course tags
|
||||
- Maintain Euclid Circular A across every UI surface
|
||||
- Use code mockup cards with terminal-aesthetic content for product showcases
|
||||
|
||||
### Don't
|
||||
- Don't use pure black (`#000000`) for dark backgrounds — always use teal-black (`#001e2b`)
|
||||
- Don't use MongoDB Green (`#00ed64`) on backgrounds — it's an accent for text, underlines, and small highlights
|
||||
- Don't use standard gray shadows — always use teal-tinted (`rgba(0,30,43,...)`)
|
||||
- Don't apply serif font to body text — MongoDB Value Serif is hero-only
|
||||
- Don't use narrow letter-spacing on Source Code Pro labels — the wide tracking IS the identity
|
||||
- Don't mix dark and light section treatments within the same section
|
||||
- Don't use warm colors — the palette is strictly cool (teal, green, blue)
|
||||
- Don't forget the green accent underlines — they're the signature decorative element
|
||||
- Don't use the bright green for body text or large surfaces
|
||||
- Don't introduce additional accent colors beyond the brand green and category-encoding palette
|
||||
- Don't soften corners on buttons; the pill is a brand signature
|
||||
- Don't replace deep teal hero bands with white hero bands
|
||||
- Don't apply heavy shadows on flat documentation cards; reserve elevation for code mockups
|
||||
- Don't use Source Code Pro for prose
|
||||
|
||||
## 8. Responsive Behavior
|
||||
## Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile Small | <425px | Tight single column |
|
||||
| Mobile | 425–768px | Standard mobile |
|
||||
| Tablet | 768–1024px | 2-column grids begin |
|
||||
| Desktop | 1024–1280px | Standard layout |
|
||||
| Large Desktop | 1280–1440px | Expanded layout |
|
||||
| Ultra-wide | >1440px | Maximum width, generous margins |
|
||||
|---|---|---|
|
||||
| Mobile (small) | < 480px | Single column. Hero 36px. Pricing 1-up. Course catalog 1-up. |
|
||||
| Mobile (large) | 480 – 767px | Course tiles 2-up. Hero 48px. |
|
||||
| Tablet | 768 – 1023px | 2-column feature grids. Hero 56px. |
|
||||
| Desktop | 1024 – 1279px | 3-tier pricing card row. 3-up course catalog. Hero 64px. |
|
||||
| Wide Desktop | ≥ 1280px | Full 72px hero presentation. |
|
||||
|
||||
### Touch Targets
|
||||
- Pill buttons with generous padding
|
||||
- Navigation links at 16px with adequate spacing
|
||||
- Card surfaces as full-area touch targets
|
||||
- Pill buttons render at 40–44px effective height
|
||||
- Form inputs render at 44px height
|
||||
- Search pill (large) renders at 56px
|
||||
- Pill tabs ~32px → 44px on mobile
|
||||
|
||||
### Collapsing Strategy
|
||||
- Hero: MongoDB Value Serif 96px → 64px → scales further
|
||||
- Navigation: horizontal mega-menu → hamburger
|
||||
- Feature cards: multi-column → stacked
|
||||
- Dark/light sections maintain their mode at all sizes
|
||||
- Source Code Pro labels maintain uppercase treatment
|
||||
- **Promo banner** stays full-width; truncates at < 480px
|
||||
- **Top nav** below 1024px collapses to hamburger
|
||||
- **Hero band**: code mockup card moves below text on mobile
|
||||
- **Pricing tiers**: 3-column → 2-column tablet → 1-column mobile
|
||||
- **Course catalog**: 3-up → 2-up tablet → 1-up mobile
|
||||
- **Hero typography**: 72px → 56px → 48px → 36px
|
||||
- **Footer**: 6-column desktop → 3-column tablet → accordion mobile
|
||||
|
||||
### Image Behavior
|
||||
- Dashboard screenshots scale proportionally
|
||||
- Dark section backgrounds maintained full-width
|
||||
- Image radius maintained across breakpoints
|
||||
- Atmospheric AI imagery uses 16:9 ratio with full-bleed scaling
|
||||
- Code mockup card content remains readable across breakpoints
|
||||
- Customer logo wall: wordmarks at consistent 60–80px height
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
## Iteration Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Dark background: Forest Black (`#001e2b`)
|
||||
- Brand accent: MongoDB Green (`#00ed64`)
|
||||
- Functional green: Dark Green (`#00684a`)
|
||||
- Link blue: Action Blue (`#006cfa`)
|
||||
- Text on light: Black (`#000000`)
|
||||
- Text on dark: White (`#ffffff`) or Light Input (`#e8edeb`)
|
||||
- Border light: Silver Teal (`#b8c4c2`)
|
||||
- Border dark: Teal Gray (`#3d4f58`)
|
||||
1. Focus on ONE component at a time
|
||||
2. Reference component names and tokens directly
|
||||
3. Run `npx @google/design.md lint DESIGN.md` after edits
|
||||
4. Add new variants as separate `components:` entries
|
||||
5. Default to `{typography.body-md}` for body
|
||||
6. Keep `{colors.brand-green}` as the primary CTA across all surfaces
|
||||
7. Pill-shaped buttons (`{rounded.full}`) always
|
||||
8. Dark-teal hero bands frame primary CTAs
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero on forest-black (#001e2b) background. Headline at 96px MongoDB Value Serif weight 400, line-height 1.20, white text with 'potential' highlighted in MongoDB Green (#00ed64). Subtitle at 18px Euclid Circular A weight 400. Green pill CTA (#00684a, 100px radius). Neon green gradient glow behind product screenshot."
|
||||
- "Design a card on white background: 1px solid #b8c4c2 border, 16px radius, shadow rgba(0,30,43,0.12) 0px 26px 44px. Title at 24px Euclid Circular A weight 500. Body at 16px weight 300. Source Code Pro 14px uppercase label above title with 2px letter-spacing."
|
||||
- "Build a dark section: #001e2b background, 1px solid #3d4f58 border on cards. White text. MongoDB Green (#00ed64) accent underlines on headings using bottom-border 2px solid."
|
||||
- "Create technical label: Source Code Pro 14px, text-transform uppercase, letter-spacing 2px, weight 500, #00ed64 color on dark background."
|
||||
- "Design a pill button: #1c2d38 background, 1px solid #3d4f58 border, 100px radius, #5c6c75 text. Hover: #1eaedb background, white text, translateX(5px)."
|
||||
## Known Gaps
|
||||
|
||||
### Iteration Guide
|
||||
1. Start with the mode decision: dark (#001e2b) for hero/features, white for content
|
||||
2. MongoDB Green (#00ed64) is electric — use once per section for maximum impact
|
||||
3. Serif headlines (MongoDB Value Serif) create the editorial authority — never use for body
|
||||
4. Weight 300 body text creates the airy reading experience — don't default to 400
|
||||
5. Source Code Pro uppercase with wide tracking for technical labels — the database voice
|
||||
6. Teal-tinted shadows keep everything in the MongoDB color world
|
||||
- Specific dark-mode token values for canvas/surface beyond hero bands not surfaced
|
||||
- Animation/transition timings not extracted; recommend 150–200ms ease
|
||||
- Form validation success state not explicitly captured
|
||||
- Course-tile category color mappings are observation-based
|
||||
|
||||
Reference in New Issue
Block a user