Vistra

Vistra, an operational partner for funds and corporates globally, needed a design system and a fresh digital presence that reflected its evolving brand. The challenge was multifaceted: creating a cohesive, scalable design system with robust documentation, while also delivering a complete rebranding and redesign of Vistra’s landing page. The system had to provide clarity, consistency, and efficiency for teams, while also integrating modern motion principles to reflect Vistra’s dynamic, forward-thinking identity.

I was responsible for leading the end-to-end design system creation and product design work for Vistra. My tasks included:

• Designing and building the core design system foundations (typography, color, spacing) and establishing a scalable design token structure to enable consistent application across products.
• Defining and documenting a motion system, in close collaboration with Alvaro Liniers and Ana Ramos, to provide smooth, elegant interactions and transitions that expressed Vistra’s brand personality.
• Writing comprehensive documentation aimed at both designers and developers, ensuring clarity, usability, and adoption.
• Designing the new landing page as part of the rebranding effort, ensuring that the visual language reflected Vistra’s refreshed identity and that the system could easily extend to future products.
• Ensuring accessibility, responsiveness, and consistency across platforms.

We delivered a modern, modular design system for Vistra, built with strong foundations and a flexible token architecture that provided consistency while supporting scalability for future growth. The system included a fully defined motion language, carefully crafted animations and transitions that enhanced the user experience and reinforced Vistra’s brand as professional, modern, and approachable.

In parallel, we applied the system’s principles to the complete redesign of Vistra’s landing page, ensuring that the new brand identity was visible, polished, and unified from the very first touchpoint. Comprehensive documentation made it easy for designers and developers to adopt the system immediately, providing guidance on everything from components to tokens and motion behaviors.

The result was a clear, accessible, and scalable design ecosystem that empowered Vistra to maintain consistency across its digital touchpoints while projecting a dynamic, global brand image.

Vistra came away with a design ecosystem and a refreshed brand presence, both built on the same foundations.

• Token-based foundations that keep typography, colour and spacing consistent across products.
• A fully defined motion language that expresses the brand as professional, modern and approachable.
• A new landing page that brought the rebrand to life from the first touchpoint.
• Documentation for designers and developers that let teams adopt the system straight away.