Markenhandbuch · Designsystem
Papier, Tinte und eine Junction.
Eine Seite deklariert ihre Tools; der Browser steht dazwischen; Seite und Agent treffen sich, ohne dass einer den anderen ersetzt. Die Bildmarke zeigt diese Begegnung. Alles Folgende wird aus dem ausgelieferten Code gerendert.
01 · Name
webmcpx, immer kleingeschrieben
- Immer klein: webmcpx, auch am Satzanfang (stellen Sie den Satz dann lieber um).
- In Code und Befehlen in Geist Mono setzen.
- WebMCP ist die Browser-API, geschrieben wie im Entwurf. webmcp.zone ist die Community-Website.
- webmcpx ist nicht WebMCP selbst und beansprucht nie den Namen WebMCP.
02 · Logo
Drei Bildmarken, eine Idee
Verwenden Sie die Junction, wo immer es geht. Die Karte ist Badge und App-Icon (ab 32 px); die Seite mit Slot ist die Alternative.
Karte
Badge und App-Icon, ab 32 px
03 · Konstruktion
24-Einheiten-Raster, 2 Einheiten Spalt
Zwei gefüllte Chevrons, spiegelbildlich. Schenkel an den Enden 4,5 Einheiten breit, Spitzen über 2 Einheiten flach abgeschnitten und dazwischen ein Spalt von 2 Einheiten, der sich nie schließt: Dieser Spalt ist der Browser.
Schutzzone
Halten Sie um die Bildmarke einen Freiraum von ihrer halben Höhe frei, um das Lockup einen Freiraum in Höhe des x.
Mindestgröße
Die Bildmarke bis hinunter auf 16 px nur als Favicon-Variante. Das Lockup mindestens 24 px hoch.
04 · Farbe
Papier und Tinte, ein Textmarker
Die Werte stammen aus tokens.css. Wählen Sie die Grafik nach dem Hintergrund, auf dem sie steht, nicht nach dem Theme des Lesers.
-
paper
#f2f1ed
Seitenhintergrund
-
paper-2
#e8e6e0
Vertiefte Flächen, Tracks
-
card
#fcfbf8
Karten und Eingabefelder auf Papier
-
ink
#121210
Text, Konturen, Schatten, Primärbuttons
-
ink-2
#43423f
Sekundärtext
-
ink-3
#5c5b56
Bildunterschriften und Labels
-
hairline
#d3d1ca
Feine Trennlinien
-
marker
#fcd948
Textmarker: der einzige Akzent
-
good
#197037
Bereit, bestanden (Text)
-
good-soft
#b9eec2
Bereit, bestanden (Fläche)
-
bad
#af2b25
Fehlt, fehlgeschlagen (Text)
-
bad-soft
#ffd9d2
Fehlt, fehlgeschlagen (Fläche)
-
code
#171614
Hintergrund von Codeblöcken
-
on-code
#e9e8e3
Text auf Codeblöcken
Freigegebene Textpaare
WCAG 2.2 AA verlangt 4,5:1 für Fließtext; ein Test stellt das sicher.
| Text auf Hintergrund | Kontrast |
|---|---|
| ink auf paper | 16.65:1 |
| ink auf paper-2 | 15.08:1 |
| ink auf card | 18.17:1 |
| ink auf marker | 13.55:1 |
| ink auf good-soft | 14.35:1 |
| ink auf bad-soft | 14.41:1 |
| paper auf ink | 16.65:1 |
| ink-2 auf paper | 8.86:1 |
| ink-2 auf card | 9.67:1 |
| ink-3 auf paper | 6.04:1 |
| ink-3 auf paper-2 | 5.47:1 |
| ink-3 auf card | 6.59:1 |
| good auf paper | 5.47:1 |
| good auf card | 5.97:1 |
| bad auf paper | 5.79:1 |
| bad auf card | 6.32:1 |
| on-code auf code | 14.73:1 |
Gelb ist Hintergrund, nie Figur
Textmarker-Gelb auf Papier erreicht 1.23:1: Es trägt weder Form noch Text. Setzen Sie es hinter Tinte: ein markiertes Wort, ein Chip, ein App-Icon.
05 · Schrift
Bricolage, Geist, Geist Mono
Bricolage Grotesque · Display
Agentenfähig
Bricolage Grotesque · Überschrift
Gleicher Agent. Gleiche Frage.
Geist · Fließtext
Kurze Sätze, die man prüfen kann. Je eine Idee.
Geist Mono · Code und Labels
document.modelContext.registerTool()
06 · Komponenten
2-px-Konturen, harte Schatten
src/lib/components/ui. Varianten sind tailwind-variants-Rezepte; die Formen stammen aus denselben Tokens.
Button · Variante × Größe
Stamp · Ton
Tabs
Panel für Erster. Nutzen Sie die Pfeiltasten.
Panel für Zweiter. Nutzen Sie die Pfeiltasten.
CodeBlock (beim Build hervorgehoben)
<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/src/auto.js"></script>07 · Fehlgebrauch
Bitte nicht
-
Nicht strecken oder stauchen
-
Nicht drehen
-
Keine Konturen oder Striche hinzufügen
-
Nicht in Gelb zeichnen
-
Keine Schatten oder Effekte auf der Bildmarke
-
Den Spalt zwischen den Chevrons nicht schließen
08 · Marken
Name frei nutzbar. Kein offizieller Anschein.
Der Code steht unter MIT-Lizenz; Name und Bildmarken fallen nicht unter diese Lizenz. Die vollständige Richtlinie steht in TRADEMARK.md.
So formulieren Sie es
- Implementiert den WebMCP Draft Community Group Report der W3C Web Machine Learning Community Group (kein W3C-Standard).
- Gebaut mit webmcpx. Kompatibel mit webmcpx.
- Funktioniert in Chrome mit aktiviertem WebMCP-Flag.
Niemals
- Die offizielle WebMCP-Bibliothek
- W3C-WebMCP-Standard
- MCP-zertifiziert
- webmcpx für Chrome
Tonalität
Kurze Sätze, die man prüfen kann. Zahlen statt Adjektive.
Wörter, die wir nutzen
deklariertstellt bereitruft aufgemessenfolgt dem Community-Group-Entwurffunktioniert mit webmcpx
Wörter, die wir meiden
offiziellW3C-StandardW3C-konformMCP-zertifiziertrevolutionärmagisch
Hinweise
- webmcpx ist ein unabhängiges Projekt. Es ist weder mit LF Projects, der Agentic AI Foundation, Anthropic, W3C, Google oder Microsoft verbunden noch wird es von ihnen unterstützt.
- Model Context Protocol und das MCP-Logo sind Marken von LF Projects, LLC.
- W3C® ist eine Marke des World Wide Web Consortium.