Design Guide

This is the canonical design system documentation for Paperclip, a dense, keyboard-first control plane UI. It covers everything from design tokens in OKLCH color space to exact typography patterns (no inventing new ones) and a strict status color system shared across entities. The real value is in the composition patterns section, which shows how StatusIcon, PriorityIcon, and EntityRow work together in standard layouts like grouped lists and property panels. Use this when building or modifying any frontend component so you're not reinventing spacing, colors, or interaction patterns. It assumes you're working with React 19, Tailwind v4, and shadcn/ui components, and explicitly tells you when to create reusable components versus just using Tailwind classes directly.

Install to Claude Code

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