design-guide
Paperclip UI design system guide for building consistent, reusable frontend components. Use when creating new UI components, modifying existing ones, adding pages or features to the frontend, styling UI elements, or when you need to understand the design language and conventions. Covers: component creation, design tokens, typography, status/priority systems, composition patterns, and the /design-guide showcase page. Always use this skill alongside the frontend-design skill (for visual quality) and the web-design-guidelines skill (for web best practices).
Target: Design & content creation. Automatically collected · unverified.
Excerpt from the author’s documentation
Extracted from a fixed version of SKILL.md in its original language. This is the author’s documentation; installation, compatibility and runtime results have not been verified by this site.
Read the original English text
Topics in the source
- Paperclip Design Guide
- 1. Design Principles
- 2. Tech Stack
- 3. Design Tokens
- Colors
- Radius
- Shadows
- 4. Typography Scale
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). -- 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. -- 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,
This is an excerpt. Refer to the complete source and its current requirements.
- Source repository
- paperclipai/paperclip
- Source file
- .claude/skills/design-guide/SKILL.md
- Fixed revision
- 1ca3e8ea2a759e511ab2d2659339c6c770a7a2ba
Sources and evidence
This record was collected automatically. Its documentation, suitability and runtime behavior have not been manually verified.
Author: paperclipai/paperclip · original repository metadata. Documentation review: Not reviewed. Last source check: 2026-11-10T02:01:27.268Z.
Categories are inferred from names, descriptions and paths. They do not establish compatibility.
License and attribution
MIT. Third-party content and copyright remain with their authors. Refer to the original license and terms.
Original license ↗Synchronization, copying and user-reported success do not mark a resource as runtime-tested.
Limitations and notes
- Collecting metadata does not mean this site has installed, adapted, runtime-tested or security-reviewed the resource.