An editorial design system for digital products — warm neutral grounds, ink-toned type, five themes and four accents, 51 blocks, WCAG 2.1 AA, and agent-ready docs (llms.txt, usage guides, Claude Code rules).
A full-page 404 error state with go-back and home recovery actions.
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.
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 is about, and the numbers sit inside it.
An example showing how to compose an auth page: login-split-panel alone at full viewport — one task, nothing competing with it.
An example showing how to compose a marketing page: navbar, hero, feature-section, pricing, testimonial and footer — one idea per section, breathing at the 96px rhythm.
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 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.
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.
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.
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.
The bare-minimum sign-in — no card chrome, a single email field, sign-in by one-time code.
A top navigation bar with brand wordmark, a responsive link list, and sign-in / get-started actions.
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.
Claude Code project rules so AI agents build on-brand with Quill — the theming contract, foundations, principles, icon names and the block index, generated from the design system.
Warm neutral grounds, moss accents, Fraunces display type, and ink-toned type. A low-contrast editorial theme for digital products.
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 multi-step setup card — a progress stepper, workspace fields, and back/continue navigation.
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.