Tally
A design system for a four-person fintech team who were rebuilding the same button for the fourth time.
The brief
Tally had shipped fast and inherited the bill. Three shades of green in production, two date pickers, and a settings screen nobody wanted to touch because the spacing had been hand-set.
A full redesign was not the answer. The product worked. What it needed was a set of decisions made once, written down, and small enough that four people would actually use it.
Eleven button styles in production. The count is the argument that gets a system approved.
What we did
-
UI audit
Screenshotted every screen in production and counted the variations. Eleven button styles, four card treatments, three greens.
-
Foundations
Spacing scale, type scale, colour roles and interaction states, each defined once with the reasoning attached.
-
Components
Twenty-two components covering roughly ninety per cent of the product, each with states and content rules.
-
Patterns
Empty states, error handling, loading and confirmation, so the awkward screens stop being improvised.
-
Handover
A working library plus a one-page rule for when to add a component and when not to.
How it was done
- 01 Step 01
Inventory
Counted what already existed before designing anything new. Most of the inconsistency turned out to be spacing, not colour.
- 02 Step 02
Foundations
Fixed the scales first, then rebuilt on top of them. Half the visual mess resolved itself at this stage.
- 03 Step 03
Components in use
Every component was designed inside a real screen, never on a blank artboard, so edge cases showed up early.
- 04 Step 04
Adoption plan
Migrated three screens as worked examples and left a written order for the rest, ranked by how often each is seen.
Handed over
Everything below is owned outright, in editable and print-ready formats, with the source files.
- Full UI audit with screen inventory
- Spacing, type and colour foundations
- 22-component library with states
- Pattern documentation for edge cases
- Three migrated screens as reference
- One-page contribution rules
- Figma library
- Developer handoff notes
Fenwick & Sons
A family building firm whose van, brochure and quote template looked like three companies.
Tell me what
you're
building
A few lines about the business and what you need is enough to get started. Small businesses are what this studio is built for, and you will hear back from me, not a sales team.