Quill

Overview

Quill is an editorial design system for digital products by Craftwell, now at version 1.31. It is built around warm neutral paper tones, ink-colored type and a narrow accent palette reserved for meaning, with five themes and four accent pigments. Fraunces sets headlines and Raleway handles body text, with a rule of one accented italic word per headline.

The theme installs with the shadcn CLI, and the registry adds UI components and more than 50 blocks covering app pages, marketing pages, authentication and AI interfaces. A Storybook holds a story for every component, state and theme, and the docs are prepared for agentic development with llms.txt, usage guides and Claude Code rules. Components target WCAG 2.1 AA.

Features

• Paper and ink palette: Three paper tones, three inks and four pigments, re-cut for each theme.
• Texture and elevation: Fractal paper grain, gentle radii and three steps of warm ink shadow.
• Restrained motion: Hovers lift and presses settle, with no bouncing or looping animation.
• AI components: AI message, thinking state, citations, suggested prompts, model picker, agent steps, approval card and prompt composer.
• Application blocks: Dashboard, data table, kanban, mail shell, calendar, settings, invoice, checkout and onboarding wizard.
• Marketing and auth blocks: Hero, pricing, FAQ, testimonials, newsletter, and several login and signup layouts.
• Brand mark: The quill logo as SVG, a full favicon set and lock-ups in three sizes.
• Agent-ready docs: llms.txt, usage guides and an agent rules item for Claude Code.

Tech stack

• React, Tailwind CSS, shadcn/ui
• Recharts, React DayPicker, Storybook

Getting started

npx shadcn add https://www.quilldesignsystem.com/r/quill.json

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @quill/component-name