MongoDB

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 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

Colors

> 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.

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

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

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

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

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

| 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

• 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

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

**`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.

**`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}`.

**`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

**`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

**`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

**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.

Signature Components

**`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.

**`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}`.

**`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}`.

**`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}`.

**`footer-link`** — Individual footer link.

• Background transparent, text `{colors.on-dark-muted}`, typography `{typography.body-sm}`, padding `{spacing.xxs} 0`.

Do's and Don'ts

Do

• 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 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

Responsive Behavior

Breakpoints

| Name | Width | Key Changes |

|---|---|---|

| 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 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

• **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

• 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

Iteration Guide

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

Known Gaps

• 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

개요

MongoDB는 강력한 이중 모드 시각적 아이덴티티를 전달합니다. 즉, 틀림없이 밝은 MongoDB 녹색({colors.brand-green}) CTA 알약과 순백색 문서 및 가격 표시면이 결합된 짙은 청록색 히어로 밴드입니다. "하나의 데이터 플랫폼. 무한한 AI 잠재력"이라는 문구로 홈페이지가 열립니다. 심해군 영웅의 헤드라인에는 시각적 중앙에 기본 CTA로 앉아 있는 녹색 알약이 있습니다. 페이지 하단에는 임베디드 코드 모형 카드(터미널 미적)가 어두운 영웅 밴드에 위치하며 아래 흰색 기능 카드로 나뉩니다. 가격 페이지에서는 부드러운 민트색 배경과 밝은 녹색 테두리로 강조 표시된 주요 계층을 통해 3계층 비교(무료/플렉스/전용)를 제공합니다. MongoDB University 페이지는 각 타일에 색상 카테고리 태그(주황색, 보라색, 녹색, 청록색)가 있는 코스 카탈로그 그리드를 제공합니다. 이는 MongoDB의 카테고리 인코딩 강조 색상이며 브랜드 녹색 외부에서 포화 색상이 나타나는 유일한 위치입니다.

시스템은 Euclid Circular A를 디스플레이 면으로 사용합니다. 얼굴은 현대적인 기하학적 모양으로 자신감이 있지만 지나치게 장난스럽지는 않으며 데이터베이스 제품의 개발자 도구 미학과 학습 표면의 교육적 위치와 자연스럽게 조화를 이룹니다. 카드는 ``(12px) 모서리를 사용합니다. 버튼은 `` 알약을 보편적으로 사용합니다. 브랜드 청록색 팔레트({colors.brand-teal-deep})는 히어로 밴드, 바닥글, 코드 모형 및 어두운 CTA 배너를 고정합니다.

**주요 특성:**

• 밝은 MongoDB 녹색({colors.brand-green}) CTA 알약이 포함된 진한 남색/청록색 히어로 밴드({colors.brand-teal-deep})
• 코스 타일(보라색, 주황색, 녹색, 청록색)에 대한 색상 카테고리 태그가 있는 흰색 가격/문서 표면
• 모든 UI 표면에 걸친 유클리드 원형 A
• 알약 모양 버튼({rounded.full}) 및 12픽셀 둥근 카드
• 추천 민트 하이라이트 계층과 3계층 가격 비교(무료/플렉스/전용)
• 미적인 어두운 캔버스를 사용한 코드 모형 카드

색상

> 소스 페이지: mongodb.com/(홈페이지), /products/platform/atlas-database(Atlas 제품), /products/self-managed/community-edition, learn.mongodb.com/(MongoDB University), /solutions/use-cases/artificial-intelligence(AI), /pricing(3계층 비교). 토큰 적용 범위는 6개 페이지 모두에서 동일했습니다.

브랜드 및 액센트

• **MongoDB Green**({colors.brand-green}): 브랜드의 가장 눈에 띄는 신호 — 밝은 알약-CTA 색상
• **녹색 진한**({colors.brand-green-dark}): 인라인 링크 색상, 보조 녹색
• **녹색 중간**({colors.brand-green-mid}): 대기 색조를 위한 중간 스펙트럼 녹색
• **그린 소프트**({colors.brand-green-soft}): 성공 배지 및 특별 가격 등급을 위한 옅은 민트색 배경 색조
• **브랜드 청록색 딥**({colors.brand-teal-deep}): 히어로 밴드를 위한 딥 네이비 청록색, 바닥글
• **브랜드 청록색** ({colors.brand-teal}): 중간 스펙트럼 청록색
• **브랜드 청록색 미드**({colors.brand-teal-mid}): 영웅 플랫폼 카드용 밝은 청록색

카테고리 악센트(강좌 태그)

• **액센트 퍼플**({colors.accent-purple}): "데이터베이스 및 보안"에 대한 강좌 태그
• **액센트 오렌지**({colors.accent-orange}): "검색"을 위한 강좌 태그
• **액센트 핑크**({colors.accent-pink}): 강좌 태그 변형
• **액센트 블루**({colors.accent-blue}): 아틀라스/클라우드 주제에 대한 코스 태그 변형

표면

• **캔버스 흰색**({colors.canvas}): 페이지 배경 및 기본 카드 표면
• **어두운 캔버스**({colors.canvas-dark}): 코드 블록 배경, 어두운 모형 캔버스
• **표면**({colors.surface}): 미묘한 섹션 배경, 검색 알약 받침대
• **부드러운 표면**({colors.surface-soft}): 더 조용한 섹션 분할
• **표면 특징**({colors.surface-feature}): 주요 가격 등급에 대한 옅은 민트색 배경
• **가는 선** ({colors.hairline}): 1px 테두리 및 기본 구분선
• **헤어라인 소프트**({colors.hairline-soft}): 조용한 칸막이
• **가는 선 강력** ({colors.hairline-strong}): 입력에 대한 1px 테두리가 더 강력함
• **어두운 헤어라인**({colors.hairline-dark}): 어두운 표면의 테두리

텍스트

• **잉크**({colors.ink}): 기본 헤드라인 및 본문 텍스트(짙은 남색)
• **차콜**({colors.charcoal}): 본문 강조
• **슬레이트**({colors.slate}): 보조 텍스트
• **스틸**({colors.steel}): 3차 텍스트, 캡션
• **스톤** ({colors.stone}): 음소거된 라벨
• **음소거됨**({colors.muted}): 비활성화됨, 자리 표시자
• **어두운 곳**({colors.on-dark}): 어두운 표면의 흰색 텍스트
• **어두운 음소거 시**({colors.on-dark-muted}): 불투명도가 낮은 흰색

의미

• **경고 배경**({colors.semantic-warning-bg}): 연한 노란색 설명선 bg
• **경고 텍스트**({colors.semantic-warning-text}): 경고 상태 복사 색상

타이포그래피

글꼴군

**Euclid Circular A**(기본): MongoDB의 기하학적 산세리프체입니다. 대체: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif.

**소스 코드 프로**(코드): 코드 모형을 위한 고정 폭. 대체: 'SF Mono', Menlo, Consolas, 고정 폭.

계층

| 토큰 | 사이즈 | 무게 | 라인 높이 | 문자 간격 | |

사용

|---|---|---|---|---|---|

| _`` | 72px | 500 | 1.10 | -1.5px | 히어로("하나의 데이터 플랫폼") |

| _`` | 56px | 500 | 1.15 | -1픽셀 | 주요 섹션 오프너 |

| _`` | 48px | 500 | 1.20 | -0.5px | 페이지 수준 헤드라인 |

| _`` | 36px | 500 | 1.25 | -0.5px | 하위 섹션 헤드라인 |

| _`` | 28px | 500 | 1.30 | 0 | 카드 제목 |

| _`` | 22px | 500 | 1.35 | 0 | 기능 타일 제목 |

| _`` | 18px | 600 | 1.40 | 0 | 더 작은 카드 제목, FAQ 질문 |

| _`` | 18px | 400 | 1.50 | 0 | 영웅 자막, 본문 |

| _`` | 16px | 400 | 1.55 | 0 | 기본 본문 텍스트 |

| _`` | 14px | 400 | 1.50 | 0 | 보조 본문, 표 셀 |

| _`` | 14px | 500 | 1.50 | 0 | 활성 사이드바, 버튼 라벨 |

| _`` | 13px | 600 | 1.40 | 0 | 배지 라벨 |

| _`` | 11px | 600 | 1.40 | 1픽셀 | 섹션 눈썹, 강좌 카테고리 태그 |

| _`` | 14px | 600 | 1.30 | 0 | 알약 버튼 라벨 |

| _`` | 14px | 400 | 1.55 | 0 | 코드 모형 |

원칙

• 72px 디스플레이에서 빡빡한 영웅 선도(1.10)
• 디스플레이 크기의 음수 문자 간격(-1.5px ~ -0.5px)
• 600 버튼 및 작은 강조용으로 예약된 가중치(FAQ 제목, 배지)
• 기술 문서 가독성을 위한 넉넉한 본문 안내(1.55)

레이아웃

간격 시스템

• **기본 단위**: 4px(8px 기본 증분)
• **토큰**: ``(4px) ~ ``(120px)
• **섹션 리듬**: 마케팅 페이지에서는 ``(96px)을 사용합니다. 가격이 ``(64px)
로 인하됩니다.

그리드 및 컨테이너

• _1280px 최대 너비(32px 거터 포함)
• 가격: 3계층 카드 행, 아래의 밀집된 기능 비교 표
• 카탈로그 알아보기: 3업 코스 타일 그리드, 4업 인증 그리드
• AI 사용 사례: 분위기 있는 일러스트레이션이 포함된 2열 히어로

공백 철학

마케팅 표면은 콘텐츠에 넉넉한 호흡 공간을 제공합니다. — ``(120px) 진한 청록색 밴드용 영웅 패딩. 가격/학습 화면이 대폭 강화되었습니다.

고도 및 깊이

| 레벨 | 치료 | |

사용

|---|---|---|

| 0(플랫) | 그림자가 없습니다. _`` 테두리 | 기본 카드, 테이블 행 |

| 1(미묘함) | _`rgba(0, 30, 43, 0.04) 0px 1px 2px 0px` | 마우스 오버 타일 |

| 2 (카드) | _`rgba(0, 30, 43, 0.08) 0px 4px 12px 0px` | 기능 카드 |

| 3 (모형) | _`rgba(0, 30, 43, 0.12) 0px 12px 24px -4px` | 영웅에 대한 코드 모형 |

| 4(모달) | _`rgba(0, 30, 43, 0.16) 0px 16px 48px -8px` | 모달, 드롭다운 |

장식적 깊이

• 짙은 청록색 히어로 밴드는 대기 그라데이션 깊이를 전달합니다
• Hero의 코드 모형 카드는 터미널 미학이 적용된 어두운 캔버스 표면을 사용합니다
• 라이트 민트 가격 기능 계층에서는 브랜드 색상의 섀도우를 사용합니다

도형

경계 반경 배율

| 토큰 | 가치 | |

사용

|---|---|---|

| _`` | 4픽셀 | 강좌 카테고리 태그 |

| _`` | 6픽셀 | 유형 배지, 코드 칩 |

| _`` | 8픽셀 | 입력, 검색 알약, 코드 블록 |

| _`` | 12px | 카드, 가격 책정 계층, 코스 타일 |

| _`` | 16px | 더 큰 기능 패널 |

| _`` | 24px | 주요 제품 쇼케이스 |

| _`` | 9999px | 모든 버튼, 상태 배지 |

사진 기하학

• 완전히 어두운 배경에 앉아 있는 영웅 일러스트
• 코스 타일 축소판은 `` 모서리
를 사용합니다.
• 고객 로고 벽: 일관된 60~80픽셀 높이의 워드마크

구성요소

> 마우스 오버 금지 정책에 따라 마우스 오버 상태는 문서화되지 않습니다. 기본 및 누름/활성 상태만 해당됩니다.

버튼

**`button-primary`** — Bright MongoDB 녹색 알약 기본 CTA, 지배적인 작업

• 배경 ``, 텍스트 ``(딥 네이비), 타이포그래피 ``, 패딩 `10px 22px`, 둥근 ``.
• 누른 상태 `button-primary-pressed`는 ``으로 깊어집니다.
• 비활성화 상태 `button-primary-disabled`는 `` 배경을 사용합니다.

**`button-secondary`** — 보조 작업에 대해 설명된 알약.

• 배경 투명, 텍스트 ``, 테두리 `1px solid `, 타이포그래피 ``, 패딩 `10px 22px`, 둥근 ``.

_**`button-on-dark`** — 다크 히어로 밴드의 밝은 녹색 알약.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 패딩 `10px 22px`, 반올림 ``.

**`button-secondary-on-dark`** — 어두운 배경에 윤곽선이 있는 알약.

• 배경 투명, 텍스트 ``, 테두리 `1px solid `, 타이포그래피 ``, 패딩 `10px 22px`, 둥근 ``.

**`button-ghost`** — 더 조용해진 직사각형 고스트 버튼.

• 배경 투명, 텍스트 ``, 타이포그래피 ``, 패딩 `8px 12px`, 반올림 ``.

**`button-link`** — 인라인 녹색 텍스트 링크.

• 배경 투명, 텍스트 ``, 타이포그래피 ``, 패딩 `0`.

카드 및 용기

**`card-base`** — 표준 콘텐츠 카드.

• 배경 ``, 둥근 ``, 패딩 ``, 테두리 `1px solid `.

**`card-feature`** — 패딩이 더 큰 기능 카드.

• 배경 ``, 둥근 ``, 패딩 ``, 테두리 `1px solid `.

**`card-product-deploy`** — 제품 배포 카드("MongoDB Atlas/커뮤니티").

• 배경 ``, 둥근 ``, 패딩 ``, 테두리 `1px solid `.

**`card-feature-dark`** — 히어로 밴드의 어두운 청록색 기능 카드.

• 배경 ``, 텍스트 ``, 반올림 ``, 패딩 ``.

**`card-course`** — MongoDB 대학 코스 타일.

• 배경 ``, 둥근 ``, 패딩 ``, 테두리 `1px solid `.
• 상단: 색상이 지정된 카테고리 태그입니다. 아래: 제목 ``, 설명 ``, "시작하기 →" 링크.

**`card-cert`** — 인증 카드.

• 배경 ``, 둥근 ``, 패딩 ``, 테두리 `1px solid `.

**`pricing-card`** — 표준 가격 등급 카드.

• 배경 ``, 반올림 ``, 패딩 ``, 테두리 `1px solid `.

**`pricing-card-featured`** — 주요 가격 책정 계층(가변 계층, 민트 배경 + 녹색 테두리).

• 배경 ``, 둥근 ``, 패딩 ``, 테두리 `2px solid `.

입력 및 양식

**`text-input`** — 표준 텍스트 필드.

• 배경 ``, 텍스트 ``, 테두리 `1px solid `, 둥근 ``, 패딩 ` `, 높이 44px.

**`text-input-focused`** — 활성화된 상태.

• 경계가 `2px solid `.
(으)로 전환됩니다.

**`search-pill`** — 표준 44px 검색 창.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 높이 44px, 테두리 `1px solid `.

**`search-pill-large`** — 대형 56px 검색 창(MongoDB 대학 카탈로그 상단).

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 높이 56px, 테두리 `1px solid `.

탭

**`pill-tab`** + **`pill-tab-active`** — 알약 스타일 탭 탐색(가격 최고: "MongoDB Atlas / Enterprise Advanced").

• 비활성: 텍스트 ``, 테두리 `1px solid `, 패딩 ` `, 반올림 ``.
• 활성: 배경 ``, 텍스트 ``.

**`segmented-tab`** + **`segmented-tab-active`** — 밑줄 스타일 탭 탐색.

• 비활성: 텍스트 ``, 테두리 없음. 활성: 텍스트 ``, ``.
의 2px 하단 테두리

배지 및 상태

**`badge-green`** — 새로운 제품 하이라이트를 위한 밝은 녹색 배지.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 `2px 8px`.

**`badge-green-soft`** — 성공/무료 표시를 위한 엷은 민트 알약입니다.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 `4px 10px`.

**`badge-purple`** — 보라색 코스 카테고리 태그.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 `2px 8px`.

**`badge-orange`** — 주황색 코스 카테고리 태그.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 `2px 8px`.

**`badge-popular`** — "가장 인기 있는" 계층 표시기(녹색 텍스트가 있는 어두운 청록색 알약).

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 `4px 10px`.

**`promo-banner`** — 상단 탐색 위의 어두운 청록색 끈적끈적 프로모션 스트립

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 패딩 ` `.

코드

**`code-block`** — 코드 컨테이너.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 ``.

**`code-mockup-card`** — 히어로 밴드에 삽입된 코드 모형.

• 배경 ``, 텍스트 ``, 반올림 ``, 패딩 ``. 터미널 미학적 코드 조각을 전달합니다.

테이블

**`comparison-table`** — 가격 기능 비교표.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 테두리 `1px solid `.

**`comparison-row`** — 개별 기능 행.

• 배경 ``, 텍스트 ``, 패딩 ` `, 하단 테두리 `1px solid `.

문서 구성요소

**`service-tile`** — "배포 사용자 정의" 6업 그리드의 타일입니다.

• 배경 ``, 둥근 ``, 패딩 ``, 테두리 `1px solid `.

**`why-card`** — "건축가에게 사랑받는" 기능 카드.

• 배경 ``, 둥근 ``, 패딩 ``.

**`customer-testimonial-card`** — 고객 견적 카드.

• 배경 ``, 둥근 ``, 패딩 ``, 테두리 `1px solid `.

**`logo-wall-item`** — 고객 로고 워드마크 셀.

• 배경 투명, 텍스트 ``, 타이포그래피 ``, 패딩 ``.

**`faq-accordion-item`** — FAQ 패널.

• 배경 ``, 둥근 ``, 패딩 ``, 하단 테두리 `1px solid `.

탐색

**상단 탐색(마케팅)** — 고정된 흰색 막대.

• 배경 ``, 높이 ~64px, 하단 테두리 `1px solid `.
• 왼쪽: MongoDB 리프 로고 + "솔루션/리소스/회사/가격" 링크.
• 오른쪽: "로그인" 링크 + 밝은 녹색 알약 "무료 체험" CTA.

서명 구성요소

_**`hero-band-dark`** — 코드 모형이 포함된 Deep teal 히어로 밴드.

• 배경 ``, 텍스트 ``, 패딩 ``.
• 레이아웃: 가운데 정렬된 헤드라인 ``, 부제, 버튼 행, 아래 `code-mockup-card`.

**`hero-platform-card`** — 다크 히어로의 밝은 청록색 플랫폼 쇼케이스 카드.

• 배경 ``, 텍스트 ``, 반올림 ``, 패딩 ``.

**`cta-banner-dark`** — 기능 페이지 하단의 어두운 CTA 배너.

• 배경 ``, 텍스트 ``, 반올림 ``, 패딩 ``.

**`footer-region`** — 진한 청록색 다중 열 바닥글.

• 배경 ``, 패딩 ` `.
• 6열 링크 그리드.
• `` ``.
의 섹션 제목

**`footer-link`** — 개별 바닥글 링크.

• 배경 투명, 텍스트 ``, 타이포그래피 ``, 패딩 ` 0`.

해야 할 일과 하지 말아야 할 일

하라

• 모든 곳에서 기본 CTA에 ``(밝은 MongoDB 녹색)를 사용하세요
• 짙은 청록색 히어로 밴드와 밝은 녹색 CTA 알약을 짝을 이루세요
• 모든 버튼, 모든 상태 배지에 `` 적용
• 카드에 ``(12px)을 일관되게 적용합니다
• 강좌 태그에만 카테고리 강조 색상(보라색, 주황색, 녹색, 청록색)을 사용하세요___HTML TAG_791___
• 모든 UI 표면에서 Euclid Circular A를 유지합니다
• 제품 쇼케이스를 위한 터미널 미적 콘텐츠가 포함된 코드 모형 카드 사용

하지 마세요

• 본문이나 넓은 표면에는 밝은 녹색을 사용하지 마세요
• 브랜드 녹색 및 카테고리 인코딩 팔레트 이외의 추가 강조 색상을 도입하지 마세요
• 버튼 모서리를 부드럽게 하지 마세요. 알약은 브랜드 시그니처입니다
• 짙은 청록색 히어로 밴드를 흰색 히어로 밴드로 대체하지 마세요
• 평평한 문서 카드에 무거운 그림자를 적용하지 마십시오. 코드 모형을 위한 고도 예약
• 산문 작성에 Source Code Pro를 사용하지 마세요

반응적 행동

중단점

| 이름 | 폭 | 주요 변경 사항 |

|---|---|---|

| 모바일(소형) | _< 480px | Single column. Hero 36px. Pricing 1-up. Course catalog 1-up. |

| 모바일(대형) | 480 – 767px | 코스 타일 2업. 영웅 48px. |_

| 태블릿 | 768 – 1023px | 2열 특성 그리드. 영웅 56px. |

| 데스크탑 | 1024 – 1279px | 3계층 가격 카드 행. 3업 코스 카탈로그. 영웅 64px. |_

| 와이드 데스크탑 | ≥ 1280px | 전체 72px 영웅 프리젠테이션. |_

터치 대상

• 알약 버튼은 40~44픽셀 유효 높이로 렌더링됩니다
• 양식 입력은 44픽셀 높이로 렌더링됩니다
• 검색 알약(대형)은 56px로 렌더링됩니다
• 알약 탭은 모바일에서 ~32px → 44px

축소 전략

• **프로모션 배너**는 전체 너비로 유지됩니다. < 480px
에서 잘립니다.
• **1024px 미만의 상단 탐색**은 햄버거로 접힙니다.
• **히어로 밴드**: 코드 모형 카드가 모바일에서 텍스트 아래로 이동합니다
• **가격 책정 계층**: 3열 → 2열 태블릿 → 1열 모바일
• **강좌 카탈로그**: 3업 → 2업 태블릿 → 1업 모바일
• **히어로 타이포그래피**: 72px → 56px → 48px → 36px
• **바닥글**: 6열 데스크톱 → 3열 태블릿 → 아코디언 모바일

이미지 동작

• 대기 AI 이미지는 풀 블리드 스케일링과 함께 16:9 비율을 사용합니다
• 코드 모형 카드 콘텐츠는 중단점 전체에서 계속 읽을 수 있습니다.
• 고객 로고 벽: 일관된 60~80픽셀 높이의 워드마크

반복 가이드

1. 한 번에 하나의 구성요소에만 집중하세요

2. 구성 요소 이름 및 토큰을 직접 참조

3. 편집 후 _`npx @google/design.md lint DESIGN.md` 실행

4. 새 변형을 별도의 `components:` 항목

으로 추가합니다.

5. 본문

의 기본값은 ``입니다.

6. _``을 모든 표면에서 기본 CTA로 유지

7. 알약 모양의 버튼(``) 항상

8. 어두운 청록색 영웅 밴드 프레임 기본 CTA

알려진 격차

• 히어로 밴드 이외의 캔버스/표면에 대한 특정 다크 모드 토큰 값은 표시되지 않습니다
• 애니메이션/전환 타이밍이 추출되지 않았습니다. 150~200ms 용이성을 권장합니다
• 양식 유효성 검사 성공 상태가 명시적으로 캡처되지 않음
• 코스 타일 카테고리 색상 매핑은 관찰을 기반으로 합니다

概要

MongoDB は、強力なデュアルモードのビジュアル アイデンティティを持っています。濃い濃いティールのヒーロー バンドと、紛れもない明るい MongoDB グリーン ({colors.brand-green}) の CTA 錠剤が、真っ白なドキュメントと価格設定の表面と組み合わされています。ホームページは「One data platform. AI の無限の可能性」で始まります。深いネイビーのヒーロー、主要なCTAとしてビジュアルセンターに座っている緑色の錠剤についての見出し。ページの下部では、埋め込みコードのモックアップ カード (端末の美しさ) がダーク ヒーロー バンドの上に配置され、下の白いフィーチャー カードに分かれています。価格ページには 3 段階の比較 (無料 / フレックス / 専用) が表示され、注目の段階が柔らかいミントの背景と明るい緑色の境界線で強調表示されています。 MongoDB University ページには、各タイルに色付きのカテゴリ タグ (オレンジ、紫、緑、青緑) が付けられたコース カタログ グリッドが表示されます。これらは、MongoDB のカテゴリをエンコードするアクセント カラーであり、ブランド グリーンの外側で飽和色が表示される唯一の場所です。

システムは、表示面として Euclid Circular A を使用します。顔は現代的な幾何学模様で、自信にあふれていますが過度に遊び心はなく、データベース製品の開発者ツールの美学と学習面の教育的な位置付けの両方に自然に調和します。カードは__CODEBCK_901___ (12ピクセル) のコーナーを使用します。ボタンは広く__CODEBCK_902___錠剤を使用します。ブランド ティール パレット ({colors.brand-teal-deep}) は、ヒーロー バンド、フッター、コード モックアップ、およびダーク CTA バナーを固定します。

_**主な特徴:**

• 深いネイビー/ティールのヒーロー バンド ({colors.brand-teal-deep}) と明るい MongoDB グリーン ({colors.brand-green}) CTA 錠剤
• コース タイル (紫、オレンジ、緑、青緑) の色付きカテゴリ タグが付いた真っ白な価格/ドキュメントの表面
• すべての UI サーフェスにわたる Euclid Circular A
• 錠剤の形のボタン ({rounded.full}) と 12 ピクセルの丸いカード
• 注目のミント ハイライト階層を含む 3 階層の価格比較 (無料 / フレックス / 専用)
• ターミナルのような美しいダーク キャンバスを使用したコード モックアップ カード

色

> ソース ページ: mongodb.com/ (ホームページ)、/products/platform/atlas-database (Atlas 製品)、/products/self-managed/community-edition、learn.mongodb.com/ (MongoDB University)、/solutions/use-cases/artificial-intelligence (AI)、/pricing (3 層比較)。 トークンの適用範囲は 6 ページすべてで同一でした。

ブランドとアクセント

• **MongoDB グリーン** ({colors.brand-green}): ブランドの最も認識可能なシグナル — 明るい錠剤 CTA カラー
• **ダークグリーン** ({colors.brand-green-dark}): インラインリンクの色、二次緑色
• **グリーンミッド** ({colors.brand-green-mid}): 雰囲気のある色合いのミッドスペクトルグリーン
• **グリーン ソフト** ({colors.brand-green-soft}): 成功バッジと注目の価格帯のペールミントの背景色合い
• **ブランド ティール ディープ** ({colors.brand-teal-deep}): ヒーロー バンド用のディープ ネイビー ティール、フッター
• **ブランド ティール** ({colors.brand-teal}): ミッドスペクトル ティール
• **ブランド ティール ミッド** ({colors.brand-teal-mid}): ヒーロー プラットフォーム カード用の明るいティール

カテゴリ アクセント (コース タグ)

• **アクセントパープル** ({colors.accent-purple}): 「データベースとセキュリティ」のコースタグ
• **アクセントオレンジ** ({colors.accent-orange}): 「検索」用のコースタグ
• **アクセント ピンク** ({colors.accent-pink}): コースタグのバリエーション
• **アクセント ブルー** ({colors.accent-blue}): アトラス/クラウド トピックのコース タグ バリアント

表面

• **キャンバス ホワイト** ({colors.canvas}): ページの背景と主要なカード表面
• **キャンバス ダーク** ({colors.canvas-dark}): コードブロックの背景、ダーク モックアップ キャンバス
• **表面** ({colors.surface}): 微妙なセクションの背景、検索ピルの残り
• **Surface Soft** ({colors.surface-soft}): より静かなセクション分割
• **表面機能** ({colors.surface-feature}): 注目の価格帯の淡いミントの背景
• **ヘアライン** ({colors.hairline}): 1 ピクセルの境界線と主分割線
• **ヘアライン ソフト** ({colors.hairline-soft}): 静かな仕切り
• **強いヘアライン** ({colors.hairline-strong}): 入力の 1 ピクセルの境界線を強化
• **ヘアライン ダーク** ({colors.hairline-dark}): 暗い表面の境界線

テキスト

• **インク** ({colors.ink}): 主要な見出しと本文 (濃いネイビーティール)
• **木炭** ({colors.charcoal}): ボディ強調
• **スレート** ({colors.slate}): 二次テキスト
• **スチール** ({colors.steel}): 三次テキスト、キャプション
• **ストーン** ({colors.stone}): ミュートされたラベル
• **ミュート** ({colors.muted}): 無効、プレースホルダー
• **オンダーク** ({colors.on-dark}): 暗い表面に白いテキスト
• **ダークミュート時** ({colors.on-dark-muted}): 不透明度を下げた白

セマンティック

• **警告の背景** ({colors.semantic-warning-bg}): 淡い黄色の吹き出し背景
• **警告テキスト** ({colors.semantic-warning-text}): 警告状態のコピーの色

タイポグラフィ

フォント ファミリー

**Euclid Circular A** (プライマリ): MongoDB の幾何学的なサンセリフ。フォールバック: -apple-system、BlinkMacSystemFont、「Segoe UI」、Roboto、sans-serif。

**Source Code Pro** (コード): コード モックアップ用の等幅。 フォールバック: 'SF Mono'、Menlo、Consolas、monospace。

階層_

|トークン |サイズ |重量 |行の高さ |文字間隔 | |

を使用します

|---|---|---|---|---|---|

| `` | 72ピクセル | 500 | 1.10 | -1.5ピクセル |ヒーロー (「1 つのデータ プラットフォーム」) |

| `` | 56ピクセル | 500 | 1.15 | -1ピクセル |主要セクションのオープナー |

| `` | 48ピクセル | 500 | 1.20 | -0.5ピクセル |ページレベルの見出し |

| `` | 36ピクセル | 500 | 1.25 | -0.5ピクセル |サブセクションの見出し |

| `` | 28ピクセル | 500 | 1.30 | 0 |カードのタイトル |

| `` | 22ピクセル | 500 | 1.35 | 0 |特集タイルのタイトル |

| `` | 18ピクセル | 600 | 1.40 | 0 |小さいカード タイトル、よくある質問 |

| `` | 18ピクセル | 400 | 1.50 | 0 |ヒーローのサブタイトル、本文 |

| `` | 16ピクセル | 400 | 1.55 | 0 |主要な本文テキスト |

| `` | 14ピクセル | 400 | 1.50 | 0 |二次本文、表のセル |

| `` | 14ピクセル | 500 | 1.50 | 0 |アクティブなサイドバー、ボタンのラベル |

| `` | 13ピクセル | 600 | 1.40 | 0 |バッジのラベル |

| `` | 11ピクセル | 600 | 1.40 | 1ピクセル |セクション眉毛、コース カテゴリ タグ |

| `` | 14ピクセル | 600 | 1.30 | 0 |ピル ボタンのラベル |

| `` | 14ピクセル | 400 | 1.55 | 0 |コードのモックアップ |

原則

• 72 ピクセルのディスプレイでのタイトなヒーロー リード (1.10)
• 表示サイズでの負の文字間隔 (-1.5px ～ -0.5px)
• 600 のウェイトはボタンと小さな強調 (FAQ の見出し、バッジ) のために予約されています
• 技術文書を読みやすくするための豊富な本文先頭 (1.55)

レイアウト

間隔システム

• **基本単位**: 4px (主増分 8px)
• **トークン**: `` (4px) ～ `` (120px)
• **セクションのリズム**: マーケティング ページでは `` (96px) を使用します。価格が__CODEBCK_921___ (64px)
に引き下げられました

グリッドとコンテナ

• 最大幅 1280 ピクセル、余白 32 ピクセル
• 価格: 3 層カード列、以下の高密度機能比較表
• 学習カタログ: 3 アップのコース タイル グリッド、4 アップの認定グリッド
• _AI の使用例: 雰囲気のあるイラストを使用した 2 列のヒーロー

ホワイトスペースの哲学

マーケティング サーフェスにより、コンテンツに十分な呼吸スペースが与えられます — `` (120 ピクセル) の濃い青緑のバンド用のヒーロー パディング。 価格設定/ラーニング サーフェスは大幅に厳しくなります。

標高と深さ

|レベル |治療 | |

を使用します

|---|---|---|

| 0 (フラット) |影はありません。 `` 境界線 |デフォルトのカード、テーブルの行 |

| 1 (微妙) | `rgba(0, 30, 43, 0.04) 0px 1px 2px 0px` |カーソルを合わせて高くしたタイル |

| 2 (カード) | `rgba(0, 30, 43, 0.08) 0px 4px 12px 0px` |フィーチャー カード |

| 3 (モックアップ) | `rgba(0, 30, 43, 0.12) 0px 12px 24px -4px` |ヒーロー上のコード モックアップ |

| 4 (モーダル) | `rgba(0, 30, 43, 0.16) 0px 16px 48px -8px` |モーダル、ドロップダウン |

装飾の深さ_

• ダーク ティールのヒーロー バンドは、大気のグラデーションの深さを表現します
• ヒーローのコード モックアップ カードは、端末の美しさを備えたキャンバスのような暗い表面を使用
• ペールミントの価格設定機能階層ではブランドの色合いのシャドウを使用

図形

境界線の半径スケール

|トークン |値 | |

を使用します

|---|---|---|

| `` | 4ピクセル |コース カテゴリ タグ |

| `` | 6ピクセル |タイプバッジ、コードチップ |

| `` | 8ピクセル |入力、検索ピル、コード ブロック |

| `` | 12ピクセル |カード、価格帯、コース タイル |

| `` | 16ピクセル |大きな機能パネル |

| `` | 24ピクセル |注目の製品ショーケース |

| `` | 9999ピクセル |すべてのボタン、ステータス バッジ |

写真の幾何学

• フルブリードの暗い背景にヒーローのイラストが描かれています
• コース タイルのサムネイルは__CODEBCK_935___ コーナー
を使用します
• 顧客のロゴ ウォール: 一貫した 60 ～ 80 ピクセルの高さのワードマーク

コンポーネント

> ホバー禁止ポリシーに従って、ホバー状態は文書化されません。 デフォルトおよび押下/アクティブ状態のみ。

ボタン

**`button-primary`** — 明るい MongoDB の緑色の錠剤の主要な CTA、主要なアクション。

• 背景 ``、テキスト__CODEBCK_938___ (濃いネイビー)、タイポグラフィ__CODEBCK_939___、パディング__CODEBCK_940___、角丸__CODEBCK_941___.
• 押された状態__CODEBCK_942___は__CODEBCK_943___まで深くなります。
• 無効状態__CODEBCK_944___は__CODEBCK_945___背景を使用します。

**`button-secondary`** — 二次アクションの概要を示したピル。

• 背景透明、テキスト__CODEBCK_947___、境界線__CODEBCK_948___、タイポグラフィ__CODEBCK_949___、パディング__CODEBCK_950___、角丸__CODEBCK_951___.

**`button-on-dark`** — ダーク ヒーロー バンドに明るい緑色の錠剤。

• 背景__CODEBCK_953___、テキスト__CODEBCK_954___、タイポグラフィ__CODEBCK_955___、パディング__CODEBCK_956___、丸め__CODEBCK_957___.

**`button-secondary-on-dark`** — 暗い背景に輪郭を描かれた錠剤。

• 背景透明、テキスト__CODEBCK_959___、境界線__CODEBCK_960___、タイポグラフィ__CODEBCK_961___、パディング__CODEBCK_962___、角丸__CODEBCK_963___.

**`button-ghost`** — 静かな長方形のゴースト ボタン。

• 背景透明、テキスト__CODEBCK_965___、タイポグラフィ__CODEBCK_966___、パディング__CODEBCK_967___、角丸__CODEBCK_968___.

**`button-link`** — インラインの緑色のテキスト リンク。

• 背景透明、テキスト__CODEBCK_970___、タイポグラフィ__CODEBCK_971___、パディング__CODEBCK_972___.

カードとコンテナ

_**`card-base`** — 標準コンテンツ カード。

• 背景__CODEBCK_974___、角丸__CODEBCK_975___、パディング__CODEBCK_976___、境界線__CODEBCK_977___.

**`card-feature`** — パディングが大きいフィーチャー カード。

• 背景__CODEBCK_979___、角丸__CODEBCK_980___、パディング__CODEBCK_981___、境界線__CODEBCK_982___.

_**`card-product-deploy`** — 製品展開カード (「MongoDB Atlas / Community」)。

• 背景__CODEBCK_984___、角丸__CODEBCK_985___、パディング__CODEBCK_986___、境界線__CODEBCK_987___.

**`card-feature-dark`** — ヒーロー バンドのダーク ティールのフィーチャー カード。

• 背景__CODEBCK_989___、テキスト__CODEBCK_990___、丸め__CODEBCK_991___、パディング__CODEBCK_992___.

**`card-course`** — MongoDB 大学のコース タイル。

• 背景__CODEBCK_994___、角丸__CODEBCK_995___、パディング__CODEBCK_996___、境界線__CODEBCK_997___.
• 上: 色付きのカテゴリ タグ。 以下: タイトル ``、説明 ``、「はじめる →」リンク

**`card-cert`** — 認定カード。

• 背景__CODEBCK_1001___、角丸__CODEBCK_1002___、パディング__CODEBCK_1003___、境界線__CODEBCK_1004___.

**`pricing-card`** — 標準価格帯カード。

• 背景__CODEBCK_1006___、角丸__CODEBCK_1007___、パディング__CODEBCK_1008___、境界線__CODEBCK_1009___.

_**`pricing-card-featured`** — 注目の価格帯 (フレックス レベル、ミントの背景 + 緑色の境界線)。

• 背景__CODEBCK_1011___、角丸__CODEBCK_1012___、パディング__CODEBCK_1013___、境界線__CODEBCK_1014___.

入力とフォーム

_**`text-input`** — 標準のテキスト フィールド。

• 背景__CODEBCK_1016___、テキスト__CODEBCK_1017___、境界線__CODEBCK_1018___、角丸__CODEBCK_1019___、パディング__CODEBCK_1020___、高さ44ピクセル

**`text-input-focused`** — アクティブ化された状態。

• 境界線が__CODEBCK_1022___に切り替わります。

**`search-pill`** — 標準の 44 ピクセルの検索バー。

• 背景__CODEBCK_1024___、テキスト__CODEBCK_1025___、タイポグラフィ__CODEBCK_1026___、角丸__CODEBCK_1027___、高さ44ピクセル、境界線__CODEBCK_1028___.

**`search-pill-large`** — 大きな 56 ピクセルの検索バー (MongoDB University カタログの上部)。

• 背景__CODEBCK_1030___、テキスト__CODEBCK_1031___、タイポグラフィ__CODEBCK_1032___、角丸__CODEBCK_1033___、高さ56ピクセル、境界線__CODEBCK_1034___.

タブ

**`pill-tab`** + **`pill-tab-active`** — ピル形式のタブ ナビゲーション (価格設定の上部: 「MongoDB Atlas / Enterprise Advanced」)。

• 非アクティブ: テキスト__CODEBCK_1037___、境界線__CODEBCK_1038___、パディング__CODEBCK_1039___、丸め__CODEBCK_1040___.
• アクティブ: 背景__CODEBCK_1041___、テキスト__CODEBCK_1042___.

_**`segmented-tab`** + **`segmented-tab-active`** — 下線スタイルのタブ ナビゲーション。

• 非アクティブ: テキスト__CODEBCK_1045___、境界線なし。 アクティブ: テキスト ``、__CODEBCK_1047___ の 2 ピクセルの下枠。

バッジとステータス

**`badge-green`** — 新製品のハイライト用の明るい緑色のバッジ。

• 背景__CODEBCK_1049___、テキスト__CODEBCK_1050___、タイポグラフィ__CODEBCK_1051___、角丸__CODEBCK_1052___、パディング__CODEBCK_1053___.

_**`badge-green-soft`** — 成功/無料インジケーター用のペールミント錠剤。

• 背景__CODEBCK_1055___、テキスト__CODEBCK_1056___、タイポグラフィ__CODEBCK_1057___、角丸__CODEBCK_1058___、パディング__CODEBCK_1059___.

**`badge-purple`** — 紫色のコース カテゴリ タグ。

• 背景__CODEBCK_1061___、テキスト__CODEBCK_1062___、タイポグラフィ__CODEBCK_1063___、角丸__CODEBCK_1064___、パディング__CODEBCK_1065___.

**`badge-orange`** — オレンジ色のコース カテゴリ タグ。

• 背景__CODEBCK_1067___、テキスト__CODEBCK_1068___、タイポグラフィ__CODEBCK_1069___、角丸__CODEBCK_1070___、パディング__CODEBCK_1071___.

**`badge-popular`** — 「最も人気のある」層インジケーター (緑色の文字が付いた濃い青緑色の錠剤)。

• 背景__CODEBCK_1073___、テキスト__CODEBCK_1074___、タイポグラフィ__CODEBCK_1075___、角丸__CODEBCK_1076___、パディング__CODEBCK_1077___.

**`promo-banner`** — 上部ナビゲーションの上の濃い青緑色の粘着プロモーション ストリップ

• 背景__CODEBCK_1079___、テキスト__CODEBCK_1080___、タイポグラフィ__CODEBCK_1081___、パディング__CODEBCK_1082___.

コード

**`code-block`** — コード コンテナー。

• 背景__CODEBCK_1084___、テキスト__CODEBCK_1085___、タイポグラフィ__CODEBCK_1086___、角丸__CODEBCK_1087___、パディング__CODEBCK_1088___.

**`code-mockup-card`** — ヒーロー バンドの埋め込みコード モックアップ。

• 背景__CODEBCK_1090___、テキスト__CODEBCK_1091___、丸め__CODEBCK_1092___、パディング__CODEBCK_1093___。 端末の美しさを表現するコード スニペットが含まれています。

テーブル

**`comparison-table`** — 価格機能の比較表。

• 背景__CODEBCK_1095___、テキスト__CODEBCK_1096___、タイポグラフィ__CODEBCK_1097___、角丸__CODEBCK_1098___、境界線__CODEBCK_1099___.

**`comparison-row`** — 個別の機能行。

• 背景__CODEBCK_1101___、テキスト__CODEBCK_1102___、パディング__CODEBCK_1103___、下枠__CODEBCK_1104___.

ドキュメントコンポーネント

**`service-tile`** — 「展開のカスタマイズ」の 6 段階グリッドのタイル。

• 背景__CODEBCK_1106___、角丸__CODEBCK_1107___、パディング__CODEBCK_1108___、境界線__CODEBCK_1109___.

**`why-card`** — 「建設業者に愛されている」機能カード。

• 背景__CODEBCK_1111___、角丸__CODEBCK_1112___、パディング__CODEBCK_1113___.

**`customer-testimonial-card`** — 顧客見積カード。

• 背景__CODEBCK_1115___、角丸__CODEBCK_1116___、パディング__CODEBCK_1117___、境界線__CODEBCK_1118___.

**`logo-wall-item`** — 顧客ロゴのワードマーク セル。

• 背景透明、テキスト__CODEBCK_1120___、タイポグラフィ__CODEBCK_1121___、パディング__CODEBCK_1122___.

**`faq-accordion-item`** — FAQ パネル。

• 背景__CODEBCK_1124___、角丸__CODEBCK_1125___、パディング__CODEBCK_1126___、下枠__CODEBCK_1127___.

ナビゲーション

**トップ ナビゲーション (マーケティング)** — スティッキーな白いバー。

• 背景__CODEBCK_1128___、高さ~64ピクセル、下枠__CODEBCK_1129___.
• 左: MongoDB のリーフ ロゴ + 「ソリューション / リソース / 会社 / 価格」リンク。
• 右: 「サインイン」リンク + 明るい緑色の錠剤「無料お試し」CTA。

署名コンポーネント

**`hero-band-dark`** — コード モックアップが埋め込まれた濃い青緑のヒーロー バンド。

• 背景__CODEBCK_1131___、テキスト__CODEBCK_1132___、パディング__CODEBCK_1133___.
• レイアウト: 中央に見出し__CODEBCK_1134___、サブタイトル、ボタン行、下に__CODEBCK_1135___。

_**`hero-platform-card`** — ダーク ヒーローの明るい青緑色のプラットフォーム ショーケース カード。

• 背景__CODEBCK_1137___、テキスト__CODEBCK_1138___、丸め__CODEBCK_1139___、パディング__CODEBCK_1140___.

**`cta-banner-dark`** — 特集ページの下部にある暗い CTA バナー。

• 背景__CODEBCK_1142___、テキスト__CODEBCK_1143___、丸め__CODEBCK_1144___、パディング__CODEBCK_1145___.

**`footer-region`** — ダークティールの複数列フッター。

• 背景__CODEBCK_1147___、パディング__CODEBCK_1148___.
• 6 列のリンク グリッド。
• `` のセクション見出し ``.

**`footer-link`** — 個別のフッター リンク。

• 背景透明、テキスト__CODEBCK_1152___、タイポグラフィ__CODEBCK_1153___、パディング__CODEBCK_1154___.

推奨事項と禁止事項

実行

• どこでもプライマリ CTA として__CODEBCK_1155___ (明るい MongoDB 緑色) を使用
• ダークティールのヒーローバンドと明るい緑色のCTA錠剤を組み合わせてください
• __CODEBCK_1156___ をすべてのボタン、すべてのステータス バッジに適用
• __CODEBCK_1157___ (12 ピクセル) をカードに一貫して適用
• カテゴリのアクセントカラー (紫、オレンジ、緑、青緑) をコースタグにのみ使用してください___HTML TAG_791___
• すべての UI サーフェスにわたって Euclid Circular A を維持
• 製品ショーケースに端末の美的コンテンツを含むコード モックアップ カードを使用する

しないでください

• 本文テキストや大きな面には明るい緑色を使用しないでください
• ブランド グリーンとカテゴリ エンコーディング パレットを超える追加のアクセント カラーを導入しないでください
• _ボタンの角を柔らかくしないでください。錠剤はブランドの象徴
• 濃い青緑のヒーロー バンドを白のヒーロー バンドに置き換えないでください
• _平らなドキュメント カードには濃い影を適用しないでください。コードモックアップ用に標高を確保
• 散文には Source Code Pro を使用しないでください

応答動作

ブレークポイント

|名前 |幅 |主な変更点 |

|---|---|---|

|モバイル（小） | < 480px | Single column. Hero 36px. Pricing 1-up. Course catalog 1-up. |

|モバイル（大） | 480 – 767ピクセル |コースタイルは2アップ。 ヒーロー48ピクセル。 |

|タブレット | 768 – 1023ピクセル | 2 列のフィーチャ グリッド。ヒーロー56ピクセル。 |

|デスクトップ | 1024 – 1279ピクセル | 3 層の価格カードの行。 3アップコースカタログ。ヒーロー64ピクセル。 |

|ワイドデスクトップ | ≥ 1280 ピクセル |完全な 72 ピクセルのヒーロー プレゼンテーション。 |

タッチターゲット

• ピル ボタンは 40 ～ 44 ピクセルの有効高さでレンダリングされます
• フォーム入力は高さ 44 ピクセルでレンダリング
• 検索ピル (大) は 56px
で表示されます
• モバイルではピルタブ ~32 ピクセル → 44 ピクセル

戦略の崩壊

• **プロモーション バナー** は全幅のままです。 < 480px
で切り捨てられます
• **1024 ピクセル未満のトップ ナビゲーション** はハンバーガーに折りたたまれます
• **ヒーロー バンド**: コード モックアップ カードがモバイル上のテキストの下に移動
• **価格階層**: 3 列 → 2 列タブレット → 1 列モバイル
• **コース カタログ**: 3-up → 2-up タブレット → 1-up モバイル
• **ヒーローのタイポグラフィ**: 72px → 56px → 48px → 36px
• **フッター**: 6 列デスクトップ → 3 列タブレット → アコーディオン モバイル

画像の動作

• Atmospheric AI 画像は、フルブリード スケーリングで 16:9 の比率を使用
• コード モックアップ カードのコンテンツはブレークポイントを越えても読み取り可能
• 顧客ロゴ ウォール: 一貫した 60 ～ 80 ピクセルの高さのワードマーク

反復ガイド

1.一度に 1 つのコンポーネントに集中する

2.コンポーネント名とトークンを直接参照

3.編集後に__CODEBCK_1158___を実行

4.新しいバリアントを個別の `components:` エントリ

として追加します

5.本文

のデフォルトは__CODEBCK_1160___です。

6. `` をすべてのサーフェスにわたるプライマリ CTA として維持

7。錠剤型ボタン (``) 常に

8。ダークティールのヒーロー バンドがプライマリ CTA を構成

既知のギャップ

• ヒーロー バンドを超えたキャンバス/サーフェスの特定のダークモード トークン値が表示されない
• アニメーション/遷移のタイミングは抽出されません。 150 ～ 200 ミリ秒を推奨します
• フォーム検証の成功状態が明示的に取得されていません
• コース タイル カテゴリのカラー マッピングは観察に基づいています

Design Approach

Mongodb's design system reflects a deliberate visual strategy that prioritizes expressive richness in every interface. The brand language centers on a #0a0a0a anchor, creating an immediate visual signature that differentiates Mongodb from competitors in the same space. What makes this system particularly effective is how consistently the brand identity carries across surfaces — from marketing pages to product UI — without feeling repetitive or rigid.

Design Approach

Mongodb's design system reflects a deliberate visual strategy that prioritizes expressive richness in every interface. The brand language centers on a #0a0a0a anchor, creating an immediate visual signature that differentiates Mongodb from competitors in the same space. What makes this system particularly effective is how consistently the brand identity carries across surfaces — from marketing pages to product UI — without feeling repetitive or rigid.

Design Approach

Mongodb's design system reflects a deliberate visual strategy that prioritizes expressive richness in every interface. The brand language centers on a #0a0a0a anchor, creating an immediate visual signature that differentiates Mongodb from competitors in the same space. What makes this system particularly effective is how consistently the brand identity carries across surfaces — from marketing pages to product UI — without feeling repetitive or rigid.

Related Design Systems

Explore similar design languages from the same category:

• Ibm Design System
• Sentry Design System
• Hashicorp Design System