ブランド · デザインシステム
紙と、インクと、ジャンクション。
ページはツールを宣言し、ブラウザーがその間に立ちます。ページとエージェントは、どちらかが相手に取って代わることなく出会います。ロゴマークが描くのは、その出会いです。以下はすべて、実際にリリースしているコードからレンダリングしています。
01 · 名前
webmcpx は、常に小文字
- 常に小文字で webmcpx と書きます。文頭でも同じです（気になる場合は文を書き換えてください）。
- コードやコマンドの中では Geist Mono で組みます。
- WebMCP はブラウザー API の名前で、ドラフトの表記どおりに書きます。webmcp.zone はコミュニティサイトです。
- webmcpx は WebMCP そのものではなく、WebMCP という名前を名乗ることもありません。
02 · ロゴ
3 つのマーク、1 つのアイデア
できる限りジャンクションを使います。カードはバッジとアプリアイコン用（32px 以上）、スロット付きページは代替マークです。
03 · 作図
24 ユニットのグリッド、2 ユニットの隙間
鏡像になった 2 つの塗りのシェブロン。腕の端は 4.5 ユニット、頂点は 2 ユニット分を平らにカットし、その間には決して閉じない 2 ユニットの隙間があります。その隙間こそがブラウザーです。
アイソレーション
マークの周囲にはマークの高さの半分、ロックアップの周囲には x の高さと同じだけの余白を確保してください。
最小サイズ
マークを 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 · 本文
検証できる短い文。1 文に 1 つの考え。
Geist Mono · コードとラベル
document.modelContext.registerTool()
06 · コンポーネント
2px の輪郭線、硬い影
src/lib/components/ui。バリアントは tailwind-variants のレシピで、形は同じデザイントークンから作られます。
Button · バリアント × サイズ
Stamp · トーン
Tabs
1 つ目のパネル。矢印キーで操作できます。
2 つ目のパネル。矢印キーで操作できます。
CodeBlock（ビルド時にハイライト）
<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/src/auto.js"></script>07 · 禁止事項
やってはいけないこと
-
引き伸ばしたり、押しつぶしたりしない
-
回転させない
-
アウトラインや線を加えない
-
黄色で描かない
-
マークに影や効果を加えない
-
シェブロン間の隙間を埋めない
08 · 商標
名前は自由に。公式を装わない。
コードは MIT ライセンスですが、名前とマークはこのライセンスの対象外です。ポリシーの全文は TRADEMARK.md にあります。
このように書く
- W3C Web Machine Learning Community Group の WebMCP Draft Community Group Report を実装（W3C 標準ではありません）。
- webmcpx で構築。webmcpx と互換。
- WebMCP フラグを有効にした Chrome で動作。
使わない表現
- 公式 WebMCP ライブラリ
- W3C WebMCP 標準
- MCP 認定
- Chrome 版 webmcpx
トーン
検証できる短い文。形容詞より数字。
使う言葉
宣言する公開する呼び出す実測したCommunity Group のドラフトに追従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 の商標です。