TotMoney Design System

2021

A component library, part of the Tot design system, made to shake up the Italian B2B banking market.

Role
Design system lead
Team
1 designer, 4 developers
Duration
7 months
Stack
React, TypeScript
Tot payment cards and the Tot banking web app showing a list of payments, surrounded by abstract shapes and illustrated avatars

Context

In 2021 Tot set out to shake up B2B banking in Italy, building on what we had learned at Credimi. The brand had to feel young and vibrant in a market that usually feels anything but: micro animations and abstract illustrations to stand out.

The type scale: headings H1 to H6 and a paragraph on a baseline grid

My role

I led the design system, with one designer and four developers. We built it from the ground up with a custom Storybook, and shipped it through a private npm registry. Both the internal product team and the external team building the public website used it.

The color palette: primary purples and secondary reds, each swatch with its hex code and role

The hard part: sprints without features

Some sprints closed without a single visible feature, only components. That is hard to sell to people who measure progress in features: those components were the bricks of everything that came after. We moved fast anyway: seven months from zero to a cohesive product on the market.

Outcome

I no longer maintain it, but the library at components.tot.money is still live and in use since 2021, and still follows the principles we set at the start.

Visit the live site


More projects

Credimi KYC2020 FountAIn2026 Pivella2026 Oops we did it again2023

Get in touch