Design Guide

This is the comprehensive design system guide for Paperclip UI, a dense, keyboard-first control plane interface. It covers everything from design tokens in OKLCH color space to specific typography patterns (like `text-sm font-semibold text-muted-foreground uppercase tracking-wide` for section headers) and composition rules for entity rows, status badges, and metric cards. The guide enforces consistency across status colors, priority icons, and component hierarchy built on shadcn/ui and Radix primitives. Use this when building or modifying any frontend component to ensure you're following established patterns rather than inventing new ones. It's opinionated about when to create reusable components versus using Tailwind directly, which saves time on architecture decisions.

skills.sh installs: 398
GitHub stars: 112.7K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add paperclipai/paperclip --skill design-guide --agent claude-code

Installs into .claude/skills of the current project.

Files

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.