HomeStarbucks Pattern Library

Our digital brand on the web

This pattern library holds the building blocks of -- 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.


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.


JavaScript helper modules providing commonly used functionality.