@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 98 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…

A small outline pill with the AI sparkle that marks content an AI made or suggested — "AI draft", "Suggested".

A stock Quill button that runs an AI action, marked with the AI sparkle; the label stays plain ink.

One quiet line under an AI composer saying the AI can be wrong, with an optional link the app supplies.

Shows an AI working before its answer — a shimmering "Thinking" with what it is doing — then folds into one quiet "Thought for 8 s" row that opens the reasonin…

An AI's reply in a conversation — the AI mark on its avatar, the answer as plain readable text, and Copy, Try again and thumbs under it. Ships with UserMessage…

Shows where an AI answer came from — a small chip after each claim, named for its source, that previews it, and an "N sources" list under the answer.

Ready-made things to ask an AI — chips for follow-ups under an answer, cards for starters on an empty page, a list in a narrow panel. Picking one fills the com…

Lets people choose which AI model answers — a quiet name-and-chevron trigger in the composer that opens a list with Auto first, a line on what each model is go…

Shows the steps an AI agent is working through — done, running, waiting or failed — with a count in the header and rows that open to show what happened.

Asks before an AI agent acts — an inline card that names the action, shows exactly what will happen, lets people edit it in place, and has a main button that s…

An AI agent asks the person to choose — the question, options as full rows with the recommended one first, a free-text row for anything else, and Continue that…

Shows how much AI credit is left — the number, a bar in the AI gradient, when it renews, what the rest will buy, and a breakdown — with a compact ring for a co…

Asks what was wrong after a thumbs-down on an AI answer — one reason to choose from a short list, an optional note, and Send — opening under the answer so what…

An AI suggestion beside the text it is about — what the AI did, the suggested text on a soft AI wash, then Discard, Try again and Replace.

Quill's AI sparkle — the one icon that means AI, drawn in the AI gradient with a one-star cut for 16px and under.

The box people type to an AI in — grows with the text, sends on Enter, turns Send into Stop while the AI works, with slots for tools, files and a model picker.

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 and a component-choosing skill so AI agents build on-brand with Quill — the theming contract, foundations, principles, icon names and…

A self-check an AI agent runs inside its app after changing UI: lists every place the code stepped outside Quill — stock Tailwind colours, raw colour values, b…

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.

An AI assistant's start page — a soft AI glow, a greeting, the large composer with Ask/Agent modes, and starter cards.

A full AI conversation page — past chats on the left, the thread in a readable column with reasoning, source chips and follow-ups, and the composer with the mo…

An AI assistant docked beside the page — a header with History and Close, a removable chip saying what it is looking at, a short thread, and the small composer…

Past AI chats grouped by when they happened — pinned first, then today, yesterday, the last week and earlier months — with the open chat filled and a menu on e…

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.