The Starbucks iOS app, dissected. Deep emerald canvas. Pill-shaped CTAs. Stars rotate on a circular arc. Gold belongs to one thing — and one thing only.
Every Starbucks screen earns its position on an iPhone through the same rules — emerald header, white body, pill-shaped CTAs, gold reserved entirely for the Stars system.
Green banner up top with a personalized greeting + circular Stars arc. White body below stacks Featured hero card, recommendations, Members-Only deals. The #CBA258 gold appears only on the arc.
Top tab underline switches Featured / Drinks / Food / Merch. Categories render as 50%-radius circles (Hot Coffees, Iced, Frapps, Teas, Refreshers). One green underline tells you where you are.
Full-green canvas surfaces a hero progress ring with gold arc. Below: white reward-tier sheet lists 25⭐ → 400⭐ with redemption pills. Locked tiers go monochrome.
The Stars ring is a single SVG circle with stroke-dasharray animated on every order. Each Star earned fires a haptic tick; the arc rotates to its new position on a 0.8s spring curve. Gold against deep emerald is the only color pair allowed in this control.
Mini-arc on Home; hero-arc in the Stars tab; lock-screen widget mirrors both.
radius: 50%
stroke: 2.5pt
spring: 0.8s
haptic: light tick
The instant you tap Order, a Dynamic Island Live Activity pins to the lock screen showing your drink name and ETA. The countdown lives in the iOS system layer — you can see it from the home screen, the lock screen, or behind another app.
4-step progress: Placed → Confirmed → Preparing → Ready. Gold marks completed steps; muted gold marks pending.
ActivityKit: enabled
steps: 4
countdown: tnum
The Scan tab is a center-floating green FAB — never the default tab, always elevated. Tap it and a modal sheet presents your Starbucks Card barcode on a white surface, with the balance above. The phone's brightness max-bumps automatically.
Apple Pay sits as a secondary affordance; the in-house Card always wins because earning Stars requires it.
scan FAB: 46pt
sheet: .large
UIScreen.brightness: 1.0
Every token Starbucks's iOS app reaches for — surface ladder, type ramp, radius scale, components. The green is non-negotiable. The gold belongs only to Stars.
Two greens stack the brand: deep emerald for headers and CTAs, darker emerald for hero canvases. Mint cream is the only soft surface. Gold ties the entire Stars economy together — and shows up nowhere else.
SoDo Sans in production — Inter as a faithful substitute. Display sizes lean heavy (700–800). Numbers in Stars and balance are tabular so the count doesn't dance.
| Token | Sample | Size | Weight | Tracking |
|---|---|---|---|---|
| --display | Good morning, Jiang | 28 / 1.75rem | 800 | -0.5px |
| --title-section | Featured | 18 / 1.13rem | 700 | -0.3px |
| --card-title | Iced Brown Sugar Oatmilk Shaken Espresso | 14 / 0.88rem | 700 | normal |
| --body | Espresso, brown sugar, oatmilk, cinnamon. | 14 / 0.88rem | 400 | normal |
| --button-pill | Order now | 14 / 0.88rem | 700 | normal |
| --stars-count | 175★ | 36 / 2.25rem | 800 (tnum) | -1px |
| --card-balance | €42.18 | 26 / 1.63rem | 800 (tnum) | normal |
| --tab-active | Home | 9 / 0.56rem | 600 | normal |
| --eyebrow | Members Only | 9 / 0.56rem | 700 | 0.6px |
Pills everywhere — buttons are full-radius; category tiles are circles; cards rest at 14–16px; the home header bleeds straight off the top with no top corner. Hard angles are reserved for inline tabs.
The constants that anchor the iOS implementation across iPhone 12 mini through iPhone 16 Pro Max.
Pills, circles, and quiet white cards — the language of a coffeehouse counter, translated to an iPhone.