Our digital brand on the web

This pattern library holds the building blocks of app.starbucks.com -- the web version of our popular Android and iOS apps for ordering ahead and managing Starbucks Cards. Centralizing these React components and CSS utilities helps us forge a consistent user experience that is always up to date with our latest brand guidelines.

Components & Usage

Explore each of the many components used to build our app, along with the design principles we use to construct them.

Guidelines

These visual guidelines form a harmonious visual system where we can not only be modular but extremely thoughtful as to how we use each component.

Utilities

Beyond the components themselves, we use a variety of CSS and JS utilities. These enable us to position, space, or otherwise visually present the components in the way they’re intended to within a given flow or layout.

Style Utilities

Presentational CSS utility classes to handle common styling requirements. The glue holding components together.

Helpers

JavaScript helper modules providing commonly used functionality.