Charte · design system
Du papier, de l’encre et une jonction.
Une page déclare ses outils ; le navigateur s’interpose ; page et agent se rencontrent sans que l’un remplace l’autre. Le symbole dessine cette rencontre. Tout ce qui suit est rendu à partir du code en production.
01 · Nom
webmcpx, toujours en minuscules
- Toujours en minuscules : webmcpx, même en début de phrase (reformulez plutôt la phrase).
- Dans le code et les commandes, composez-le en Geist Mono.
- WebMCP est l’API du navigateur, écrite comme l’écrit le brouillon. webmcp.zone est le site de la communauté.
- webmcpx n’est pas WebMCP et ne revendique jamais le nom WebMCP.
02 · Logo
Trois symboles, une idée
Utilisez la Jonction partout où c’est possible. La Carte sert de badge et d’icône d’app (à partir de 32 px) ; la Page à fente est la variante.
Jonction
Symbole principal
Carte
Badge et icône d’app, dès 32 px
Page à fente
Variante
03 · Construction
Grille de 24 unités, écart de 2
Deux chevrons pleins, symétriques. Des bras de 4,5 unités aux extrémités, des sommets coupés à plat sur 2 unités, et entre eux un écart de 2 unités qui ne se referme jamais : cet écart, c’est le navigateur.
Zone de protection
Laissez autour du symbole un espace libre égal à la moitié de sa hauteur, et autour du logotype un espace égal à la hauteur du x.
Taille minimale
Le symbole jusqu’à 16 px, uniquement en variante favicon. Le logotype, 24 px de haut au minimum.
04 · Couleur
Papier et encre, un surligneur
Les valeurs sont lues dans tokens.css. Choisissez la version selon le fond sur lequel elle sera posée, pas selon le thème du lecteur.
-
paper
#f2f1ed
Fond de page
-
paper-2
#e8e6e0
Panneaux en creux, pistes
-
card
#fcfbf8
Cartes et champs sur le papier
-
ink
#121210
Texte, contours, ombres, bouton primaire
-
ink-2
#43423f
Texte secondaire
-
ink-3
#5c5b56
Légendes et libellés
-
hairline
#d3d1ca
Séparateurs fins
-
marker
#fcd948
Surligneur : l’unique accent
-
good
#197037
Prêt, réussi (texte)
-
good-soft
#b9eec2
Prêt, réussi (fond)
-
bad
#af2b25
Absent, échoué (texte)
-
bad-soft
#ffd9d2
Absent, échoué (fond)
-
code
#171614
Fond des blocs de code
-
on-code
#e9e8e3
Texte sur les blocs de code
Paires de texte approuvées
WCAG 2.2 AA exige 4,5:1 pour le texte courant ; un test le vérifie.
| Texte sur fond | Contraste |
|---|---|
| ink sur paper | 16.65:1 |
| ink sur paper-2 | 15.08:1 |
| ink sur card | 18.17:1 |
| ink sur marker | 13.55:1 |
| ink sur good-soft | 14.35:1 |
| ink sur bad-soft | 14.41:1 |
| paper sur ink | 16.65:1 |
| ink-2 sur paper | 8.86:1 |
| ink-2 sur card | 9.67:1 |
| ink-3 sur paper | 6.04:1 |
| ink-3 sur paper-2 | 5.47:1 |
| ink-3 sur card | 6.59:1 |
| good sur paper | 5.47:1 |
| good sur card | 5.97:1 |
| bad sur paper | 5.79:1 |
| bad sur card | 6.32:1 |
| on-code sur code | 14.73:1 |
Le jaune est un fond, jamais une forme
Le jaune surligneur sur le papier mesure 1.23:1 : il ne peut porter ni forme ni texte. Utilisez-le derrière l’encre : un mot surligné, une pastille, une icône d’app.
05 · Typographie
Bricolage, Geist, Geist Mono
Bricolage Grotesque · géant
Prêt
Bricolage Grotesque · titre
Même agent. Même question.
Geist · texte
Des phrases courtes et vérifiables. Une idée chacune.
Geist Mono · code et libellés
document.modelContext.registerTool()
06 · Composants
Contours de 2 px, ombres nettes
src/lib/components/ui. Les variantes sont des recettes tailwind-variants ; les formes viennent des mêmes tokens.
Button · variante × taille
Stamp · ton
Tabs
Panneau Premier. Utilisez les touches fléchées.
Panneau Second. Utilisez les touches fléchées.
CodeBlock (coloration au build)
<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/src/auto.js"></script>07 · Mauvais usages
À éviter
-
Ne pas l’étirer ni l’écraser
-
Ne pas le faire pivoter
-
Ne pas ajouter de contours ni de traits
-
Ne pas le dessiner en jaune
-
Ne pas ajouter d’ombres ni d’effets au symbole
-
Ne pas refermer l’écart entre les chevrons
08 · Marques
Utilisez le nom librement. Sans jouer les officiels.
Le code est sous licence MIT ; le nom et les symboles ne sont pas couverts par cette licence. La politique complète figure dans TRADEMARK.md.
Formulations correctes
- Implémente le WebMCP Draft Community Group Report du W3C Web Machine Learning Community Group (pas un standard W3C).
- Conçu avec webmcpx. Compatible avec webmcpx.
- Fonctionne dans Chrome avec le flag WebMCP activé.
Jamais
- La bibliothèque WebMCP officielle
- Standard W3C WebMCP
- Certifié MCP
- webmcpx pour Chrome
Ton
Des phrases courtes et vérifiables. Des chiffres plutôt que des adjectifs.
Mots que nous employons
déclareexposeappellemesurésuit le brouillon du Community Groupfonctionne avec webmcpx
Mots que nous évitons
officielstandard W3Cconforme W3Ccertifié MCPrévolutionnairemagique
Mentions
- webmcpx est un projet indépendant, ni affilié à LF Projects, à l’Agentic AI Foundation, à Anthropic, au W3C, à Google ou à Microsoft, ni approuvé par eux.
- Model Context Protocol et le logo MCP sont des marques de LF Projects, LLC.
- W3C® est une marque du World Wide Web Consortium.