Skip to content

Patchbay

The design system behind Switchboard, one MCP endpoint that routes each agent request to the right upstream servers and skills. Upstreams are lines, the Switchboard URL is the trunk, routing is patching. Everything here is built from @switchboard/ui, including this site.

Off
OffSwitched off. Its tools are hidden from agents.
Idle
IdlePatched in, no calls yet.
Live
LiveConnected and carrying calls.
Routed
RoutedTook a call just now. Fades once, over 2s.
Warn
WarnNeeds attention soon, like an expiring token.
Error
ErrorFailing. The row says why.

Principles

Where the system's choices come from.

Quiet chrome, live signal

Everything is neutral except the one thing that is alive: which lines are patched in and carrying calls.

The lamp

An 8px indicator beside every server and skill. It is the only glow in the interface.

Identifiers are typeset, not decorated

Tool names, URLs, slugs and config are set in Plex Mono because people type them into other programs. Nothing else is.

One trunk

The Connect page treats the MCP URL as the hero: a plate with screw dots. It is the one bold moment.

The thirteen rules

Adopted from Cloudflare's Kumo guidelines. Components already follow them; screens built from components should too.

  1. Content text is 14px. Larger sizes are for headings only.
  2. Sentence-case headings; product names in title case.
  3. Never change tracking. Never use bold: semibold for headings, medium for inline emphasis.
  4. Related text sits closer together than the content around it: 6px inside a group, 24px outside.
  5. Optical padding: vertical padding a little smaller than horizontal.
  6. No colour transitions on hover. Hover is instant.
  7. Never combine a border with a drop shadow; use a 1px ring instead.
  8. Concentric radii: outer radius equals inner radius plus padding.
  9. Inline icons are text height and centred on the first line.
  10. Inline monospace is about 0.9em.
  11. Sticky headers separate from content with a border, not a shadow.
  12. Never nest a layer card in a layer card.
  13. Dialogs stay mounted and animate through open, never by conditional rendering.

Start here