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 대학 페이지는 각 타일에 색상 카테고리 태그(주황색, 보라색, 녹색, 청록색)가 있는 코스 카탈로그 그리드를 제공합니다. 이는 MongoDB의 카테고리 인코딩 강조 색상이며 브랜드 녹색 외부에서 포화 색상이 나타나는 유일한 장소입니다.

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

**주요 특징:**

• 밝은 MongoDB 녹색({colors.brand-green}) CTA 알약이 포함된 진한 남색/청록색 히어로 밴드({colors.brand-teal-deep})
• 코스 타일(보라색, 주황색, 녹색, 청록색)에 대한 색상 카테고리 태그가 있는 완전히 흰색 가격/문서 표면
• 모든 UI 표면에 걸친 Euclid Circular A
• 알약 모양의 버튼({rounded.full}) 및 12px 둥근 카드
• 주요 민트 하이라이트 계층을 통한 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 색상
• **Green Dark** ({colors.brand-green-dark}): 인라인 링크 색상, 보조 녹색
• **Green Mid** ({colors.brand-green-mid}): 대기 색조를 위한 중간 스펙트럼 녹색
• **그린 소프트**({colors.brand-green-soft}): 성공 배지 및 추천 가격 등급을 위한 연한 민트색 배경 색조
• **Brand Teal Deep** ({colors.brand-teal-deep}): 히어로 밴드를 위한 딥 네이비 청록색, 바닥글
• **브랜드 청록색** ({colors.brand-teal}): 중간 스펙트럼 청록색
• **Brand Teal Mid** ({colors.brand-teal-mid}): 영웅 플랫폼 카드용 밝은 청록색

카테고리 악센트(코스 태그)

• **Accent Purple** ({colors.accent-purple}): "데이터베이스 및 보안"에 대한 강좌 태그
• **Accent Orange** ({colors.accent-orange}): "검색"을 위한 강좌 태그
• **Accent Pink** ({colors.accent-pink}): 강좌 태그 변형
• **Accent Blue** ({colors.accent-blue}): 아틀라스/클라우드 주제에 대한 강좌 태그 변형

표면

• **캔버스 흰색** ({colors.canvas}): 페이지 배경 및 기본 카드 표면
• **Canvas Dark** ({colors.canvas-dark}): 코드 블록 배경, 어두운 모형 캔버스
• **Surface** ({colors.surface}): 미묘한 섹션 배경, 검색 알약 나머지
• **Surface Soft** ({colors.surface-soft}): 더 조용한 섹션 분할
• **표면 기능**({colors.surface-feature}): 주요 가격 등급에 대한 옅은 민트색 배경
• **헤어라인**({colors.hairline}): 1px 테두리 및 기본 구분선
• **Hairline Soft** ({colors.hairline-soft}): 더 조용한 구분선
• **Hairline Strong** ({colors.hairline-strong}): 입력 시 1px 테두리가 더 강해졌습니다.
• **Hairline Dark** ({colors.hairline-dark}): 어두운 표면의 테두리

텍스트

• **잉크**({colors.ink}): 기본 헤드라인 및 본문 텍스트(짙은 남색)
• **Charcoal** ({colors.charcoal}): 신체 강조
• **Slate** ({colors.slate}): 보조 텍스트
• **Steel** ({colors.steel}): 3차 텍스트, 캡션
• **Stone** ({colors.stone}): 음소거된 라벨
• **음소거** ({colors.muted}): 비활성화됨, 자리표시자
• **On Dark** ({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.

**Source Code Pro**(코드): 코드 모형을 위한 고정폭입니다. 대체: 'SF Mono', Menlo, Consolas, 고정폭.

계층 구조

| 토큰 | 사이즈 | 무게 | 라인 높이

概要

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

このシステムは、表示面として Euclid Circular A を使用します。顔は現代的な幾何学模様で、自信にあふれていますが過度に遊び心はなく、データベース製品の開発者ツールの美学と学習面の教育的な位置付けの両方に自然に調和します。カードは `{rounded.lg}` (12px) の角を使用します。ボタンは普遍的に「{rounded.full}」錠剤を使用します。ブランド ティール パレット ({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}): インラインリンクの色、セカンダリグリーン
• **Green Mid** ({colors.brand-green-mid}): 雰囲気のある色合いの中間スペクトルのグリーン
• **Green Soft** ({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}): コードブロックの背景、ダーク モックアップ キャンバス
• **Surface** ({colors.surface}): 微妙なセクションの背景、検索ピルの残り
• **Surface Soft** ({colors.surface-soft}): より静かなセクション分割
• **表面機能** ({colors.surface-feature}): 注目の価格帯の淡いミントの背景
• **ヘアライン** ({colors.hairline}): 1 ピクセルの境界線と主分割線
• **Hairline Soft** ({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。

階層

|トークン |サイズ |重量 |ラインの高さ