From Fragments to a Full-Fledged Design System

When I first arrived, the product was made up of icons, colors, and scattered screens, but no system to carry us forward. I began shaping a design system to lay the groundwork for scaling, just as the company entered its first major pivot.

The moment the new brand guidelines landed in my inbox, I knew the system had to evolve, immediately. It had to breathe with the brand and scale with the product.

As we made our 1st pivot into Web3, we needed a presence that could stand out in a crowded space. With the guidance of our art director, Jairo Villa, we discovered a new brand direction, one filled with vibrancy, energy, and a language that could carry our evolving identity forward.

To make the system scalable, I started by establishing clear rules for spacing and alignment. Every component and layout was mapped to a consistent grid, ensuring that elements felt connected while maintaining flexibility across different screen sizes.

I also defined the placement logic for key elements, buttons, cards, forms, and icons, so that each screen followed a predictable hierarchy. This made it easy for designers and developers to assemble new pages without breaking visual consistency.

As we expanded from designing solely for iOS to both major platforms, we needed a type system that could speak universally. SF Pro wasn’t readily accessible for Android users, so relying on it would fragment the experience. We wanted a custom font, one that was distinctive, cohesive, and reflective of our brand’s emerging identity.

This challenge coincided with new font technologies emerging, which allowed us to create a cross-platform solution that was flexible, unique, and ready to grow with the system.

Art direction gave the system its personality. Blobs helped establish approachability, while gradients introduced vibrancy and motion. Frosted glass layers added depth and polish, softening the interface and making it feel more tactile.

We also introduced a subtle noise texture in the background to balance the glossy surfaces. This detail grounded the visuals, giving the product a sense of warmth and tactility that contrasted with the sleekness of glass and gradients.

With tight deadlines and a fast-moving team, our focus was on shipping the product efficiently. We leaned heavily on Google’s Material Design for existing widgets to maintain speed, but wherever possible, we added subtle, thoughtful touches.

To make the design system truly usable, every component needed clear, centralized documentation. I detailed specs, states, and variants all on the same page, alongside example usages, so designers and developers could reference and implement components confidently without hunting across multiple files. This structure turned the system from a set of guidelines into a living toolkit.

Real-world adoption often revealed challenges. Developers occasionally diverged from typography rules, and some components required flexibility for edge cases. To address this, I implemented clear guidance on when exceptions were allowed and updated documentation as new scenarios emerged. This iterative approach ensured the system could evolve with the team while maintaining its integrity and consistency.

We rebuilt the app to move faster on iOS and Android. The plan ran on two tracks: keep the primary flow stable for existing users, and redesign surrounding journeys to serve the new strategy.

Constraints: 8–12 weeks, a lean team, and platform expectations to respect. Success meant shipping a trustworthy core while creating room for innovation around it.

We protected the core flow that existing users depended on, and rethought others that no longer fit the strategy. We mapped which journeys needed 1:1 parity and which to retire, rebuild, or create from scratch.

The design system was our safety net—enabling speed and consistency as we redesigned without sacrificing quality.