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.
- Animator
- Banner
- BottomSheet
- Buttons
- Card
- Carousel
- Checkbox
- Checkbox Field
- Confirmation Card
- Content Column
- CrossFade
- Dialog
- EditField
- Expanders
- Field
- Field Status
- Focus Trap
- Footer
- Full Width Container
- Forms
- Frap
- Header and Content Crates
- Headings
- Icons
- Icon Buttons
- Images
- Layer
- Link Lists
- Loading Coffee Cup
- Loading Indicator
- Logo
- Modals
- Navigation
- Overlay
- Prevent Focus
- Radio Buttons
- Segmented Control
- Select
- Site Max Width Container
- Site Narrow Width Container
- Spilled Coffee Canvas
- SVC Image
- Swipe Deck
- Tabs
- ThemeContext
- Toggle
- Tooltip
- TopSheet
- Misc.
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.