iOS Design Spec

# Every screen is a green light.

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.

View Design Tokens Explore Surfaces
9:41
What can we get
started for you?
Search menu
Featured
Drinks
Food
Merch
Hot Coffees
Iced Coffees
Frappuccino
Hot Teas
Iced Teas
Refreshers
Home
Scan
Order
Gift
Offers
Order Menu
9:41
Good morning, Jiang
175★
25 Stars to go
Until your next reward
200★ · Handcrafted drink
Redeem
Featured
Try the new
Iced Brown Sugar Oatmilk
Shaken Espresso
Espresso, brown sugar, oatmilk, cinnamon.
Try something new
Pistachio Latte
Matcha Cream
Members Only
Double Stars Day — earn 2x on every order Friday.
Home
Scan
Order
Gift
Offers
Home · Stars Arc
9:41
Stars
175★
25 to next reward
Reward Tiers
25
Customization
Free milk or syrup
Redeem
100
Brewed coffee or bakery
Any size
Redeem
200
Handcrafted drink
25 more Stars
300
Hot breakfast / parfait
125 more Stars
400
Select merchandise
225 more Stars
Home
Scan
Order
Gift
Offers
Stars · Rewards
iOS Surface Anatomy

## Three surfaces. One deep emerald.

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.

### Home

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.

### Order

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.

### Stars

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.

Stars Arc

### Progress you can feel filling.

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`
175★
25 to reward
73% · animated dasharray
Mobile Order · In Progress
Iced Brown Sugar Oatmilk · Grande
Ready in 4 min · Av. Liberdade
Earned 8 Stars
Posted to your account
+8★
Mobile Order & Live Activity

### The countdown that pulls you to the door.

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`
Scan to Pay

### Barcode at center, the whole store falls quiet.

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`
Starbucks Card
€42.18
6042 8174 9023 4561
Design System Reference

## The whole vocabulary, in one place.

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.

View Source ↗

### Color

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.

Primary Brand
Starbucks Green
#006241
Forest
#1E3932
Mint Cream
#D4E9E2
Sage
#7DAA94
Canvas
#FFFFFF
Stars & Accent
Gold Tier
#CBA258
Gold Soft
#E8D4A8
Coffee Brown
#9D5116
Brown Soft
#D9C2A6
Arc Gold
gradient
Text
Ink
#000000
Body
#2E2E2E
Muted
#6F6F6F
Dim
#A1A1A1
On-Green
#FFFFFF
Semantic
Confirm
#3A7D5F
Negative
#C04545
Surface
#FAF8F5
Surface 2
#F1ECE3
Border
#E6E6E6

### Typography

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

### Radius

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.

Hairline
2px
Underline
4px
Tile
8px
Card
12px
Hero
14px
Sheet
24px
Pill
∞
Category
50%

### iOS Spec Strip

The constants that anchor the iOS implementation across iPhone 12 mini through iPhone 16 Pro Max.

Tab bar height
83pt
5-tab layout. Scan FAB elevated -12pt above the bar.
Scan FAB
46pt
Green circle, white icon, shadow y6 b14.
Stars ring
170pt
Hero variant. 54pt mini for the home header.
Header bleed
edge-to-edge
Green wraps under status bar. No top corner radius.
Category tile
62pt
50% radius. 3-up grid with 14pt row gap.
CTA height
44pt
Full pill, 13pt vertical padding. Always green.
Live Activity
enabled
ActivityKit countdown for Mobile Order pickup ETA.
Animation curve
spring
0.8s for arc fill. 0.25s easeOut for sheets.

### Components

Pills, circles, and quiet white cards — the language of a coffeehouse counter, translated to an iPhone.

##### Buttons

Order now Save for later View menu Join Rewards

##### Inputs

Gold Member 2x Stars today Mobile Order

##### Cards

Try the new
Iced Brown Sugar Oatmilk Shaken Espresso
Members Only
Double Stars Day · earn 2x Friday
View source ↗