Design a single card component that could support a wide range of layouts while still feeling consistent inside the Cash App ecosystem.

This meant balancing two things that often compete with each other:

• Flexibility for product teams
• Consistency across the system

Discovery

I started by collecting examples of cards across the product.

I looked at how teams were building onboarding flows, feature callouts, benefits lists, and marketing surfaces. I broke each example down into its underlying structure.

What content actually lived inside the card?

Common patterns started to emerge:

• Headline and supporting text
• Icon or illustration
• Feature or benefit lists
• Primary and secondary actions
• Optional media

Although the visual layouts varied, the building blocks were surprisingly consistent.

That insight shaped the direction of the component.

Instead of designing a rigid layout, the card could act more like a container with structured flexibility.

Once the structure was clear, I focused on the visual and interaction details that would make the component feel native to Cash App.

I explored things like:

• Border radius and elevation
• Background and stroke treatments
• Spacing and padding rules
• Tap states and interaction feedback
• Haptic behavior

After landing on a visual direction, I built the component inside a Figma branch and began testing it across the real examples I had collected earlier.

If the component could successfully replace those existing cards, it meant we were on the right path.

Figma Slots

One of the key tools that made this possible was Figma Slots. Our team had early access to the feature, which allowed components to accept custom content in specific areas.

Instead of forcing teams into a rigid template, the Arcade card allowed designers to drop their own layouts into defined slots.

The component itself stayed simple.

The flexibility came from what could be placed inside it.

This meant teams could copy and paste their own designs into the card while still benefiting from shared styling and behavior.

Of course, flexibility without guidance can quickly become chaos.

So alongside the component, I created guidelines that documented:

• Recommended layout patterns
• Spacing rules
• Content examples
• When to use the component and when not to

The goal was to give teams freedom while still protecting the integrity of the system.

After validating the component in Figma, I decided to push the project one step further and bring it into production myself.

Using Cursor with the cloud model, I built the Arcade card component in both iOS and Android and added it to Storybook.

I tested the component locally, shared builds with engineers, and iterated on the implementation based on their feedback.

This process helped ensure that the component worked not just visually, but also technically within the real product environment.

It also meant the design system gained a production-ready component without needing to wait on engineering bandwidth.

Outcome

The Arcade card replaced a growing collection of one-off card implementations with a single flexible component.

It allowed teams to build a variety of card experiences while keeping interaction behavior and visual structure consistent.

Just as importantly, it demonstrated a workflow where design system components could move from idea to production much faster.

Design exploration, documentation, and implementation all happened in one loop.