Brand system
Calm finance utility.
Conversion by design.
InvoiceDistrict is built to make recovering unpaid invoices professional, and relationship-safe. Every colour, mark, and word is tuned for that one job.
Logo system
One mark. Every surface.
A deep-navy disc for financial trust, an invoice-cyan ring for automated workflow, and a white upward arrow for recovered cashflow. Designed to read from a 16px favicon to a 1024px app icon.
InvoiceDistrictFull colour lockup
App icon
Favicon · 16 / 24 / 32
InvoiceDistrictPricing · LoginNavbar lockup
InvoiceDistrictDashboard sidebar
InvoiceDistrictOn Deep Navy
Monochrome — dark
Monochrome — light
Print · 1-colour
What the mark means
- • Deep navy disc = financial trust, authority, stability.
- • Invoice cyan ring = automation, secure workflow, the chase cycle.
- • White upward arrow = recovered cashflow, overdue → paid.
- • Centred geometry = balanced, professional, never aggressive.
Logo rules
- • Never stretch, skew, or rotate the mark.
- • Never swap the arrow for an emoji or Lucide icon.
- • Never add gradients, glows, or cartoon effects.
- • Min size: 16px. Clear space ≥ 25% of mark height on all sides.
- • Use mono variants on busy photography or single-colour print.
Colour psychology
Palette tuned for cashflow recovery.
Each colour earns its place by mapping to a moment in the buyer's emotional journey: stress → clarity → control → recovered.
Financial trust, authority, stability — the bedrock of the mark.
Logo base, headlines, footer, dashboard structure, serious finance sections.
Movement, secure workflow, technology — the chase ring around the invoice.
Automation, reminders sent, integrations, timeline events, hover accents.
Calm, premium, invoice-paper feel — softer than pure white.
Main background, dashboard canvas, invoice cards, pricing.
Recovered money, payment success, growth — the upward arrow in the mark.
Primary CTA, paid status, recovered money, “Start chasing”, success states.
Attention without panic. Urgency that protects the relationship.
Overdue badges, pending reminders, needs approval, escalation.
Quiet, neutral information — never competes with status colour.
Secondary text, timestamps, helper copy, neutral metadata.
Soft success — payment completion.
Paid invoice cards, success backgrounds, recovered highlights.
Soft warning — attention without alarm.
Overdue invoice cards, follow-up callouts, soft warnings.
Stop. Never use red for normal overdue invoices — that's amber's job.
Failed sends, payment-link errors, destructive confirmation ONLY.
The wedge
The Auto-Escalation Tone Ladder.
One invoice, four polite escalations, three channels. Friendly when it starts. Firm when it needs to be.
Hi Acme — quick check-in on invoice INV-1048 ($1,284). Has it landed in your accounts queue? No rush, just looping back.
Hi Acme, just a friendly reminder that invoice INV-1048 for $1,284 is now 10 days overdue. Settle here when ready: pay.example.com/inv-1048.
Invoice INV-1048 ($1,284) remains unpaid (21 days overdue). Please arrange payment as soon as possible: pay.example.com/inv-1048.
FINAL NOTICE: invoice INV-1048 for $1,284 is 30 days overdue. Please settle today to avoid further action: pay.example.com/inv-1048.
Status colour system
Every state has a label and an icon.
Colour communicates first; text and icon confirm. Never colour alone.
Brand voice
Calm. Professional. Relationship-safe.
InvoiceDistrict is not a debt collector. It's the polite operator behind your follow-up.
Sounds like InvoiceDistrict
- Recover unpaid invoices without awkward follow-up.
- Friendly reminders first. Firmer follow-ups when needed.
- Keep cashflow moving without damaging client relationships.
- Preview every reminder before it sends.
Never InvoiceDistrict
- Destroy late payers.
- Force clients to pay.
- Threaten debtors automatically.
- Guaranteed payment recovery.
Design rules
The InvoiceDistrict do and don't.
If a screen breaks one of these, it stops feeling like InvoiceDistrict.
Do
- Use Cashflow Green for the single primary action on every page.
- Use Overdue Amber for late status — never red, unless something failed.
- Use Trust Blue strictly for accounting / payment integrations.
- Always pair status colour with a label and an icon.
- Let users preview every reminder before it sends.
- Label all mock and demo data clearly.
- Keep the tone ladder visible — Friendly → Firm, never aggressive.
- Use JetBrains Mono for money, invoice numbers, and counters.
Don't
- Don't use red for normal overdue invoices — it reads as debt collection.
- Don't paint the UI all-blue — it becomes a generic accounting dashboard.
- Don't use purple AI gradients — InvoiceDistrict is a finance tool, not a chatbot.
- Don't fake recovered-money counters, scarcity, or testimonials.
- Don't hide pricing or force contact-sales on SMB users.
- Don't use legalistic or threatening language anywhere in copy.
- Don't use emoji, sparkles, or stock Lucide icons as the product logo.
- Don't rely on colour alone to communicate status.
Design tokens
Tailwind + CSS variables.
Drop these into any InvoiceDistrict surface. Tokens are the source of truth.
tailwind.config.ts → theme.extend.colors
colors: {
invoiceInk: "#06070B",
invoicePaper: "#FAFAF7",
cashflowGreen: "#00C853",
signalGreen: "#00E676",
overdueAmber: "#F59E0B",
trustBlue: "#2563EB",
softSlate: "#64748B",
paidMint: "#DCFCE7",
overdueCream: "#FEF3C7",
dangerRed: "#DC2626",
}src/styles.css → :root
--invoice-ink: #06070B; --invoice-paper: #FAFAF7; --cashflow-green: #00C853; --signal-green: #00E676; --overdue-amber: #F59E0B; --trust-blue: #2563EB; --soft-slate: #64748B; --paid-mint: #DCFCE7; --overdue-cream: #FEF3C7; --danger-red: #DC2626; --radius-card: 20px; --radius-pill: 999px; --shadow-soft: 0 24px 48px rgba(6,7,11,.10);
Ethical persuasion, not manipulation.
InvoiceDistrict uses loss aversion (the real cost of forgotten follow-ups), authority (clean structure, transparent pricing, legal pages), goal gradient (a 4-step setup checklist), and anchoring (a clear 4-tier ladder with Pro as Most Popular). It never uses fake scarcity, fake testimonials, fake recovered counters, or hidden billing.
Build with the system.
Use the tokens. Use the mark. Use the tone ladder. Ship calm.