Payify — A Composed Invoice Design System

An invoice system for freelancers and small businesses that covers the entire billing process — from client management to payment tracking, with automatic PDF generation, email dispatch, and compliance with German VAT regulations.

The Vision

Existing invoicing tools either lacked essential features for the German market or were overly complex for solo freelancers. Payify closes this gap with a focused solution that covers the entire invoice lifecycle — from draft to payment — without feeling like administrative software.

States Instead of Documents

The most important design decision came before the first line of UI code: An invoice is not a PDF that exists at some point — it is an entity with a lifecycle. Draft, approved, sent, paid. Each state answers a different question, and the interface answers it before you even have to ask. A paid invoice, therefore, cannot be edited intentionally — if you want to make a correction, you create a credit note, just like in real accounting.

Key Features

• Modern dashboard with real-time overview of invoice status
• Professional PDF generation with customizable templates
• Automated email notifications via React Email
• State machine-driven invoice workflow (Draft → Approved → Sent → Paid)
• Support for German small business regulation and standard VAT
• Client database with history tracking
• AI-powered PDF import for expense recognition

Mobile was Never Optional

The most honest part of this case study: Until recently, the invoice flow on a mobile phone was simply unusable. The two-column view (form on the left, live preview on the right) was hardwired — at 375px width, this resulted in two columns, each with half the space of a business card. The rewrite revealed a design flaw that hadn't been on the radar before: tablet landscape mode is not desktop. The obvious breakpoint limit in most frameworks is typically 1024 pixels — which is exactly where virtually all iPads in landscape mode land. The solution was remarkably simple once the problem was clear: set the boundary for the two-column split higher than the boundary for 'enough space,' and consistently stack elements below that, rather than squeezing them.

The second discovery concerned the item table: fixed column widths for quantity, unit, description, unit price, and total require more than 400 pixels, no matter how much you compress the input fields. Instead of making the fields unreadably small, now only the table itself scrolls horizontally — the total and 'Add Item' buttons are intentionally excluded from this and remain always visible.

Design Philosophy

The user interface prioritizes clarity over alarm. Overdue invoices don't glow bright red — a muted amber informs without causing panic. Active and focused elements are exclusively marked by a subtle, transparent ring, never by a colored bar at the edge — a pattern that appears excessively in generic dashboards and rarely convinces. And the invoice overview deliberately remained a card grid instead of a dense table, because it's simply faster to read for a few, but important, invoices.

72 Components, One System

To remain consistent with the design system itself, Storybook each individual UI component is documented in isolation — 72 building blocks, from simple badges to more complex patterns like command menus and date pickers. Not a nice-to-have for later: it's the reason why new features don't feel like patchwork, but rather like the same toolkit, reassembled in a new place.

Technical Foundation

Developed with Next.js 16 App Router and React 19, using Drizzle ORM for type-safe database operations on PostgreSQL. The user interface combines custom components with Radix primitives, styled with Tailwind CSS 4. State management utilizes TanStack Query and Form for optimal performance.

Still Work in Progress — Deliberately So

Payify is not a finished product. What is solidly in place today: the complete invoice flow, including PDF and e-invoice export, a quote module with conversion to an invoice, automatic payment reconciliation, and a notification system for mail dispatch, status changes, and incoming payments. What is still missing is structurally larger: a true multi-user system with login and a pricing model for everyone who wants to use the tool not just for themselves. Both are in progress, neither is live yet.