The Quill design system · Issue № 001

A design system, made for people.

Textured digital paper, sepia ink, and four botanical pigments. Quill is designed for making interfaces feel approachable, delightful, and premium — crafted for everyday use.

Optimized for agentic development.

Foundations

Paper, ink, and four pigments.

Color

Three paper tones, three inks, four pigments — re-cut for every theme.

Type
AaAa

Fraunces carries the voice; Raleway does the work. One italic word per headline, always in the accent pigment.

Texture & elevation

Fractal paper grain, gentle radii, and three steps of warm ink shadow — never a hard drop.

The mark
32px favicon16px favicon

The quill, set in sepia ink. Ships as SVG, a full favicon set, and lock-ups in three sizes.

View the lock-ups →
The collection

Every component, a specimen.

Plate № 01 · Card
Meeting Mapper
№ 004
Turns a rambling hour into a tidy map of decisions, owners, and loose threads.
MMDrawn by the studioView →
Plate № 02 · Avatar
ALJDQlg · default · sm
Plate № 03 · Switch
checked bg-primary · thumb bg-background
Plate № 04 · Button — all variants
Plate № 05 · Badge — all variants
NewBetaErrorDraftArchiveView details
Plate № 06 · Field
No spam. Just drawings.

“People sit at the core of our design system and shape what good looks like: distinctive yet familiar, with a flair of style that makes it easy to come back to every day.”

№ 01

Paper first

Every surface, a texture you can almost feel with a typeset that has an unhurried editorial rhythm.

№ 02

One italic word

Emphasis is earned. A single accented italic per headline — never two, never shouted.

№ 03

A gentle settle

Hovers lift, presses set down. Nothing bounces, nothing loops, nothing hurries you along.

Getting started

Begin with a single command.

Add the Quill theme with the shadcn CLI, import from the registry, and compose. The Storybook holds a story for every component, every state, both themes.

Read the full guide
# add the quill theme
npx shadcn add https://www.quilldesignsystem.com/r/quill.json
// page.tsx
import { Button } from "@/components/ui/button"
import { Card, CardHeader } from "@/components/ui/card"