EarnIn's platform-and-device-agnostic multi-brand design system

It's a design language system

When working on EarnIn's design system, we established a new, unified design language that delivered the same branded look and feel seamlessly across devices, platforms, products, and modes. That means we had to solve for both light and dark modes for EarnIn's existing native iOS and Android apps, while also going 0→1 designing their first responsive web product, with the option of marketing utilizing the system for their marketing website.

What is this sorcery? How does this magic happen?

?? Design Tokens ??

Design tokens are design decisions that are saved and used to style and design digital interfaces. Those two beautiful words were coined by the one and only Jina Anne. Be sure to check out Clarity, it is THE design systems conference and Jina, the queen of design systems.

EarnIn's design system is architected with a token library where we establish all of the design primitives for styles like typography, color, borders, radii, shadows, and grids. We'll use these to create little sub-systems for semantic use cases (i.e. background colors, typography, and more to our components and ultimately our interface designs.

We used the Tokens Studio plugin to save these design tokens, sync them with Github and our engineering team's tools. We also use Tokens Studio to create our different "mode" themes for light and dark modes and for any unique brands EarnIn may create (a well-known example is Airbnb's guest experience is branded coral while hosts is teal). This allows designers to switch their designs between light and dark modes for any of EarnIn's unique brands for their iOS, Android, and web product designs in Figma with only a few clicks.

Cool fact: On this project, we went so far as more than 80% of our components are the same components used in the designs regardless of whether a designer is solving for iOS, Android, web product, or marketing web.

About me

After cutting my teeth working on platform-agnostic multi-brand design systems at Salesforce, Zendesk, Facebook Business, and more, I continue helping organizations scale their product design and design tooling with my digital product design agency, Forge Studio. We've designed v1 design systems for organizations like Cruise, Guideline, Handshake, EarnIn, and more.

About the project

Forge supported the rollout of an upcoming rebrand through a platform-agnostic multi-brand design system that created a new unified, flexible, and scalable baseline user experience that could unify their native apps, adapt to their current and future needs, and support the launch of a new product channel going zero-to-one on the MVP of their first responsive web product.

View the case study →