+ {/* Page header */}
+
+
Design Guide
+
+ Every component, style, and pattern used across Paperclip.
+
+
+
+ {/* ============================================================ */}
+ {/* COLORS */}
+ {/* ============================================================ */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* ============================================================ */}
+ {/* TYPOGRAPHY */}
+ {/* ============================================================ */}
+
+
+
Page Title — text-xl font-bold
+
Section Title — text-lg font-semibold
+
+ Section Heading — text-sm font-semibold uppercase tracking-wide
+
+
Card Title — text-sm font-medium
+
Card Title Alt — text-sm font-semibold
+
Body text — text-sm
+
+ Muted description — text-sm text-muted-foreground
+
+
+ Tiny label — text-xs text-muted-foreground
+
+
+ Mono identifier — text-xs font-mono text-muted-foreground
+
+
Large stat — text-2xl font-bold
+
Log/code text — font-mono text-xs
+
+
+ {/* ============================================================ */}
+ {/* SPACING & RADIUS */}
+ {/* ============================================================ */}
+
+
+ {[
+ ["sm", "var(--radius-sm)"],
+ ["md", "var(--radius-md)"],
+ ["lg", "var(--radius-lg)"],
+ ["xl", "var(--radius-xl)"],
+ ["full", "9999px"],
+ ].map(([label, radius]) => (
+
+ ))}
+
+
+ {/* ============================================================ */}
+ {/* BUTTONS */}
+ {/* ============================================================ */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* ============================================================ */}
+ {/* BADGES */}
+ {/* ============================================================ */}
+
+
+
+ Default
+ Secondary
+ Outline
+ Destructive
+ Ghost
+
+
+
+
+ {/* ============================================================ */}
+ {/* STATUS BADGES & ICONS */}
+ {/* ============================================================ */}
+
+
+
+ {[
+ "active", "running", "paused", "idle", "archived", "planned",
+ "achieved", "completed", "failed", "succeeded", "error", "backlog",
+ "todo", "in_progress", "in_review", "blocked", "done",
+ "cancelled", "pending", "approved", "rejected",
+ ].map((s) => (
+
+ ))}
+
+
+
+
+
+ {["backlog", "todo", "in_progress", "in_review", "done", "cancelled", "blocked"].map(
+ (s) => (
+
+
+ {s}
+
+ )
+ )}
+
+
+ Click the icon to change status (current: {status})
+
+
+
+
+
+ {["critical", "high", "medium", "low"].map((p) => (
+
+ ))}
+
+
+
Click the icon to change (current: {priority})
+
+ {[
+ ["running", "bg-cyan-400 animate-pulse"],
+ ["active", "bg-green-400"],
+ ["paused", "bg-yellow-400"],
+ ["error", "bg-red-400"],
+ ["offline", "bg-neutral-400"],
+ ].map(([label, color]) => (
+
+
+
+
+ {label}
+
+ ))}
+
+ {[
+ ["timer", "bg-blue-900/50 text-blue-300"],
+ ["assignment", "bg-violet-900/50 text-violet-300"],
+ ["on_demand", "bg-cyan-900/50 text-cyan-300"],
+ ["webhook", "bg-neutral-800 text-neutral-400"],
+ ].map(([label, cls]) => (
+
+ {label}
+
+ ))}
+
+
+
+
+ {/* ============================================================ */}
+ {/* FORM ELEMENTS */}
+ {/* ============================================================ */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Click the text above to edit inline.
+
+
+
+
+ {/* ============================================================ */}
+ {/* CARDS */}
+ {/* ============================================================ */}
+
+
+
+
+ Card Title
+ Card description with supporting text.
+
+
+ Card content goes here. This is the main body area.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* ============================================================ */}
+ {/* TABS */}
+ {/* ============================================================ */}
+
+
+
+
+ Overview
+ Runs
+ Config
+ Costs
+
+
+ Overview tab content.
+
+
+ Runs tab content.
+
+
+ Config tab content.
+
+
+ Costs tab content.
+
+
+
+
+
+
+
+ Summary
+ Details
+ Comments
+
+
+ Summary content with underline tabs.
+
+
+ Details content.
+
+
+ Comments content.
+
+
+
+
+
+ {/* ============================================================ */}
+ {/* ENTITY ROWS */}
+ {/* ============================================================ */}
+
+
+
+
+
+
+ }
+ identifier="PAP-001"
+ title="Implement authentication flow"
+ subtitle="Assigned to Agent Alpha"
+ trailing={}
+ onClick={() => {}}
+ />
+
+
+
+
+ }
+ identifier="PAP-002"
+ title="Set up CI/CD pipeline"
+ subtitle="Completed 2 days ago"
+ trailing={}
+ onClick={() => {}}
+ />
+
+
+
+
+ }
+ identifier="PAP-003"
+ title="Write API documentation"
+ trailing={}
+ onClick={() => {}}
+ />
+
+
+
+
+ }
+ identifier="PAP-004"
+ title="Deploy to production"
+ subtitle="Blocked by PAP-001"
+ trailing={}
+ selected
+ />
+
+
+ {/* ============================================================ */}
+ {/* FILTER BAR */}
+ {/* ============================================================ */}
+
+ setFilters((f) => f.filter((x) => x.key !== key))}
+ onClear={() => setFilters([])}
+ />
+ {filters.length === 0 && (
+
+ )}
+
+
+ {/* ============================================================ */}
+ {/* AVATARS */}
+ {/* ============================================================ */}
+
+
+
+
+
+
+
+ A1
+ A2
+ A3
+ +5
+
+
+
+
+ {/* ============================================================ */}
+ {/* TOOLTIPS */}
+ {/* ============================================================ */}
+
+
+
+
+
+
+ This is a tooltip
+
+
+
+
+
+ Settings
+
+
+
+
+ {/* ============================================================ */}
+ {/* DIALOG */}
+ {/* ============================================================ */}
+
+
+
+
+ {/* ============================================================ */}
+ {/* EMPTY STATE */}
+ {/* ============================================================ */}
+
+
+ {/* ============================================================ */}
+ {/* PROGRESS BARS */}
+ {/* ============================================================ */}
+
+
+ {[
+ { label: "Under budget (40%)", pct: 40, color: "bg-green-400" },
+ { label: "Warning (75%)", pct: 75, color: "bg-yellow-400" },
+ { label: "Over budget (95%)", pct: 95, color: "bg-red-400" },
+ ].map(({ label, pct, color }) => (
+
+
+ {label}
+ {pct}%
+
+
+
+ ))}
+
+
+ {/* ============================================================ */}
+ {/* LOG VIEWER */}
+ {/* ============================================================ */}
+
+
+
[12:00:01] INFO Agent started successfully
+
[12:00:02] INFO Processing task PAP-001
+
[12:00:05] WARN Rate limit approaching (80%)
+
[12:00:08] INFO Task PAP-001 completed
+
[12:00:12] ERROR Connection timeout to upstream service
+
[12:00:12] SYS Retrying connection in 5s...
+
[12:00:17] INFO Reconnected successfully
+
+
+
+
+
+ Live
+
+
+
+ {/* ============================================================ */}
+ {/* PROPERTY ROW PATTERN */}
+ {/* ============================================================ */}
+
+
+
+ Status
+
+
+
+
+
+ Created
+ Jan 15, 2025
+
+
+
+ {/* ============================================================ */}
+ {/* NAVIGATION PATTERNS */}
+ {/* ============================================================ */}
+
+
+
+
+
+ Dashboard
+
+
+
+ Issues
+
+ 12
+
+
+
+
+ Agents
+
+
+
+ Projects
+
+
+
+
+
+
+
+
+ {/* ============================================================ */}
+ {/* GROUPED LIST (Issues pattern) */}
+ {/* ============================================================ */}
+
+
+
+
+ In Progress
+ 2
+
+
+ }
+ identifier="PAP-101"
+ title="Build agent heartbeat system"
+ onClick={() => {}}
+ />
+ }
+ identifier="PAP-102"
+ title="Add cost tracking dashboard"
+ onClick={() => {}}
+ />
+
+
+
+ {/* ============================================================ */}
+ {/* COMMENT THREAD PATTERN */}
+ {/* ============================================================ */}
+
+
+
Comments (2)
+
+
+
+ Agent
+ Jan 15, 2025
+
+
Started working on the authentication module. Will need API keys configured.
+
+
+
+ Human
+ Jan 16, 2025
+
+
API keys have been added to the vault. Please proceed.
+
+
+
+
+
+
+
+
+ {/* ============================================================ */}
+ {/* COST TABLE PATTERN */}
+ {/* ============================================================ */}
+
+
+
+
+
+ | Model |
+ Tokens |
+ Cost |
+
+
+
+
+ | claude-sonnet-4-20250514 |
+ 1.2M |
+ $18.00 |
+
+
+ | claude-haiku-4-20250506 |
+ 500k |
+ $1.25 |
+
+
+ | Total |
+ 1.7M |
+ $19.25 |
+
+
+
+
+
+ {/* ============================================================ */}
+ {/* SKELETONS */}
+ {/* ============================================================ */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* ============================================================ */}
+ {/* SEPARATOR */}
+ {/* ============================================================ */}
+
+
+
Horizontal
+
+
+ Left
+
+ Right
+
+
+
+ {/* ============================================================ */}
+ {/* ICON REFERENCE */}
+ {/* ============================================================ */}
+
+
+ {[
+ ["Inbox", Inbox],
+ ["ListTodo", ListTodo],
+ ["CircleDot", CircleDot],
+ ["Hexagon", Hexagon],
+ ["Target", Target],
+ ["LayoutDashboard", LayoutDashboard],
+ ["Bot", Bot],
+ ["DollarSign", DollarSign],
+ ["History", History],
+ ["Search", Search],
+ ["Plus", Plus],
+ ["Trash2", Trash2],
+ ["Settings", Settings],
+ ["User", User],
+ ["Mail", Mail],
+ ["Upload", Upload],
+ ["Zap", Zap],
+ ].map(([name, Icon]) => {
+ const LucideIcon = Icon as React.FC<{ className?: string }>;
+ return (
+
+
+ {name as string}
+
+ );
+ })}
+
+
+ {/* ============================================================ */}
+ {/* KEYBOARD SHORTCUTS */}
+ {/* ============================================================ */}
+
+
+ {[
+ ["Cmd+K / Ctrl+K", "Open Command Palette"],
+ ["C", "New Issue (outside inputs)"],
+ ["[", "Toggle Sidebar"],
+ ["]", "Toggle Properties Panel"],
+ ["Cmd+Enter", "Submit current dialog"],
+ ].map(([key, desc]) => (
+
+ {desc}
+
+ {key}
+
+
+ ))}
+
+