Design System

The visual contract.

Every Orchestrator surface uses these tokens. Treat this page as the source of truth — if a screen needs something not listed, add it here first.

Foreword

Orchestrator is a developer tool. The site reflects the surface: dark, monospaced, terminal-ish. There is no sans serif. There are no drop shadows. Borders are 1px, low-opacity sage. Corners stop at 6px. Every color, font, and spacing value below is defined as a Tailwind token in tailwind.config.js. If something on a page doesn't reference one of these tokens, it's a bug.

Color

Surface

bg.base

#0a0a0a · bg-bg-base

bg.elevated

#131416 · bg-bg-elevated

bg.sunken

#060607 · bg-bg-sunken

Foreground

fg.primary

#e6e6e6 · text-fg-primary

fg.secondary

#a8a8a8 · text-fg-secondary

fg.muted

#6b6b6b · text-fg-muted

Accent

accent.base

#7fb069 · bg-accent-base

accent.hover

#9bc88a · bg-accent-hover

accent.ring

#7fb06966 · ring-accent-ring

Danger

danger.base

#c25450 · bg-danger-base

danger.hover

#d97570 · bg-danger-hover

Border

border.subtle

#7fb06933 · border-border-subtle

border.strong

#7fb06966 · border-border-strong

HTML

<div class="border border-border-subtle p-4">
  <div class="mb-3 h-16 rounded-md bg-accent-base"></div>
  <div class="text-sm font-bold">accent.base</div>
  <div class="text-xs text-fg-muted">#7fb069 · bg-accent-base</div>
</div>

Type scale

JetBrains Mono. One family, many sizes. The whole site is mono — that's the point.

text-xs · 12 / 16

The terminal is a primitive interface for a primitive task.

text-sm · 14 / 20

The terminal is a primitive interface for a primitive task.

text-base · 16 / 24

The terminal is a primitive interface for a primitive task.

text-lg · 18 / 28

The terminal is a primitive interface for a primitive task.

text-xl · 20 / 28

The terminal is a primitive interface for a primitive task.

text-2xl · 24 / 32

The terminal is a primitive interface.

text-3xl · 30 / 36

A native macOS hub.

text-4xl · 36 / 40

A native macOS hub.

text-5xl · 48 / 48

orchestrator.

HTML

<h1 class="text-5xl font-bold">orchestrator.</h1>
<p class="text-sm text-fg-secondary">Body copy.</p>

Spacing scale

Tailwind's default scale, no custom additions. 1 unit = 0.25rem = 4px.

1 · 4px

2 · 8px

4 · 16px

8 · 32px

12 · 48px

16 · 64px

HTML

<div class="h-4 w-8 bg-accent-base"></div> <!-- 32px -->

Buttons

Five variants. Each shown as idle (left) and hover state (right) so you can see what the user sees on intent.

primary

secondary

ghost

destructive

disabled

no hover state

HTML

<button class="rounded-md bg-accent-base px-4 py-2 text-sm font-bold text-bg-base hover:bg-accent-hover">View design system</button>
<button class="rounded-md border border-border-strong px-4 py-2 text-sm hover:border-accent-base hover:text-accent-base">Read the docs</button>
<button class="rounded-md bg-danger-base px-4 py-2 text-sm font-bold text-bg-base hover:bg-danger-hover">Delete worktree</button>

Inputs

Text Password Textarea

HTML

<input type="text"
  class="w-full rounded-md border border-border-subtle bg-bg-sunken px-3 py-2 text-sm
         focus:border-accent-base focus:ring-2 focus:ring-accent-ring focus:outline-none" />

Cards

1px border, bg-bg-elevated, rounded-md, p-6. Three variants: empty, with header/body/footer, and with an embedded code block.

Empty

Nothing here yet.

Header

Worktree: feat/landing-page

Body content. The middle slot is for whatever the card needs to show.

With code

$ git worktree add -b worktree/feat .
HEAD is now at 3549cc3 Fix whoami

HTML

<div class="rounded-md border border-border-subtle bg-bg-elevated p-6">
  <div class="text-xs uppercase tracking-widest text-fg-muted">Header</div>
  <div class="mt-1 text-sm font-bold">Card title</div>
</div>

Code blocks

Mono is the body face anyway, so code blocks just need a sunken background and tighter padding. No syntax highlighting — by design.

~/orchestrator

$ make app
$ open ./build/Orchestrator.app
$ orc list
  [3938793F] frontend-landing  cwd=~/orchestrator/bridge-server/web
  [CBEAEAC4] orchestrator       cwd=~/orchestrator

HTML

<pre class="rounded-md border border-border-subtle bg-bg-sunken p-4 text-xs">
  <code class="text-fg-primary">$ make app</code>
</pre>

Status pills

Mirrors the MCP status bar in the app. A small dot, a label, a thin border. text-xs always.

ok · 14ms warn · slow handshake error · socket closed offline

HTML

<span class="inline-flex items-center gap-2 rounded-md border border-accent-base px-2.5 py-1 text-xs text-accent-base">
  <span class="h-1.5 w-1.5 rounded-full bg-accent-base"></span>
  ok · 14ms
</span>

Nav bar

The same bar used at the top of the landing page. Sticky, 1px bottom border, blurred translucent background.

orchestrator.

… page content …

HTML

<nav class="sticky top-0 z-30 border-b border-border-subtle bg-bg-base/90 backdrop-blur">
  <div class="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
    <div class="text-base font-bold">orchestrator.</div>
    <ul class="flex gap-6 text-xs text-fg-secondary">
      <li><a href="#">Design System</a></li>
      <li><a href="#">GitHub</a></li>
    </ul>
  </div>
</nav>

Architecture diagram

Inline SVG, hand-authored. Used on the landing's How-it-works section. Mac and iOS connect over wss to the bridge server; the bridge holds only encrypted blobs.

arch · macos ↔ bridge ↔ ios

HTML

<svg viewBox="0 0 600 280" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="100" width="140" height="80" rx="6" fill="#131416" stroke="#7fb06966" />
  <text x="90" y="135" text-anchor="middle" fill="#e6e6e6">Mac app</text>
  <!-- … bridge, ios, arrows … -->
</svg>