Quick Answer

Starbucks is a brand design system known for its distinctive visual language. The design uses signature brand colors as primary color. It is built on a clean dark canvas with strong typographic hierarchy. Full design tokens, color palette, and component library are documented on this page.

Starbucks

Starbucks' design system is a warm, confident retail flagship featuring four-tier green brand system (#006241, #00754A, #1E3932, #2b5148), warm cream canvas (#f2f0eb), and proprietary SoDoSans typeface.

Homepage Example

Starbucks
MenuRewardsGift Cards
Rewards
Free coffee is just the beginning
Join now
© Starbucks

Color Palette (11)

starbucks-green#006241
green-accent#00754A
house-green#1E3932
green-uplift#2b5148
green-light#d4e9e2
gold#cba258
white#ffffff
neutral-warm#f2f0eb
ceramic#edebe9
black#000000
red#c82014

Typography (7)

display-10
display-1080px · weight 400
jumbo-9
jumbo-958px · weight 400
hero-large-8
hero-large-845px · weight 400
h1
h124px · weight 600
body-large
body-large19px · weight 400
body
body16px · weight 400
small
small14px · weight 400

Components (5)

button-primary-filled
button-primary-filled
button-primary-outlined
button-primary-outlined
button-black-filled
button-black-filled
button-dark-outlined
button-dark-outlined
button-frap
button-frap

Border Radius

12 (12px)
50% (50px)
pill (9999px)

Design Philosophy

Overview

Starbucks' design system is a warm, confident retail flagship wearing the green of their storefront apron across every surface. The canvas alternates between neutral-warm cream (#f2f0eb) and ceramic off-white (#edebe9).

The proprietary SoDoSans typeface sits across nearly every surface. Greens come in four calibrated shades (Starbucks, Accent, House, Uplift) each mapped to a specific surface role.

Key Characteristics

  • Four-tier green brand system (Starbucks / Accent / House / Uplift)
  • Gold reserved for Rewards-status moments only
  • Warm-neutral canvas (#f2f0eb / #edebe9) instead of cold white
  • Full-pill buttons (50px radius) universal
  • Floating "Frap" circular CTA (56px, Green Accent fill)

Do's and Don'ts

Use Neutral Warm (#f2f0eb) as page canvas. Map green tiers to their intended role. Keep tracking tight at -0.01em. Use 50px full-pill radius on every button.

개요

스타벅스의 디자인 시스템은 모든 표면에 녹색 앞치마를 두른 따뜻하고 자신감 넘치는 소매점의 대표 매장입니다. 캔버스는 중성적이고 따뜻한 크림색(#f2f0eb)과 세라믹 황백색(#edebe9)을 번갈아 사용합니다.

독점 SoDoSans 서체는 거의 모든 표면에 사용됩니다. 그린은 각각 특정 표면 역할에 매핑된 4가지 보정된 색상(스타벅스, 액센트, 하우스, 업리프트)으로 제공됩니다.

주요 특징

  • 4단계 그린 브랜드 시스템(스타벅스/액센트/하우스/업리프트)
  • 골드는 보상 상태의 순간에만 예약됩니다
  • 차가운 흰색 대신 따뜻한 중성 캔버스(#f2f0eb / #edebe9)
  • 전체 알약 버튼(50픽셀 반경) 범용
  • 플로팅 "Frap" 원형 CTA(56px, 녹색 액센트 채우기)

해야 할 일과 하지 말아야 할 일

중립 따뜻한(#f2f0eb)을 페이지 캔버스로 사용하세요. 녹색 계층을 의도한 역할에 매핑합니다. -0.01em에서 계속 추적하세요. 모든 버튼에 50px 전체 알약 반경을 사용하세요.

概要

_スターバックスのデザイン システムは、店先のエプロンの緑色を全面にまとった、温かみと自信に満ちた小売店の旗艦です。キャンバスは、ニュートラル〜ウォーム クリーム (#f2f0eb) とセラミック オフホワイト (#edebe9) を交互に切り替えます。

独自の SoDoSans 書体は、ほぼすべての表面に配置されています。グリーンには、特定の表面の役割にマッピングされた 4 つの調整された色合い (スターバックス、アクセント、ハウス、アップリフト) があります。

主な特徴

  • 4 段階のグリーン ブランド システム (スターバックス / アクセント / ハウス / アップリフト)
  • ゴールドは特典ステータスの瞬間のみに予約されています
  • 寒色白ではなく、暖色系のキャンバス (#f2f0eb / #edebe9)
  • フルピル ボタン (半径 50 ピクセル) ユニバーサル
  • フローティング「フラップ」円形 CTA (56 ピクセル、緑のアクセント塗りつぶし)

推奨事項と禁止事項

ページ キャンバスとしてニュートラル ウォーム (#f2f0eb) を使用します。緑色の層を目的の役割にマッピングします。 -0.01em でしっかりと追跡し続けます。すべてのボタンで 50 ピクセルの丸薬半径を使用します。

Design Insights

Accessibility Considerations

Starbucks's color system, anchored by #006241, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.

Accessibility Considerations

Starbucks's color system, anchored by #006241, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.

Accessibility Considerations

Starbucks's color system, anchored by #006241, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.

· About · Contact