@quill

Warm neutral grounds, moss accents, Fraunces display type, and ink-toned type. A low-contrast editorial theme for digital products.

The Quill icon component — Material Symbols Outlined at weight 400, shipped as a self-contained core set of 91 names covering every icon the Quill blocks use.

Quill's uppercase tag pill for status, tiers, and labels — wraps Badge with the pigment vocabulary (moss/gold/terracotta/indigo/neutral/muted) baked in so tone…

An example showing how to compose an app page: the sidebar-nav shell wrapping a page-header, then stat-cards, then a data-table — the page leads with what it i…

An example showing how to compose a marketing page: navbar, hero, feature-section, pricing, testimonial and footer — one idea per section, breathing at the 96p…

An example showing how to compose an auth page: login-split-panel alone at full viewport — one task, nothing competing with it.

Claude Code project rules so AI agents build on-brand with Quill — the theming contract, foundations, principles, icon names and the block index, generated fro…

A card timeline of recent events — avatar, action text, and a relative timestamp per entry.

A vertical stack of informational, success, and destructive alerts with icons.

A dashboard pair — an area chart of audience growth beside a bar chart of weekly sales, each on its own card.

Two dismissible announcement banners — an inline bordered page banner and a full-bleed primary-color variant.

Default, secondary, and destructive badges shown together on a card surface.

A single-date calendar paired with the selected day's session list, in one studio-schedule card.

A stateful two-month range calendar for booking a span of days, with clear and reserve actions.

A one-on-one messaging panel — contact header, message bubbles, and a composer input.

A two-column checkout — payment method picker and card form beside an order summary sidebar.

A searchable ⌘K command palette with grouped actions, recent items, and keyboard shortcuts.

A get-in-touch card — name, email, a topic select, and a message field.

A cookie consent banner offering accept, reject, and preferences actions.

An app shell with sidebar navigation, a search header, and KPI stat cards.

A filterable members table with a toolbar, ToneBadge status pills, and a per-row actions menu.

A dashed-border empty state with an icon, explanatory text, and a primary action.

A full-page 404 error state with go-back and home recovery actions.

A centered FAQ section — an accordion of common questions with a contact call-to-action footer.

A marketing section with an editorial heading and a three-column feature grid.

An asset-upload card with a drag-and-drop dropzone and a progress-tracked upload queue.

A marketing footer with brand blurb, link columns, and legal links.

A password-reset request card — an email field, a send-link action, and a way back to sign in.

A centered marketing hero — a release badge, serif headline, supporting copy, and primary/secondary calls to action.

A printable invoice card — sender and recipient details, a ToneBadge payment status, a line-item table with totals, and a download action.

A three-column kanban board with card counts, tagged task cards, and an add-card affordance per column.

An inbox-style split view — a selectable message list beside a detail pane with archive and delete actions.

The standard email-and-password sign-in card, with remember-me and a forgot-password escape hatch.

The bare-minimum sign-in — no card chrome, a single email field, sign-in by one-time code.

Provider-first sign-in — Google, GitHub, and Apple buttons above an email fallback.

A full-page, branded sign-in — a testimonial panel beside an email/password form with a magic-link option.

A two-pane mail client shell — a searchable message list and a reading pane with toolbar and inline reply.

A top navigation bar with brand wordmark, a responsive link list, and sign-in / get-started actions.

A dropdown picker for the five Quill themes and four pigment accents — sets data-theme/data-accent and persists both to localStorage.

A centered newsletter-signup section — an email field, subscribe action, and social proof.

A notifications card listing recent events with icons, timestamps, unread indicators, and a mark-all-read action.

A setup checklist card with a progress bar, completed and pending tasks, and start links for remaining steps.

A checkout order-summary card — line items, a promo code field, a total, and a pay-now button.

A six-digit one-time-passcode entry card for verifying an email, with expiry messaging and a resend action.

A page header with a breadcrumb trail, title and description, and duplicate/new action buttons.

A three-tier pricing grid with a highlighted popular plan, feature checklists, and per-plan calls to action.

A compact, centered profile card — avatar initials, role, follower stats, and follow/message actions.

A docs search panel — query input, result count, and a linked result list with breadcrumbs and type badges.

A profile settings card — name fields, a bio textarea, and an email-notification toggle.

A collapsible icon-sidebar app shell with grouped menus, badges, a top bar, and a main area for the page — a card grid by default, or the children you pass in.

Standard account-creation card — name, email, password, and a link back to sign-in.

Signup that leads with GitHub and Google provider buttons, falling back to an email/password form.

A responsive grid of KPI cards, each showing a value with a delta badge versus last month.

A marketing band of headline statistics separated by vertical dividers on a card background.

A tabbed settings page with account, notifications, and security panels.

A marketing team grid with avatar cards showing each member's name, role, specialty badge, and email action.

A customer-quote card with a serif pull-quote, avatar initials, and attribution.

A multi-step setup card — a progress stepper, workspace fields, and back/continue navigation.