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.

Components

Each of these React components comes with its own set of properties and modifications.

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.