Брендбук · дизайн-система
Бумага, чернила и стык.
Страница объявляет свои инструменты, браузер стоит между ней и агентом, и они встречаются, не подменяя друг друга. Знак изображает эту встречу. Всё, что ниже, отрисовано из того же кода, что работает на сайте.
01 · Имя
webmcpx, всегда строчными
- Всегда строчными: webmcpx, даже в начале предложения (лучше перестройте фразу).
- В коде и командах — шрифтом Geist Mono.
- WebMCP — это API браузера, и пишется он так, как в черновике. webmcp.zone — сайт сообщества.
- webmcpx — не сам WebMCP и никогда не претендует на имя WebMCP.
02 · Логотип
Три знака, одна идея
Везде, где можно, используйте Стык. Карточка — это бейдж и иконка приложения (от 32 px), Страница с прорезью — альтернативный знак.
Карточка
Бейдж и иконка приложения, от 32 px
Страница с прорезью
Альтернативный знак
03 · Построение
Сетка в 24 единицы, зазор в 2
Два залитых шеврона, зеркальных друг другу. Плечи на концах — по 4,5 единицы, вершины срезаны ровно на 2 единицы, а между шевронами — зазор в 2 единицы, который никогда не смыкается: этот зазор и есть браузер.
Охранное поле
Оставляйте вокруг знака свободное поле в половину его высоты, а вокруг логотипа с надписью — в высоту буквы x.
Минимальный размер
Знак мельче 16 px — только в варианте фавикона. Логотип с надписью — не ниже 24 px.
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 для основного текста; это проверяет тест.
| Текст на фоне | Контраст |
|---|---|
| ink на paper | 16.65:1 |
| ink на paper-2 | 15.08:1 |
| ink на card | 18.17:1 |
| ink на marker | 13.55:1 |
| ink на good-soft | 14.35:1 |
| ink на bad-soft | 14.41:1 |
| paper на ink | 16.65:1 |
| ink-2 на paper | 8.86:1 |
| ink-2 на card | 9.67:1 |
| ink-3 на paper | 6.04:1 |
| ink-3 на paper-2 | 5.47:1 |
| ink-3 на card | 6.59:1 |
| good на paper | 5.47:1 |
| good на card | 5.97:1 |
| bad на paper | 5.79:1 |
| bad на card | 6.32:1 |
| on-code на code | 14.73:1 |
Жёлтый — это фон, а не фигура
Жёлтый маркер на бумаге даёт контраст 1.23:1: на нём не держится ни форма, ни текст. Используйте его под чернилами: выделенное слово, чип, иконка приложения.
05 · Шрифты
Bricolage, Geist, Geist Mono
Bricolage Grotesque · крупный кегль
Для агентов
Bricolage Grotesque · заголовок
Тот же агент. Тот же вопрос.
Geist · основной текст
Короткие фразы, которые можно проверить. В каждой — одна мысль.
Geist Mono · код и метки
document.modelContext.registerTool()
06 · Компоненты
Обводка 2 px, жёсткие тени
src/lib/components/ui. Варианты — это рецепты tailwind-variants; формы строятся на тех же токенах.
Button · вариант × размер
Stamp · тон
Tabs
Панель «Первая». Переключайтесь клавишами со стрелками.
Панель «Вторая». Переключайтесь клавишами со стрелками.
CodeBlock (подсветка при сборке)
<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/src/auto.js"></script>07 · Как нельзя
Нельзя
-
Не растягивайте и не сжимайте знак
-
Не поворачивайте его
-
Не добавляйте обводки и контуры
-
Не рисуйте его жёлтым
-
Не добавляйте знаку тени и эффекты
-
Не закрывайте зазор между шевронами
08 · Товарные знаки
Имя используйте свободно. Под официальное не маскируйтесь.
Код распространяется по лицензии MIT, но имя и знаки этой лицензией не покрываются. Полная политика — в TRADEMARK.md.
Пишите так
- Реализует WebMCP Draft Community Group Report группы W3C Web Machine Learning Community Group (не является стандартом W3C).
- Сделано на webmcpx. Совместимо с webmcpx.
- Работает в Chrome с включённым флагом WebMCP.
Никогда
- Официальная библиотека WebMCP
- Стандарт W3C WebMCP
- Сертифицировано MCP
- webmcpx для Chrome
Голос
Короткие фразы, которые можно проверить. Цифры вместо прилагательных.
Наши слова
объявляетпредоставляетвызываетизмереноследует черновику 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.