品牌手册 · 设计系统
纸、墨与交汇点。
页面声明自己的工具，浏览器居于其间；页面与智能体在此相遇，谁也不取代谁。标志画的就是这次相遇。下面的一切都由实际发布的代码渲染。
01 · 名称
webmcpx，始终小写
- 始终小写：webmcpx，位于句首也一样（宁可改写句子）。
- 在代码和命令中，使用 Geist Mono 字体。
- WebMCP 是浏览器 API，拼写与草案保持一致。webmcp.zone 是社区网站。
- webmcpx 不是 WebMCP 本身，也从不以 WebMCP 自称。
02 · 标志
三个标志，一个理念
能用交汇点的地方都用交汇点。卡片用作徽章和应用图标（32px 及以上）；带槽页面是备用标志。
03 · 构造
24 单位网格，2 单位间隙
两个实心 V 形，互为镜像。两臂末端宽 4.5 单位，顶点削平 2 单位，两者之间留出 2 单位的间隙，永不闭合：这道间隙就是浏览器。
安全区
标志四周的留白至少为标志高度的一半；组合标志四周的留白至少为字母 x 的高度。
最小尺寸
标志只有 favicon 版本可以缩到 16px。组合标志高度至少 24px。
04 · 颜色
纸与墨，外加一支荧光笔
色值读取自 tokens.css。按作品所在的背景选择版本，而不是按读者的主题。
-
paper
#f2f1ed
页面背景
-
paper-2
#e8e6e0
凹陷面板、轨道
-
card
#fcfbf8
纸面上的卡片和输入框
-
ink
#121210
文字、描边、阴影、主按钮
-
ink-2
#43423f
次要文字
-
ink-3
#5c5b56
说明文字和标签
-
hairline
#d3d1ca
细分隔线
-
marker
#fcd948
荧光笔：唯一的强调色
-
good
#197037
就绪、通过（文字）
-
good-soft
#b9eec2
就绪、通过（填充）
-
bad
#af2b25
缺失、失败（文字）
-
bad-soft
#ffd9d2
缺失、失败（填充）
-
code
#171614
代码块背景
-
on-code
#e9e8e3
代码块上的文字
认可的文字配色
WCAG 2.2 AA 要求正文对比度达到 4.5:1；有测试强制检查。
| 文字 / 背景 | 对比度 |
|---|---|
| paper 上的 ink | 16.65:1 |
| paper-2 上的 ink | 15.08:1 |
| card 上的 ink | 18.17:1 |
| marker 上的 ink | 13.55:1 |
| good-soft 上的 ink | 14.35:1 |
| bad-soft 上的 ink | 14.41:1 |
| ink 上的 paper | 16.65:1 |
| paper 上的 ink-2 | 8.86:1 |
| card 上的 ink-2 | 9.67:1 |
| paper 上的 ink-3 | 6.04:1 |
| paper-2 上的 ink-3 | 5.47:1 |
| card 上的 ink-3 | 6.59:1 |
| paper 上的 good | 5.47:1 |
| card 上的 good | 5.97:1 |
| paper 上的 bad | 5.79:1 |
| card 上的 bad | 6.32:1 |
| code 上的 on-code | 14.73:1 |
黄色只做背景，不做图形
荧光黄在纸色上的对比度只有 1.23:1：承载不了形状或文字。把它垫在墨色内容下面：一个高亮词、一个标签、一个应用图标。
05 · 字体
Bricolage、Geist、Geist Mono
Bricolage Grotesque · 特大
智能体就绪
Bricolage Grotesque · 标题
同一个智能体，同一个问题。
Geist · 正文
短句，可核验。一句只讲一件事。
Geist Mono · 代码与标签
document.modelContext.registerTool()
06 · 组件
2px 描边，硬阴影
src/lib/components/ui。变体是 tailwind-variants 配方；形状来自同一套设计 token。
Button · 变体 × 尺寸
Stamp · 色调
Tabs
“第一项”的面板。用方向键切换。
“第二项”的面板。用方向键切换。
CodeBlock（构建时高亮）
<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/src/auto.js"></script>07 · 误用
不要这样做
-
不要拉伸或压扁
-
不要旋转
-
不要添加描边或轮廓
-
不要用黄色绘制
-
不要给标志添加阴影或特效
-
不要合上两个 V 形之间的间隙
08 · 商标
名字随便用，别装官方。
代码采用 MIT 许可证；名称和标志不在该许可证范围内。完整政策见 TRADEMARK.md。
可以这样说
- 实现了 W3C Web Machine Learning 社区组的 WebMCP 社区组报告草案（Draft Community Group Report，并非 W3C 标准）。
- 基于 webmcpx 构建。兼容 webmcpx。
- 可在开启 WebMCP flag 的 Chrome 中使用。
绝不要说
- 官方 WebMCP 库
- W3C WebMCP 标准
- 通过 MCP 认证
- Chrome 版 webmcpx
语气
短句，可核验。用数字说话，少用形容词。
我们用的词
声明暴露调用实测跟进社区组草案兼容 webmcpx
我们不用的词
官方W3C 标准符合 W3C 规范通过 MCP 认证革命性神奇
声明
- webmcpx 是独立项目，与 LF Projects、Agentic AI Foundation、Anthropic、W3C、Google 或 Microsoft 均无隶属关系，也未获其背书。
- Model Context Protocol 及 MCP 标志是 LF Projects, LLC 的商标。
- W3C® 是万维网联盟（World Wide Web Consortium）的商标。