One system. Three platforms. Built together.
It started by bringing people together...
Before Rise, we had multiple teams solving the same problems in slightly different ways. Web, iOS and Android had their own libraries, logic, and look. Designers didn’t always know what had been built. Engineers couldn’t trust what was in Figma. And brand consistency was more of a hope than a guarantee. We didn’t want to fix that with just another design system. We wanted to fix it together. So we started by bringing people into the room—designers, engineers, product leads, accessibility champions, and brand partners. We ran surveys, interviews, workshops and weekly drop-ins. We created space for people to share what wasn’t working and what they wanted instead. Then we set up regular cross-platform syncs. Weekly mobile check-ins. A central Design System Council. Shared planning boards. Everything we did came back to one goal: building a common language across disciplines and platforms. “We didn’t just launch a design system - we built a community around it.”
Creating the Rise Brand.
The Rise brand itself was crafted from the ground up to embody clarity, consistency, and an approachable tone. I led the effort to define Rise’s visual identity - choosing a colour palette that felt modern yet accessible, selecting type treatments that balanced personality with readability, and establishing iconography that aligned with our token-driven foundations. Every element of the Rise brand, from logo to voice, was designed to signal a unified, cross-platform system. By defining these brand guidelines early, we ensured the design system’s components would feel cohesive and recognizable across web, iOS, and Android. “Creating the Rise brand meant setting the tone for every interaction—visual, verbal, and experiential.”
Tokens: the language everything speaks
We started with tokens. If Rise was going to power all of our experiences, we needed a way to describe colour, type, spacing, elevation and more that would work across platforms - and adapt where needed. Tokens are managed centrally in Token Studio, and they power every component we build. I manage tokens in Token Studio but we export to Figma variables as it was much easier for designers to use the native options. For designers, that means no more guessing. For engineers, no more detangling spaghetti styles. Every token change flows through our pipeline (described below), ensuring consistency. “Once tokens clicked, the system stopped being theory—it became real.”
Design System Flow
One pipeline from design to code
To support three platforms seamlessly, we built a unified end-to-end design system pipeline:
1. Figma is used to manage design tokens with Token Studio.
2. Tokens are exported as JSON and pushed to GitHub.
3. Automated transformers convert tokens into platform-specific formats:
• Web: SCSS/JS
• iOS: Swift constants
• Android: XML or Kotlin resources
Each team receives exactly what they need in the format they need—automatically. Designers stay focused on design. Engineers stay focused on features. The system stays in sync.
Cross-Platform Design
Rise was built for web, iOS and Android from day one
We didn’t want to make a web design system and then ask mobile teams to “adapt it.” Rise was built for web, iOS and Android from the start.
1. Components behave natively but are powered by the same foundations
2. Design kits reflect the unique needs of each platform
3. Shared tokens handle theming, spacing, colour and border radius
4. Platform teams get their own builds—but with shared DNA
That means a toggle looks right on iOS, behaves correctly on Android, and feels consistent with web—without extra lift.
The Results
Rise helped us move from chaos to clarity
What we achieved:
It also gave teams a shared vocabulary and confidence that what they were building was right.
