home/coding/quill-billing-usage

Quill Billing Usage

GPTClaudeDeepSeek··▲ 1,179 copies·updated 2026-07-14

quill-billing-usage.prompt

# Quill Billing & Usage

- **ID:** `quill-billing-usage`
- **Category:** Billing
- **Type:** settings
- **Profile:** `product-ui`

---

Build a single-page billing-and-usage settings page for "Quill" — a writing-collaboration SaaS — where every meter, invoice, and upgrade path feels calm and precise. Use React + Vite + Tailwind CSS + TypeScript + lucide-react + @radix-ui/react-dialog + @radix-ui/react-dropdown-menu. Default Tailwind config, no other UI libraries.

FONTS
- Everything: Inter (Google Fonts, 400/500/600) — `font-family: 'Inter', system-ui, sans-serif` on html/body
- All prices, usage counts, and dates get `tabular-nums`

COLORS (CSS variables on :root; `.dark` on `<html>` overrides)
- Light: --background: #FFFFFF · --wash: #F8FAFC · --border: #E2E8F0 · --foreground: #0F172A · --muted-foreground: #64748B
- Semantic accents (light): --brand: #2563EB · --success: #16A34A · --warning: #D97706 · --danger: #DC2626
- Dark: --background: #0F172A · --wash: #1E293B · --border: #334155 · --foreground: #E2E8F0 · accents: #3B82F6 / #22C55E / #F59E0B / #EF4444
- Usage meter fill: `--brand` under 80% of quota, `--warning` 80–99%, `--danger` at/over 100% (color swap is instant, not transitioned — a meter shouldn't ease into "danger")

GLOBAL CSS (paste verbatim)

when to use it

Community prompt sourced from the open-source GitHub repo olbboy/motion-site-builder (MIT). A "Quill Billing Usage" style prompt — adapt the placeholders and specifics to your task. Imported as-is and not independently retested here, so check the output before relying on it.