design-guide skill

Paperclip Design Guide

Paperclip's UI is a professional-grade control plane — dense, keyboard-driven, dark-themed by default. Every pixel earns its place.

Always use with: frontend-design (visual polish) and web-design-guidelines (web best practices).

1. Design Principles

• Dense but scannable. Maximum information without clicks to reveal. Whitespace separates, not pads.
• Keyboard-first. Global shortcuts (Cmd+K, C, [, ]). Power users rarely touch the mouse.
• Contextual, not modal. Inline editing over dialog boxes. Dropdowns over page navigations.
• Dark theme default. Neutral grays (OKLCH), not pure black. Accent colors for status/priority only. Text is the primary visual element.
• Component-driven. Prefer reusable components that capture style conventions. Build at the right abstraction — not too granular, not too monolithic.

2. Tech Stack

• React 19 + TypeScript + Vite
• Tailwind CSS v4 with CSS variables (OKLCH color space)
• shadcn/ui (new-york style, neutral base, CSS variables enabled)
• Radix UI primitives (accessibility, focus management)
• Lucide React icons (16px nav, 14px inline)
• class-variance-authority (CVA) for component variants
• clsx + tailwind-merge via cn() utility

Config: ui/components.json (aliases: @/components, @/components/ui, @/lib, @/hooks)

3. Design Tokens

All tokens defined as CSS variables in ui/src/index.css. Both light and dark themes use OKLCH.

Colors

Use semantic token names, never raw color values:

Radius

Single --radius variable (0.625rem) with derived sizes:

• rounded-sm — small inputs, pills
• rounded-md — buttons, inputs, small components
• rounded-lg — cards, dialogs
• rounded-xl — card containers, large components
• rounded-full — badges, avatars, status dots

Shadows

Minimal shadows: shadow-xs (outline buttons), shadow-sm (cards). No heavy shadows.

4. Typography Scale

Use these exact patterns — do not invent new ones:

5. Status & Priority Systems

Status Colors (consistent across all entities)

Defined in StatusBadge.tsx and StatusIcon.tsx:

Priority Icons

Defined in PriorityIcon.tsx: critical (red/AlertTriangle), high (orange/ArrowUp), medium (yellow/Minus), low (blue/ArrowDown).

Agent Status Dots

Inline colored dots: running (cyan, animate-pulse), active (green), paused (yellow), error (red), offline (neutral).

6. Component Hierarchy

Three tiers:

1. shadcn/ui primitives (ui/src/components/ui/) — Button, Card, Input, Badge, Dialog, Tabs, etc. Do not modify these directly; extend via composition.
2. Custom composites (ui/src/components/) — StatusBadge, EntityRow, MetricCard, etc. These capture Paperclip-specific design language.
3. Page components (ui/src/pages/) — Compose primitives and composites into full views.

See references/component-index.md for the complete component inventory with usage guidance.

When to Create a New Component

Create a reusable component when:

• The same visual pattern appears in 2+ places
• The pattern has interactive behavior (status changing, inline editing)
• The pattern encodes domain logic (status colors, priority icons)

Do NOT create a component for:

• One-off layouts specific to a single page
• Simple className combinations (use Tailwind directly)
• Thin wrappers that add no semantic value

7. Composition Patterns

These patterns describe how components work together. They may not be their own component, but they must be used consistently across the app.

Entity Row with Status + Priority

The standard list item for issues and similar entities:

<EntityRow
  leading={<><StatusIcon status="in_progress" /><PriorityIcon priority="high" /></>}
  identifier="PAP-001"
  title="Implement authentication flow"
  subtitle="Assigned to Agent Alpha"
  trailing={<StatusBadge status="in_progress" />}
  onClick={() => {}}
/>

Leading slot always: StatusIcon first, then PriorityIcon. Trailing slot: StatusBadge or timestamp.

Grouped List

Issues grouped by status header + entity rows:

<div className="flex items-center gap-2 px-4 py-2 bg-muted/50 rounded-t-md">
  <StatusIcon status="in_progress" />
  <span className="text-sm font-medium">In Progress</span>
  <span className="text-xs text-muted-foreground ml-1">2</span>
</div>
<div className="border border-border rounded-b-md">
  <EntityRow ... />
  <EntityRow ... />
</div>

Property Row

Key-value pairs in properties panels:

<div className="flex items-center justify-between py-1.5">
  <span className="text-xs text-muted-foreground">Status</span>
  <StatusBadge status="active" />
</div>

Label is always text-xs text-muted-foreground, value on the right. Wrap in a container with space-y-1.

Metric Card Grid

Dashboard metrics in a responsive grid:

<div className="grid md:grid-cols-2 xl:grid-cols-4 gap-4">
  <MetricCard icon={Bot} value={12} label="Active Agents" description="+3 this week" />
  ...
</div>

Progress Bar (Budget)

Color by threshold: green (<60%), yellow (60-85%), red (>85%):

<div className="w-full h-2 bg-muted rounded-full overflow-hidden">
  <div className="h-full rounded-full bg-green-400" style={{ width: `${pct}%` }} />
</div>

Comment Thread

Author header (name + timestamp) then body, in bordered cards with space-y-3. Add comment textarea + button below.

Cost Table

Standard with text-xs, header row with bg-accent/20, font-mono for numeric values.

Log Viewer

bg-neutral-950 rounded-lg p-3 font-mono text-xs container. Color lines by level: default (foreground), WARN (yellow-400), ERROR (red-400), SYS (blue-300). Include live indicator dot when streaming.