Marca · sistema de diseño
Papel, tinta y un cruce.
Una página declara sus herramientas; el navegador se sitúa en medio; página y agente se encuentran sin que uno sustituya al otro. La marca dibuja ese encuentro. Todo lo que sigue se renderiza a partir del código que se publica.
01 · Nombre
webmcpx, siempre en minúsculas
- Siempre en minúsculas: webmcpx, también al inicio de una oración (en ese caso, mejor reescribe la oración).
- En código y comandos, escríbelo en Geist Mono.
- WebMCP es la API del navegador y se escribe como la escribe el borrador. webmcp.zone es el sitio de la comunidad.
- webmcpx no es WebMCP en sí y nunca reclama el nombre WebMCP.
02 · Logo
Tres marcas, una idea
Usa el Cruce siempre que puedas. La Tarjeta es la insignia y el icono de app (desde 32px); la Página con ranura es la alternativa.
Cruce
Marca principal
Tarjeta
Insignia e icono de app, desde 32px
Página con ranura
Alternativa
03 · Construcción
Una retícula de 24 unidades, un hueco de 2
Dos chevrones rellenos, simétricos. Brazos de 4,5 unidades en los extremos, vértices cortados en plano a lo largo de 2 unidades y, entre ellos, un hueco de 2 unidades que nunca se cierra: ese hueco es el navegador.
Área de protección
Deja alrededor de la marca un espacio libre igual a la mitad de su altura y, alrededor del logotipo completo, igual a la altura de la x.
Tamaño mínimo
La marca baja hasta 16px solo en su variante de favicon. El logotipo completo, al menos 24px de alto.
04 · Color
Papel y tinta, un solo resaltador
Los valores se leen de tokens.css. Elige la versión según el fondo sobre el que va, no según el tema del lector.
-
paper
#f2f1ed
Fondo de página
-
paper-2
#e8e6e0
Paneles hundidos, pistas
-
card
#fcfbf8
Tarjetas y campos sobre papel
-
ink
#121210
Texto, bordes, sombras, botón principal
-
ink-2
#43423f
Texto secundario
-
ink-3
#5c5b56
Leyendas y etiquetas
-
hairline
#d3d1ca
Separadores finos
-
marker
#fcd948
Resaltador: el único acento
-
good
#197037
Listo, aprobado (texto)
-
good-soft
#b9eec2
Listo, aprobado (relleno)
-
bad
#af2b25
Ausente, fallido (texto)
-
bad-soft
#ffd9d2
Ausente, fallido (relleno)
-
code
#171614
Fondo de bloques de código
-
on-code
#e9e8e3
Texto sobre bloques de código
Pares de texto aprobados
WCAG 2.2 AA exige 4,5:1 para el texto de cuerpo; una prueba lo verifica.
| Texto sobre fondo | 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 |
El amarillo es fondo, nunca figura
El amarillo resaltador sobre papel mide 1.23:1: no puede sostener una forma ni un texto. Úsalo detrás de la tinta: una palabra resaltada, un chip, un icono de app.
05 · Tipografía
Bricolage, Geist, Geist Mono
Bricolage Grotesque · gigante
Para agentes
Bricolage Grotesque · titular
Mismo agente. Misma pregunta.
Geist · cuerpo
Frases cortas que puedes comprobar. Una idea por frase.
Geist Mono · código y etiquetas
document.modelContext.registerTool()
06 · Componentes
Contornos de 2px, sombras duras
src/lib/components/ui. Las variantes son recetas de tailwind-variants; las formas salen de los mismos tokens.
Button · variante × tamaño
Stamp · tono
Tabs
Panel de Primera. Usa las flechas del teclado.
Panel de Segunda. Usa las flechas del teclado.
CodeBlock (resaltado en tiempo de compilación)
<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/src/auto.js"></script>07 · Usos incorrectos
Qué no hacer
-
No la estires ni la aplastes
-
No la gires
-
No le añadas contornos ni trazos
-
No la dibujes en amarillo
-
No añadas sombras ni efectos a la marca
-
No cierres el hueco entre los chevrones
08 · Marcas
Usa el nombre con libertad. No parezcas oficial.
El código tiene licencia MIT; el nombre y las marcas no están cubiertos por esa licencia. La política completa está en TRADEMARK.md.
Dilo así
- Implementa el Draft Community Group Report de WebMCP del W3C Web Machine Learning Community Group (no es un estándar del W3C).
- Creado con webmcpx. Compatible con webmcpx.
- Funciona en Chrome con el flag de WebMCP activado.
Nunca
- La biblioteca oficial de WebMCP
- Estándar WebMCP del W3C
- Certificado por MCP
- webmcpx para Chrome
Voz
Frases cortas que puedes comprobar. Números antes que adjetivos.
Palabras que usamos
declaraexponellamamedidosigue el borrador de Community Groupfunciona con webmcpx
Palabras que evitamos
oficialestándar del W3Cconforme al W3Ccertificado por MCPrevolucionariomágico
Avisos
- webmcpx es un proyecto independiente: no está afiliado a LF Projects, la Agentic AI Foundation, Anthropic, el W3C, Google ni Microsoft, ni cuenta con su respaldo.
- Model Context Protocol y el logo de MCP son marcas comerciales de LF Projects, LLC.
- W3C® es una marca comercial del World Wide Web Consortium.