Cover0.00%
Arcade Liquid Glass

01

Cash App / 2025 / Design Systems Designer

Arcade: Bringing Liquid Glass to Cash App

Updating a cross-platform design system to feel native on iOS without losing its identity


02

Overview


Cash App’s design system, Arcade, was built to scale across platforms with a high degree of consistency. That consistency worked well, until it started to work too well.

With the introduction of iOS 26’s liquid glass styling, we had a new opportunity and a bit of a dilemma. Should Cash App lean into Apple’s visual language to feel more native, or maintain strict visual parity across iOS and Android?

This project explored how to do both, without compromising either.

Project image

The challenge

There were two main tensions at play:

1. Brand vs platform expression

There was real concern that adopting liquid glass would dilute Cash App’s visual identity. Arcade had a strong, recognizable look, and this direction risked blending too far into the iOS ecosystem.

2. One system vs two realities

Arcade components were largely shared across iOS and Android. Introducing liquid glass meant breaking that symmetry and supporting more platform-specific behavior and styling than we historically had.

Neither of these were small changes. This was a system-level shift.


My role

I led the exploration and design of how liquid glass could integrate into Arcade.

This included:

  • Defining where platform-specific styling made sense
  • Designing and prototyping updated components
  • Exploring visual treatments for liquid glass in both light and dark mode
  • Partnering closely with iOS engineering to validate feasibility in SwiftUI
  • Partnering with core UI designers to ensure our bottom navigation worked across the design system themes required for different cardholders tortoise

03

Finding the line


The solution wasn’t to go all in on liquid glass. It was to be intentional.

We identified areas where users already expect native behavior and leaned in there:

  • Toggles
  • Sliders
  • Modals
  • Title bars
  • Bottom navigation

The bottom navigation, in particular, became a key moment. Introducing liquid glass here allowed the app to immediately feel more at home on iOS, without overhauling everything else.

For more expressive, brand-forward components, we held the line and preserved Arcade’s existing visual language.

This created a system that felt native when it needed to, and distinctly Cash App everywhere else.

Project image

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Slide 11
Slide 12
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Slide 11
Slide 12

04

Designing the system


Once we aligned on strategy, the real work started.

This update touched almost every component in Arcade. In many cases, that meant introducing:

  • iOS liquid glass variants
  • Android variants
  • Additional dark mode considerations where needed

Designing the liquid glass effect itself was surprisingly tricky. It is not just a color or blur. It is a layered combination of translucency, background interaction, and subtle lighting.

Project image

Figma also pushed back a bit here. Our token system did not easily support opacity-driven color values, which made creating consistent, reusable styles especially in dark mode more complex than expected.

So a lot of this became hands-on craft:

  • Iterating on layered fills and blurs
  • Testing contrast and legibility in different contexts
  • Making judgment calls on when a component needed a separate dark treatment
  • Tweaking the bottom navigation as needed to work across different app themes. Supporting Cash App card theme styling.
Project image

05

Bridging design and code


To make sure this wasn’t just a Figma experiment, I brought components into SwiftUI using Cursor.

This allowed me to:

  • Validate how Apple’s material system actually behaves
  • Test different glass intensities like light and medium
  • See how components respond to real content and motion

From there, I worked closely with an iOS engineer to refine the implementation and land on a treatment that felt both native and intentional.


06

Outcome


We evolved Arcade from a fully shared system into a more flexible, platform-aware one.

  • iOS components now feel meaningfully more native
  • Brand expression remains intact in high-impact areas
  • The system supports platform-specific variants where it actually matters

More importantly, we created a framework for how Arcade can adapt to platform conventions moving forward, instead of resisting them.


Reflection

This project was a balancing act.

It pushed Arcade to grow up a bit, from a strictly unified system into something more nuanced and responsive to context.

There was no single “correct” answer, which made the early alignment work just as important as the final designs.

And honestly, it was a reminder that sometimes the job is not to pick a side, but to design the line between them.