Design system

Component Library

Reusable BillFlow patterns for building consistent billing, finance, and administration experiences.

VariantV2 Enterprise
DensityCompact operational
Surface radius8px
Primary actionBlue 600
V3 ModernCalm automation patterns
Emerald actions · 18px surfaces · spacious grouping

Operational pattern set

Controls for finance teams

Exception queue2 overdue invoices
Approval stateReady for postingOwner · John Smith
Audit eventPayment reconciledAug 10 · 17:04 UTC

Automation pattern set

Guidance that keeps work moving

Workflow completePayment collected and reconciled
Collection progress72%
72%
Suggested next stepSend reminders for two overdue invoices.

Foundations

Typography, semantic colors, spacing, and icon treatment.

Eyebrow label

Page heading

Body copy uses compact, readable measures for operational interfaces.

Section heading

Control or table label

Supporting metadata and descriptions

$48,295.00 · INV-0042

Semantic palette

Primary

Ink

Canvas

Success

Warning

Danger

Metric cards

Total revenue

$17,620.00

Completed demo payments

Outstanding

$16,750.00

4 invoices awaiting payment

Overdue

$11,800.00

2 past due

Collection rate

40.4%

Current demo invoices

Buttons

Primary, secondary, quiet, and destructive actions.

Statuses and alerts

Text-supported states for financial workflows.

PaidPendingOverdueDraft

Integration note

Demo actions are clearly separated from production services.

Form controls

Labels, descriptions, validation, and focus states.

Empty state

A focused recovery path when no records exist.

No invoices found

Create an invoice or adjust the active filters.

New invoice

Data table

Compact desktop scanning with status and amount hierarchy.

InvoiceCustomerAmountStatus
INV-0042Acme Corp$4,200.00Paid
INV-0041TechStart Inc$1,850.00Pending

Payment method

Saved-card identity and account actions.

VISA

•••• •••• •••• 4821

Default

Expires 09/28 · John Smith

Current plan

Pro

$49/mo

  • Unlimited invoices
  • Advanced reports
  • 5 team members

Mobile record card

Priority fields and touch-safe actions without horizontal scrolling.

INV-0040

Global Solutions Ltd

Overdue
Amount
$9,500.00
Due date
Jul 30, 2026

Accordion and upload

Native disclosure and accessible file selection.

How do exports work?

Exports contain the currently filtered records and download directly in the browser.

Where is demo data stored?

Interactive changes use localStorage keys prefixed with billflow.

Example upload dropzone. Add validation for your accepted file types.

Feedback and overlays

Interactive toast, confirmation, loading, and progress patterns.

Interactive examples

Invoice completion72%