_design-system.mdx

title	Design System
description	Internal guide for documentation styling and component usage

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:

Use for supplementary information that enhances understanding. ```jsx Your message here ``` Use for cautionary information that could prevent issues. ```jsx Your message here ``` Use for best practices and helpful suggestions. ```jsx Your message here ``` Use for success states or confirmation messages. ```jsx Your message here ```

Cards

Use cards for navigation and feature highlights:

Simple card with icon and description. Card that links to another page.

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

Steps

Use steps for sequential procedures:

Describe what the user needs to do. Continue with the next action. 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

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

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

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

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

```javascript 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

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