# Starbucks: brand book and build spec

A family of greens rooted in the apron, the Siren on her own, three faces (Sodo Sans, Lander, Pike) and one dial from functional to expressive: quiet and green where people order, artful and seasonal where they browse.

From unfairly.ai/brand-guidelines/starbucks, checked 2026-10-29. Unofficial study; not affiliated with Starbucks.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** Hold the greens and the Siren still so everything else can change. Starbucks keeps ordering calm and green and spends its personality on seasonal color, artist-made illustration and playful lines, and it all reads as one brand because a green or the Siren is always there. Based on: From the guide's rule that brand greens are always present, the Siren-alone preference, the functional-to-expressive charts by channel and the season-by-season case studies.

## Purpose

Mission: The mission sets out to be the premier purveyor of the finest coffee in the world and to inspire and nurture the human spirit, "one person, one cup and one neighborhood at a time" (paraphrase with the closing phrase quoted). (published; https://about.starbucks.com/mission/)

Story: Starbucks opened in 1971 in Seattle's Pike Place Market; Howard Schultz's trip to Milan led it to become a coffeehouse in 1987. The 2020 creative expression guide refreshes the design system for a global, diverse audience while keeping the core: the Siren, a family of greens rooted in the apron, and a constrained family of typefaces, with coffee and art connecting people and communities. (published)

| Value | What it means in the work | Source |
|---|---|---|
| Craft | Rigor in the details, learning and teaching, excellence with passion and creativity (paraphrase). | published: https://about.starbucks.com/mission/ |
| Results | Hit goals with focus and integrity, keep innovating, exceed expectations (paraphrase). | published: https://about.starbucks.com/mission/ |
| Courage | Hard conversations with respect, audacious ideas, the right thing even when it's hard (paraphrase). | published: https://about.starbucks.com/mission/ |
| Belonging | Listen and connect with warmth; dignity and care for every person (paraphrase). | published: https://about.starbucks.com/mission/ |
| Joy | Pride in the work, fun while doing it, celebrating each other (paraphrase). | published: https://about.starbucks.com/mission/ |

## Fixed and flexible

Never changes:
- The Siren (preferred alone) and the wordmark
- The family of brand greens: Starbucks, House, Accent, Light
- Sodo Sans, Lander and Pike
- Honest product photography in consistent glassware

The one thing that varies: Where a piece sits on the functional-to-expressive dial, set by channel, and the seasonal palette, illustration and photo styling, which evolve with trend each season.

## Positioning

- **Statement**: Starbucks describes itself as "in the people business serving coffee", not the other way round. (published)
- **Category**: Coffee roaster and coffeehouse company: roasts and sells whole-bean coffee, runs coffeehouses, and sells drinks, food, merchandise and grocery coffee (paraphrase). (published)
- **Audience**: "Beautifully diverse customers all over the world", met where they are along their journey: ordering, in store, by email, on social. (published)
- **Problem**: Competing messages get in the way of people finding exactly what they came for at Starbucks (paraphrase of the voice page). (published)
- **Promise**: Customer Promise: "Serve the world's finest coffee, with a moment of connection". (published)
- **Differentiators**: The Siren and the wordmark: the guide calls them the most recognizable brand assets, and the green apron the most identifiable color.; Craft across many hands, from coffee farmers and master roasters to the barista (paraphrase).; Coffee and art together: illustration with evidence of the artist's hand has brought the coffees to life for decades (paraphrase).; Seasonal reinvention: expressive color, illustration and photography evolve with each season and trend, while the greens and the Siren stay put.
- **Alternatives**: Not named. Neither the guide nor the About pages name a competitor or a category alternative.

## Messaging

Boilerplate (published): Starbucks opened in 1971 in Seattle's Pike Place Market selling fresh-roasted whole-bean coffee, named after a character in Moby-Dick, with a twin-tailed Siren as its logo. Inspired by Italian cafés, it became a coffeehouse in 1987 and now welcomes millions of customers each week in neighborhoods around the world.

Taglines:
- That first sip feeling (Starbucks Rewards piece, set in Lander on House Green with a 'Join today' pill)
- So much yes (Print ad (summer drinks), set in spaced Pike capitals; also 'So. Much. Yes.' on the summer case-study board)
- Your favorites are back (Website banner on Light Green, Pike capitals, with the link 'Awww yes')
- Fall. Season. Long. (Fall in-store menu panel and the 'Fall season long' animated piece on the fall case-study board)
- Yes, PSLease (Pumpkin Spice Latte banner and app card on the fall case-study board)

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Craft | Coffee made with care by many hands, bean to cup. | Farmers, master roasters and baristas each shape the cup (About page).; Starbucks Reserve small-lot coffee cards (Kenya Rungeto, Papua New Guinea Solwara) shown as illustration in use. | our reading |
| Connection | A moment of human connection with every cup. | Customer Promise: the world's finest coffee with a moment of connection.; The Starbucks Foundation gives grants to nonprofits around the world. | our reading |
| Heritage | The Siren, the green apron and Pike Place since 1971. | First store opened in 1971 at Pike Place Market, Seattle.; Four Siren logos: 1971, 1987, 1992 and the current one. | our reading |
| Seasonal joy | Something new and delightful every season. | Four published seasonal palettes (Spring, Summer, Nitro, Fall) with real campaign boards. | our reading |

They never claim:
- Product stories stay about the product; people appear sparingly and with intention.
- Functional copy calls attention to the product, not to itself.
- Food shots never show bites, crumbs, loose ingredients or packaging.
- No legal, nutrition or claims guidance is published; the guide's examples print calories and size beside each drink on menus and signage.

Real lines, as they wrote them:
| Line | Channel | Source |
|---|---|---|
| "It's a great day for coffee" | homepage | https://www.starbucks.com/ |
| "So delicious, it’s frightening" | homepage | https://www.starbucks.com/ |
| "A season of treats" | homepage | https://www.starbucks.com/ |
| "Fall is here. Cue the hits." | homepage | https://www.starbucks.com/ |
| "Free refills and fall vibes" | homepage | https://www.starbucks.com/ |

## Voice

Tone words: Functional, Expressive.

Traits:
- Optimistic (published)
- Joyful (published)
- Clear, but not Sterile (published)
- Honest (published)
- Handcrafted, but not Decadent (published)
- Attainable cool (published)

- One voice with two modes: functional (helpful, clear, built for wayfinding and ordering) and expressive (day-making, a product truth told freshly).
- Turn down the volume of competing messages so people find exactly what they came for.
- Functional doesn't mean sterile; it means clear.
- When there is room, tell a passionate coffee story; when there isn't, a few words can still make someone smile.
- Where a piece lands between functional and expressive depends on where the customer is meeting the brand (theory page).

Rules a copy check enforces:
- Functional copy organises and anticipates needs, and calls attention to the product, not itself
- Expressive copy goes on focal products: one product truth, fresh, relevant and interesting
- Make every word count and write for where the reader is interacting with the brand
- With space, tell a passionate coffee story (e.g. the Hawaii Ka'u tasting-room note)
- Pike headlines are set in capitals with wide letter-spacing (MATCHA THREE WAYS, YOUR FAVORITES ARE BACK); Lander and Sodo Sans lines run in sentence case
- Short, warm wordplay is in voice for expressive pieces: 'Yes, PSLease', 'S'more of this', 'Awww yes'
- Keep the ® on registered names: Starbucks® Rewards, Frappuccino®, Starbucks Refreshers®
- Menu and signage items carry name, size, price and calories in small Sodo Sans or Pike under the photo
- American spelling

Tone by reader state, 0 (no personality) to 5 (full) (our recipe): Mobile Order & Pay 1, In-store menus and signage 1, Email and personalized 3, Social media 4. The guide's theory charts by channel, from functional to expressive. Starbucks publishes the charts, not levels; the levels are our reading of how much of each chart is art

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Starbucks Green | #006241 | accent | The primary green, "ownable and recognizable": brand moments, the Siren and the wordmark. PMS 3425, CMYK 100 0 85 42. Gets the largest tile in the guide's brand-color grid. |
| Accent Green | #00754A | accent_secondary | Used sparingly, when Starbucks Green doesn't stand out enough from the background. PMS 3415, CMYK 96 0 88 37. |
| Light Green | #D4E9E2 | surface (green) | Secondary: a green for when the others are too rich, dark or heavy. PMS 9521, CMYK 15 0 14 0. The Siren goes Starbucks Green on it; the wordmark goes Black. |
| House Green | #1E3932 | night | Secondary: pairs with Starbucks Green and extends its range; "used like a neutral". PMS 560, CMYK 89 48 73 64. The dark ground of most functional signage, menus and the theory chart; Siren and wordmark go White on it. |
| Black | #000000 | ink | Core color for type or accents. PMS Black, CMYK 76 76 82 63. |
| Warm Neutral | #F2F0EB | surface | Backgrounds alongside warm colors. PMS 9080, CMYK 2 4 5 2. The guide site's own page ground. |
| Cool Neutral | #F9F9F9 | surface (cool) | Backgrounds alongside cool colors. PMS 9062, CMYK 3 0 3 1. |
| White | #FFFFFF | paper | Foundational piece of the brand and logo: type, backgrounds and more. CMYK 0 0 0 0. |
| Spring Yellow | #EED350 | expressive | Spring expressive palette; shown beside the four brand greens (Starbucks, House, Accent, Light). |
| Spring Light Blue | #B6CBD5 | expressive | Spring expressive palette; shown beside the four brand greens (Starbucks, House, Accent, Light). |
| Spring Coral | #D3705A | expressive | Spring expressive palette; shown beside the four brand greens (Starbucks, House, Accent, Light). |
| Spring Teal | #005E66 | expressive | Spring expressive palette; shown beside the four brand greens (Starbucks, House, Accent, Light). |
| Spring Turquoise | #4C9F87 | expressive | Spring expressive palette; shown beside the four brand greens (Starbucks, House, Accent, Light). |
| Spring Goldenrod | #C89543 | expressive | Spring expressive palette; shown beside the four brand greens (Starbucks, House, Accent, Light). |
| Spring Spring Green | #C0D48B | expressive | Spring expressive palette; shown beside the four brand greens (Starbucks, House, Accent, Light). |
| Spring Blush | #EDC4C9 | expressive | Spring expressive palette; shown beside the four brand greens (Starbucks, House, Accent, Light). |
| Summer Summer Mauve | #DD92C0 | expressive | Summer expressive palette; shown beside the four brand greens (Starbucks, House, Accent, Light). |
| Summer Peach | #F0CDBC | expressive | Summer expressive palette; shown beside the four brand greens (Starbucks, House, Accent, Light). |
| Summer Yellow | #F0E0B0 | expressive | Summer expressive palette; shown beside the four brand greens (Starbucks, House, Accent, Light). |
| Summer Soft Pink | #F0D4DC | expressive | Summer expressive palette; shown beside the four brand greens (Starbucks, House, Accent, Light). |
| Summer Bright Green | #4CA06F | expressive | Summer expressive palette; shown beside the four brand greens (Starbucks, House, Accent, Light). |
| Summer Vibrant Orange | #DC714E | expressive | Summer expressive palette; shown beside the four brand greens (Starbucks, House, Accent, Light). |
| Nitro Brick Red | #FF6740 | expressive | Nitro expressive palette; shown beside the four brand greens (Starbucks, House, Accent, Light) and Black. |
| Nitro Nitro Green | #3ECEA9 | expressive | Nitro expressive palette; shown beside the four brand greens (Starbucks, House, Accent, Light) and Black. |
| Nitro Coral | #E76069 | expressive | Nitro expressive palette; shown beside the four brand greens (Starbucks, House, Accent, Light) and Black. |
| Nitro Bright Purple | #8882F4 | expressive | Nitro expressive palette; shown beside the four brand greens (Starbucks, House, Accent, Light) and Black. |
| Fall Rust | #9D5116 | expressive | Fall expressive palette; shown beside the four brand greens (Starbucks, House, Accent, Light). |
| Fall Neutral Pink | #EBCABC | expressive | Fall expressive palette; shown beside the four brand greens (Starbucks, House, Accent, Light). |
| Fall Almost Pumpkin | #E44C2C | expressive | Fall expressive palette; shown beside the four brand greens (Starbucks, House, Accent, Light). |
| Fall Mustard | #A17700 | expressive | Fall expressive palette; shown beside the four brand greens (Starbucks, House, Accent, Light). |
| Fall Burgandy | #84233C | expressive | Fall expressive palette; shown beside the four brand greens (Starbucks, House, Accent, Light). |

Proportion (our reading; Read from the wedge angles of the guide's 'Overall Expression' chart on the theory page (the chart's own fills are #1A3C34, #006241, #D3E8E1 and #E5EDEB). Starbucks states no percentages; mobile order and in-store charts are mostly House Green, social mostly art): House Green 39%, Starbucks Green 14%, Light greens 13%, Expressive art and seasonal color (image wedges, no single hex) 35%.

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | Sodo Sans | Proprietary to Starbucks; the guide self-hosts it (SoDoSans-*.woff2) and publishes no licence | Plus Jakarta Sans | "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif |
| body | Sodo Sans | Proprietary to Starbucks; no licence published | Plus Jakarta Sans | "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Feature headline (h1 in row 1, h2 in rows 2-4) | --text-feature-headline-h1-in-row-1-h2-in-rows-2-4-* | display | 24px | 22px | 1.4 | -0.24px | 600 |
| Feature body | --text-feature-body-* | body | 19px | 16px | 1.75 | -0.19px | 400 |
| Announcement line | --text-announcement-line-* | body | 19px | 16px | 1.75 | -0.19px | 600 |
| Announcement button | --text-announcement-button-* | body | 19px | 16px | 1.75 | -0.19px | 400 |
| Feature button | --text-feature-button-* | body | 16px | 14px | 1.2 | -0.16px | 600 |
| Nav link | --text-nav-link-* | body | 14px | 14px | 1.5 | 1.4px | 700 |
| Nav utility (Find a café) and nav buttons | --text-nav-utility-find-a-caf-and-nav-buttons-* | body | 14px | 14px | 1.2 | -0.16px | 600 |
| Footnote | --text-footnote-* | body | 14px | 13px | 1.8 | -0.14px | 400 |
| Footer column heading | --text-footer-column-heading-* | body | 19px | 16px | 1.29 | -0.16px | 400 |
| Footer link | --text-footer-link-* | body | 16px | 16px | 1.5 | -0.16px | 400 |
| Copyright | --text-copyright-* | body | 14px | 14px | 1.5 | -0.16px | 400 |

## Layout

Measured on https://www.starbucks.com/: computed styles and bounding boxes of every element at 390, 768, 1024, 1280, 1440 and 1920 px wide, with the cookie notice accepted, on 2026-10-29.

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 40px | 16px |
| Container max width | 1440px | full |
| Grid columns | 2 | 1 |
| Navigation height | 100px | 100px |

At every width (observed, 2026-10-29):
| What | 390px | 768px | 1024px | 1280px | 1440px | 1920px |
|---|---|---|---|---|---|---|
| nav height | 72px | 84px | 100px |  | 100px |  |
| nav links | hidden; 40px menu button (24px three-line icon) at x 334 | all four links, Find a café, Sign in, Join now |  |  | same, links start x 132 |  |
| siren size | 40px at x 16, y 16 | 52px at x 24, y 16 |  |  | 52px at x 40, y 24 |  |
| feature row | stacked: photo full width on top, text below, always photo first | 50/50, row 508px tall; photo 384x224 vertically centered on green | 50/50; photo 512x299 centered, row 455 |  | 50/50, row = photo height (420/280/480/280) | 1440 column centered, white 240px each side |
| feature headline | 22px/30.8px | 24px (wraps to 2 lines) |  |  | 24px/33.6px, one line |  |
| feature body | 16px/28px |  |  |  | 19px/33.25px |  |
| feature button | 14px, 33px tall |  |  |  | 16px, 35px tall |  |
| footer columns | five accordions |  | five columns |  | five 190px columns at x 40, 270, 500, 730, 960 (40px gaps) |  |

Breakpoints from Starbucks's CSS: 768, 1024px.

Homepage bands, top to bottom (observed):
1. White nav, 100px, soft shadow: Siren, four uppercase links, Find a café, Sign in, Join now
   - Desktop: 4 links, in order: MENU, REWARDS, GIFT CARDS, STARBUCKS® SHOP. 14px/21px 700, uppercase, 1.4px tracking, rgba(0,0,0,0.9), no underline. First link at x 132 (40px after the Siren), 24px between links, vertically centered (y 40). The ® is a small superscript. right-aligned, ending at x 1400: "Find a café" (pin glyph + 14px 600 text, x 1090), 16px gap, "Sign in" outline pill 78x33 (1px rgba(0,0,0,0.87) ring), 16px gap, "Join now" filled black pill 93x33 with white text. All 14px 600.
   - Phone: Siren 40px left; a 40px round menu button with a 24px black three-line icon at the right (x 334). No links, no Find a café, no Sign in or Join now on the bar.
   - the Siren alone (no wordmark), the supplied siren.svg, 52x52 at x 40, y 24. 40x40 at x 16, y 16 on phones
   - #FFFFFF, with box-shadow 0 1px 3px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.06), 0 0 2px rgba(0,0,0,0.07) (a soft shadow, no border line)
2. Green announcement strip, 110px
   - Desktop: y 100-210 (110px). Line "It's a great day for coffee" 19px 600 white; 20px gap; "Start an order" pill 150x41 (2px white ring, 19px weight 300, padding 2px 12px) at y 142. The pair is centered on the page (x 524-916). 32px white gap below.
   - Phone: y 72-177 (105px). Same row, 16px text, pill 131x36 at the right; the pair centered. 32px white gap below.
   - bold line + 2px-ring pill, centered as one row
3. Feature row 1 (hero): photo left, green right, h1
   - Desktop: Row y 242-662 (420px), 32px below the announcement strip. Photo 720x420 at x 0, edge to edge, no radius. Green half x 720-1440. Text block 435px wide centered on the green half (x 862-1297), vertically centered: h1 top y 323 (81px below the row top), body 24px below the h1, pill 32px below the body (y 546), 81px below the pill.
   - Phone: Order: photo 390x228 full width on top, then the green text block (32px top, 16px sides, text 326px wide, centered): h1 22px, body 16px/28px, pill 14px. Row y 209-760.
   - h1 24px/33.6px 600 white, -0.24px, centered, one line at 1440 (two at 768); body 19px/33.25px 400 white, centered, four lines at 1440, five at 390
   - one white outline pill: 1px white ring, transparent fill, 16px 600 white, 7px 16px padding, 35px tall, radius 50px
4. Feature row 2 (photo right)
   - Desktop: Row y 694-974 (280px). Green half x 0-720 with the text block 435px wide at x 142, vertically centered (h2 top y 739, body 2 lines, pill y 895). Photo 720x280 at x 720 (a 1440x560 file).
   - Phone: Photo first (390x152), then text: h2 22px, body 3 lines, pill. Row y 792-1211.
   - h2 24px 600 white centered
   - body 19px/33.25px 400 white centered, 2 lines at 1440
   - white outline pill 32px below the body
   - photo is a wide 2.57:1 strip (gift cards); the row is as tall as the photo
   - headline: "A season of treats"
5. Feature row 3 (photo left)
   - Desktop: Row y 1006-1486 (480px). Photo 720x480 at x 0 (a 3:2 file). Text block at x 862, vertically centered: h2 top y 1134, body 3 lines, pill y 1323.
   - Phone: Photo first (390x260), then text, body 4 lines. Row y 1243-1799.
   - same parts as the hero row
   - photo 3:2
   - headline: "Fall is here. Cue the hits."
6. Feature row 4 (photo right)
   - Desktop: Row y 1518-1798 (280px). Text block at x 142: h2 top y 1562, body 2 lines ending in an asterisk, pill y 1719. Photo 720x280 at x 720 (2.57:1).
   - Phone: Photo first (390x152), then text (body 2 lines). Row y 1831-2222.
   - the body copy ends with "*" pointing to the footnote band
   - headline: "Free refills and fall vibes"
7. Footnote
   - Desktop: y 1830-1944. Text 14px/25.2px 400 black, centered, max width 816px (x 312-1128), 2 lines, 32px top padding.
   - Phone: 13px/23.4px, 16px sides, 4 lines, y 2254-2412.
   - plain black text, no rule above, no box
8. White footer with five link columns
   - Desktop: 40px top padding at 1440 (24px on phones), 40px side margins; content from x 40 to 1400; Five columns 190px wide with 40px gaps (x 40, 270, 500, 730, 960); the right ~400px stays empty. Headings 19px 400 rgba(0,0,0,0.87); links 16px/24px 400 rgba(0,0,0,0.58) with 8px vertical padding (48px pitch), first link 48px below the heading
   - Phone: Five 52px accordion rows (label left, chevron in a 44px circle right), collapsed; then the 2px rule, the social row at x 16, the seven legal links stacked, the copyright. 16px side margins.
   - About Us: Our Company, Our Coffee, About Starbucks, Starbucks Archive, Investor Relations, Customer Service, Contact Us
   - Careers: Culture and Values, Belonging at Starbucks, College Achievement Plan, Alumni Community, U.S. Careers, International Careers
   - Social Impact: Communities, Starbucks Foundation, Sustainability, Environmental and Social Impact Reporting
   - For Business Partners: Landlord Support Center, Suppliers, Corporate Gift Card Sales, Office and Foodservice Coffee
   - Ways to Shop: Order on the App, Order on the Web, Delivery, Starbucks® Shop, Order and Pick Up Options, Explore and Find Coffee for Home
   - A 2px rgba(0,0,0,0.1) rule across x 40-1400, 40px below the tallest column, 40px above the icons
   - Social row: Spotify, Facebook, Pinterest, Instagram, YouTube, X; 32px black round icons (white glyph), 50px apart, starting x 40
   - Legal links stacked one per line, left-aligned, 16px 400 rgba(0,0,0,0.87), 44px pitch: Privacy Notice, Consumer Health Privacy Notice, Terms of Use, Do Not Sell or Share My Personal Information, Starbucks Transparency in Supply Chains Statement, Accessibility, Cookie Preferences
   - Copyright 36px below: "© 2026 Starbucks Coffee Company. All rights reserved." 14px rgba(0,0,0,0.58)
   - No logo, no address, no phone number, no newsletter, no app badges in the footer

## Page anatomy

How Starbucks's own landing pages are built, part by part (observed; https://www.starbucks.com/, 2026-10-29). A homepage pattern, not a brand law: follow it for landing pages.

**Announcement bar**
- summary: A #006242 strip right under the nav: one bold white line and an outlined pill, centered as one row
- ground: #006242
- desktop: y 100-210 (110px). Line "It's a great day for coffee" 19px 600 white; 20px gap; "Start an order" pill 150x41 (2px white ring, 19px, set 400 (CSS says 300, renders 400), padding 2px 12px) at y 142 (42px below the strip top, 27px above its bottom: the pair is 7px below center). The pair is centered on the page (x 524-916). 32px white gap below.
- phone: y 72-177 (105px). Same row, 16px text, pill 131x36 at the right; the pair centered. 32px white gap below.

**Navigation**
- summary: A white bar with the green Siren at left, four uppercase links, and Find a café, Sign in and Join now at right
- ground: #FFFFFF, with box-shadow 0 1px 3px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.06), 0 0 2px rgba(0,0,0,0.07) (a soft shadow, no border line)
- height: 100px at 1024 and up, 84px at 768, 72px on phones
- border: none; the shadow above does the separation
- logo: the Siren alone (no wordmark), the supplied siren.svg, 52x52 at x 40, y 24. 40x40 at x 16, y 16 on phones
- links: 4 links, in order: MENU, REWARDS, GIFT CARDS, STARBUCKS® SHOP. 14px/21px 700, uppercase, 1.4px tracking in SoDoSans (1.3px in Plus Jakarta Sans), last link ending at x 578, rgba(0,0,0,0.9), no underline. First link at x 132 (40px after the Siren), 24px between links, vertically centered (y 40). The ® is a small superscript.
- actions: right-aligned, ending at x 1400: "Find a café" (pin glyph + 14px 600 text, x 1090), 16px gap, "Sign in" outline pill 78x33 (1px rgba(0,0,0,0.87) ring), 16px gap, "Join now" filled black pill 93x33 with white text. All 14px 600.
- sticky: no: static, scrolls away
- phone: Siren 40px left; a 40px round menu button with a 24px black three-line icon at the right (x 334). No links, no Find a café, no Sign in or Join now on the bar.

**Hero**
- summary: The first feature row: a full-bleed product photo on the left half, a #006242 half on the right with the one h1, a body paragraph and a white outline pill, centered
- desktop: Row y 242-662 (420px), 32px below the announcement strip. Photo 720x420 at x 0, edge to edge, no radius. Green half x 720-1440. Text block 435px wide centered on the green half (x 862-1297), vertically centered: h1 top y 323 (81px below the row top), body 24px below the h1, pill 32px below the body (y 546), 81px below the pill.
- phone: Order: photo 390x228 full width on top, then the green text block (32px top, 16px sides, text 326px wide, centered): h1 22px, body 16px/28px, pill 14px. Row y 209-760.
- at rest: Nothing animates on load. Static image, static text.
- media: One real product photo per row. Supplied in study.slot_assets (row 1: Black Cat Frappuccino and cookie on a magenta table). object-fit fill at the photo's own ratio (1440x840 file shown at 720x420).
- type: h1 24px/33.6px 600 white, -0.24px, centered, one line at 1440 (two at 768); body 19px/33.25px 400 white, centered, four lines at 1440, five at 390
- cta: one white outline pill: 1px white ring, transparent fill, 16px 600 white, 7px 16px padding, 35px tall, radius 50px
- proof: none
- headline breaks: one line at 1440 and at 390 ("So delicious, it's frightening"); body wraps naturally in the 435px measure
- headline: So delicious, it’s frightening

**Feature row 2 (photo right)**
- summary: The same row mirrored: green text half on the left, photo on the right
- ground: #006242
- desktop: Row y 694-974 (280px). Green half x 0-720 with the text block 435px wide at x 142, vertically centered (h2 top y 739, body 2 lines, pill y 895). Photo 720x280 at x 720 (a 1440x560 file).
- phone: Photo first (390x152), then text: h2 22px, body 3 lines, pill. Row y 792-1211.
- anatomy:
  - headline on the live page (2026-10-29): "A season of treats"
  - h2 24px 600 white centered
  - body 19px/33.25px 400 white centered, 2 lines at 1440
  - white outline pill 32px below the body
  - photo is a wide 2.57:1 strip (gift cards); the row is as tall as the photo
- components: feature_row, button_outline_on_green
- headline: A season of treats

**Feature row 3 (photo left)**
- summary: Tall row: photo left, green text right
- ground: #006242
- desktop: Row y 1006-1486 (480px). Photo 720x480 at x 0 (a 3:2 file). Text block at x 862, vertically centered: h2 top y 1134, body 3 lines, pill y 1323.
- phone: Photo first (390x260), then text, body 4 lines. Row y 1243-1799.
- anatomy:
  - headline on the live page (2026-10-29): "Fall is here. Cue the hits."
  - same parts as the hero row
  - photo 3:2
- components: feature_row, button_outline_on_green
- headline: Fall is here. Cue the hits.

**Feature row 4 (photo right)**
- summary: Short row: green text left, photo right
- ground: #006242
- desktop: Row y 1518-1798 (280px). Text block at x 142: h2 top y 1562, body 2 lines ending in an asterisk, pill y 1719. Photo 720x280 at x 720 (2.57:1).
- phone: Photo first (390x152), then text (body 2 lines). Row y 1831-2222.
- anatomy:
  - headline on the live page (2026-10-29): "Free refills and fall vibes"
  - the body copy ends with "*" pointing to the footnote band
- components: feature_row, button_outline_on_green
- headline: Free refills and fall vibes

**Footnote**
- summary: A white band with one centered small-print line for the asterisk
- ground: #FFFFFF
- desktop: y 1830-1944 (114px) and this band already contains its spacing: 32px top padding, text block 50px (2 lines of 14px/25.2px, black, centered, max width 816px at x 312-1128), 32px bottom padding. The footer shadow edge starts right at y 1945: no extra gap between the footnote band and the footer.
- phone: 13px/23.4px, 16px sides, 4 lines, y 2254-2412.
- anatomy:
  - plain black text, no rule above, no box
- components: none

**Footer**
- summary: A white footer: five link columns, a hairline, six round social icons, a stacked list of legal links and the copyright
- ground: #FFFFFF with an upward soft shadow (0 -1px 3px rgba(0,0,0,0.1), 0 -2px 2px rgba(0,0,0,0.06), 0 0 2px rgba(0,0,0,0.07)) at its top edge, starting 32px under the footnote
- anatomy:
  - Footer starts directly under the footnote band (no gap); 40px top padding at 1440 (24px on phones), 40px side margins; content x 40-1400. Column headings at footer top + 40 (y 1985)
  - Five columns 190px wide with 40px gaps (x 40, 270, 500, 730, 960); the right ~400px stays empty. Headings 19px 400 rgba(0,0,0,0.87); links 16px/24px 400 rgba(0,0,0,0.58) with 8px vertical padding (48px pitch), first link 48px below the heading. The first link's box starts 48px below the heading top (heading 25px tall, 23px gap); keep every label on one line except those that wrap at 190px in SoDoSans: College Achievement Plan, Environmental and Social Impact Reporting, Office and Foodservice Coffee, Order and Pick Up Options, Explore and Find Coffee for Home (two lines each). Corporate Gift Card Sales stays on one line: at 16px with -0.05px tracking it fits 190px in Plus Jakarta Sans.
  - About Us: Our Company, Our Coffee, About Starbucks, Starbucks Archive, Investor Relations, Customer Service, Contact Us
  - Careers: Culture and Values, Belonging at Starbucks, College Achievement Plan, Alumni Community, U.S. Careers, International Careers
  - Social Impact: Communities, Starbucks Foundation, Sustainability, Environmental and Social Impact Reporting
  - For Business Partners: Landlord Support Center, Suppliers, Corporate Gift Card Sales, Office and Foodservice Coffee
  - Ways to Shop: Order on the App, Order on the Web, Delivery, Starbucks® Shop, Order and Pick Up Options, Explore and Find Coffee for Home
  - A 2px rgba(0,0,0,0.1) rule across x 40-1400 at y 2409, 40px below the five-column block (y 1985-2370), then 40px to the social icons (hit areas y 2451-2497, icons at y 2458)
  - Social row: Spotify, Facebook, Pinterest, Instagram, YouTube, X; 32px black round icons (white glyph), 50px apart, starting x 40
  - Legal links stacked one per line, left-aligned, 16px 400 rgba(0,0,0,0.87), 44px pitch: Privacy Notice, Consumer Health Privacy Notice, Terms of Use, Do Not Sell or Share My Personal Information, Starbucks Transparency in Supply Chains Statement, Accessibility, Cookie Preferences
  - Copyright 36px below: "© 2026 Starbucks Coffee Company. All rights reserved." 14px rgba(0,0,0,0.58)
  - No logo, no address, no phone number, no newsletter, no app badges in the footer
- phone: Five 52px accordion rows (label left, chevron in a 44px circle right), collapsed; then the 2px rule, the social row at x 16, the seven legal links stacked, the copyright. 16px side margins.

**On dark grounds**
- note: There is no dark band on the homepage. On the #006242 green: text white, the CTA is a 1px white outline pill (no fill), no muted text, no hairlines, no logo on green.
- secondary button: white 1px outline pill
- link: white
- muted text: not used on green
- hairline: not used on green
- logo variant: not shown on green on the homepage

## Components

- **button outline on green** (observed): radius 50, fill none, ring px 1, ring #FFFFFF, text #FFFFFF, height 35, padding 7px 16px, font size 16, weight 600, padding x 16, height phone 33, font size phone 14, face body. The only call to action in the feature rows: a white 1px outline pill, transparent fill, centered under the body copy, 32px below it. Never a filled button on green.
- **button announcement** (observed): radius 50, fill #006242, ring px 2, ring #FFFFFF, text #FFFFFF, height 41, padding 2px 12px, font size 19, weight 400, padding x 12, height phone 36, font size phone 16, face body. Larger, 2px ring: "Start an order", inline to the right of the announcement line, 20px after it. Their CSS says weight 300, but starbucks.com loads no SoDoSans 300 file, so it renders the 400 cut: set it 400. Pill top at y 142 in the 100-210 strip (the pair sits 7px below dead center: 42px above the pill, 27px below it).
- **button outline nav** (observed): radius 50, fill #FFFFFF, ring px 1, ring #212121, text #212121, height 33, padding 7px 16px, font size 14, weight 600, label Sign in, padding x 16, face body, color note #212121 is rgba(0,0,0,0.87) rendered on white; either is exact on the white nav
- **button filled nav** (observed): radius 50, fill #000000, ring px 1, ring #000000, text #FFFFFF, height 33, padding 7px 16px, font size 14, weight 600, label Join now, padding x 16, face body. The only filled button on the page, and it is black, not green.
- **feature row** (observed): anatomy Full-width (to 1440) 50/50 row: one photo half, one #006242 text half. Photo fills its half edge to edge at its own aspect ratio (no radius, no frame, no overlay); the row is as tall as the photo at 1440. Text half: headline, body, outline pill, all centered on the half and vertically centered on the row. Rows alternate: photo left, right, left, right.
- **find a cafe** (observed): anatomy black 24px map pin glyph (filled teardrop with a hole) in a 32px box, then "Find a café" 14px 600, 8px gap, no underline
- **social icon** (observed): anatomy 32px round icon from starbucks.com/assets/icons/social/<name>.svg: black filled circle with a white glyph, in a 46px round hit area, 4px between hit areas (icons 50px apart center to center), order Spotify,Facebook,Pinterest,Instagram,YouTube,X
- **footer accordion phone** (observed): anatomy under 1024: each footer column becomes a 52px row (16px label rgba(0,0,0,0.87) at left, a 24px chevron-down in a 44px circle at right), 8px between rows, collapsed at rest

States (hover, focus, pressed, disabled) weren't measured; define them before you build.

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| boomerang-loop |  | 2970ms | the only video in the guide: a short looping coffee 'boomerang' (732x1100) on the photography page. Its length is the example file's, not a published rule | observed |
| gif-loop |  |  | animated GIFs in the illustration and case-study examples loop in 0.8-3.2s with 5-24 frames, a hand-made, stop-motion feel (Rewards stars, Pride sun, fall sweater, 'Fall is so on'). Observed from the guide's files; no easing or timing is published | observed |

## Icon tokens

Grid not published, stroke not published (published).

## Signature moves

### Alternating green-and-photo rows

Where: the whole starbucks.com homepage body: four rows after the announcement strip.
Do: Each row is half full-bleed product photo, half solid #006242 with centered white type and a white outline pill. Photo side alternates left, right, left, right. 32px white gap between rows. Above 1440 the rows stop at the 1440 column.. The page is built from repeats of it; one row per message.
Don't: round the photo corners, put cards or shadows on the rows, use a filled green button, left-align the text, or butt two green rows together without the white gap.

### A brand green is always in the frame

Where: every piece, including every seasonal one: the guide says brand greens appear either in the composition or through the Siren logo.
Do: at least one of the four brand greens (Starbucks Green #006241, House Green #1E3932, Accent Green #00754A, Light Green #D4E9E2) as a ground, shape or type, or the Siren in Starbucks Green. Every published seasonal palette is shown as those four greens followed by the season's colors. House Green works as the dark neutral ground for functional pieces; Starbucks Green is saved for brand moments; Accent Green only when Starbucks Green doesn't stand out. Every composition.
Don't: run a seasonal palette on its own: a piece with no brand green and no Siren isn't recognizably Starbucks.
Example: "Fall. Season. Long.".

### The Siren on her own

Where: the preferred logo use everywhere; on packaging the Siren is scaled up past the edge (the paper bag and cup sleeve in the theory examples).
Do: the Siren by itself, unlocked from the wordmark, given room and prominence. Published grounds: White, Warm Neutral and Light Green take a Starbucks Green Siren; Black and House Green take a White Siren. On large packaging the face can be cropped by the edge of the object, in House Green on kraft or white. One Siren per piece.
Don't: lock the Siren to the wordmark by default, bring back the ringed 1987 or 1992 badge, or recolor her outside the published pairings.
Example: "The Siren in white on House Green".

### One dial from functional to expressive

Where: set per channel: Mobile Order & Pay and in-store menus sit at the functional end, email in the middle, social at the expressive end (theory page charts).
Do: functional pieces are mostly House Green and Starbucks Green fields with product photography and short Pike or Sodo Sans labels; expressive pieces hand most of the area to illustration, pattern and seasonal color. The guide's Overall Expression chart gives roughly 39% House Green, 14% Starbucks Green, 13% light greens and 35% expressive art (read from the chart's wedge angles). Choose one point on the dial per piece.
Don't: make functional moments loud: ordering and wayfinding stay quiet so new news can be the dynamic part.
Example: "Matcha three ways".

## Messaging: rules

The guide doesn't publish taglines or message pillars; its words live in the examples. Lines are short and product-led ('Matcha three ways', 'Your favorites are back') or warm and playful ('That first sip feeling', 'Yes, PSLease'). Mission, values and promises come from about.starbucks.com.

Why it works: A line that names the drink and a feeling does both jobs at once: it helps people choose and it makes them smile.

- Lead with the product on functional pieces; save the feeling for expressive ones
- Present one product truth per expressive piece
- Sign off with the Siren, not a slogan: no standing tagline appears in the guide

Sources: https://creative.starbucks.com/voice/, https://creative.starbucks.com/case-studies/, https://about.starbucks.com/mission/, https://about.starbucks.com/about-us/

## Voice: rules

One voice, two modes. Functional copy is helpful and clear, built for wayfinding and ordering, and 'calls attention to the product—not itself'. Expressive copy is where personality unfurls: a fresh product truth, a passionate coffee story when there's space, a smile even in a few words. The voice page's six examples run from in-store signage to a print ad.

Why it works: Quieting the functional parts makes ordering easy and leaves room for the expressive moments to land.

|  |  |
|---|---|
| Functional | wayfinding, ordering, menus, app: clear, helpful, product first |
| Expressive | focal products, rewards, social, print: a fresh product truth, playful wordplay |
| Examples on the page | in-store signage (2), Starbucks Rewards, Instagram, website, print ad |

- Functional doesn't mean sterile; it means clear
- Make every word count, and write for where the reader is
- When there's room, tell a passionate coffee story
- Pike headlines in spaced capitals; Lander and Sodo Sans lines in sentence case
- Don't compete for attention with stacked messages
- Don't make wayfinding or ordering copy clever at the cost of clarity

Do and don't:
- Do: "That first sip feeling". Expressive: one product truth, warm and short.
- Don't: "Discover our exciting new rewards program benefits today". Competing volume; the guide asks to turn it down so people find what they seek.

Real examples, to look at on Starbucks's own pages (not for reuse):
- Functional: 'Matcha three ways' signage, Pike capitals on House Green: https://creative.starbucks.com/voice/
- Website banner: 'Your favorites are back' on Light Green, link 'Awww yes': https://creative.starbucks.com/voice/
- Expressive: 'That first sip feeling' in Lander, pill 'Join today': https://creative.starbucks.com/voice/
- Print ad: 'So much yes' in spaced Pike: https://creative.starbucks.com/voice/
- A coffee story: Hawaii Ka'u notes from the cupping room: https://creative.starbucks.com/voice/

Sources: https://creative.starbucks.com/voice/

## Logo: rules

The Siren is 'our muse, the face of our brand'; she and the STARBUCKS wordmark are the most recognizable assets. The preferred use is the Siren alone, unlocked from the wordmark, for prominence and an open, modern look. The page shows each mark's approved grounds and a timeline of four Sirens: 1971 (brown ring, 'Coffee, Tea, Spices'), 1987 and 1992 (green 'Starbucks Coffee' ring) and the current ringless Siren.

Why it works: Dropping the ring and the name lets the face carry the brand at any scale, from a cup to a bag cropped to her eyes.

|  |  |
|---|---|
| Marks | Siren; STARBUCKS wordmark (with ®) |
| Preferred | Siren alone |
| Siren colors | Starbucks Green or White |
| Wordmark colors | Starbucks Green, White or Black |
| Clear space | not published |
| Minimum size | not published |

- Prefer the Siren alone, unlocked from the wordmark
- Siren grounds and colors: Black and House Green take White; Warm Neutral, Light Green and White take Starbucks Green
- Wordmark grounds and colors: Starbucks Green, Black and House Green take White; Warm Neutral and White take Starbucks Green; Light Green takes Black
- On packaging the Siren may be enlarged and cropped by the object's edge (paper bag, cup sleeve in the theory examples)
- Clear space and minimum size: not published
- Don't use the 1971, 1987 or 1992 badges: they are shown as history
- Don't put the Siren on a ground the page doesn't show for her
- Don't recolor either mark outside the pairings above

Do and don't:
- Do: "Siren in white on House Green". One of the five grounds the guide shows for the Siren.
- Don't: "Siren locked in the old STARBUCKS COFFEE ring". The ringed badges are history; the preferred Siren stands alone.

Real examples, to look at on Starbucks's own pages (not for reuse):
- The current Siren, as drawn on the logos page: https://creative.starbucks.com/logos/
- The STARBUCKS wordmark in Starbucks Green: https://creative.starbucks.com/logos/
- The Siren cropped across a kraft paper bag: https://creative.starbucks.com/theory/
- Timeline: the 1971 logo (history, not for use): https://creative.starbucks.com/logos/
- Timeline: the 1987 logo (history, not for use): https://creative.starbucks.com/logos/

Sources: https://creative.starbucks.com/logos/, https://creative.starbucks.com/theory/

## Color: rules

"Our green is iconic": a family of greens rooted in the apron. Eight brand colors with PMS, CMYK and hex: Starbucks Green (primary, brand moments), Accent Green (sparingly), Light Green and House Green (secondary; House Green used like a neutral), Black (type and accents), Warm and Cool Neutral (backgrounds beside warm or cool colors) and White. Expressive colors change by season (Spring, Summer, Nitro, Fall) and are always shown beside the four greens. The hex values sit in the page source; the page shows names, tooltips and swatches.

Why it works: When greens carry the brand, the seasonal palette can change completely without the work stopping looking like Starbucks.

|  |  |
|---|---|
| Starbucks Green | #006241 · PMS 3425 · CMYK 100 0 85 42 |
| Accent Green | #00754A · PMS 3415 · CMYK 96 0 88 37 |
| Light Green | #D4E9E2 · PMS 9521 · CMYK 15 0 14 0 |
| House Green | #1E3932 · PMS 560 · CMYK 89 48 73 64 |
| Black | #000000 · PMS Black · CMYK 76 76 82 63 |
| Warm Neutral | #F2F0EB · PMS 9080 · CMYK 2 4 5 2 |
| Cool Neutral | #F9F9F9 · PMS 9062 · CMYK 3 0 3 1 |
| White | #FFFFFF · CMYK 0 0 0 0 |

_Hex, PMS and CMYK from the color page's source, 2026-10-29. Seasonal hexes are in kit.palette.extras._

- Always a brand green in the composition, or the Siren
- Starbucks Green for brand moments; Accent Green only when Starbucks Green doesn't stand out from the ground
- House Green behaves like a neutral; Light Green when the others are too heavy
- Warm Neutral beside warm colors, Cool Neutral beside cool ones
- Expressive colors follow seasonal trends and change each season
- Don't let a seasonal palette replace the greens
- Don't use Accent Green as a large field

Not published: a muted text color; a numeric color ratio (the theory chart shows proportions only as wedges); contrast scores.

Do and don't:
- Do: "Matcha three ways". House Green used like a neutral, white type: the functional default in the guide's signage and menus.
- Don't: "A page flooded Accent Green". Accent Green is for sparing use, when Starbucks Green doesn't stand out.

Real examples, to look at on Starbucks's own pages (not for reuse):
- Spring expressive colors in use: https://creative.starbucks.com/color/
- Summer: Mango Dragonfruit on Summer Mauve: https://creative.starbucks.com/color/
- Nitro expressive colors in use: https://creative.starbucks.com/color/
- Fall expressive colors in use: https://creative.starbucks.com/color/

Sources: https://creative.starbucks.com/color/, https://creative.starbucks.com/logos/

## Typography: rules

Three faces 'with endless possibilities': Sodo Sans (most versatile, frequently body copy; Thin to Black), Lander (serif accent for expressive moments; Thin to Black; served as Lander Grande and Lander Tall) and Pike (condensed, impactful, for functional headlines and wayfinding; Light, Regular, Bold). The guide is moving away from hand-lettering, with custom modifications to these faces where an artful touch is needed. Each face has an interactive specimen with Small, Medium and Large sizes.

Why it works: A constrained family keeps every touchpoint coherent; three distinct voices (workhorse sans, warm serif, condensed caps) cover functional to expressive without adding faces.

|  |  |
|---|---|
| Sodo Sans | Thin, Light, Regular, SemiBold, Bold, Black |
| Lander | Thin, Light, Regular, SemiBold, Bold, Black (Grande and Tall cuts) |
| Pike | Light, Regular, Bold |
| Specimen sizes | Small, Medium, Large (no point sizes published) |

_Weights from the typography page; cut names from the guide's own font files, 2026-10-29._

- Sodo Sans for body copy and most text
- Lander as an accent for expressive moments (Rewards, Reserve, coffee stories)
- Pike for functional headlines and wayfinding, in spaced capitals in every example
- Custom touches to these faces instead of hand-lettering
- Real faces are proprietary: use the stand-ins until calibrated
- Don't hand-letter headlines
- Don't add a fourth typeface
- Don't set Pike in lowercase body text

Not published: a type scale in points or pixels; line height and tracking rules; which face to use for web headlines.

Do and don't:
- Do: "YOUR FAVORITES ARE BACK". A functional headline in spaced capitals (Pike in the guide's website example).
- Don't: "Your favorites are back". Hand-lettering: the guide is moving away from it.

Real examples, to look at on Starbucks's own pages (not for reuse):
- Lander, expressive: 'That first sip feeling': https://creative.starbucks.com/voice/
- Pike capitals, functional: 'Matcha three ways': https://creative.starbucks.com/voice/
- Pike set on a wave as a pattern: 'Love it, need it': https://creative.starbucks.com/theory/

Sources: https://creative.starbucks.com/typography/, https://creative.starbucks.com/voice/

## Iconography: rules

No icon chapter. The functional end of the illustration range shows simple single-weight line drawings of brewing tools (pour-over, siphon) in White on Starbucks Green, also used in the theory examples.

- Keep icons functional: line drawings, one color, on a brand green
- Don't use expressive, textured illustration where a functional icon is needed

Not published: icon grid; stroke weight; icon sizes.

Real examples, to look at on Starbucks's own pages (not for reuse):
- Functional line icons: pour-over and siphon on Starbucks Green: https://creative.starbucks.com/illustration/

Sources: https://creative.starbucks.com/illustration/, https://creative.starbucks.com/theory/

## Illustration: rules

Illustration, 'layered and storied with evidence from the artist's hand', has brought the coffees to life for decades. Content relates back to coffee or heritage; texture, photo collage, composition and graphic details give a custom feel. House greens needn't be in every illustration, but their presence in the setting should be considered. The range runs from playful-yet-restrained (email, menus, in-store signage, advertising, social) to colorful and vibrant (art, merchandise, packaging).

Why it works: Hand-made art on Reserve cards, cups and gift cards is where Starbucks gets to be a patron of artists, which keeps the coffee story human.

|  |  |
|---|---|
| Range | functional (line icons) to expressive (full-color art) |
| Restrained | email, menus, in-store signage, advertising, social |
| Vibrant | art, merchandise, packaging |
| Content | coffee or heritage |

- Relate the content back to coffee or Starbucks heritage
- Show the artist's hand: texture, collage, graphic detail
- Restrained for email, menus, signage, ads and social; full color for art, merchandise and packaging
- Consider the house greens in the setting even when they aren't in the art
- Don't use clip-art or generic vector stock
- Don't make an illustration with no tie to coffee or heritage

Real examples, to look at on Starbucks's own pages (not for reuse):
- Expressive: a tiger in jungle foliage (Sumatra art): https://creative.starbucks.com/illustration/
- Restrained: Christmas Blend badge in green on House Green: https://creative.starbucks.com/illustration/
- Reserve card: Kenya Rungeto with floral art: https://creative.starbucks.com/illustration/
- Illustration in use: S'mores collage behind the drink: https://creative.starbucks.com/illustration/

Sources: https://creative.starbucks.com/illustration/

## Photography: rules

Photography is honest: product beautiful and believable, people authentic and relatable. Product shots live in a modular system so products swap easily (menus, digital, signage, advertising, social), on House Green or a light neutral. Editorial photography (partner, barista, farmer, brand and social-impact stories) is studio (artful, warm directional light) or environmental ('attainable cool').

Why it works: Consistent glassware, shadows and grounds let one product shot serve every menu and channel; honest styling keeps it craveable without looking fake.

|  |  |
|---|---|
| Product grounds | House Green or a light neutral (guide examples) |
| Glassware | pint glass cold; glass mug hot; tall narrow glass for iced tea and Refreshers |
| Shadows | graphic |
| Light (studio) | soft, directional, warm |
| People | sparingly, with intention |

_Published on the photography page; examples are its own images, 2026-10-29._

- Consistent glassware: a pint glass for most cold drinks, a modern glass mug for hot; a tall narrower glass for iced teas and Refreshers
- Graphic shadows add interest
- Handcrafted, refined, clean, graphic composition; highlight crafted details like cinnamon dusting and crema in foam
- Whip styled less like dessert, more handcrafted; show ingredients
- Food with slight imperfections for realism
- People sparingly, thoughtfully, with intention
- Studio light soft, directional and warm
- Don't show bites, crumbs, loose ingredients or packaging
- Don't let props overshadow the focal point
- Don't style whip as decadent dessert

Do and don't:
- Do: "Pint glass, graphic shadow, crema in the foam". Handcrafted, believable product in consistent glassware.
- Don't: "A half-eaten pastry on a pile of crumbs". The guide rules out bites, crumbs, loose ingredients and packaging.

Real examples, to look at on Starbucks's own pages (not for reuse):
- Modular product row on House Green: https://creative.starbucks.com/photography/
- The same row on a light ground: https://creative.starbucks.com/photography/
- Studio: cold brew still life: https://creative.starbucks.com/photography/
- Environmental: a customer with her cup: https://creative.starbucks.com/photography/
- Editorial: a coffee farm landscape: https://creative.starbucks.com/photography/

Sources: https://creative.starbucks.com/photography/

## Motion: rules

Not published: creative.starbucks.com/motion/ is a 404 and no page gives motion rules. The only motion in the guide is in its examples: a ~3s looping coffee boomerang video on the photography page and short animated GIFs (0.8-3.2s, 5-24 frames) among the illustration and case-study images, with a hand-made, stop-motion feel.

- Treat motion like illustration: short, looping, hand-made (our reading of the examples)

Not published: easing curves; durations; transitions; reduced-motion guidance.

Sources: https://creative.starbucks.com/photography/, https://creative.starbucks.com/illustration/, https://creative.starbucks.com/case-studies/

## Interface and layout: rules

The guide has no layout chapter. starbucks.com (2026-10-29) builds its homepage from one move: half-photo, half-green rows. A white nav, a green announcement strip, four 50/50 rows alternating photo left and right on #006242 with centered white type and one white outline pill each, a small-print footnote, a white five-column footer. 32px of white separates every band, and the content stops at a 1440px column. In the guide's own examples, functional pieces (menus, signage, mobile order) stack a centered headline over product photos on House Green; expressive pieces let illustration fill the frame with the Siren small in a corner.

Why it works: Half the row is always the product, half is always the brand green: every message gets the same frame, so seasonal photos can change weekly without the page losing its identity.

|  |  |
|---|---|
| Nav height | 100px (84px at 768, 72px phones) |
| Content column | 1440px max, centered |
| Band gap | 32px white |
| Feature row | 50/50; row height = photo height at 1440 |
| Text block | 435px wide, centered on its half |
| Page margin | 40px desktop, 16px phone |

- Homepage: alternating 50/50 photo and #006242 rows, centered white type, white outline pill
- 32px white gap between every band; never butt two greens together
- Content capped at 1440px, centered
- Phones: photo on top, text below, in every row
- Functional layouts: headline, product row, facts, lots of House Green
- Expressive layouts: art first, Siren as the sign-off

Not published: grid; margins; spacing scale; corner radii.

Sources: https://www.starbucks.com/, https://creative.starbucks.com/theory/, https://creative.starbucks.com/voice/, https://creative.starbucks.com/photography/

## Rules: rules

- A brand green or the Siren in every piece
- Siren alone is the preferred logo
- Sodo Sans, Lander and Pike only
- Set each piece on the functional-to-expressive dial by channel
- Honest photography: believable product, authentic people
- Don't hand-letter type
- Don't replace greens with a seasonal palette
- Don't show bites, crumbs or loose ingredients in food shots
- Don't make functional moments loud
- Don't use the historic ringed logos

Sources: https://creative.starbucks.com/color/, https://creative.starbucks.com/logos/, https://creative.starbucks.com/typography/, https://creative.starbucks.com/theory/, https://creative.starbucks.com/photography/

## Campaigns

### Spring: Cloud Macchiato launch

The spring case-study board: Cloud Macchiato menu panel on House Green, a 'SALE' repeat on Starbucks Green, an Instagram post of two cups on a cloud, Light Green 'Introducing Cloud Macchiato' and 'Matcha four ways' posters framed in House Green, a 'Float away' poster, pastel cups, floral cold cups and gift card, and a bunny-shaped card.

How the system shows: Light Green and soft clouds carry the expressive side; House Green frames hold the functional menu; Pike capitals with wide spacing for every headline; the Siren on each cup.
Why it works: One soft idea (a cloud) runs from the menu to social to merch, while the greens keep it unmistakably Starbucks.
Channels: in-store signage, menu board, social, packaging, merch, gift card. Source: https://creative.starbucks.com/case-studies/

### Summer: So. Much. Yes.

The summer board: 'Wildly chill' Refreshers on House Green, 'S'more of this' Frappuccino on Light Green, a 'So. Much. Yes.' type stack, 'Berry refreshing' on peach, Mango Dragonfruit on Summer Mauve, S'mores Frappuccino on House Green with paper-cut shapes, roller skates with a Refresher, tumblers and a watermelon card, and a Tie-Dye Frappuccino poster.

How the system shows: The Summer palette (mauve, peach, soft pink, orange) with paper-cut collage shapes, always beside House or Starbucks Green; Pike headlines; product photos in consistent glassware.
Why it works: Playful lines and collage make each drink feel like an event without losing the product-first menu.
Channels: in-store signage, print, social, merch, gift card. Source: https://creative.starbucks.com/case-studies/

### Nitro Cold Brew

The Nitro board: 'Nitro cold brew' menus on House Green and Black ('Now serving'), tap-handle discs, 'Ask us about free Nitro shots' on Nitro Green, black T-shirts ('Whoa Nitro', 'Velvety smooth, sweet without sweetener, creamy without cream'), a gradient 'Now serving Nitro' circle and posters, and 'NitrOMG' / 'Whoa Nitro' stickers.

How the system shows: The Nitro palette adds Black and gradient pinks to Nitro Green; spaced Pike capitals stack on every piece.
Why it works: A distinct sub-palette lets one product line own its own look inside the green system.
Channels: in-store signage, tap handles, apparel, stickers, menu. Source: https://creative.starbucks.com/case-studies/

### Fall: Pumpkin Cream Cold Brew and PSL (2019)

The fall board (its image files are labelled FY19 and FALL19): 'Fall, cold-brewed' panels, 'Fall. Season. Long.' menu, 'Yes, PSLease' banner and app card, a pumpkin-peel cup on Starbucks Green, a customer tweet about Pumpkin Cream Cold Brew, 'Fall is so on' and 'First day of fall' animations, Thanksgiving Blend bag, sweater illustration, tumblers and 'You're rad', forest and 'Woo-hoo!' gift cards.

How the system shows: The Fall palette (rust, pumpkin, mustard, burgundy) over House Green menus; outline-and-solid Pike type; wordplay lines.
Why it works: The most famous seasonal moment gets the loudest palette and wordplay, while ordering stays functional.
Channels: in-store signage, menu, social, app, packaging, merch, gift card. Source: https://creative.starbucks.com/case-studies/

## Applications

| Format | What | Source |
|---|---|---|
| menu board | Three-panel menu (Espresso & coffee, Iced cold brew, Wildly chill) on House Green with product photos | https://creative.starbucks.com/theory/ |
| mobile order app | Nitro cold brew card with pill buttons 'Details' and 'Messages', and a full-width 'Order' pill | https://creative.starbucks.com/theory/ |
| packaging | Kraft paper bag and cup sleeve with the Siren cropped large in House Green; white hot cups with the Siren; printed tissue paper | https://creative.starbucks.com/theory/ |
| gift cards | Floral hummingbird, 'Love your drink', 'Thank you!' and leaf-pattern cards with the Siren in a white corner panel | https://creative.starbucks.com/theory/ |
| Reserve cards | Kenya Rungeto and Papua New Guinea Solwara small-lot coffee cards with full-color art | https://creative.starbucks.com/theory/ |
| email / Rewards | 'Welcome to Starbucks Rewards!' with hands holding coffee beans; 'Good morning' Rewards star progress screen | https://creative.starbucks.com/theory/ |
| social | Instagram posts: the Starbucks zodiac wheel, Cloud Macchiato on a cloud; animated GIFs | https://creative.starbucks.com/voice/ |
| website | 'Your favorites are back' banner on Light Green with the link 'Awww yes' | https://creative.starbucks.com/voice/ |
| print ad | 'So much yes': three summer drinks on peach and Starbucks Green | https://creative.starbucks.com/voice/ |
| merch | Cold cups and tumblers in seasonal illustration; Nitro T-shirts; stickers | https://creative.starbucks.com/case-studies/ |
| catering | Lunch trifold menu on Light Green with a food photo | https://creative.starbucks.com/theory/ |

## By format

How our engine applies Starbucks' system to each format. This is our recipe from their rules and examples, not something Starbucks publishes. Level = how far toward the expressive end of the guide's dial. Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 1 | White 100px nav with the Siren alone, four uppercase links and a black Join now pill; a Starbucks Green strip; alternating half-photo, half-green rows with centered white type and white outline pills; 32px white between bands; white footer with five link columns | how many rows, which photos, which seasonal story the rows tell |
| Deck | 2 | House Green and white slides, Sodo Sans, one brand green on every slide, the Siren as sign-off | one seasonal palette for section dividers |
| Proposal page | 1 | Functional end: clear Sodo Sans, House Green or white grounds, product-first | one Lander line for the opening |
| Menu / in-store signage | 1 | Pike capitals headline, product row on House Green, name, size, price and calories | a seasonal accent shape |
| Ad | 3 | One product truth, the product photo, a brand green or the Siren | seasonal palette and wordplay |
| Social post | 4 | Art or product first, the Siren or a green present | full seasonal palette, illustration, short loops |
| Email | 3 | Functional header and pill CTA; expressive hero | illustration or seasonal color in the hero |

## Checks before anything ships

- **Logo hidden**: Cover the Siren. A brand green should still be in the frame, with honest product photography and Sodo Sans, Lander or Pike; if not, it isn't Starbucks yet.
- **Dial check**: Say where the piece sits between functional and expressive and why. Ordering and wayfinding should be the quietest; if the menu is louder than the social post, it's backwards.
- **Swap test**: Put another coffee chain's logo on it. If the greens, the Siren-led restraint and the warm, playful line don't feel out of place, it's generic.

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is Starbucks's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- Logo clear space: not published
- Logo minimum size: not published
- A muted or secondary text color: not published
- Numeric color proportions: not published (the theory charts show wedges only; study.proportion is read from them)
- Contrast or accessibility pairings: not published
- Type scale, line heights and letter-spacing: not published (the specimen offers Small, Medium, Large only)
- Font licences: not published. Sodo Sans, Lander and Pike are Starbucks' own faces. Plus Jakarta Sans for Sodo Sans is calibrated against starbucks.com; the Lander (Source Serif 4) and Pike (Oswald) stand-ins are not, because neither face appears on starbucks.com to measure against
- Motion: not published (/motion/ is a 404; only example loops exist)
- Icon grid, stroke and sizes: not published
- Layout grid, margins, spacing and corner radii: not published
- Button spec: not published (only pill shapes seen in examples)
- Taglines and message pillars: not published in the guide (lines come from its examples; pillars are our reading)
- Campaign years: only the fall board's file names (FY19, FALL19) carry one; the others are not dated
- The guide dates from 2020 and creative.starbucks.com's TLS certificate expired in July 2025; check current starbucks.com before trusting any detail here

Logos and reference images belong to Starbucks. Look at them on Starbucks's own pages; don't reuse them.