WebMCP Documentation Design System

This guide documents the styling conventions and component patterns used throughout our documentation.

Color Palette

The docs use WebMCP’s blue primary color.

Primary

Brand blue - primary actions, links, highlights

Light

Lighter variant - hover states, accents

Dark

Darker variant - active states, depth

Typography

Element	Font	Weight
Headings	System sans-serif	600 (semibold)
Body	System sans-serif	400 (regular)
Code	System monospace	400 (regular)

Component Usage

Callouts

Use callouts to highlight important information:

Note
Warning
Tip
Check

Use for supplementary information that enhances understanding.

<Note>Your message here</Note>

Use for cautionary information that could prevent issues.

<Warning>Your message here</Warning>

Use for best practices and helpful suggestions.

<Tip>Your message here</Tip>

Use for success states or confirmation messages.

<Check>Your message here</Check>

Cards

Use cards for navigation and feature highlights:

Basic Card

Simple card with icon and description.

Link Card

Card that links to another page.

<Card title="Title" icon="icon-name" href="/quickstart">
  Card content here
</Card>

Steps

Use steps for sequential procedures:

First Step

Describe what the user needs to do.

Second Step

Continue with the next action.

Third Step

Complete the procedure.

<Steps>
  <Step title="Step Title">
    Step content
  </Step>
</Steps>

Code Blocks

Always specify the language for syntax highlighting:

// TypeScript example
navigator.modelContext.registerTool({
  name: 'example_tool',
  description: 'An example tool',
  inputSchema: { type: 'object', properties: {} },
  handler: async () => ({ content: [{ type: 'text', text: 'Hello' }] })
});

# Shell commands
npm install @mcp-b/global

Tabs for Multi-Framework Examples

React
Vue
Vanilla JS

import { useWebMCP } from '@mcp-b/react-webmcp';

function MyComponent() {
  useWebMCP({
    name: 'my_tool',
    description: 'Does something',
    handler: async () => ({ content: [{ type: 'text', text: 'Done' }] })
  });
}

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  navigator.modelContext.registerTool({
    name: 'my_tool',
    description: 'Does something',
    handler: async () => ({ content: [{ type: 'text', text: 'Done' }] })
  });
});
</script>

navigator.modelContext.registerTool({
  name: 'my_tool',
  description: 'Does something',
  handler: async () => ({ content: [{ type: 'text', text: 'Done' }] })
});

Using Snippets

Import reusable content from the /snippets folder:

<Snippet file="snippets/webmcp-polyfill-setup.jsx" />

Page Frontmatter

Every page should include proper frontmatter:

---
title: Page Title
description: Brief description for SEO and navigation
icon: optional-icon-name
---

Writing Guidelines

Be concise: Get to the point quickly
Use active voice: “Register a tool” not “A tool can be registered”
Provide examples: Show code before explaining it
Link liberally: Cross-reference related content
Test code: Ensure all examples work
Follow Diataxis: Don’t mix tutorials, how-tos, explanations, and reference

​WebMCP Documentation Design System

​Color Palette

​Typography

​Component Usage

​Callouts

​Cards

Basic Card

Link Card

​Steps

​Code Blocks

​Tabs for Multi-Framework Examples

​Using Snippets

​Page Frontmatter

​Writing Guidelines

WebMCP Documentation Design System

Color Palette

Typography

Component Usage

Callouts

Cards

Steps

Code Blocks

Tabs for Multi-Framework Examples

Using Snippets

Page Frontmatter

Writing Guidelines