↓ scroll · preview rendered in the proposed system
01Typography
h1 / displayEvery agent accounted for.
h2 / sectionManage business outcomes, not pull requests.
h3 / subsectionAn org chart for your agents.
h4 / ledeEvery conversation, every trace.
body lgPaperclip is the cockpit your AI workforce is missing. Goals cascade from mission to task. Costs are tracked per agent, per run. Every action is logged in plain English.
bodyBring your own bot. Connect Claude, GPT, or any agent runtime. Paperclip handles the rest — orchestration, governance, and the trail of evidence your finance team will ask for in six months.
Agent palette — 12 presets + custom (BRAND USE ONLY: capsules, org chart, status. Not chrome.)
Twelve preset gradients in the same aesthetic family. As your fleet grows past 12, fall back to flat single-color variants of the same anchors, or use the custom picker below. Capsules shown on both light and dark backgrounds to confirm legibility in either context.
Pill primary (radius 9999px) echoes the capsule motif at the chrome level — the brand asset is the same shape as the call-to-action. Everything else is 8px rounded rectangle ("serious B2B" read). Use pill only for the primary action in a section. Never for secondary, ghost, icon, or form-internal buttons.
Button hover states
Hover the primary CTA to preview. Toggle dark mode to see the dark-context variant.
Primary CTA hover, committed: light = ink → pure white; dark = transparent + cream border + cream text, pill shape (matches the secondary dark default). Hover the buttons above to verify in context.
04Capsule motif — brand asset
The capsule appears in the agent field, the org chart, status indicators, and the pill primary CTA. Stadium shape (radius = ½ width). Two-tone gradients map to the agent palette.
Agent workforces are on the rise.
05Product UI — cost control
Marketing site stays light-only. Product UI ships both modes — toggle the theme to compare. Dark mode preserves the warm/cool tension: warm near-black bg, warm off-white ink.
Spend · this weekUSD · 7d
Copywriter
$48.20
Researcher
$36.14
Designer
$25.40
Build Engineer
$12.71
06Conversation trace
Human-readable action chain. No code visible. Status uses outlined rings + a mono status chip on the right — clearly metadata, never confusable with an agent (agents are filled gradient capsules).
14:22:07Goal set: ship the Q3 launch page by FridayGoal set@scott
14:22:09Budget set: $50 max for this runBudget set@scott
14:28:1060% of cap used; 1 action remainingBudget alertsystem
07Org chart — agents in hierarchy
Same stadium-capsule shape, smaller scale. Hairline rules connect parent to children. The lead agent (largest capsule, single agent color) reports to the human owner; sub-agents fan out below.
Launch Lead
claude-opus-4-7
Copywriter
claude-sonnet-4-6
Designer
gpt-5
Build Engineer
claude-sonnet-4-6
Reviewer
claude-haiku-4-5
08Bring your own bot
Connect any runtime. Keep the cockpit.
Cards use 8px rounded rect (NOT pill — pill is reserved for primary CTA only). Active state is theme-aware: light mode = very light gray border on pure white lift; dark mode = rule border on surface lift. Toggle the theme to compare.
Claude Opus 4.7
anthropic · 1M context
$15 / Mtok inConnected
GPT-5
openai · 400K context
$10 / Mtok inConnected
Gemini 3 Pro
google · 2M context
$8 / Mtok inConnected
Llama 4 / local
self-hosted · ollama
freeConnected
09Goals — mission cascades to task
Every agent knows exactly why it's working.
Single bar per row, text inside. Same 44px height across levels. Each level is a progressively lighter gray (mission #0A0A0A → project #2A2A2A → agent #454545 → task #6A6A6A) — subtle hierarchical signal, not color coding. Indent + mono label + type style do the rest.
Mission
Ship Q3 launch · paperclip.ing v2
62%
Project
Refactor landing page
74%
Agent goal
Draft hero, demo, and 3x2 grid sections
88%
Task
Write hero subhead variants × 3
done
Task
Demo framing line
in review
Project
Migrate animations from scaffold
41%
Agent goal
Port §06 capsule fan as React component
22%
10Heartbeats — agent liveness
Pulse + sparkline. Cobalt pulse = alive and shipping. Amber slow-pulse = waiting (on review, on input, on a tool call). Red fast-pulse = blocked. Rule-gray static = asleep. Sparkline shows the last hour of activity (token spend per minute, normalized).
Copywriter
active · 12s ago
Designer
active · 4s ago
Build Engineer
waiting on review · 3m
Researcher
blocked · awaiting API key
Reviewer
asleep · 47m
11Demo video frame (landing section 02)
Manage business outcomes, not pull requests.
A 90-second walkthrough. Set a goal, hand it to an agent team, watch the trace fill in.
0:00 / 1:34 · paperclip · the cockpit
12Capsule field — full landing section (sec 10)
Agent workforces are on the rise.
Every capsule is one agent. Every column is one outcome. Every dollar is accounted for.
13Convergence — "You're in control" (sec 11)
You're in control.
Hire AI employees. Set goals. Approve work. Ship more.
14Settings form — input, select, toggle, save
Workspace settings
Inputs use 4px radius (small chip). Labels are 13px medium. Help text mono-12 in mono color. Save button = pill primary.
Shown in the trace and exports. Letters, numbers, periods.
Default ceiling for any agent run unless overridden.
Pause agents on budget breachStop the run and page the owner when the cap is hit.
Require approval before deployHuman review for any agent action that writes outside the workspace.
Allow self-modifying agentsAgents may rewrite their own prompts. Off by default.
15Login — auth + social providers
Auth card centered in a generous well. Provider buttons are rounded rect (not pill — pill is reserved for primary CTA). Hairline divider in mono caps.
paperclip
Sign in to your workspace
OR
No password. We email you a link, you're in.
16Empty state — no agents yet
Dashed-border well. A faint capsule (rule-gray, 60% opacity) sits where the agent would be. Heading is Inter Tight, copy is mono-color body. Pill primary CTA centered.
No agents yet.
Connect a runtime, set a goal, and watch the cockpit fill in. You can also import a team template if you'd rather start from a shape that already works.
17Testimonials block — bottom of page, near final CTA
People who've stopped reading agent diffs.
Quotes in Inter Tight at body-display scale (22px, medium weight). Attribution in mono. One card on cream surface for warm/cool tension.
“The first tool that makes my agent fleet feel like a team I can actually manage, not a flock of pull requests I'm pretending to review.”
Maya Chen · Head of AI Platform · Logistics co.
“We replaced three internal dashboards with this. The cost panel alone is worth the move.”
Devon Park · Staff engineer · Series B fintech
“Open source, self-hostable, and good looking. I didn't think you got to pick all three.”
Jordan Reyes · CTO · 40-person SaaS
18Final CTA — paperclip mark + invitation (sec 12)
Paperclip
Ready to manage agents like a team?
19Mobile — 375px breakpoint demo
Hero scales from clamp() to 44px. CTAs stack vertically. Capsule field reduces capsule width 64→28px, keeps the same gradient mapping. Both shown side by side: light hero + dark capsule field section.
paperclip.ing
paperclip · v2
The app people use to manage AI agents for work.
Goals, costs, traces, and heartbeats. Open source. Free to start.
Every capsule is one agent. Every column is one outcome.
20FAQ — editorial list, not accordion
Honest answers, quickly.
01
Is Paperclip really open source?
Yes. MIT licensed. The full server and UI are on GitHub. You can self-host on your own infrastructure or use our managed cloud. We make money on the cloud, the agent runtime credits, and the enterprise tier — never by holding the open source hostage.
02
Which agent runtimes are supported?
Claude, GPT-5, Gemini, and any model behind an OpenAI-compatible endpoint. Local models work via Ollama or vLLM. You bring the runtime; Paperclip provides the cockpit.
03
How do I keep costs from running away?
Set a budget per mission, per project, or per agent. Paperclip pauses the agent and pages the owner when the cap is hit. No agent can spend money you didn't authorize.
04
What's the trail of evidence for compliance?
Every action — goal set, budget approved, action started, completed, reviewed — is logged in plain English with timestamp, actor, and token spend. Exportable as JSON or CSV.