design-guide

1---2name: design-guide3description: >4  Paperclip UI design system guide for building consistent, reusable frontend5  components. Use when creating new UI components, modifying existing ones,6  adding pages or features to the frontend, styling UI elements, or when you7  need to understand the design language and conventions. Covers: component8  creation, design tokens, typography, status/priority systems, composition9  patterns, and the /design-guide showcase page. Always use this skill10  alongside the frontend-design skill (for visual quality) and the11  web-design-guidelines skill (for web best practices).12---13 14# Paperclip Design Guide15 16Paperclip's UI is a professional-grade control plane — dense, keyboard-driven, dark-themed by default. Every pixel earns its place.17 18**Always use with:** `frontend-design` (visual polish) and `web-design-guidelines` (web best practices).19 20---21 22## 1. Design Principles23 24- **Dense but scannable.** Maximum information without clicks to reveal. Whitespace separates, not pads.25- **Keyboard-first.** Global shortcuts (Cmd+K, C, [, ]). Power users rarely touch the mouse.26- **Contextual, not modal.** Inline editing over dialog boxes. Dropdowns over page navigations.27- **Dark theme default.** Neutral grays (OKLCH), not pure black. Accent colors for status/priority only. Text is the primary visual element.28- **Component-driven.** Prefer reusable components that capture style conventions. Build at the right abstraction — not too granular, not too monolithic.29 30---31 32## 2. Tech Stack33 34- **React 19** + **TypeScript** + **Vite**35- **Tailwind CSS v4** with CSS variables (OKLCH color space)36- **shadcn/ui** (new-york style, neutral base, CSS variables enabled)37- **Radix UI** primitives (accessibility, focus management)38- **Lucide React** icons (16px nav, 14px inline)39- **class-variance-authority** (CVA) for component variants40- **clsx + tailwind-merge** via `cn()` utility41 42Config: `ui/components.json` (aliases: `@/components`, `@/components/ui`, `@/lib`, `@/hooks`)43 44---45 46## 3. Design Tokens47 48All tokens defined as CSS variables in `ui/src/index.css`. Both light and dark themes use OKLCH.49 50### Colors51 52Use semantic token names, never raw color values:53 54| Token | Usage |55|-------|-------|56| `--background` / `--foreground` | Page background and primary text |57| `--card` / `--card-foreground` | Card surfaces |58| `--primary` / `--primary-foreground` | Primary actions, emphasis |59| `--secondary` / `--secondary-foreground` | Secondary surfaces |60| `--muted` / `--muted-foreground` | Subdued text, labels |61| `--accent` / `--accent-foreground` | Hover states, active nav items |62| `--destructive` | Destructive actions |63| `--border` | All borders |64| `--ring` | Focus rings |65| `--sidebar-*` | Sidebar-specific variants |66| `--chart-1` through `--chart-5` | Data visualization |67 68### Radius69 70Single `--radius` variable (0.625rem) with derived sizes:71 72- `rounded-sm` — small inputs, pills73- `rounded-md` — buttons, inputs, small components74- `rounded-lg` — cards, dialogs75- `rounded-xl` — card containers, large components76- `rounded-full` — badges, avatars, status dots77 78### Shadows79 80Minimal shadows: `shadow-xs` (outline buttons), `shadow-sm` (cards). No heavy shadows.81 82---83 84## 4. Typography Scale85 86Use these exact patterns — do not invent new ones:87 88| Pattern | Classes | Usage |89|---------|---------|-------|90| Page title | `text-xl font-bold` | Top of pages |91| Section title | `text-lg font-semibold` | Major sections |92| Section heading | `text-sm font-semibold text-muted-foreground uppercase tracking-wide` | Section headers in design guide, sidebar |93| Card title | `text-sm font-medium` or `text-sm font-semibold` | Card headers, list item titles |94| Body | `text-sm` | Default body text |95| Muted | `text-sm text-muted-foreground` | Descriptions, secondary text |96| Tiny label | `text-xs text-muted-foreground` | Metadata, timestamps, property labels |97| Mono identifier | `text-xs font-mono text-muted-foreground` | Issue keys (PAP-001), CSS vars |98| Large stat | `text-2xl font-bold` | Dashboard metric values |99| Code/log | `font-mono text-xs` | Log output, code snippets |100 101---102 103## 5. Status & Priority Systems104 105### Status Colors (consistent across all entities)106 107Defined in `StatusBadge.tsx` and `StatusIcon.tsx`:108 109| Status | Color | Entity types |110|--------|-------|-------------|111| active, achieved, completed, succeeded, approved, done | Green shades | Agents, goals, issues, approvals |112| running | Cyan | Agents |113| paused | Orange | Agents |114| idle, pending | Yellow | Agents, approvals |115| failed, error, rejected, blocked | Red shades | Runs, agents, approvals, issues |116| archived, planned, backlog, cancelled | Neutral gray | Various |117| todo | Blue | Issues |118| in_progress | Indigo | Issues |119| in_review | Violet | Issues |120 121### Priority Icons122 123Defined in `PriorityIcon.tsx`: critical (red/AlertTriangle), high (orange/ArrowUp), medium (yellow/Minus), low (blue/ArrowDown).124 125### Agent Status Dots126 127Inline colored dots: running (cyan, animate-pulse), active (green), paused (yellow), error (red), offline (neutral).128 129---130 131## 6. Component Hierarchy132 133Three tiers:134 1351. **shadcn/ui primitives** (`ui/src/components/ui/`) — Button, Card, Input, Badge, Dialog, Tabs, etc. Do not modify these directly; extend via composition.1362. **Custom composites** (`ui/src/components/`) — StatusBadge, EntityRow, MetricCard, etc. These capture Paperclip-specific design language.1373. **Page components** (`ui/src/pages/`) — Compose primitives and composites into full views.138 139**See [references/component-index.md](references/component-index.md) for the complete component inventory with usage guidance.**140 141### When to Create a New Component142 143Create a reusable component when:144- The same visual pattern appears in 2+ places145- The pattern has interactive behavior (status changing, inline editing)146- The pattern encodes domain logic (status colors, priority icons)147 148Do NOT create a component for:149- One-off layouts specific to a single page150- Simple className combinations (use Tailwind directly)151- Thin wrappers that add no semantic value152 153---154 155## 7. Composition Patterns156 157These patterns describe how components work together. They may not be their own component, but they must be used consistently across the app.158 159### Entity Row with Status + Priority160 161The standard list item for issues and similar entities:162 163```tsx164<EntityRow165  leading={<><StatusIcon status="in_progress" /><PriorityIcon priority="high" /></>}166  identifier="PAP-001"167  title="Implement authentication flow"168  subtitle="Assigned to Agent Alpha"169  trailing={<StatusBadge status="in_progress" />}170  onClick={() => {}}171/>172```173 174Leading slot always: StatusIcon first, then PriorityIcon. Trailing slot: StatusBadge or timestamp.175 176### Grouped List177 178Issues grouped by status header + entity rows:179 180```tsx181<div className="flex items-center gap-2 px-4 py-2 bg-muted/50 rounded-t-md">182  <StatusIcon status="in_progress" />183  <span className="text-sm font-medium">In Progress</span>184  <span className="text-xs text-muted-foreground ml-1">2</span>185</div>186<div className="border border-border rounded-b-md">187  <EntityRow ... />188  <EntityRow ... />189</div>190```191 192### Property Row193 194Key-value pairs in properties panels:195 196```tsx197<div className="flex items-center justify-between py-1.5">198  <span className="text-xs text-muted-foreground">Status</span>199  <StatusBadge status="active" />200</div>201```202 203Label is always `text-xs text-muted-foreground`, value on the right. Wrap in a container with `space-y-1`.204 205### Metric Card Grid206 207Dashboard metrics in a responsive grid:208 209```tsx210<div className="grid md:grid-cols-2 xl:grid-cols-4 gap-4">211  <MetricCard icon={Bot} value={12} label="Active Agents" description="+3 this week" />212  ...213</div>214```215 216### Progress Bar (Budget)217 218Color by threshold: green (<60%), yellow (60-85%), red (>85%):219 220```tsx221<div className="w-full h-2 bg-muted rounded-full overflow-hidden">222  <div className="h-full rounded-full bg-green-400" style={{ width: `${pct}%` }} />223</div>224```225 226### Comment Thread227 228Author header (name + timestamp) then body, in bordered cards with `space-y-3`. Add comment textarea + button below.229 230### Cost Table231 232Standard `<table>` with `text-xs`, header row with `bg-accent/20`, `font-mono` for numeric values.233 234### Log Viewer235 236`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.237 238---239 240## 8. Interactive Patterns241 242### Hover States243 244- Entity rows: `hover:bg-accent/50`245- Nav items: `hover:bg-accent/50 hover:text-accent-foreground`246- Active nav: `bg-accent text-accent-foreground`247 248### Focus249 250`focus-visible:ring-ring focus-visible:ring-[3px]` — standard Tailwind focus-visible ring.251 252### Disabled253 254`disabled:opacity-50 disabled:pointer-events-none`255 256### Inline Editing257 258Use `InlineEditor` component — click text to edit, Enter saves, Escape cancels.259 260### Popover Selectors261 262StatusIcon and PriorityIcon use Radix Popover for inline selection. Follow this pattern for any clickable property that opens a picker.263 264---265 266## 9. Layout System267 268Three-zone layout defined in `Layout.tsx`:269 270```271┌──────────┬──────────────────────────────┬──────────────────────┐272│ Sidebar  │  Breadcrumb bar              │                      │273│ (w-60)   ├──────────────────────────────┤  Properties panel    │274│          │  Main content (flex-1)       │  (w-80, optional)    │275└──────────┴──────────────────────────────┴──────────────────────┘276```277 278- Sidebar: `w-60`, collapsible, contains CompanySwitcher + SidebarSections279- Properties panel: `w-80`, shown on detail views, hidden on lists280- Main content: scrollable, `flex-1`281 282---283 284## 10. The /design-guide Page285 286**Location:** `ui/src/pages/DesignGuide.tsx`287**Route:** `/design-guide`288 289This is the living showcase of every component and pattern in the app. It is the source of truth for how things look.290 291### Rules292 2931. **When you add a new reusable component, you MUST add it to the design guide page.** Show all variants, sizes, and states.2942. **When you modify an existing component's API, update its design guide section.**2953. **When you add a new composition pattern, add a section demonstrating it.**2964. Follow the existing structure: `<Section title="...">` wrapper with `<SubSection>` for grouping.2975. Keep sections ordered logically: foundational (colors, typography) first, then primitives, then composites, then patterns.298 299### Adding a New Section300 301```tsx302<Section title="My New Component">303  <SubSection title="Variants">304    {/* Show all variants */}305  </SubSection>306  <SubSection title="Sizes">307    {/* Show all sizes */}308  </SubSection>309  <SubSection title="States">310    {/* Show interactive/disabled states */}311  </SubSection>312</Section>313```314 315---316 317## 11. Component Index318 319**See [references/component-index.md](references/component-index.md) for the full component inventory.**320 321When you create a new reusable component:3221. Add it to the component index reference file3232. Add it to the /design-guide page3243. Follow existing naming and file conventions325 326---327 328## 12. File Conventions329 330- **shadcn primitives:** `ui/src/components/ui/{component}.tsx` — lowercase, kebab-case331- **Custom components:** `ui/src/components/{ComponentName}.tsx` — PascalCase332- **Pages:** `ui/src/pages/{PageName}.tsx` — PascalCase333- **Utilities:** `ui/src/lib/{name}.ts`334- **Hooks:** `ui/src/hooks/{useName}.ts`335- **API modules:** `ui/src/api/{entity}.ts`336- **Context providers:** `ui/src/context/{Name}Context.tsx`337 338All components use `cn()` from `@/lib/utils` for className merging. All components use CVA for variant definitions when they have multiple visual variants.339 340---341 342## 13. Common Mistakes to Avoid343 344- Using raw hex/rgb colors instead of CSS variable tokens345- Creating ad-hoc typography styles instead of using the established scale346- Hardcoding status colors instead of using StatusBadge/StatusIcon347- Building one-off styled elements when a reusable component exists348- Adding components without updating the design guide page349- Using `shadow-md` or heavier — keep shadows minimal (xs, sm only)350- Using `rounded-2xl` or larger — max is `rounded-xl` (except `rounded-full` for pills)351- Forgetting dark mode — always use semantic tokens, never hardcode light/dark values352