{ "schema": "brand-kit@2", "palette": { "paper": "#FFFFFF", "surface": "#F2F0EB", "ink": "#000000", "accent": "#006241", "on_accent": "#FFFFFF", "accent_secondary": "#00754A", "night": "#1E3932", "on_night": "#FFFFFF", "extras": [ { "name": "light-green", "hex": "#D4E9E2", "role": "Secondary green: a green for moments when the other greens are too rich, dark or heavy; light ground behind the Siren (the guide's own Siren specimen sits on it) and the wordmark takes Black on it", "prov": "published", "source": "https://creative.starbucks.com/color/" }, { "name": "cool-neutral", "hex": "#F9F9F9", "role": "Background alongside cool colors", "prov": "published", "source": "https://creative.starbucks.com/color/" }, { "name": "black", "hex": "#000000", "role": "Core color for type or accents; the Nitro season adds it as a ground; Siren and wordmark go White on it", "prov": "published", "source": "https://creative.starbucks.com/color/" }, { "name": "white", "hex": "#FFFFFF", "role": "Foundational: type, backgrounds and the logo; the Siren and wordmark take Starbucks Green on it", "prov": "published", "source": "https://creative.starbucks.com/color/" }, { "name": "spring-yellow", "hex": "#EED350", "role": "Spring expressive color (Yellow): seasonal pop that always sits beside the brand greens or the Siren, never instead of them", "prov": "published", "source": "https://creative.starbucks.com/color/" }, { "name": "spring-light-blue", "hex": "#B6CBD5", "role": "Spring expressive color (Light Blue): seasonal pop that always sits beside the brand greens or the Siren, never instead of them", "prov": "published", "source": "https://creative.starbucks.com/color/" }, { "name": "spring-coral", "hex": "#D3705A", "role": "Spring expressive color (Coral): seasonal pop that always sits beside the brand greens or the Siren, never instead of them", "prov": "published", "source": "https://creative.starbucks.com/color/" }, { "name": "spring-teal", "hex": "#005E66", "role": "Spring expressive color (Teal): seasonal pop that always sits beside the brand greens or the Siren, never instead of them", "prov": "published", "source": "https://creative.starbucks.com/color/" }, { "name": "spring-turquoise", "hex": "#4C9F87", "role": "Spring expressive color (Turquoise): seasonal pop that always sits beside the brand greens or the Siren, never instead of them", "prov": "published", "source": "https://creative.starbucks.com/color/" }, { "name": "spring-goldenrod", "hex": "#C89543", "role": "Spring expressive color (Goldenrod): seasonal pop that always sits beside the brand greens or the Siren, never instead of them", "prov": "published", "source": "https://creative.starbucks.com/color/" }, { "name": "spring-spring-green", "hex": "#C0D48B", "role": "Spring expressive color (Spring Green): seasonal pop that always sits beside the brand greens or the Siren, never instead of them", "prov": "published", "source": "https://creative.starbucks.com/color/" }, { "name": "spring-blush", "hex": "#EDC4C9", "role": "Spring expressive color (Blush): seasonal pop that always sits beside the brand greens or the Siren, never instead of them", "prov": "published", "source": "https://creative.starbucks.com/color/" }, { "name": "summer-summer-mauve", "hex": "#DD92C0", "role": "Summer expressive color (Summer Mauve): seasonal pop that always sits beside the brand greens or the Siren, never instead of them", "prov": "published", "source": "https://creative.starbucks.com/color/" }, { "name": "summer-peach", "hex": "#F0CDBC", "role": "Summer expressive color (Peach): seasonal pop that always sits beside the brand greens or the Siren, never instead of them", "prov": "published", "source": "https://creative.starbucks.com/color/" }, { "name": "summer-yellow", "hex": "#F0E0B0", "role": "Summer expressive color (Yellow): seasonal pop that always sits beside the brand greens or the Siren, never instead of them", "prov": "published", "source": "https://creative.starbucks.com/color/" }, { "name": "summer-soft-pink", "hex": "#F0D4DC", "role": "Summer expressive color (Soft Pink): seasonal pop that always sits beside the brand greens or the Siren, never instead of them", "prov": "published", "source": "https://creative.starbucks.com/color/" }, { "name": "summer-bright-green", "hex": "#4CA06F", "role": "Summer expressive color (Bright Green): seasonal pop that always sits beside the brand greens or the Siren, never instead of them", "prov": "published", "source": "https://creative.starbucks.com/color/" }, { "name": "summer-vibrant-orange", "hex": "#DC714E", "role": "Summer expressive color (Vibrant Orange): seasonal pop that always sits beside the brand greens or the Siren, never instead of them", "prov": "published", "source": "https://creative.starbucks.com/color/" }, { "name": "nitro-brick-red", "hex": "#FF6740", "role": "Nitro expressive color (Brick Red): seasonal pop that always sits beside the brand greens or the Siren, never instead of them", "prov": "published", "source": "https://creative.starbucks.com/color/" }, { "name": "nitro-nitro-green", "hex": "#3ECEA9", "role": "Nitro expressive color (Nitro Green): seasonal pop that always sits beside the brand greens or the Siren, never instead of them", "prov": "published", "source": "https://creative.starbucks.com/color/" }, { "name": "nitro-coral", "hex": "#E76069", "role": "Nitro expressive color (Coral): seasonal pop that always sits beside the brand greens or the Siren, never instead of them", "prov": "published", "source": "https://creative.starbucks.com/color/" }, { "name": "nitro-bright-purple", "hex": "#8882F4", "role": "Nitro expressive color (Bright Purple): seasonal pop that always sits beside the brand greens or the Siren, never instead of them", "prov": "published", "source": "https://creative.starbucks.com/color/" }, { "name": "fall-rust", "hex": "#9D5116", "role": "Fall expressive color (Rust): seasonal pop that always sits beside the brand greens or the Siren, never instead of them", "prov": "published", "source": "https://creative.starbucks.com/color/" }, { "name": "fall-neutral-pink", "hex": "#EBCABC", "role": "Fall expressive color (Neutral Pink): seasonal pop that always sits beside the brand greens or the Siren, never instead of them", "prov": "published", "source": "https://creative.starbucks.com/color/" }, { "name": "fall-almost-pumpkin", "hex": "#E44C2C", "role": "Fall expressive color (Almost Pumpkin): seasonal pop that always sits beside the brand greens or the Siren, never instead of them", "prov": "published", "source": "https://creative.starbucks.com/color/" }, { "name": "fall-mustard", "hex": "#A17700", "role": "Fall expressive color (Mustard): seasonal pop that always sits beside the brand greens or the Siren, never instead of them", "prov": "published", "source": "https://creative.starbucks.com/color/" }, { "name": "fall-burgandy", "hex": "#84233C", "role": "Fall expressive color (Burgandy): seasonal pop that always sits beside the brand greens or the Siren, never instead of them", "prov": "published", "source": "https://creative.starbucks.com/color/" }, { "name": "site-green", "hex": "#006242", "role": "starbucks.com paints every homepage green band (announcement strip, all four feature rows, the announcement pill fill) #006242, one step off the guide's Starbucks Green #006241 (accent, brand law). Use #006242 when rebuilding the homepage, #006241 everywhere else.", "prov": "observed", "source": "https://www.starbucks.com/", "date": "2026-10-29" }, { "name": "siren-green-svg", "hex": "#00704A", "role": "The fill inside starbucks.com's siren.svg file (the nav and footer logo). Use the supplied file; never recolor it.", "prov": "observed", "source": "https://www.starbucks.com/", "date": "2026-10-29" }, { "name": "ink-87", "hex": "#212121", "role": "Rendered rgba(0,0,0,0.87) on white: default text (Find a café, footer headings, legal links) and the Sign in pill ring and label. Use #212121 or rgba(0,0,0,0.87); they are identical on white.", "prov": "observed", "source": "https://www.starbucks.com/", "date": "2026-10-29" }, { "name": "ink-58", "hex": "#6B6B6B", "role": "Rendered value of rgba(0,0,0,0.58): footer column links and the copyright line. Set it as rgba(0,0,0,0.58) on white.", "prov": "observed", "source": "https://www.starbucks.com/", "date": "2026-10-29" }, { "name": "hairline", "hex": "#E5E5E5", "role": "Rendered value of rgba(0,0,0,0.1): the 2px footer rule. Set it as a 2px rgba(0,0,0,0.1) top border.", "prov": "observed", "source": "https://www.starbucks.com/", "date": "2026-10-29" } ] }, "typography": { "display": { "family": "Plus Jakarta Sans", "weights": [ 200, 300, 400, 600, 700, 900 ], "fallback_stack": "\"Plus Jakarta Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif", "google_fonts": "Plus+Jakarta+Sans:wght@300;400;600;700", "prov": "published", "source": "https://creative.starbucks.com/typography/", "note": "Plus Jakarta Sans stands in for Sodo Sans, Starbucks' own face. Calibrated 2026-10-29 against SoDoSans on starbucks.com: line width 98-102.5%, ink 101-108% at the site's sizes and weights; best of 23 open candidates. Tracking -0.05px mixed case, 1.3px uppercase nav.", "weight": 600, "tracking": -0.05, "line_height": 1.4, "real_face": "Sodo Sans" }, "body": { "family": "Plus Jakarta Sans", "weights": [ 200, 300, 400, 600, 700, 900 ], "fallback_stack": "\"Plus Jakarta Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif", "google_fonts": "Plus+Jakarta+Sans:wght@300;400;600;700", "prov": "published", "source": "https://creative.starbucks.com/typography/", "note": "Plus Jakarta Sans stands in for Sodo Sans, Starbucks' own face. Calibrated 2026-10-29 against SoDoSans on starbucks.com: line width 98-102.5%, ink 101-108% at the site's sizes and weights; best of 23 open candidates. Tracking -0.05px mixed case, 1.3px uppercase nav.", "weight": 400, "line_height": 1.75, "scale": 19, "real_face": "Sodo Sans" }, "accent_serif": { "family": "Source Serif 4", "cuts": [ "Lander Grande", "Lander Tall" ], "weights": [ 200, 300, 400, 600, 700, 900 ], "fallback_stack": "Georgia, serif", "google_fonts": "Source+Serif+4:wght@300;400;600;700", "prov": "published", "source": "https://creative.starbucks.com/typography/", "note": "Source Serif 4 stands in for Lander, Starbucks' own face. Not calibrated: Lander doesn't appear on starbucks.com to measure against.", "real_face": "Lander" }, "condensed": { "family": "Oswald", "weights": [ 300, 400, 700 ], "fallback_stack": "\"Arial Narrow\", sans-serif", "google_fonts": "Oswald:wght@300;400;700", "prov": "published", "source": "https://creative.starbucks.com/typography/", "note": "Oswald stands in for Pike, Starbucks' own face. Not calibrated: Pike doesn't appear on starbucks.com to measure against.", "real_face": "Pike" }, "calibration": "Calibrated 2026-10-29 by rendering the same lines in SoDoSans on starbucks.com and in 23 open candidates, at the site's own sizes, weights and tracking. Plus Jakarta Sans had the best width and ink together: 24px/600 headline 98.2% width, 108% ink; 19px/400 body 98.5% width, 102% ink; 14px/700 uppercase nav 102.5% width, 103% ink; 16px/600 button 98.5% width, 101% ink; 19px/300 announcement button 97.3% width, 87% ink. Runners-up: Work Sans (wider by 2-3.5% on body), Inter (ink 106-113%), Figtree (narrow by 6-8%, the extract step's first guess, rejected). With Plus Jakarta Sans, use each type row's stand_in_tracking_px instead of tracking_px (tracking_px is SoDoSans on the site): -0.05px for all mixed-case text, 1.3px for the uppercase nav. One value per row, no other tracking. Keep the site's weights: 400 body, 600 headings and buttons, 700 nav. starbucks.com loads only SoDoSans 400, 600 and 700; anything its CSS sets at 300 renders 400; Lander and Pike never appear on the homepage." }, "style": { "button_shape": "pill", "button_shape_prov": "published", "button_shape_source": "https://creative.starbucks.com/theory/", "button_note": "Every button in the guide's examples is a pill: 'Join today' on the Rewards piece (voice page), 'Details', 'Messages' and 'Order' in the mobile order examples (theory page). No button spec is published.", "motion": "not published (there is no motion page; the guide's moving examples are short loops: a ~3s coffee boomerang video and 0.8-3.2s animated GIFs)" }, "voice": { "tone": [ "Functional", "Expressive" ], "notes": [ "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": [ { "id": "functional-points-at-product", "kind": "guidance", "text": "Functional copy organises and anticipates needs, and calls attention to the product, not itself", "prov": "published", "source": "https://creative.starbucks.com/voice/" }, { "id": "one-product-truth", "kind": "guidance", "text": "Expressive copy goes on focal products: one product truth, fresh, relevant and interesting", "prov": "published", "source": "https://creative.starbucks.com/voice/" }, { "id": "every-word-counts", "kind": "guidance", "text": "Make every word count and write for where the reader is interacting with the brand", "prov": "published", "source": "https://creative.starbucks.com/voice/" }, { "id": "coffee-story", "kind": "guidance", "text": "With space, tell a passionate coffee story (e.g. the Hawaii Ka'u tasting-room note)", "prov": "published", "source": "https://creative.starbucks.com/voice/" }, { "id": "pike-caps", "kind": "guidance", "text": "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", "prov": "published", "source": "https://creative.starbucks.com/voice/" }, { "id": "wordplay", "kind": "guidance", "text": "Short, warm wordplay is in voice for expressive pieces: 'Yes, PSLease', 'S'more of this', 'Awww yes'", "prov": "published", "source": "https://creative.starbucks.com/case-studies/" }, { "id": "registered-marks", "kind": "guidance", "text": "Keep the ® on registered names: Starbucks® Rewards, Frappuccino®, Starbucks Refreshers®", "prov": "published", "source": "https://creative.starbucks.com/photography/" }, { "id": "menu-facts", "kind": "guidance", "text": "Menu and signage items carry name, size, price and calories in small Sodo Sans or Pike under the photo", "prov": "published", "source": "https://creative.starbucks.com/voice/" }, { "id": "spelling", "kind": "spelling", "value": "en-US", "prov": "observed", "source": "https://creative.starbucks.com/voice/" } ] }, "spec": { "signature": [ { "id": "green-photo-rows", "name": "Alternating green-and-photo rows", "where": "the whole starbucks.com homepage body: four rows after the announcement strip", "spec": "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.", "once": "the page is built from repeats of it; one row per message", "dont": "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", "prov": "observed", "source": "https://www.starbucks.com/" }, { "id": "greens-always-present", "name": "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", "spec": "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", "once": "every composition", "example": { "ground": "night", "text": "Fall. Season. Long.", "mark": "", "mark_style": "none" }, "dont_example": { "ground": "paper", "text": "Fall. Season. Long.", "mark": "", "mark_style": "none" }, "dont": "run a seasonal palette on its own: a piece with no brand green and no Siren isn't recognizably Starbucks" }, { "id": "siren-unlocked", "name": "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)", "spec": "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", "once": "one Siren per piece", "example": { "ground": "night", "text": "The Siren in white on House Green", "ink": "on_night" }, "dont_example": { "ground": "paper", "text": "Siren locked inside the old STARBUCKS COFFEE ring", "ink": "accent" }, "dont": "lock the Siren to the wordmark by default, bring back the ringed 1987 or 1992 badge, or recolor her outside the published pairings" }, { "id": "functional-expressive-dial", "name": "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)", "spec": "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)", "once": "choose one point on the dial per piece", "example": { "ground": "night", "text": "Matcha three ways", "mark": "", "mark_style": "none" }, "dont_example": { "ground": "accent", "text": "Order ahead! Pick up fast! New flavors inside!", "mark": "", "mark_style": "none" }, "dont": "make functional moments loud: ordering and wayfinding stay quiet so new news can be the dynamic part" } ], "motion": [ { "name": "boomerang-loop", "duration_ms": 2970, "use": "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", "prov": "observed", "source": "https://creative.starbucks.com/photography/" }, { "name": "gif-loop", "use": "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", "prov": "observed", "source": "https://creative.starbucks.com/illustration/", "also": [ "https://creative.starbucks.com/case-studies/" ] } ], "icons": { "style": "single-weight line drawings of coffee tools (pour-over, siphon brewer) in White on Starbucks Green; they sit at the functional end of the illustration range", "prov": "published", "source": "https://creative.starbucks.com/illustration/", "note": "No icon grid, stroke weight or size scale is published" }, "source": "https://www.starbucks.com/", "how": "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", "provenance": "observed", "breakpoints": { "all": [ 768, 1024 ], "phone_max": 767, "content_max": 1440 }, "layout": { "page_margin": { "desktop": 40, "tablet": 24, "phone": 16 }, "container_max": 1440, "container_note": "main content is a 1440px column centered on a white page: above 1440 the green rows stop at the column edge with white on both sides (at 1920: 240px white each side). The nav and footer content also sit in that column (logo at x 240 at 1920).", "band_gap": { "desktop": 32, "phone": 32, "note": "32px of white between every band: nav, announcement strip, each feature row, footnote. The green never touches the next green." }, "nav_height": 100, "feature_row": { "split": "50/50 from 768 up; image half and text half each 720px at 1440", "text_padding": { "desktop": "32px 48px", "phone": "32px 16px" }, "text_max_at_1440": 435, "text_max_at_390": 326, "image_heights_at_1440": [ 420, 280, 480, 280 ], "text_note": "Phone: 16px page margin plus 16px text padding each side, so text measures 326px (x 32-358). Desktop: 48px side padding inside the 720px half, text block max 435px centered. The 32px vertical padding is a minimum: at 1440 every row is exactly as tall as its photo and the text block is vertically centered in it." }, "columns": 2, "columns_phone": 1, "gutter": 0, "prov": "observed", "source": "https://www.starbucks.com/", "nav_height_phone": 72, "nav_height_tablet": 84 }, "type": [ { "role": "Feature headline (h1 in row 1, h2 in rows 2-4)", "face": "display", "size": { "desktop": 24, "phone": 22 }, "line_height": 1.4, "tracking_px": -0.24, "weight": 600, "color": "#FFFFFF", "align": "center", "note": "the only headline size on the page; 33.6px line at 1440, 30.8px at 390", "prov": "observed", "source": "https://www.starbucks.com/", "stand_in_tracking_px": -0.05 }, { "role": "Feature body", "face": "body", "size": { "desktop": 19, "phone": 16 }, "line_height": 1.75, "tracking_px": -0.19, "weight": 400, "color": "#FFFFFF", "align": "center", "note": "33.25px line at 1440, 28px at 390; a ® is a at 0.75em", "prov": "observed", "source": "https://www.starbucks.com/", "stand_in_tracking_px": -0.05 }, { "role": "Announcement line", "face": "body", "size": { "desktop": 19, "phone": 16 }, "line_height": 1.75, "tracking_px": -0.19, "weight": 600, "color": "#FFFFFF", "align": "center", "prov": "observed", "source": "https://www.starbucks.com/", "stand_in_tracking_px": -0.05 }, { "role": "Announcement button", "face": "body", "size": { "desktop": 19, "phone": 16 }, "line_height": 1.75, "tracking_px": -0.19, "weight": 400, "color": "#FFFFFF", "prov": "observed", "source": "https://www.starbucks.com/", "note": "their CSS says 300; no 300 file loads, so it renders 400", "stand_in_tracking_px": -0.05 }, { "role": "Feature button", "face": "body", "size": { "desktop": 16, "phone": 14 }, "line_height": 1.2, "tracking_px": -0.16, "weight": 600, "color": "#FFFFFF", "prov": "observed", "source": "https://www.starbucks.com/", "stand_in_tracking_px": -0.05 }, { "role": "Nav link", "face": "body", "size": { "desktop": 14, "phone": 14 }, "line_height": 1.5, "tracking_px": 1.4, "weight": 700, "case": "uppercase", "color": "rgba(0,0,0,0.9)", "note": "desktop and tablet only; phones hide them behind the menu button; not shown on phones", "prov": "observed", "source": "https://www.starbucks.com/", "stand_in_tracking_px": 1.3 }, { "role": "Nav utility (Find a café) and nav buttons", "face": "body", "size": { "desktop": 14, "phone": 14 }, "line_height": 1.2, "tracking_px": -0.16, "weight": 600, "color": "rgba(0,0,0,0.87)", "prov": "observed", "source": "https://www.starbucks.com/", "note": "not shown on phones", "stand_in_tracking_px": -0.05 }, { "role": "Footnote", "face": "body", "size": { "desktop": 14, "phone": 13 }, "line_height": 1.8, "tracking_px": -0.14, "weight": 400, "color": "#000000", "align": "center", "note": "25.2px line at 1440, 23.4px at 390", "prov": "observed", "source": "https://www.starbucks.com/", "stand_in_tracking_px": -0.05 }, { "role": "Footer column heading", "face": "body", "size": { "desktop": 19, "phone": 16 }, "line_height": 1.29, "tracking_px": -0.16, "weight": 400, "color": "rgba(0,0,0,0.87)", "note": "on phones the heading is an accordion button label, 16px", "prov": "observed", "source": "https://www.starbucks.com/", "stand_in_tracking_px": -0.05 }, { "role": "Footer link", "face": "body", "size": { "desktop": 16, "phone": 16 }, "line_height": 1.5, "tracking_px": -0.16, "weight": 400, "color": "rgba(0,0,0,0.58)", "note": "column links; legal links use rgba(0,0,0,0.87)", "prov": "observed", "source": "https://www.starbucks.com/", "stand_in_tracking_px": -0.05 }, { "role": "Copyright", "face": "body", "size": { "desktop": 14, "phone": 14 }, "line_height": 1.5, "tracking_px": -0.16, "weight": 400, "color": "rgba(0,0,0,0.58)", "prov": "observed", "source": "https://www.starbucks.com/", "stand_in_tracking_px": -0.05 } ], "components": { "button_outline_on_green": { "radius": 50, "fill": "none", "ring_px": 1, "ring": "#FFFFFF", "text": "#FFFFFF", "height": 35, "padding": "7px 16px", "font_size": 16, "weight": 600, "note": "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.", "prov": "observed", "source": "https://www.starbucks.com/", "padding_x": 16, "height_phone": 33, "font_size_phone": 14, "face": "body" }, "button_announcement": { "radius": 50, "fill": "#006242", "ring_px": 2, "ring": "#FFFFFF", "text": "#FFFFFF", "height": 41, "padding": "2px 12px", "font_size": 19, "weight": 400, "note": "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).", "prov": "observed", "source": "https://www.starbucks.com/", "padding_x": 12, "height_phone": 36, "font_size_phone": 16, "face": "body" }, "button_outline_nav": { "radius": 50, "fill": "#FFFFFF", "ring_px": 1, "ring": "#212121", "text": "#212121", "height": 33, "padding": "7px 16px", "font_size": 14, "weight": 600, "label": "Sign in", "prov": "observed", "source": "https://www.starbucks.com/", "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": { "radius": 50, "fill": "#000000", "ring_px": 1, "ring": "#000000", "text": "#FFFFFF", "height": 33, "padding": "7px 16px", "font_size": 14, "weight": 600, "label": "Join now", "note": "The only filled button on the page, and it is black, not green.", "prov": "observed", "source": "https://www.starbucks.com/", "padding_x": 16, "face": "body" }, "feature_row": { "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.", "prov": "observed", "source": "https://www.starbucks.com/" }, "find_a_cafe": { "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", "prov": "observed", "source": "https://www.starbucks.com/" }, "social_icon": { "anatomy": "32px round icon from starbucks.com/assets/icons/social/.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" ], "prov": "observed", "source": "https://www.starbucks.com/" }, "footer_accordion_phone": { "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", "prov": "observed", "source": "https://www.starbucks.com/" } }, "responsive": { "measured_at": [ 390, 768, 1024, 1280, 1440, 1920 ], "source": "https://www.starbucks.com/", "date": "2026-10-29", "prov": "observed", "rows": [ { "what": "nav height", "values": { "390": "72px", "768": "84px", "1024": "100px", "1440": "100px" } }, { "what": "nav links", "values": { "390": "hidden; 40px menu button (24px three-line icon) at x 334", "768": "all four links, Find a café, Sign in, Join now", "1440": "same, links start x 132" } }, { "what": "siren size", "values": { "390": "40px at x 16, y 16", "768": "52px at x 24, y 16", "1440": "52px at x 40, y 24" } }, { "what": "feature row", "values": { "390": "stacked: photo full width on top, text below, always photo first", "768": "50/50, row 508px tall; photo 384x224 vertically centered on green", "1024": "50/50; photo 512x299 centered, row 455", "1440": "50/50, row = photo height (420/280/480/280)", "1920": "1440 column centered, white 240px each side" } }, { "what": "feature headline", "values": { "390": "22px/30.8px", "768": "24px (wraps to 2 lines)", "1440": "24px/33.6px, one line" } }, { "what": "feature body", "values": { "390": "16px/28px", "1440": "19px/33.25px" } }, { "what": "feature button", "values": { "390": "14px, 33px tall", "1440": "16px, 35px tall" } }, { "what": "footer columns", "values": { "390": "five accordions", "1024": "five columns", "1440": "five 190px columns at x 40, 270, 500, 730, 960 (40px gaps)" } } ] }, "page": { "source": "https://www.starbucks.com/", "date": "2026-10-29", "prov": "observed", "page_ground": "#FFFFFF everywhere between bands; no tinted bands, no gradients, no dark mode", "announcement": { "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." }, "nav": { "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" }, "sections": [ { "name": "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" }, { "name": "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." }, { "name": "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" }, { "name": "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." }, "dark_ground": { "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" } }, "bands": [ { "label": "White nav, 100px, soft shadow: Siren, four uppercase links, Find a café, Sign in, Join now", "ground": "#FFFFFF", "content": "nav", "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.", "anatomy": [ "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)" ] }, { "label": "Green announcement strip, 110px", "ground": "#006242", "content": "announcement", "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.", "anatomy": [ "bold line + 2px-ring pill, centered as one row" ] }, { "label": "Feature row 1 (hero): photo left, green right, h1", "ground": "#006242", "content": "hero", "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.", "anatomy": [ "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" ] }, { "label": "Feature row 2 (photo right)", "ground": "#006242", "content": "feature row", "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": [ "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\"" ] }, { "label": "Feature row 3 (photo left)", "ground": "#006242", "content": "feature row", "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": [ "same parts as the hero row", "photo 3:2", "headline: \"Fall is here. Cue the hits.\"" ] }, { "label": "Feature row 4 (photo right)", "ground": "#006242", "content": "feature row", "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": [ "the body copy ends with \"*\" pointing to the footnote band", "headline: \"Free refills and fall vibes\"" ] }, { "label": "Footnote", "ground": "#FFFFFF", "content": "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.", "anatomy": [ "plain black text, no rule above, no box" ] }, { "label": "White footer with five link columns", "ground": "#FFFFFF", "content": "footer", "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.", "anatomy": [ "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" ] } ] }, "system": { "fixed": [ "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" ], "flex": "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.", "traits": [ { "is": "Optimistic", "text": "Expressive moments with calm confidence, 'optimistic, joyful and recognizably Starbucks'.", "source": "https://creative.starbucks.com/", "prov": "published" }, { "is": "Joyful", "text": "Copy that can make you smile even in a few words (paraphrase).", "source": "https://creative.starbucks.com/voice/", "prov": "published" }, { "is": "Clear", "not": "Sterile", "text": "\"Functional doesn't mean sterile; it means clear.\"", "source": "https://creative.starbucks.com/voice/", "prov": "published" }, { "is": "Honest", "text": "\"Our photography is honest.\" Product beautiful and believable.", "source": "https://creative.starbucks.com/photography/", "prov": "published" }, { "is": "Handcrafted", "not": "Decadent", "text": "Whip styled less decadent and dessertlike, more handcrafted (paraphrase).", "source": "https://creative.starbucks.com/photography/", "prov": "published" }, { "is": "Attainable cool", "text": "Environmental photography that looks like it could be you (paraphrase).", "source": "https://creative.starbucks.com/photography/", "prov": "published" } ] }, "proportion": { "note": "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", "source": "https://creative.starbucks.com/theory/", "parts": [ { "name": "House Green", "hex": "#1E3932", "n": 139 }, { "name": "Starbucks Green", "hex": "#006241", "n": 49 }, { "name": "Light greens", "hex": "#D4E9E2", "n": 47 }, { "name": "Expressive art and seasonal color (image wedges, no single hex)", "n": 125 } ], "prov": "inferred", "why": "Starbucks publishes no percentages; the n values are our reading of the wedge angles in the guide's Overall Expression chart (degrees of 360)." }, "tone_by_state": { "note": "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", "source": "https://creative.starbucks.com/theory/", "prov": "ours", "states": [ { "state": "Mobile Order & Pay", "level": 1 }, { "state": "In-store menus and signage", "level": 1 }, { "state": "Email and personalized", "level": 3 }, { "state": "Social media", "level": 4 } ] }, "formats": [ { "format": "Landing page", "level": 1, "must": "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", "flex": "how many rows, which photos, which seasonal story the rows tell", "prov": "observed", "source": "https://www.starbucks.com/", "date": "2026-10-29" }, { "format": "Deck", "level": 2, "must": "House Green and white slides, Sodo Sans, one brand green on every slide, the Siren as sign-off", "flex": "one seasonal palette for section dividers" }, { "format": "Proposal page", "level": 1, "must": "Functional end: clear Sodo Sans, House Green or white grounds, product-first", "flex": "one Lander line for the opening" }, { "format": "Menu / in-store signage", "level": 1, "must": "Pike capitals headline, product row on House Green, name, size, price and calories", "flex": "a seasonal accent shape" }, { "format": "Ad", "level": 3, "must": "One product truth, the product photo, a brand green or the Siren", "flex": "seasonal palette and wordplay" }, { "format": "Social post", "level": 4, "must": "Art or product first, the Siren or a green present", "flex": "full seasonal palette, illustration, short loops" }, { "format": "Email", "level": 3, "must": "Functional header and pill CTA; expressive hero", "flex": "illustration or seasonal color in the hero" } ], "checks": [ { "name": "Logo hidden", "text": "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." }, { "name": "Dial check", "text": "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." }, { "name": "Swap test", "text": "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." } ], "examples": [ { "chapter": "color", "do": { "ground": "night", "text": "Matcha three ways", "ink": "on_night" }, "do_caption": "House Green used like a neutral, white type: the functional default in the guide's signage and menus.", "dont": { "ground": "accent_secondary", "text": "A page flooded Accent Green", "ink": "on_accent" }, "dont_caption": "Accent Green is for sparing use, when Starbucks Green doesn't stand out." }, { "chapter": "logo", "do": { "ground": "night", "text": "Siren in white on House Green", "ink": "on_night" }, "do_caption": "One of the five grounds the guide shows for the Siren.", "dont": { "ground": "surface", "text": "Siren locked in the old STARBUCKS COFFEE ring", "ink": "accent" }, "dont_caption": "The ringed badges are history; the preferred Siren stands alone." }, { "chapter": "type", "do": { "ground": "paper", "text": "YOUR FAVORITES ARE BACK", "font": "display", "weight": 700 }, "do_caption": "A functional headline in spaced capitals (Pike in the guide's website example).", "dont": { "ground": "paper", "text": "Your favorites are back", "font": "script" }, "dont_caption": "Hand-lettering: the guide is moving away from it." }, { "chapter": "voice", "do": { "ground": "night", "text": "That first sip feeling" }, "do_caption": "Expressive: one product truth, warm and short.", "dont": { "ground": "night", "text": "Discover our exciting new rewards program benefits today" }, "dont_caption": "Competing volume; the guide asks to turn it down so people find what they seek." }, { "chapter": "photography", "do": { "ground": "night", "text": "Pint glass, graphic shadow, crema in the foam" }, "do_caption": "Handcrafted, believable product in consistent glassware.", "dont": { "ground": "paper", "text": "A half-eaten pastry on a pile of crumbs" }, "dont_caption": "The guide rules out bites, crumbs, loose ingredients and packaging." } ], "make_it_yours": { "note": "Everything above transfers. These are Starbucks's own and must be replaced with yours: name and logo, purpose, positioning, messaging pillars, proof, taglines and boilerplate.", "replace": [ "identity", "purpose", "positioning", "messaging.pillars", "messaging.proof_points", "messaging.taglines", "messaging.boilerplate" ], "reference": { "purpose": { "mission": { "text": "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).", "prov": "published", "source": "https://about.starbucks.com/mission/" }, "story": { "text": "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.", "prov": "published", "source": "https://about.starbucks.com/about-us/", "also": [ "https://creative.starbucks.com/" ], "paraphrase": true }, "values": [ { "name": "Craft", "means": "Rigor in the details, learning and teaching, excellence with passion and creativity (paraphrase).", "prov": "published", "source": "https://about.starbucks.com/mission/" }, { "name": "Results", "means": "Hit goals with focus and integrity, keep innovating, exceed expectations (paraphrase).", "prov": "published", "source": "https://about.starbucks.com/mission/" }, { "name": "Courage", "means": "Hard conversations with respect, audacious ideas, the right thing even when it's hard (paraphrase).", "prov": "published", "source": "https://about.starbucks.com/mission/" }, { "name": "Belonging", "means": "Listen and connect with warmth; dignity and care for every person (paraphrase).", "prov": "published", "source": "https://about.starbucks.com/mission/" }, { "name": "Joy", "means": "Pride in the work, fun while doing it, celebrating each other (paraphrase).", "prov": "published", "source": "https://about.starbucks.com/mission/" } ] }, "positioning": { "statement": { "text": "Starbucks describes itself as \"in the people business serving coffee\", not the other way round.", "prov": "published", "source": "https://about.starbucks.com/about-us/" }, "category": { "text": "Coffee roaster and coffeehouse company: roasts and sells whole-bean coffee, runs coffeehouses, and sells drinks, food, merchandise and grocery coffee (paraphrase).", "prov": "published", "source": "https://about.starbucks.com/about-us/" }, "audience": { "text": "\"Beautifully diverse customers all over the world\", met where they are along their journey: ordering, in store, by email, on social.", "prov": "published", "source": "https://creative.starbucks.com/" }, "problem": { "text": "Competing messages get in the way of people finding exactly what they came for at Starbucks (paraphrase of the voice page).", "prov": "published", "source": "https://creative.starbucks.com/voice/" }, "promise": { "text": "Customer Promise: \"Serve the world's finest coffee, with a moment of connection\".", "prov": "published", "source": "https://about.starbucks.com/mission/" }, "differentiators": [ { "text": "The Siren and the wordmark: the guide calls them the most recognizable brand assets, and the green apron the most identifiable color.", "prov": "published", "source": "https://creative.starbucks.com/logos/", "also": [ "https://creative.starbucks.com/color/" ] }, { "text": "Craft across many hands, from coffee farmers and master roasters to the barista (paraphrase).", "prov": "published", "source": "https://about.starbucks.com/about-us/" }, { "text": "Coffee and art together: illustration with evidence of the artist's hand has brought the coffees to life for decades (paraphrase).", "prov": "published", "source": "https://creative.starbucks.com/illustration/", "also": [ "https://creative.starbucks.com/" ] }, { "text": "Seasonal reinvention: expressive color, illustration and photography evolve with each season and trend, while the greens and the Siren stay put.", "prov": "published", "source": "https://creative.starbucks.com/color/", "also": [ "https://creative.starbucks.com/case-studies/" ] } ], "alternatives": [ { "text": "Not named. Neither the guide nor the About pages name a competitor or a category alternative.", "prov": "inferred", "source": "https://about.starbucks.com/about-us/", "why": "No competitor appears on the guide pages or on about.starbucks.com/about-us or /mission (checked 2026-10-29)." } ] }, "messaging": { "taglines": [ { "text": "That first sip feeling", "prov": "published", "source": "https://creative.starbucks.com/voice/", "where": "Starbucks Rewards piece, set in Lander on House Green with a 'Join today' pill" }, { "text": "So much yes", "prov": "published", "source": "https://creative.starbucks.com/voice/", "where": "Print ad (summer drinks), set in spaced Pike capitals; also 'So. Much. Yes.' on the summer case-study board" }, { "text": "Your favorites are back", "prov": "published", "source": "https://creative.starbucks.com/voice/", "where": "Website banner on Light Green, Pike capitals, with the link 'Awww yes'" }, { "text": "Fall. Season. Long.", "prov": "published", "source": "https://creative.starbucks.com/case-studies/", "where": "Fall in-store menu panel and the 'Fall season long' animated piece on the fall case-study board" }, { "text": "Yes, PSLease", "prov": "published", "source": "https://creative.starbucks.com/case-studies/", "where": "Pumpkin Spice Latte banner and app card on the fall case-study board" } ], "attributes": [ "optimistic", "joyful", "calm confidence", "recognizably Starbucks", "honest", "authentic", "relatable", "helpful", "clear" ], "key_messages": [], "boilerplate": { "text": "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.", "prov": "published", "source": "https://about.starbucks.com/about-us/", "paraphrase": true }, "pillars": [ { "name": "Craft", "claim": "Coffee made with care by many hands, bean to cup.", "prov": "inferred", "source": "https://about.starbucks.com/about-us/", "why": "The About page's 'many hands' passage, the mission's 'finest coffee' and the value Craft; the guide's expressive copy is told as 'a passionate coffee story'. Starbucks publishes no named message pillars.", "proof": [ "p-many-hands", "p-reserve" ] }, { "name": "Connection", "claim": "A moment of human connection with every cup.", "prov": "inferred", "source": "https://about.starbucks.com/mission/", "why": "Customer Promise and mission ('one person, one cup and one neighborhood at a time'); the guide's environmental photography should 'connect with our audience'.", "proof": [ "p-customer-promise", "p-foundation" ] }, { "name": "Heritage", "claim": "The Siren, the green apron and Pike Place since 1971.", "prov": "inferred", "source": "https://about.starbucks.com/about-us/", "why": "The logo timeline (1971, 1987, 1992, current) and the colour page's apron story; illustration content should 'relate back to coffee or our heritage'.", "proof": [ "p-1971", "p-siren-timeline" ] }, { "name": "Seasonal joy", "claim": "Something new and delightful every season.", "prov": "inferred", "source": "https://creative.starbucks.com/case-studies/", "why": "Case studies are organised by season (Spring, Summer, Nitro, Fall); expressive colour 'evolves with seasonal trends'.", "proof": [ "p-seasonal-palettes" ] } ], "proof_points": [ { "id": "p-1971", "kind": "other", "text": "First store opened in 1971 at Pike Place Market, Seattle.", "source": "https://about.starbucks.com/about-us/" }, { "id": "p-siren-timeline", "kind": "other", "text": "Four Siren logos: 1971, 1987, 1992 and the current one.", "source": "https://creative.starbucks.com/logos/" }, { "id": "p-many-hands", "kind": "other", "text": "Farmers, master roasters and baristas each shape the cup (About page).", "source": "https://about.starbucks.com/about-us/" }, { "id": "p-reserve", "kind": "other", "text": "Starbucks Reserve small-lot coffee cards (Kenya Rungeto, Papua New Guinea Solwara) shown as illustration in use.", "source": "https://creative.starbucks.com/theory/" }, { "id": "p-customer-promise", "kind": "other", "text": "Customer Promise: the world's finest coffee with a moment of connection.", "source": "https://about.starbucks.com/mission/" }, { "id": "p-foundation", "kind": "other", "text": "The Starbucks Foundation gives grants to nonprofits around the world.", "source": "https://about.starbucks.com/about-us/" }, { "id": "p-seasonal-palettes", "kind": "other", "text": "Four published seasonal palettes (Spring, Summer, Nitro, Fall) with real campaign boards.", "source": "https://creative.starbucks.com/color/" } ], "claim_boundaries": [ { "text": "Product stories stay about the product; people appear sparingly and with intention.", "prov": "published", "source": "https://creative.starbucks.com/photography/" }, { "text": "Functional copy calls attention to the product, not to itself.", "prov": "published", "source": "https://creative.starbucks.com/voice/" }, { "text": "Food shots never show bites, crumbs, loose ingredients or packaging.", "prov": "published", "source": "https://creative.starbucks.com/photography/" }, { "text": "No legal, nutrition or claims guidance is published; the guide's examples print calories and size beside each drink on menus and signage.", "prov": "published", "source": "https://creative.starbucks.com/voice/" } ] } } } }