Marca e design system
Papel, tinta e uma junção.
A página declara suas ferramentas; o navegador fica no meio; página e agente se encontram sem que um substitua o outro. A marca desenha esse encontro. Tudo abaixo é renderizado a partir do código que vai para produção.
01 · Nome
webmcpx, sempre em minúsculas
- Sempre em minúsculas: webmcpx, inclusive no início da frase (nesse caso, reescreva a frase).
- Em código e comandos, use Geist Mono.
- WebMCP é a API do navegador, escrita como o rascunho a escreve. webmcp.zone é o site da comunidade.
- webmcpx não é o WebMCP em si e nunca reivindica o nome WebMCP.
02 · Logo
Três marcas, uma ideia
Use a Junção sempre que puder. O Cartão é o badge e o ícone de app (32px ou mais); a Página com fenda é a alternativa.
Cartão
Badge e ícone de app, 32px ou mais
03 · Construção
Grade de 24 unidades, vão de 2
Dois chevrons preenchidos, espelhados. Braços de 4,5 unidades nas pontas, vértices cortados retos ao longo de 2 unidades e, entre eles, um vão de 2 unidades que nunca se fecha: esse vão é o navegador.
Área de respiro
Mantenha ao redor da marca um espaço livre igual a metade da altura dela e, ao redor do lockup, igual à altura do x.
Tamanho mínimo
A marca só desce até 16px na variante favicon. O lockup tem no mínimo 24px de altura.
04 · Cor
Papel e tinta, um marca-texto
Os valores vêm de tokens.css. Escolha a arte pelo fundo em que ela vai ficar, não pelo tema de quem lê.
-
paper
#f2f1ed
Fundo da página
-
paper-2
#e8e6e0
Painéis rebaixados, trilhas
-
card
#fcfbf8
Cards e campos sobre o papel
-
ink
#121210
Texto, bordas, sombras, botões primários
-
ink-2
#43423f
Texto secundário
-
ink-3
#5c5b56
Legendas e rótulos
-
hairline
#d3d1ca
Divisórias finas
-
marker
#fcd948
Marca-texto: o único destaque
-
good
#197037
Pronto, aprovado (texto)
-
good-soft
#b9eec2
Pronto, aprovado (preenchimento)
-
bad
#af2b25
Ausente, reprovado (texto)
-
bad-soft
#ffd9d2
Ausente, reprovado (preenchimento)
-
code
#171614
Fundo dos blocos de código
-
on-code
#e9e8e3
Texto nos blocos de código
Pares de texto aprovados
A WCAG 2.2 AA exige 4,5:1 para texto corrido; um teste garante isso.
| Texto sobre fundo | Contraste |
|---|---|
| ink sobre paper | 16.65:1 |
| ink sobre paper-2 | 15.08:1 |
| ink sobre card | 18.17:1 |
| ink sobre marker | 13.55:1 |
| ink sobre good-soft | 14.35:1 |
| ink sobre bad-soft | 14.41:1 |
| paper sobre ink | 16.65:1 |
| ink-2 sobre paper | 8.86:1 |
| ink-2 sobre card | 9.67:1 |
| ink-3 sobre paper | 6.04:1 |
| ink-3 sobre paper-2 | 5.47:1 |
| ink-3 sobre card | 6.59:1 |
| good sobre paper | 5.47:1 |
| good sobre card | 5.97:1 |
| bad sobre paper | 5.79:1 |
| bad sobre card | 6.32:1 |
| on-code sobre code | 14.73:1 |
Amarelo é fundo, nunca figura
O amarelo marca-texto sobre o papel mede 1.23:1: não sustenta forma nem texto. Use-o por trás da tinta: uma palavra destacada, um chip, um ícone de app.
05 · Tipografia
Bricolage, Geist, Geist Mono
Bricolage Grotesque · gigante
Pronto
Bricolage Grotesque · título
Mesmo agente. Mesma pergunta.
Geist · texto
Frases curtas que dá para conferir. Uma ideia em cada.
Geist Mono · código e rótulos
document.modelContext.registerTool()
06 · Componentes
Contornos de 2px, sombras duras
src/lib/components/ui. As variantes são receitas de tailwind-variants; as formas vêm dos mesmos tokens.
Button · variante × tamanho
Stamp · tom
Tabs
Painel de Primeira. Use as setas do teclado.
Painel de Segunda. Use as setas do teclado.
CodeBlock (destacado no build)
<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/src/auto.js"></script>07 · Usos indevidos
Não faça
-
Não estique nem achate
-
Não gire
-
Não adicione contornos nem traços
-
Não desenhe em amarelo
-
Não adicione sombras nem efeitos à marca
-
Não feche o vão entre os chevrons
08 · Marcas
Use o nome à vontade. Não pareça oficial.
O código tem licença MIT; o nome e as marcas não estão cobertos por essa licença. A política completa está em TRADEMARK.md.
Diga assim
- Implementa o WebMCP Draft Community Group Report (relatório de rascunho) do W3C Web Machine Learning Community Group (não é um padrão do W3C).
- Feito com webmcpx. Compatível com webmcpx.
- Funciona no Chrome com a flag do WebMCP ativada.
Nunca
- A biblioteca oficial do WebMCP
- Padrão W3C WebMCP
- Certificado MCP
- webmcpx para Chrome
Voz
Frases curtas que dá para conferir. Números em vez de adjetivos.
Palavras que usamos
declaraexpõechamamedidosegue o rascunho do Community Groupfunciona com webmcpx
Palavras que evitamos
oficialpadrão W3Cem conformidade com o W3Ccertificado MCPrevolucionáriomágico
Avisos legais
- O webmcpx é um projeto independente, sem vínculo com LF Projects, Agentic AI Foundation, Anthropic, W3C, Google ou Microsoft, nem endossado por eles.
- Model Context Protocol e o logo do MCP são marcas comerciais da LF Projects, LLC.
- W3C® é uma marca comercial do World Wide Web Consortium.