> ## Documentation Index
> Fetch the complete documentation index at: https://mcp-b-sync-npm-packages-docs-bf03420.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Design System

> 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.

<Columns cols={3}>
  <div>
    **Primary**

    <Color value="#1F5EFF" />

    Brand blue - primary actions, links, highlights
  </div>

  <div>
    **Light**

    <Color value="#4B7BFF" />

    Lighter variant - hover states, accents
  </div>

  <div>
    **Dark**

    <Color value="#1449CC" />

    Darker variant - active states, depth
  </div>
</Columns>

## 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:

<Tabs>
  <Tab title="Note">
    <Note>
      Use for supplementary information that enhances understanding.
    </Note>

    ```jsx theme={null}
    <Note>Your message here</Note>
    ```
  </Tab>

  <Tab title="Warning">
    <Warning>
      Use for cautionary information that could prevent issues.
    </Warning>

    ```jsx theme={null}
    <Warning>Your message here</Warning>
    ```
  </Tab>

  <Tab title="Tip">
    <Tip>
      Use for best practices and helpful suggestions.
    </Tip>

    ```jsx theme={null}
    <Tip>Your message here</Tip>
    ```
  </Tab>

  <Tab title="Check">
    <Check>
      Use for success states or confirmation messages.
    </Check>

    ```jsx theme={null}
    <Check>Your message here</Check>
    ```
  </Tab>
</Tabs>

### Cards

Use cards for navigation and feature highlights:

<Columns cols={2}>
  <Card title="Basic Card" icon="square">
    Simple card with icon and description.
  </Card>

  <Card title="Link Card" icon="arrow-right" href="/quickstart">
    Card that links to another page.
  </Card>
</Columns>

```jsx theme={null}
<Card title="Title" icon="icon-name" href="/quickstart">
  Card content here
</Card>
```

### Steps

Use steps for sequential procedures:

<Steps>
  <Step title="First Step">
    Describe what the user needs to do.
  </Step>

  <Step title="Second Step">
    Continue with the next action.
  </Step>

  <Step title="Third Step">
    Complete the procedure.
  </Step>
</Steps>

```jsx theme={null}
<Steps>
  <Step title="Step Title">
    Step content
  </Step>
</Steps>
```

### Code Blocks

Always specify the language for syntax highlighting:

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

```bash theme={null}
# Shell commands
npm install @mcp-b/global
```

### Tabs for Multi-Framework Examples

<Tabs>
  <Tab title="React">
    ```tsx theme={null}
    import { useWebMCP } from '@mcp-b/react-webmcp';

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

  <Tab title="Vue">
    ```vue theme={null}
    <script setup>
    import { onMounted } from 'vue';

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

  <Tab title="Vanilla JS">
    ```javascript theme={null}
    navigator.modelContext.registerTool({
      name: 'my_tool',
      description: 'Does something',
      handler: async () => ({ content: [{ type: 'text', text: 'Done' }] })
    });
    ```
  </Tab>
</Tabs>

## Using Snippets

Import reusable content from the `/snippets` folder:

```jsx theme={null}
<Snippet file="snippets/webmcp-polyfill-setup.jsx" />
```

## Page Frontmatter

Every page should include proper frontmatter:

```yaml theme={null}
---
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