Slurpee Design System

7-Eleven · Shipped

7-Eleven had a design system built for one app and fifteen apps that needed one. I rebuilt it from the ground up.

Figma variables table overlapping button component

Where it started

The original system grew out of a redesign of the main consumer app. I was the sole designer. I built it, maintained it, and documented it with limited resources. It predated Figma variables and properties, so it ran on component variants. It worked, but it was brittle.

What broke

It was built for one app. Other teams needed their own solutions. They detached components. They built one-offs. The Figma library filled with unused components. Design drifted. Engineering duplicated work. Velocity dropped.

What I did first

I started with my own assumptions about what worked and what did not. Then I tested them. Surveys. Interviews. A full audit of the libraries. The audit confirmed the worst of it: components that did not work across apps, components too complex to use, and a library full of dead weight.

Affinity board mapping research findings

The architecture

Two layers. Core libraries hold the foundations: text styles, core components, icons, assets. Every app uses them. Domain libraries sit on top. Each app gets its own library with its own theming: colors, spacing, corner radius. Plus components only that app needs. Nothing app-specific leaks into core.

Design system architecture diagram Theme-able core libraries feeding custom components App-specific domain libraries Icon documentation

Adoption, not enforcement

The Speedway app was the first proof. I trained their designer to build app-specific components with Figma variables. They got independence. The system kept its integrity. That pattern scaled.

Modal component Foundations documentation: type, spacing, radius specs

The intake process

Designers submit a short form for new or changed components. We review it in a standing meeting. Accepted work goes to a backlog. Core components are handled by the design ops team. App-specific ones are handled by app teams. Everything gets a final check for construction and accessibility before it ships.

What changed

Teams adopted the new system faster than I expected. The Speedway app launched on a tight deadline with full brand consistency. Enterprise products migrated. Component simplification drove adherence: better consistency, faster development, shorter time to market. What started as one app's design language is now the foundation for 7-Eleven's digital presence.