The vibe-coded SaaS screen,
compiled into a product.
Every AI-built app has the same tells: a gradient hero, status chips in three shapes, numbers too small to read. So we built the archetype — a made-up freelancer invoicing app called Tally — and recompiled it into a real product screen: one palette, one type scale, one status system, the number that matters first.
Tally isn’t a real product — it’s a concept we built end to end to show the method on a full app screen, not just a landing page.
The number first, the system throughout.
Drag the toggle. The gradient gives way to the balance you actually opened the app for, the three clashing status chips collapse into one dot-and-label system, and the type finds a single readable scale.
- 1Lead with the outstanding balance
- 2One status system (dot + label)
- 3Readable type scale, no 9px numbers
- 4One accent, one surface, calm palette
- 5One primary action, not a floating pill
One screen looks nicer. The system scales.
The old screen used three chip colors in 3 different radii. One dot + one label reads instantly.
A gradient hero, hiding the number
The thing a freelancer opens this app for — how much am I owed — sits below a full-bleed gradient and a marketing headline. The balance should be the first and biggest thing on the screen.
Status chips with no system
Paid, Overdue and Draft each got their own colour and their own corner radius (4px, 12px, a full pill). You can’t scan the list; every row asks to be re-read.
Financial data at 9px
Invoice numbers and metadata render around 9px. On a money app, unreadable numbers don’t just look cheap — they make people distrust the totals.
Your product deserves a system, not a template.
We do this for real — brand identity plus a production-grade React frontend, compiled from your taste. New builds or rescues.