🎨💡 It's a design language system 💡🎨 When working on EarnIn's design system, Forge Studio 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.
How? ✨ Design Tokens ✨ are design decisions that are saved and used to style digital interfaces. Those two beautiful words were coined by the one and only @jina. Check out Clarity Conference. 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 that we'll use for semantic use cases i.e. background colors, typography etc to our components and UIs.
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.
An example is Airbnb's guest experience is branded coral while host experience 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.
Forge supported EarnIn's rebrand through a platform-agnostic multi-brand design system that created a new unified, flexible, and scalable baseline user experience that could unify their existing native apps. forge.is/working-on/ear…
✨ Now taking on new projects! ✨ Need UI/UX product design, brand, or web design? Let us know at hforge.is/listening
