Brand manual · design system
Paper, ink and a junction.
A page declares its tools; the browser sits in between; page and agent meet without one replacing the other. The mark draws that meeting. Everything below is rendered from the code that ships.
01 · Name
webmcpx, always lowercase
- Always lowercase: webmcpx, also at the start of a sentence (rewrite the sentence instead).
- In code and commands, set it in Geist Mono.
- WebMCP is the browser API, spelled as the draft spells it. webmcp.zone is the community site.
- webmcpx is not WebMCP itself and never claims the name WebMCP.
02 · Logo
Three marks, one idea
Use the Junction everywhere you can. The Card is the badge and app icon (32px and up); the Page with slot is the alternate.
03 · Construction
A 24-unit grid, a 2-unit gap
Two filled chevrons, mirror images. Arms 4.5 units at the ends, apexes cut flat over 2 units, and a 2-unit gap between them that never closes: that gap is the browser.
Clear space
Keep free space around the mark equal to half its height, and around the lockup equal to the height of the x.
Minimum size
The mark down to 16px only as the favicon variant. The lockup at least 24px tall.
04 · Color
Paper and ink, one highlighter
Values are read from tokens.css. Pick the artwork for the background it lands on, not for the reader's theme.
-
paper
#f2f1ed
Page background
-
paper-2
#e8e6e0
Sunken panels, tracks
-
card
#fcfbf8
Cards and inputs on paper
-
ink
#121210
Text, outlines, shadows, primary buttons
-
ink-2
#43423f
Secondary text
-
ink-3
#5c5b56
Captions and labels
-
hairline
#d3d1ca
Thin dividers
-
marker
#fcd948
Highlighter: the one accent
-
good
#197037
Ready, passed (text)
-
good-soft
#b9eec2
Ready, passed (fill)
-
bad
#af2b25
Missing, failed (text)
-
bad-soft
#ffd9d2
Missing, failed (fill)
-
code
#171614
Code block background
-
on-code
#e9e8e3
Text on code blocks
Approved text pairs
WCAG 2.2 AA asks 4.5:1 for body text; a test enforces it.
| Text on background | Contrast |
|---|---|
| ink on paper | 16.65:1 |
| ink on paper-2 | 15.08:1 |
| ink on card | 18.17:1 |
| ink on marker | 13.55:1 |
| ink on good-soft | 14.35:1 |
| ink on bad-soft | 14.41:1 |
| paper on ink | 16.65:1 |
| ink-2 on paper | 8.86:1 |
| ink-2 on card | 9.67:1 |
| ink-3 on paper | 6.04:1 |
| ink-3 on paper-2 | 5.47:1 |
| ink-3 on card | 6.59:1 |
| good on paper | 5.47:1 |
| good on card | 5.97:1 |
| bad on paper | 5.79:1 |
| bad on card | 6.32:1 |
| on-code on code | 14.73:1 |
Yellow is a background, never a figure
Highlighter yellow on paper measures 1.23:1: it cannot carry a shape or text. Use it behind ink: a highlighted word, a chip, an app icon.
05 · Type
Bricolage, Geist, Geist Mono
Bricolage Grotesque · giant
Agent-ready
Bricolage Grotesque · headline
Same agent. Same question.
Geist · body
Short sentences you can check. One idea each.
Geist Mono · code and labels
document.modelContext.registerTool()
06 · Components
2px outlines, hard shadows
src/lib/components/ui. Variants are tailwind-variants recipes; the shapes come from the same tokens.
Button · variant × size
Stamp · tone
Tabs
Panel for First. Use the arrow keys.
Panel for Second. Use the arrow keys.
CodeBlock (highlighted at build time)
<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/src/auto.js"></script>07 · Misuse
Don’t
-
Don’t stretch or squash it
-
Don’t rotate it
-
Don’t add outlines or strokes
-
Don’t draw it in yellow
-
Don’t add shadows or effects to the mark
-
Don’t close the gap between the chevrons
08 · Trademarks
Use the name freely. Don’t look official.
The code is MIT licensed; the name and the marks are not covered by that license. The full policy is in TRADEMARK.md.
Say it like this
- Implements the WebMCP Draft Community Group Report of the W3C Web Machine Learning Community Group (not a W3C Standard).
- Built with webmcpx. Compatible with webmcpx.
- Works in Chrome with the WebMCP flag enabled.
Never
- The official WebMCP library
- W3C WebMCP standard
- MCP certified
- webmcpx for Chrome
Voice
Short sentences you can check. Numbers over adjectives.
Words we use
declaresexposescallsmeasuredtracks the Community Group draftworks with webmcpx
Words we avoid
officialW3C standardW3C-compliantMCP certifiedrevolutionarymagic
Notices
- webmcpx is an independent project, not affiliated with or endorsed by LF Projects, the Agentic AI Foundation, Anthropic, W3C, Google or Microsoft.
- Model Context Protocol and the MCP logo are trademarks of LF Projects, LLC.
- W3C® is a trademark of the World Wide Web Consortium.