企业官网建设流程全解析

• AI 应用
• 人工智能
• AI 技能
• 设计系统
• 媒体生成

导读：本文以 design-systems/mongodb/DESIGN.md 为主体，系统拆解 OpenDesign 内置 MongoDB 设计系统的完整视觉契约——从#001e2b森林黑与#00ed64霓虹绿的色彩骨架，到 "Serif 权威 × 几何正文 × 等宽标签" 三字体体系，再到按钮、卡片、表单等组件的精确取值与 Agent 提示词写法。读完本文，你可以直接用这套规格复刻一个"数据库公司气质"的产品页面，也能理解 tokens.css 中每个 CSS 变量背后的设计决策，以及如何用提示词让编码 Agent 产出高度还原的界面。

1. 设计系统包结构总览

在 OpenDesign 仓库中，MongoDB 设计系统是一个标准化的 "Design System 2.0" 包，目录位于design-systems/mongodb/，其包契约定义在 manifest.json 中：

包清单显示：本包共声明56 个 Token，全部有源文件背书（sourceBackedTokens: 56），契约评分为 100、等级excellent，其中 26 个为 A2 层派生 Token、18 个为 A1 结构层 Token、8 个为 A1 身份层 Token、4 个为 B-slot 槽位 Token（见 design-tokens.json 的summary字段）。组件夹具包含 50 个选择器、26 个类与 25 个元素，覆盖按钮、输入、卡片、徽章、链接、键盘提示、图标、排版与布局共 9 个组件分组。

需要特别说明的事实边界：根据 source/evidence.md，该包是基于 OpenDesign 策展的内置夹具（bundled fixture）整理而成，并非对 MongoDB 官网的实时爬取，因此文中所有取值均以仓库内文档与样式文件为准。

2. 视觉主题：深林与终端之间的双模式体验

MongoDB 设计系统的第一印象是"深林遇见终端"：页面基调是最深的青黑#001e2b（Forest Black），既暗示数据库的密度，又让人联想到森林树冠的纵深。在这块近乎纯黑的画布上，霓虹绿#00ed64（MongoDB Green）以极低的使用频率脉动——它不像赛博朋克的冷霓虹，更像是黑暗中生长的生物荧光绿。

这套视觉有两大支柱：

双模式结构（Dual-mode）——暗色英雄区/特性区（#001e2b底 + 霓虹绿点缀）与亮色内容区（白底 + 银青边框#b8c4c2）交替出现，模式切换本身构成强烈的戏剧性对比。根据 tokens.css，暗色画布对应--bg，抬升卡片使用略暖的深青面板--surface: #1c2d38；值得注意的是--surface-warm直接别名到--surface，因为 MongoDB 调色板严格无暖色，暖表面槽位不引入琥珀色阶以免破坏森林氛围。

三字体分工——MongoDB Value Serif承担 96px 量级的英雄标题（衬线字体出现在数据库公司尺度的标题上，是"我们不只是另一家科技公司"的编辑式宣言）；Euclid Circular A以罕见的 300–700 宽字重区间承担正文与 UI；Source Code Pro作为代码与标签字体，用 1px–3px 的极宽字距 + 大写处理形成"数据库字段标签"式的技术路标。

关键特征速览：

• 深青黑背景#001e2b——森林之暗，而非太空之暗
• 霓虹绿#00ed64作为唯一品牌强调色——既电光又有机
• MongoDB Value Serif 用于英雄标题——科技尺度的编辑权威
• Euclid Circular A 正文默认字重 300（light）——标志性的轻盈正文
• Source Code Pro 宽字距大写（1px–3px）——技术标签专属
• 青色染色阴影rgba(0, 30, 43, 0.12)——阴影携带森林色
• 暗青英雄区 + 亮白内容区的双模式
• 药丸按钮（100px 圆角）+ 绿边框（#00684a）
• 链接蓝#006cfa，悬停过渡至#3860be

3. 色彩系统：三色品牌骨架 + 分层中性色 + 森林色阴影

3.1 主品牌色（Primary Brand）

3.2 交互色（Interactive）

3.3 中性色阶（Neutral Scale）

3.4 阴影体系（Shadows）

3.5 Token 落地映射

上述取值在 tokens.css 的:root中被固化为标准化变量，这是 OpenDesign 跨品牌切换可靠性的关键。几个值得注意的落地决策：

• 四层前景色阶独立绑定而非别名：--fg: #ffffff（标题）、--fg-2: #e8edeb（正文/次级标题）、--muted: #b8c4c2（说明文字）、--meta: #5c6c75（元数据/三级标签），因为 MongoDB 确实会在暗色表面逐一绘制每一层（tokens.css）。
• 强调色三元组：--accent: #00ed64配--accent-on: #001e2b（霓虹绿足够亮，深色文字对比度远高于白色）与--accent-hover: #00684a（品牌自有的暗绿变体，而非程序化压暗）；按下态--accent-active用color-mix(in oklab, var(--accent-hover), black 12%)在 OKLab 色彩空间混合（tokens.css）。
• 边框单层化：--border: #3d4f58，--border-soft别名到它，因为暗色模式下 MongoDB 不区分卡片边缘与内分隔线两层（tokens.css）。
• 焦点环品牌化：--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%)——用品牌霓虹绿以 30% 强度做键盘焦点光晕，而不是通用蓝环（tokens.css）。

4. 排版系统：三字体 × 四字重的权威层级

4.1 字体族（Font Families）

• Display Serif：MongoDB Value Serif——编辑式英雄标题
• Body / UI：Euclid Circular A——几何无衬线主力
• Code / Labels：Source Code Pro——等宽 + 大写标签处理
• Fallbacks：Akzidenz-Grotesk Std（CJK 环境回退 Noto Sans KR/SC/JP）、Times、Arial、system-ui

Token 侧的实际声明（tokens.css）为：

--font-display: "MongoDB Value Serif", "Times New Roman", Times, ui-serif, Georgia, serif; --font-body: "Euclid Circular A", "Akzidenz-Grotesk Std", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: "Source Code Pro", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;

4.2 完整层级表

字号在 Token 中浓缩为--text-xs: 11px到--text-4xl: 96px的八级刻度（tokens.css），行高/字距则由--leading-body: 1.5、--leading-tight: 1.2、--tracking-display: normal承载——注意 96px 的 Serif 英雄标题采用normal字距而非负字距，靠衬线字形本身传达权威，不靠压缩。

4.3 排版原则（Principles）

• Serif 制造权威：MongoDB Value Serif 在英雄尺度上制造了科技行业罕见的编辑感——传达"MongoDB 是机构而非创业公司"。
• 300 字重作为正文默认：Euclid Circular A 用 light(300) 作正文，营造轻盈的阅读体验，与厚重的暗色背景形成反差。
• 宽字距等宽标签：Source Code Pro 大写 + 1px–3px 字距，形成像数据库字段标签一样系统化、结构化、分类化的技术路标。
• 四档字重范围：300（轻盈正文）→ 400（标准）→ 500（UI/导航）→ 700（加粗 CTA）——比多数系统更宽，支持更精细的层级控制。

在 components.html 中，body默认即font-weight: 300，.eyebrow类实现了 14px 大写 Source Code Pro + 2px 字距 + 霓虹绿的"数据库字段标签"（components.html），与 DESIGN.md §3 的原则逐条对应。

5. 组件样式

5.1 按钮（Buttons）

Primary Green（暗色表面）

• 背景：#00684a（暗化的 MongoDB 绿）
• 文字：#000000
• 圆角：50%（圆形）或 100px（药丸）
• 边框：1px solid #00684a
• 阴影：rgba(0,0,0,0.06) 0px 1px 6px
• Hover：缩放 1.1
• Active：缩放 0.85

Dark Teal Button

• 背景：#1c2d38
• 文字：#5c6c75
• 圆角：100px（药丸）
• 边框：1px solid #3d4f58
• Hover：背景#1eaedb、文字变白、translateX(5px)

Outlined Button（亮色表面）

• 背景：透明
• 文字：#001e2b
• 边框：1px solid #b8c4c2
• 圆角：4px–8px
• Hover：背景着色（tint）

组件夹具中的落地实现（components.html）略有工程化调整：.btn-primary直接以霓虹绿--accent为背景、Forest Black--accent-on为文字（对比度远优于白字），悬停时"沉淀"为暗绿--accent-hover；.btn-secondary使用深青表面 + 银青文字，悬停时切换为 Teal Active#1eaedb背景白字。这与 DESIGN.md 中 Dark Teal Button 的 hover 逻辑一致。

5.2 卡片与容器（Cards & Containers）

• 亮色模式：白底 +1px solid #b8c4c2边框
• 暗色模式：#001e2b或#1c2d38背景 +1px solid #3d4f58边框
• 圆角：16px（标准）、24px（中等）、48px（大/英雄）
• 阴影：rgba(0,30,43,0.12) 0px 26px 44px（森林染色）
• 图片容器：30px–32px 圆角

Token 化实现（components.html）：.card使用--surface背景、--border边框、--radius-lg（16px）圆角、--elev-raised森林阴影、--space-6内边距与--space-3内部间距。30–32px 的图片圆角与 48px 的英雄圆角属于表面特定值，在components.html中以内联覆盖方式存在，而非全局刻度。

5.3 输入与表单（Inputs & Forms）

• Textarea：文字#e8edeb，内边距12px 12px 12px 8px
• 边框：亮色1px solid #b8c4c2，暗色1px solid #3d4f58
• 输入圆角：4px

工程化细节（components.html）：.field为纵向 flex 布局，label 用 14px/500 字重，input 背景--surface、文字--fg-2、字重 300，:focus-visible时边框切为霓虹绿并叠加品牌焦点环，占位符用--meta冷灰。

5.4 导航（Navigation）

• 森林黑背景上的暗色页头
• 导航链接 Euclid Circular A 16px 字重 500
• MongoDB logo（叶子图标 + 字标）左对齐
• 绿色 CTA 药丸按钮右对齐
• 带产品分类的 Mega-menu 下拉

5.5 图像处理（Image Treatment）

• 暗色背景上的仪表盘截图
• 截图中的绿色强调 UI 元素
• 图片容器 30px–32px 圆角
• 产品展示使用全宽暗色区块

5.6 标志性组件（Distinctive Components）

霓虹绿强调下划线

• 0px 2px 2px 0px solid #00ed64——bottom + right 边框组成的强调下划线
• 用于特性标题与高亮文字
• 另有#006cfa（蓝）变体

组件夹具用渐变实现更平滑的"荧光"效果（components.html）：.accent-underline通过background-image: linear-gradient(var(--accent), var(--accent))+ 100% × 2px 的background-size+ 底部定位，达到 2px 霓虹下划线并带 2px 底部留白。

Source Code Label 体系

• 14px 大写 Source Code Pro + 1px–2px 字距
• 用作标题上方的区块分类标记
• 形成"数据库字段标签"美学

6. 布局原则

6.1 间距系统（Spacing System）

• 基础单位：8px
• 刻度：1px, 4px, 7px, 8px, 10px, 12px, 14px, 15px, 16px, 18px, 20px, 24px, 32px

Token 落地时，文档记录的奇数子档（7、14、15、18）用于组件内部精细对齐，结构节奏交给 schema 的 4/8/12/16/20/24/32/48（--space-1到--space-12，见 tokens.css）。

6.2 栅格与容器（Grid & Container）

• 居中最大内容宽度
• 暗色英雄区承载受限内容
• 下方为亮色内容区块
• 卡片栅格：2–3 列
• 全宽暗色页脚

Token 化：--container-max: 1200px，三档容器水槽--container-gutter-desktop: 24px/--container-gutter-tablet: 16px/--container-gutter-phone: 12px（tokens.css）。

6.3 留白哲学（Whitespace Philosophy）

• 戏剧性模式切换：暗青区块到白色内容的切换用对比而非纯粹留白制造内置呼吸感。
• 慷慨的暗色区块：暗色英雄与特性区使用额外垂直内边距（80px+），让森林暗背景呼吸。
• 紧凑的亮色区块：白色内容区更密集，卡片栅格更紧、垂直间距更小。

Token 化：--section-y-desktop: 96px/--section-y-tablet: 64px/--section-y-phone: 40px（tokens.css），桌面端 96px 位于文档记录区间的慷慨一端。

6.4 圆角刻度（Border Radius Scale）

Token 化为四档：--radius-sm: 4px、--radius-md: 8px、--radius-lg: 16px、--radius-pill: 9999px（tokens.css）。

7. 深度与层级（Depth & Elevation）

阴影哲学：MongoDB 阴影体系独特之处在于主抬升阴影使用rgba(0, 30, 43, 0.12)——一个青色染色的阴影，把森林暗色品牌色带进深度体系。即使在白色表面上，阴影也让人觉得属于 MongoDB 的色彩世界，而非通用的中性黑。

Token 侧实现了--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)与--elev-raised（森林双阴影），见 tokens.css。

8. Do's 与 Don'ts

Do（应做）

• 暗色区块使用#001e2b（森林黑），而非纯黑
• MongoDB Green（#00ed64）少量使用，换取最大电光冲击
• MongoDB Value Serif只用于英雄/展示标题——其余一律 Euclid Circular A
• Source Code Pro 大写 + 宽字距（1px–3px）用于技术标签
• 主卡片抬升使用青色染色阴影（rgba(0,30,43,0.12)）
• 维持暗/亮区块二元性——模式间戏剧性对比
• 正文使用 300 字重——轻盈字重才是可读之声
• 主行动按钮使用药丸圆角（100px）

Don't（禁忌）

• 不要用纯黑（#000000）做暗色背景——永远用青黑（#001e2b）
• 不要把 MongoDB Green（#00ed64）用在背景上——它是文字、下划线与小高亮的强调色
• 不要用标准灰阴影——永远用青色染色（rgba(0,30,43,...)）
• 不要把衬线字体用于正文——MongoDB Value Serif 仅限英雄标题
• 不要在 Source Code Pro 标签上用窄字距——宽字距本身就是身份
• 不要在同一个区块内混用暗色与亮色处理
• 不要用暖色——调色板严格为冷色（青、绿、蓝）
• 不要忘记绿色强调下划线——它是标志性装饰元素

9. 响应式行为

断点（Breakpoints）

触控目标（Touch Targets）

• 药丸按钮带慷慨内边距
• 导航链接 16px 且间距充足
• 卡片表面作为全区域触控目标

折叠策略（Collapsing Strategy）

• Hero：MongoDB Value Serif 96px → 64px → 进一步缩放（组件夹具实际为 96px → 64px → 44px，见 components.html）
• 导航：横向 mega-menu → 汉堡菜单
• 特性卡片：多列 → 堆叠
• 暗/亮区块在任何尺寸都保持各自模式
• Source Code Pro 标签保持大写处理

图片行为（Image Behavior）

• 仪表盘截图按比例缩放
• 暗色区块背景保持全宽
• 图片圆角跨断点保持

容器水槽与区块垂直节奏在断点下由 Token 统一降档：1023px 以下切到--container-gutter-tablet与--section-y-tablet，639px 以下切到手机档（components.html）。

10. Agent 提示词指南

10.1 快速颜色参考

• 暗色背景：Forest Black（#001e2b）
• 品牌强调：MongoDB Green（#00ed64）
• 功能性绿色：Dark Green（#00684a）
• 链接蓝：Action Blue（#006cfa）
• 亮色文字：Black（#000000）
• 暗色文字：White（#ffffff）或 Light Input（#e8edeb）
• 亮色边框：Silver Teal（#b8c4c2）
• 暗色边框：Teal Gray（#3d4f58）

10.2 组件提示词示例

可直接复制使用的提示词：

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

10.3 迭代指南（Iteration Guide）

1. 从模式决策开始：hero/特性用暗色（#001e2b），内容用白色
2. MongoDB Green（#00ed64）是电光——每区块只用一次换取最大冲击
3. Serif 标题（MongoDB Value Serif）制造编辑权威——绝不用于正文
4. 300 字重正文制造轻盈阅读体验——不要默认用 400
5. Source Code Pro 大写 + 宽字距做技术标签——数据库之声
6. 青色染色阴影让一切留在 MongoDB 色彩世界中

11. 在 OpenDesign 中的使用方式

根据 USAGE.md，Agent 与审查者的推荐阅读/使用顺序为：

1. 先读 USAGE.md 理解包契约；
2. 再读 DESIGN.md 理解视觉意图、约束与反模式；
3. 将 tokens.css 粘贴进第一个产物的<style>块（作为:rootToken 块），之后才写组件 CSS；
4. 用 components.manifest.json 获取精简组件清单，需要精确选择器与状态时打开 components.html；
5. 需要视觉抽查时查看preview/下的 colors / typography / spacing 页面。

使用纪律：保留 schema Token 名称原样，保证跨品牌切换可靠；--accent只用于主操作、链接、焦点态与一个明确的焦点元素；优先复用 manifest 中的组件组而非发明新控件；避免在:rootToken 块之外使用裸十六进制色值；不要独立于tokens.css重定义 Tailwind 或 design-token 值；不要声称存在上游品牌源码证据（本包基于策展夹具整理）。

如需将 Token 接入 Tailwind v4，tailwind-v4.css 提供了现成桥接：@import "./tokens.css"后，在@theme中把--color-bg、--color-accent、--font-display、--text-4xl、--spacing-*、--radius-pill、--shadow-raised等逐一映射为 Tailwind 主题变量，即可获得bg-bg、text-accent、font-display、text-4xl、rounded-pill、shadow-raised等原子类。

结语：把"数据库公司"的气质变成可执行的 Token

MongoDB 设计系统在 OpenDesign 中是一份极其完整的"视觉 DNA"：它不是零散的颜色清单，而是一套自洽的决策系统——森林黑画布规定了暗色世界不落纯黑、霓虹绿规定了强调色的使用纪律、Serif 英雄标题规定了字体分工、青色染色阴影把品牌色渗透进纵深体系、宽字距大写等宽标签定义了"数据库字段"式的技术路标。配合 tokens.css 的 56 个标准化变量与 components.html 的 9 组组件实现，你既能手工复刻这套风格，也能把 DESIGN.md 中的提示词直接交给编码 Agent 生成高保真界面——这是"后端与数据"品类设计系统的完整参考范式。

• AI 应用
• 人工智能
• AI 技能
• 设计系统
• 媒体生成