How SoFi Cultivates Its Thriving, Culture-Driven Design System with Supernova

SoFi, the all-in-one digital finance platform, has grown rapidly by offering a full spectrum of services, from student loan refinancing to investing and credit cards. But as its product lines expanded, so did the design inconsistencies across platforms. The team needed a better way to scale not just components, but a culture of aligned product development.

To address these challenges, SoFi launched Pacific, its new design system. Despite being less than two years old, Pacific is already driving adoption across mobile and web, building a stronger foundation for product development at scale. At the center of that journey is JJ Nold, Director of Design Systems at SoFi, who not only helped build the system but also successfully showcased its value across the organization.

From redesign to realignment

Before Pacific, SoFi had tried other design systems, but they struggled to gain company-wide adoption. Design teams often built workarounds to solve immediate problems. As a result, the same UI elements would be duplicated slightly differently across squads and platforms.

"You end up with all these different instances across the app that represent different snapshots in time," JJ explains. "You just end up with a lot of Frankenstein stuff."

That fragmentation was more than aesthetic. It made collaboration harder, slowed implementation, and diluted the user experience. The redesign created the right moment to push for a system that could do more than unify visuals.

To get leadership buy-in, JJ knew he needed to speak the language of the business. He focused on four core arguments:

• Efficiency gains: Reducing duplicated effort across teams and cutting down time spent on one-off component builds.
• Consistency: Eliminating the "Frankenstein stuff" by bringing teams onto a unified, predictable design foundation.
• Ease of future changes: Once centralized, the system would make redesigns and updates significantly faster and easier to implement.
• Accessibility benefits: Baking accessibility into every component from the start would reduce long-term risk and effort, setting up a compliance win.

His framing worked, but more than that, it shifted the way SoFi’s leadership viewed design systems. JJ didn’t just earn support; he secured budget, full-time headcount across both design and engineering, and turned what was once seen as a design-only concern into a company-wide priority. With executive backing and a dedicated cross-functional team, the design systems team set out to make Pacific a scalable system that the organization would actually want to use.

Building a foundation with staying power

In early 2024, the design systems team began laying the groundwork. One of the earliest decisions was to make documentation a first-class citizen in the system because it would help ensure lasting accessibility, clarity, and alignment across teams.

The team also knew Figma alone wouldn’t be enough.

"Writing a big block of text on do’s and don’ts inside of a Figma file just didn’t make any sense to me," JJ says. "We wanted something more like a CMS."

What they needed was a proper design system documentation tool — something easy to access, easy to update, and built for long-term visibility. That’s where Supernova came in.

Why Supernova

After evaluating several platforms, Supernova stood out for four key reasons: early support for Figma variables, automated pipelines for pushing tokens and assets directly into engineering, a flexible and customizable documentation site, and a fast-moving product team that shipped frequent updates.

JJ was particularly drawn to Supernova’s speed, adaptability, and willingness to listen, especially in contrast to the more established options. Speaking on Supernova competitors: “They felt very much like, ‘we’re the established standard,’ but they weren’t innovating as fast as we would’ve liked to have seen,” he said. “It felt like [Supernova] was building for teams like ours and actually listening.” That responsiveness made a difference, not just in tooling, but in trust.

Documentation built for scale

Supernova now powers the documentation site for Pacific, hosting everything from component specs and accessibility guidelines to changelogs and design token references.

With Supernova, JJ and his team can publish in coordinated releases: “We basically create releases, and so we get together as a team, and everyone puts all their stuff into ready to review, and then we do one publish together.”

They also make active use of Supernova’s built‑in analytics to track which pages get the most traffic and how usage changes after updates. “We’ve consistently seen traffic spikes after every update,” JJ shared.

JJ’s team also heavily customized the site using CSS to create a polished, on-brand experience, making documentation feel native to SoFi.

Creating rituals to foster adoption

JJ and his team believed that for the design system to succeed, it had to be more than a collection of components. It needed to foster a shared sense of ownership and excitement.

"We practice guidance over governance... We encourage product designers to also innovate and bring stuff back to us," JJ shared. This philosophy shaped how the system was positioned and maintained, open to contributions, but grounded in a shared standard.

They also invested heavily in culture-building rituals: internal newsletters announcing updates, automated request forms, regular office hours for feedback, a dedicated Slack channel, and even playful launch stickers and branded swag.

The result? Nearly all new features today are built using Pacific components. Bringing custom builds down to a small single-digit percentage. Adoption has been smooth, and the system has become beloved across the company. "I haven’t run into roadblocks as far as adoption," JJ said. "People are excited. They can see it’s saving them time."

Bridging the gap to engineering

For many teams, connecting design systems to engineering is where momentum stalls. But Supernova has made that connection seamless.

SoFi uses Supernova’s automated pipelines to push design tokens and assets directly into the codebase, giving engineers immediate access to production-ready building blocks. The system also supports reusable patterns and connects component specs to real implementation guidance.

The gains have been quantifiable. The engineering team reported a 30% efficiency gain on web, saving approximately 7.5 hours per engineer per week. In just one quarter, Pacific saved SoFi more than 100 hours of engineering time. Design token updates, which once took an entire day, now take under two hours thanks to automation.

It’s not just about time saved, it’s about trust. Developers now rely on Pacific to move faster with fewer questions, helping SoFi ship with consistency and confidence.

Evolving what’s next

The Pacific team are well on their way to hitting their H1 goals of migrating all 54 components and in the process of migrating their patterns. “At an executive level, we focus on pragmatic stats — the top one being migration to global counterparts in the app.”

And the four promises JJ used to secure that backing are already paying off:

• Efficiency — more than 100 engineering hours saved in a quarter, with web teams 30% faster and designers 20% more efficient
• Agility — design-token updates now take under two hours instead of a full day
• Accessibility — “Product teams now get accessibility for free,” JJ notes, slashing future risk and rework
• Consistency — over 90% of new UI now ships on Pacific components, eradicating the old “Frankenstein” builds

That momentum makes Pacific more than a design system; it’s now the backbone of how SoFi ships products at speed and scale.

Looking to the future, the team is now branching out from mobile to web, motion guidelines, and reusable templates. Headcount is growing too, showing leadership’s ongoing commitment to system and culture alike.