The control plane
for AI agents.
Paperclip is open-source orchestration to manage teams of AI Agents. Hire AI employees, set goals, automate jobs — and your business runs itself.
This document defines the visual and verbal identity of the Paperclip brand. It captures the colors, typography, logo, voice, and component patterns used across paperclip.dev and related surfaces.
Logo
The Paperclip Mark
A minimalist, line-drawn paperclip. Functional. Recognizable at any size. Always rendered as a stroke, never filled.
Always use the stroke-based mark. Never fill the paperclip shape.
Maintain minimum clear space equal to the icon width on all sides.
Never rotate, skew, or add effects (drop shadows, gradients) to the mark.
Never use "PaperClip", "paperclip", or "PAPERCLIP". Always title-case: Paperclip.
Color
Warm, grounded neutrals
with one active accent.
The palette is intentionally restrained — warm off-whites and near-blacks create a refined editorial feel. Green signals life, activity, and success.
Foundations
#ffffff Primary background #f5f3f0 Alt background, badges #f0ece7 Surface, cards #e0dcd6 Borders, dividers Text
#1a1a1a Primary text, headings #4a4a4a Secondary text #888880 Muted text, captions Accent & Status
#22c55e Active, success, alive #dcfce7 Task labels, light green bg #f59e0b Warnings, interrupts #0c0c0c Dark sections, terminal Typography
Three typefaces.
Each with a clear job.
Instrument Serif
The editorial voice. Used for all headings and display text. Weight 400 only — the delicacy of the serif strokes provides natural emphasis without needing bold.
Paperclip runs your business.
font-family: 'Instrument Serif', serif line-height: 1.15 letter-spacing: -0.01em Inter
The workhorse. Used for body text, labels, navigation, and UI elements. Highly legible at small sizes. Semibold for the wordmark and emphasis.
Open-source orchestration to manage teams of AI Agents. Hire AI employees, set goals, automate jobs and your business runs itself.
font-family: 'Inter', sans-serif line-height: 1.6–1.7 font-size: 0.8rem–1.15rem JetBrains Mono
The technical layer. Used in terminal blocks, code snippets, inline tokens, and the CLI. Gives the interface its engineering credibility.
$ npx paperclip deploy --self-hosted
✓ Company created
✓ CEO agent online
font-family: 'JetBrains Mono', monospace font-size: 0.92rem–0.95rem Type Scale
clamp(2.8rem, 7vw, 4.5rem)clamp(2rem, 4vw, 2.8rem)1rem / 16px0.8rem / 12.8px0.92rem / 14.7pxVoice & Tone
Direct. Confident.
Never decorative.
Paperclip speaks with authority about complex systems but never obscures meaning. Short sentences. Active verbs. Technical when needed, never when not.
Clarity
Explain complex concepts simply. One idea per sentence. If a word doesn't earn its place, cut it.
"Paperclip uses those agents. It orchestrates them into a company — with org charts, budgets, goals, governance, and accountability."
Control
Emphasize that the human is always in charge. Use imperative verbs. Short, punchy sequences.
"Pause. Resume. Override. Reassign. Terminate. You have full control over every agent in the org."
Honesty
Say what Paperclip is and what it isn't. Never oversell. Let the product speak through specificity, not superlatives.
"Not a chatbot. Not an agent framework. Not a workflow builder."
Credibility
Use precise technical language where it matters. Observable, traceable, logged — these are features, not marketing.
"Full observability. Every ticket traced. Every decision explained. Every tool call logged."
Avoid
- Buzzwords without substance ("revolutionary", "game-changing", "next-gen")
- Passive voice where active is clearer
- Vague claims ("powerful", "robust", "scalable") without specifics
- Exclamation marks in product copy
- Emoji in technical documentation
Components
Living elements.
Core UI patterns used across the Paperclip interface. Pill-shaped buttons, warm-bordered cards, glassmorphic overlays, and a macOS-style terminal.
Buttons
border-radius: 100px (pill)padding: 0.8rem 2remfont-weight: 500transition: 0.2s easeCards
border: 1.5px solid var(--color-border)border-radius: 10pxpadding: 12px 14pxbackground: var(--color-bg)Terminal
background: #1a1a1afont-family: JetBrains Monofont-size: 0.92remborder-radius: 16pxBadges
border-radius: 100pxpadding: 0.4em 1.1emfont-size: 0.8remfont-weight: 500Navbar (Glassmorphism)
background: rgba(255,255,255,0.12)backdrop-filter: blur(20px) saturate(1.4)border: 1px solid rgba(255,255,255,0.2)Spacing & Layout
Generous whitespace.
Fluid scale.
All spacing uses CSS clamp() for fluid responsiveness. Container max-width is 1140px. Breakpoints at 768px, 640px, and 480px.
--space-xs0.5rem / 8px--space-sm1rem / 16px--space-md1.5rem / 24px--space-lgclamp(2rem, 1.5rem + 1.5vw, 3rem)--space-xlclamp(3rem, 2rem + 3vw, 5rem)--space-sectionclamp(5rem, 3rem + 5.5vw, 9rem)Border Radius
--radius-sm--radius--radius-lg--radius-pillPhotography
Atmospheric.
Never stock.
Background photography sets mood, not information. Images are always overlaid with gradients — they recede behind content, never compete with it.
AI Image Generation
Midjourney style reference.
When generating images with Midjourney for Paperclip brand assets, use the style reference code below to maintain visual consistency across all AI-generated imagery.
Style Reference (sref)
| Parameter | Value |
|---|---|
--sref | 9mlaok7 |
Add --sref 9mlaok7 to your Midjourney prompts to match the Paperclip visual style.
Reference Image
Motion
Purposeful, never showy.
Animation signals life and state. Entrance reveals use staggered delays. Active elements pulse. Transitions ease at 0.2s. Nothing bounces unless it has a reason.
Staggered entrance
Items appear sequentially with 140ms delay. translateY: 12px → 0, opacity: 0 → 1.
0.45s ease-out, stagger: 140ms Heartbeat pulse
Active agent indicator. Scale 1 → 1.18, infinite loop. Green glow expands and fades.
2s ease-in-out infinite Hover transition
Simple opacity or color shift on interactive elements. No transform, no bounce.
0.2s ease Quick Reference