스타벅스에서 영감을 받은 디자인 시스템

Category: 이커머스 & 리테일 글로벌 커피 리테일 브랜드. 4단계 그린 시스템, 따뜻한 크림 캔버스, 풀 필 버튼.

1. 비주얼 테마 & 분위기

스타벅스 디자인 시스템은 매장 앞치마의 그린을 모든 화면에 걸쳐 입힌 따뜻하고 자신감 넘치는 리테일 플래그십입니다. 캔버스는 중성적인 따뜻한 크림(#f2f0eb)과 도자기 같은 오프화이트(#edebe9) 사이를 오가는데, 이는 실제 매장 소재인 종이 냅킨, 카페 벽, 우드 마감재를 참조한 색상입니다. 반면 시그니처 스타벅스 그린(#006241)은 히어로 밴드, CTA, 리워즈 경험에서 브랜드의 핵심 순간을 고정합니다. 그린은 4가지 정교하게 조율된 색조(Starbucks, Accent, House, Uplift)로 구성되며 각각 특정 서피스 역할에 매핑됩니다. 골드(#cba258)는 리워즈 상태 세리머니에서만 등장하고, 일반적인 액센트로는 사용되지 않습니다.

타이포그래피가 브랜드 보이스의 대부분을 담당합니다. 전용 SoDoSans 서체(스타벅스 커스텀)는 촘촘한 -0.16px 자간과 함께 거의 모든 화면에 사용됩니다. 패션 매거진처럼 날카롭지 않고, 자신감 있으면서도 친근하게 읽힙니다. 특이한 점은, 리워즈 페이지가 특정 헤드라인 순간에 따뜻한 세리프체("Lander Tall", "Iowan Old Style", Georgia)로 전환해 커피하우스 칠판의 향수를 은근히 담아낸다는 것입니다. 그리고 채용 페이지는 컵에 이름을 적는 느낌의 터치를 위해 손글씨 스크립트체("Kalam", "Comic Sans MS", cursive)를 사용합니다. 세 가지 서체, 세 가지 맥락—시스템은 각각의 등장 시점에 대해 철저히 규율을 지킵니다.

서피스는 둥근 형태를 통해 숨을 쉽니다. 모든 버튼은 50px 풀 필입니다. 카드는 12px 둥근 사각형을 사용합니다. “Frap” 플로팅 CTA—Green Accent(#00754A)의 56px 원형 주문 버튼—는 제품의 시그니처 깊이감 표현입니다. 오른쪽 하단에 떠 있으며 레이어드 그림자 스택(0 0 6px rgba(0,0,0,0.24) 베이스 + 0 8px 12px rgba(0,0,0,0.14) 앰비언트)을 갖고, 누를 때 scale(0.95)로 압축됩니다. 그 외의 엘리베이션은 절제되어 있습니다. 카드 그림자는 0.14/0.24 알파로 속삭이듯 유지되고, 글로벌 내비게이션은 조용한 3레이어 그림자 스택을 사용합니다. 전체 시스템은 깔끔한 카페 간판처럼 느껴집니다. 가독성 있고, 따뜻하며, 결코 소리치지 않습니다.

주요 특성:

• 4단계 그린 브랜드 시스템(Starbucks / Accent / House / Uplift): 단일 “브랜드 그린”이 아닌, 각각 고유한 서피스 역할에 매핑됨
• 골드는 리워즈 상태 순간에만 예약; 범용 액센트로 절대 사용하지 않음
• 차가운 흰색 대신 따뜻한 중성 캔버스(#f2f0eb / #edebe9) 사용 — 카페 소재 참조
• 촘촘한 -0.16px 자간의 커스텀 전용 서체(SoDoSans)가 보편적 보이스
• 맥락별 서체 전환: 리워즈에는 세리프(Lander Tall), 채용 컵 이름에는 스크립트(Kalam)
• 풀 필 버튼(50px 반경) 보편 적용, scale(0.95) 활성 프레스가 시그니처 마이크로 인터랙션
• 플로팅 “Frap” 원형 CTA(56px, Green Accent 채우기, 레이어드 그림자 스택) — 제품의 시그니처 엘리베이션 요소
• 기프트 카드 서피스는 촬영된 실제 제품으로 설계 — 모든 카드는 생성 그래픽이 아닌 고유한 일러스트 사진
• 12px 카드 반경 + 속삭이듯 부드러운 그림자로 콘텐츠 카드를 납작하되 살짝 떠 있는 느낌으로 유지
• --space-3인 1.6rem(~16px)을 기준점으로 6.4rem(~64px)까지 단계별로 올라가는 렘 기반 간격 스케일

색상 블록 페이지 리듬: 크림 히어로 → 흰색 콘텐츠 섹션 → 흰색 텍스트의 다크 그린(#1E3932) 피처 밴드 → 크림 유틸리티 존 → 골드/흰색 텍스트의 다크 그린(#1E3932) 푸터 — 밝은 본문을 에스프레소처럼 어두운 양 끝이 감싸는 구조.

2. 컬러 팔레트 & 역할

분석한 소스 페이지: 홈페이지, 리워즈, 기프트 카드, 상품 상세(Pink Energy Drink), 상품 영양 정보(Cold Brew).

기본

• Starbucks Green (#006241): 전통적인 브랜드 그린. h1 헤딩, 리워즈 페이지의 주요 섹션 헤더, 단일 지배 색상이 필요한 곳에서 메인 브랜드 신호로 사용.
• Green Accent (#00754A): 약간 더 밝고 발광감 있는 그린. 주요 채워진 CTA 색상(“Explore our afternoon menu”, “See the spring menu”)이자 플로팅 Frap 원형 버튼의 채우기 색상.
• House Green (#1E3932): 깊고 거의 검정에 가까운 브랜드 그린. 푸터 서피스, 피처 밴드 배경, 리워즈 상태 다크 서피스, 리워즈 히어로 밴드의 “Free coffee is just the beginning” 헤드라인에 사용.
• Green Uplift (#2b5148): 장식용 액센트와 다크 그라디언트 순간에 드물게 사용되는 보조 미드다크 그린.
• Green Light (#d4e9e2): 폼 유효 상태 틴트와 라이트 그린 유틸리티 서피스에 사용되는 연한 민트.

보조 & 액센트

• Gold (#cba258): 거의 리워즈 상태 세리머니 전용 — 골드 티어 콜아웃, 파트너십 배지(SkyMiles, Bonvoy), 프리미엄 느낌의 액센트. 범용 브랜드 색상으로 절대 사용하지 않음.
• Gold Light (#dfc49d): 골드 티어 섹션의 배경 워시에 사용되는 더 부드러운 골드.
• Gold Lightest (#faf6ee): 리워즈 페이지 파트너십 섹션 하단에 사용되는 크림 골드 페이지 서피스 워시 — 골드 액센트를 따뜻한 중성 시스템과 연결.

서피스 & 배경

• White (#ffffff): 기본 카드와 모달 서피스. 기프트 카드 타일의 카드 채우기에도 사용.
• Neutral Cool (#f9f9f9): 드롭다운 메뉴(“Account” 드롭다운), 폼 카드 래퍼, 조용한 유틸리티 컨테이너에 사용되는 미묘한 쿨 그레이 서피스.
• Neutral Warm (#f2f0eb): 리워즈 유틸리티 존과 히어로 밴드의 따뜻한 크림 기본 페이지 캔버스.
• Ceramic (#edebe9): 존 구분자, 부드러운 페이지 섹션 워시, 리워즈 파트너십 밴드에 사용되는 약간 더 따뜻하고 어두운 크림.
• Black (#000000): 페이지 상단 CTA 스트립(“Join now”)과 고대비 탑 내비 로그인 버튼에 예약된 짙은 잉크.

중성 & 텍스트

• Text Black (rgba(0, 0, 0, 0.87)): 밝은 서피스의 기본 헤딩 및 본문 색상. 순수 검정이 아닌 87% 불투명도의 검정으로 더 따뜻하게 읽힘.
• Text Black Soft (rgba(0, 0, 0, 0.58)): 밝은 서피스의 보조/메타데이터 텍스트.
• Text White (rgba(255, 255, 255, 1)): 다크 그린 서피스의 기본 헤딩/본문 텍스트.
• Text White Soft (rgba(255, 255, 255, 0.70)): 다크 그린 서피스의 보조 텍스트 — 푸터 링크 설명, 캡션 텍스트.
• Rewards Green (#33433d): 리워즈 페이지 텍스트 블록에서만 사용되는 전용 뮤트 슬레이트 그린 — 완전한 Starbucks Green을 사용하지 않으면서도 “리워즈 서피스”를 암시하는 약간 “먼지 낀” 독서 색상.

시맨틱 & 액센트

• Red (#c82014): 오류 및 파괴적 상태(폼 무효, 파괴적 액션).
• Yellow (#fbbc05): 경고 상태, 레거시 브랜드 터치.
• Green Light (33% 불투명도의 #d4e9e2 = hsl(160 32% 87% / 33%)): 폼 유효 필드 틴트 배경.
• Red Tint (hsl(4 82% 43% / 5%)): 폼의 무효 필드 틴트.

블랙/화이트 알파 래더

오버레이 및 보조 텍스트 사용을 위한 두 가지 병렬 반투명 스케일:

• rgba(0,0,0,0.06)부터 rgba(0,0,0,0.90)까지 10% 단계 — 밝은 서피스의 다크 오버레이용
• rgba(255,255,255,0.10)부터 rgba(255,255,255,0.90)까지 10% 단계 — 다크 서피스의 라이트 오버레이용

그라디언트 시스템

구조적 그라디언트 토큰은 관찰되지 않음. 서피스 계층은 전체적으로 단색 블록으로 구성 — 시스템은 그라디언트 대신 5단계 크림/그린 서피스 팔레트에 의존함.

3. 타이포그래피 규칙

폰트 패밀리

• 기본: SoDoSans, "Helvetica Neue", Helvetica, Arial, sans-serif — 거의 모든 서피스에 사용되는 스타벅스 전용 기업 서체
• 로딩 폴백: "Helvetica Neue", Helvetica, Arial, sans-serif — SoDoSans 로드 전 사용자에게 표시되는 서체
• 리워즈 세리프: "Lander Tall", "Iowan Old Style", Georgia, serif — 따뜻한 에디토리얼 느낌을 위해 특정 리워즈 페이지 헤드라인 순간에 사용
• 채용 스크립트: "Kalam", "Comic Sans MS", cursive — 스타벅스 컵에 적힌 손글씨 이름을 참조하여 채용 페이지 “컵 이름” 장식 터치에만 사용

:root에서 명시적으로 활성화된 OpenType 스타일 세트 없음.

계층 구조

자간 토큰:

• letterSpacingNormal: -0.01em (기본 — 촘촘하고 특징적)
• letterSpacingLoose: 0.1em (강조 캡스)
• letterSpacingLooser: 0.15em (대문자 스타일 레이블, 극단적 강조)

행 높이 토큰:

• lineHeightNormal: 1.5 (본문)
• lineHeightCompact: 1.2 (디스플레이/버튼)

원칙

• 촘촘한 네거티브 트래킹(-0.01em) 은 거의 보편적으로 적용됩니다. 제품 전체가 약간 압축되어 읽히는데, 이는 SoDoSans에 쥐어짜인 느낌 없이 자신감 있는 존재감을 부여합니다.
• 계층은 크기가 아닌 굵기 변화로 전달합니다. H1과 H2는 동일한 24px/36px 크기를 공유하며, 굵기(600 대 400)와 색상(Starbucks-Green 대 Text Black)만으로 구분됩니다.
• 크기 토큰은 렘을 사용하며, 이 사이트에서는 1rem = 10px로 고정됩니다(font-size: 62.5% 루트 트릭 사용). 따라서 1.6rem = 16px, 2.4rem = 24px 등. 스케일은 시맨틱(textSize-1부터 textSize-10까지)이며, 임의적인 픽셀 값이 아닙니다.
• 맥락별 서체 전환 — 리워즈의 세리프, 채용의 스크립트 — 은 의도적이고 한정적입니다. 동일한 서피스 내에서 기본 산세리프와 혼합하지 마십시오.
• 본문 텍스트는 절대 순수 검정이 아닙니다 — 따뜻한 중성 캔버스 온도에 맞추기 위해 rgba(0,0,0,0.87)에 위치합니다.

폰트 대체에 관한 참고사항

SoDoSans는 스타벅스 전용 서체입니다(House Industries 라이선스, 공개적으로 이용 불가). 합리적인 오픈소스 대체재:

• Inter (Google Fonts) — 유사한 휴머니스트 기하학적 비율, 다양한 굵기 범위
• Manrope — 약간 더 둥글고 유사한 자신감 있는 느낌
• Nunito Sans — 더 따뜻하고, “카페” 브랜드 대체로 적합

대체 시, 촘촘한 -0.01em / -0.16px 트래킹이 여전히 잘 읽히는지 확인하십시오. 일부 오픈소스 폰트는 -0.005em이 필요할 수 있습니다.

Lander Tall(리워즈 세리프)도 커스텀입니다 — 오픈소스 대체재: Iowan Old Style(이미 폴백에 포함), Lora, 또는 Source Serif Pro. Kalam(채용 스크립트)은 Google Fonts에서 직접 이용 가능합니다.

4. 컴포넌트 스타일링

버튼

1. 기본 채워진 버튼 — “Explore our afternoon menu / Sign up for free”

• 배경: #00754A (Green Accent)
• 텍스트: #ffffff
• 테두리: 1px solid #00754A
• 반경: 50px (풀 필)
• 패딩: 7px 16px
• 폰트: SoDoSans, 16px, 굵기 600, 자간 -0.01em
• 활성 상태: --buttonActiveScale을 통한 transform: scale(0.95)
• 전환: all 0.2s ease

2. 기본 아웃라인 버튼 — “Give them a try / Start an order”

• 배경: 투명
• 텍스트: #00754A (Green Accent)
• 테두리: 1px solid #00754A
• 반경/패딩/활성/전환은 기본 채워진 버튼과 동일

3. 블랙 채워진 버튼 — “Join now”

• 배경: #000000
• 텍스트: #ffffff
• 테두리: 1px solid #000000
• 반경: 50px, 패딩: 7px 16px
• 폰트: 14px, 굵기 600
• 페이지 상단 가입 스트립과 유사한 전환 순간에 사용

4. 다크 아웃라인 — “Sign in”

• 배경: 투명
• 텍스트: rgba(0, 0, 0, 0.87) (Text Black)
• 테두리: 1px solid rgba(0, 0, 0, 0.87)
• 반경: 50px, 패딩: 7px 16px
• 폰트: 14px, 굵기 600

5. 그린 위 그린 반전 — “See the spring menu”

• 배경: #ffffff
• 텍스트: #00754A
• 테두리: 1px solid #ffffff
• 버튼 뒤 서피스가 다크 그린 House Green 밴드인 경우 사용 — 그린 배경 위에 채워진 그린 필 대신 화이트 버튼에 그린 텍스트

6. 다크 위 아웃라인 — “Learn more / Order now”

• 배경: 투명
• 텍스트: #ffffff
• 테두리: 1px solid #ffffff
• 화이트 채워진 CTA와 짝을 이루는 보조 액션을 위해 다크 그린 피처 밴드에 사용

7. 동의 버튼 (다크 그린 변형)

• 배경: rgb(0, 130, 72) (쿠키 동의 모듈에 사용되는 특정 변형 그린)
• 텍스트: #ffffff
• 테두리 없음, 50px 반경, 7px 16px 패딩, 14px / 굵기 400
• Green Accent보다 약간 더 밝음 — 동의 배너 동의 액션에 예약

8. Frap — 플로팅 원형 주문 버튼

• 배경: #00754A (Green Accent)
• 아이콘: #ffffff
• 크기: 5.6rem / 56px (표준), 4rem / 40px (미니 변형)
• 반경: 50% (완전한 원)
• 오른쪽 하단 고정, 추가 탭 편의를 위한 -0.8rem 터치 오프셋
• 그림자 스택: 베이스 0 0 6px rgba(0,0,0,0.24) + 앰비언트 0 8px 12px rgba(0,0,0,0.14)
• 활성 상태: 앰비언트 그림자가 0 8px 12px rgba(0,0,0,0)으로 페이드
• 제품의 시그니처 엘리베이션 요소 — 모든 스크롤된 서피스 위에 떠 있음

9. 전체 너비 피드백 탭 — “Provide feedback”

• 배경: #00754A
• 텍스트: #ffffff
• 반경: 12px 12px 0px 0px (상단 둥글기만)
• 패딩: 8px 16px
• 폰트: 14px, 굵기 400
• 뷰포트 가장자리에 부착되어 오른쪽 하단 내부에 고정 배치

카드 & 컨테이너

콘텐츠 카드 (기본)

• 배경: #ffffff (--cardBackgroundColor)
• 반경: 12px (--cardBorderRadius)
• 그림자: 0px 0px .5px 0px rgba(0,0,0,0.14), 0px 1px 1px 0px rgba(0,0,0,0.24) (--cardBoxShadow)
• 사용처: 피처 카드, 메뉴 아이템 타일, 리워즈 상태 패널

기프트 카드 타일

• 배경: 일러스트 사진이 카드를 채움(단색 배경 없음)
• 반경: 카드와 유사(~12px, 모서리가 약간 더 타이트)
• 그림자: 기본 카드보다 가벼움 — 캔버스 위에 놓인 실제 카드처럼 처리됨
• 카드 그리드 위에 카테고리 레이블로 분류(Spring, Thank You, Birthday, Celebration, Mother’s Day, Appreciation, Encouragement, Milestones, Anytime)

리워즈 상태 카드 (리워즈 페이지 시그니처)

• 3열 그리드: Bronze / Gold / Silver — 각각 다크 그린(#1E3932) 패널:
  • 컬러 그라디언트/색상 헤더 링
  • 번호가 매겨진 “Level” 배지
  • 큰 SoDoSans 굵기 600의 상태 제목
  • 흰색/반투명 흰색 텍스트의 별/혜택 목록
  • 하단 “As you earn more stars…” 진행 캡션

파트너십 카드 (리워즈)

• 배경: #faf6ee (Gold Lightest) 따뜻한 크림 서피스
• 콘텐츠: 파트너 로고(“SkyMiles”, “Bonvoy”)가 중앙 배치, 아래 설명 텍스트
• 반경과 그림자는 기본 카드 스펙을 따름

드롭다운 메뉴 (계정 드롭다운, 탑 내비)

• 배경: #f9f9f9 (Neutral Cool)
• 메뉴 아이템: Text Black에서 24px / 굵기 400
• 테두리 없음 — 화이트 내비 대비 배경 서피스 전환만

모달

• 패딩: 2.4rem (--modalPadding)
• 상단 패딩: 8.8rem (--modalTopPadding) — 닫기 버튼/헤더를 위한 공간
• 수직 패딩 합계: 11.2rem
• 반경은 카드 스펙에서 상속(12px)

입력 & 폼

플로팅 레이블 입력

• 포커스/채워진 상태에서 레이블이 입력 테두리 위로 떠오름
• 데스크톱 레이블 폰트 크기: 기본 1.9rem, 활성 시 1.4rem으로 애니메이션
• 모바일 레이블 폰트 크기: 기본 1.6rem, 활성 시 1.3rem으로 애니메이션
• 레이블 수평 오프셋: 왼쪽에서 12px
• 활성 레이블 이동: -50% Y 이동과 함께 -12px 위로
• 필드 패딩: 12px
• 폼 수평 패딩: 1.6rem
• 유효성 검사: 유효한 필드는 rgba(green-light, 0.33) 틴트; 무효 필드는 rgba(red, 0.05) 틴트
• 전환: 체크된 입력에 0.3s option-label-marker-expansion cubic-bezier(0.32, 2.32, 0.61, 0.27)

옵션 아이콘 (체크박스/라디오)

• 패딩: 3px 내부
• 위의 체크된 입력 큐빅 베지어 애니메이션 사용(약간 “스프링감 있는” 2.32 오버슈트 곡선)

내비게이션

글로벌 내비 (탑 바)

• 점진적 높이로 고정 배치: 64px xs → 72px 모바일 → 83px 태블릿 → 99px 데스크톱
• 그림자 스택: 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) — 3레이어 부드러운 리프트
• 왼쪽: 스타벅스 워드마크 로고, 왼쪽 가장자리에서 99px(md) / 131px(lg) 오프셋
• SoDoSans 굵기 400–600의 인라인 기본 링크: Menu · Rewards · Gift Cards
• 오른쪽: 매장 찾기 링크 + 로그인(아웃라인) + 지금 가입(블랙 채워진)

서브 내비 (두 번째 바, 예: 리워즈 내부)

• 높이: 53px (글로벌 서브내비) / 48px (내부 서브내비)
• 일반적으로 글로벌 내비 아래 수평 탭 그룹

모바일 내비

• 태블릿 브레이크포인트 이하에서 햄버거 드로어로 접힘
• Frap 플로팅 버튼은 내비 상태와 무관하게 오른쪽 하단에 유지

이미지 처리

• 히어로 사진: 제품 사진(컬러 배경의 투명 유리에 담긴 음료 — 코랄, 세이지, 따뜻한 앰버)이 스플릿 히어로 레이아웃의 ~40vw를 차지; 텍스트가 나머지 60vw 차지(--headerCrateProportion: 40vw / --contentCrateProportion: 60vw)
• 기프트 카드 일러스트: 각 카드는 고유한 일러스트 사진(채색된 느낌, 손으로 그린 것 같은, 따뜻한 색상 팔레트). 일반적인 생성 그래픽 사용 금지.
• 리워즈 세리머니 이미지: 손에 들고 비스듬한 각도로 찍힌 스타벅스 리워즈 앱 화면 사진 — 맥락 속의 제품 사진.
• 메뉴 썸네일: 깨끗한 화이트/크림 배경과 유리 주위의 살짝 부드러운 드롭 그림자가 있는 정사각형 또는 4:3 제품 사진.
• 이미지 페이드인: 이미지 로드 시 opacity 0.3s ease-in 전환(--imageFadeTransition).

피처 밴드 (다크 그린 히어로 스트립)

전체 너비의 #1E3932 (House Green) 밴드:

• 왼쪽: 흰색 헤드라인 + 서브헤드 + CTA 행
• 오른쪽: 제품 사진 또는 일러스트
• 섹션에 따라 ~40/60 또는 50/50 분할 비율
• 전체적으로 흰색 텍스트, 보조 카피에는 rgba(255,255,255,0.70)
• CTA는 그린 위 그린 반전(화이트 채워진) + 다크 위 아웃라인(화이트 아웃라인) 쌍을 따름

익스팬더 / 아코디언

• 지속 시간: 300ms (--expanderDuration)
• 타이밍 곡선: cubic-bezier(0.25, 0.46, 0.45, 0.94) — 측정된 이즈아웃
• 리워즈 및 기프트 페이지의 FAQ 섹션에 사용

쿠키 동의 모듈

“동의”(그린 채워진)와 “환경 설정 관리”(아웃라인) 버튼이 있는 페이지 상단의 다크 그린 모달 카드. 첫 방문 시 나타나며 닫을 수 있음.

상품 상세 컴포넌트 (PDP 시그니처 클러스터)

메뉴 상품 페이지(예: 음료 상세는 /menu/product/40498/iced, 영양 정보는 /menu/product/.../nutrition)에서 사용되는 반복 컴포넌트 클러스터. 토큰을 변경하지 않으면서 컴포넌트 인벤토리를 확장합니다.

사이즈 옵션 셀렉터

• 4개의 컵 아이콘 버튼 수평 행(Tall / Grande / Venti / Trenta)
• 각 항목: 상단에 컵 실루엣 아이콘, 아래에 사이즈 이름(Starbucks-Green의 16/700), 액체 온스 캡션(Text Black Soft의 13/400)
• 활성 상태: 선택된 컵 아이콘 주위에 그린 원형 링 아웃라인(2px solid #00754A)
• 비활성: 링 없음, 동일한 타이포그래피
• 전체 너비 행, 균등 간격
• 컨테이너 반경: 12px 또는 플랫; 개별 아이콘은 50% 원형
• 패딩: 16px 24px 내부

에드인 / 우유 선택 (아웃라인 사각형)

• 배경: #ffffff
• 테두리: 1px solid #d6dbde (입력 테두리)
• 반경: 4px
• 열 내에서 전체 너비
• 상단 테두리 위 플로팅 레이블: “Add-ins” / “Milk” / “Add-ins” — Text Black의 13/700, 대문자, 0.325px 자간
• 중앙에 표시된 값(예: “Ice”, “Coconut”, “Strawberry Fruit Inclusions scoop”): 16/400 Text Black
• 오른쪽 Text Black Soft의 셰브론 다운 아이콘
• 포커스: 테두리가 Green Accent(#00754A)로 전환

숫자 스테퍼

• 수량이 필요한 경우(예: Strawberry Fruit Inclusions scoop) 에드인 행 내부에 삽입
• − 마이너스 버튼 + 카운트 숫자 + + 플러스 버튼, 레이블 오른쪽에 모두 인라인
• 버튼: 1px solid #d6dbde 테두리의 원형 32×32px, 중성 그레이 아이콘
• 카운트 숫자: 중앙 정렬된 16/700 Text Black

커스터마이즈 버튼

• 배경: #ffffff
• 텍스트: #00754A (Green Accent)
• 테두리: 1.5px solid #00754A
• 반경: 50px (풀 필)
• 패딩: 14px 40px (기본 필보다 넉넉하게 큰 — 보조 기본 액션)
• 레이블: “Customize”와 금색 스파클 ✨ 아이콘이 왼쪽에 삽입
• 사용처: 사이즈/우유 선택 후 음료 커스터마이즈 플로우 진입

주문에 추가 버튼 (PDP)

• 배경: #00754A (Green Accent)
• 텍스트: #ffffff
• 반경: 50px
• 패딩: 14px 32px
• 상품 카드 오른쪽 상단 고정 및/또는 매장 이용 가능 밴드 내 오른쪽 정렬
• 다른 기본 CTA와 동일한 scale(0.95) 활성 동작

리워즈 코스트 필 — “200★ item”

• 배경: 투명
• 테두리: 1px solid #cba258 (Gold)
• 텍스트: #cba258 (Gold)
• 반경: 50px (풀 필)
• 패딩: 4px 12px
• 콘텐츠: “200★ item” — ★은 작은 채워진 별 글리프로 이 항목 리딤에 필요한 리워즈 별 표시
• 폰트: Proxima Nova 13/700, 0.5px 자간
• 리워즈 리딤 가능한 상품에만 사용

상품 설명 밴드

• 전체 너비 다크 그린 밴드(#1E3932 House Green)
• 위에서 아래로 포함:
  1. 해당하는 경우 리워즈 코스트 필(골드)
  2. 흰색 상품 설명 본문 카피(16/400/1.5)
  3. 인포 아이콘 툴팁과 함께 인라인 영양 요약(“140 calories, 25g sugar, 2.5g fat”) — 14/700 흰색
  4. “Full nutrition & ingredients list” 아웃라인-화이트-온-그린 필 버튼
• 패딩: 32px 수직
• 기본 상품 헤더 밴드 아래 표시

재료 / 영양 테이블

• 영양 정보 페이지의 2열 레이아웃
• 왼쪽 열: “Ingredients” 헤더 + 목록 또는 설명 단락이 있는 “Not available for this item” 플레이스홀더 텍스트 블록(Text Black Soft 14/400)
• 오른쪽 열: “Nutrition” 헤더 + 레이블/값 행
• 각 행: 왼쪽에 영양소 레이블(Proxima Nova 14/400), 오른쪽에 값(예: “140 calories”, “25g”, “205 mg**”), 아래에 1px solid #e7e7e7 헤어라인 구분
• 하단 카페인/별표 마커에 대한 각주: 13/400 Text Black Soft
• 영양 성분 규정 준수 테이블을 위한 재사용 가능한 패턴

매장 이용 가능 셀렉터

• 사이즈 옵션 행 위의 다크 그린 피처 밴드에 표시
• 투명-화이트 내부의 전체 너비 둥근 사각형
• 텍스트: 흰색으로 “For item availability, choose a store”, 14/400
• 오른쪽: 셰브론 다운 어포던스 + 흰색 아웃라인의 쇼핑백 SVG 아이콘
• 반경: 4px
• 높이: ~48px

PDP 브레드크럼

• 상품 제목 위의 “Menu / Refreshers / Pink Energy Drink” 트레일
• 구분자: Text Black Soft의 / 슬래시 문자
• 현재 페이지는 링크 없음, 이전 페이지는 밑줄 있는 그린 액센트 링크
• 폰트: 14/400 Proxima Nova
• 모든 PDP 페이지에 표시

백 셰브론 링크 (PDP 영양 / 상세 서브 페이지)

• 영양 정보 페이지의 섹션 헤딩 위 ”← Back” 텍스트 링크
• Green Accent(#00754A) 14/700 Proxima Nova 텍스트
• 동일한 그린의 왼쪽 셰브론 <
• 깊은 서브 페이지의 전체 브레드크럼 대안

5. 레이아웃 원칙

간격 시스템

렘 기반 시맨틱 스케일(기준 1rem = 10px):

거터 토큰:

• --outerGutter: 1.6rem (16px, 기본 / 모바일)
• --outerGutterMedium: 2.4rem (24px, 태블릿)
• --outerGutterLarge: 4.0rem (40px, 데스크톱)

보편적 리듬 상수: 1.6rem(16px)은 기본 외부 거터, 카드 패딩 기준선, 텍스트 사이즈 3 본문으로 모든 페이지에 나타나는 가장 빈번한 간격 단위입니다.

그리드 & 컨테이너

• 열 너비 스케일: --columnWidthSmall: 343px / Medium: 500px / Large: 720px / XLarge: 1440px
• 기프트 카드 그리드는 ~343px 타일의 3-5개 반응형 그리드 사용
• 리워즈 상태 섹션: lg+ 브레이크포인트에서 3개의 다크 그린 패널
• 히어로: --headerCrateProportion / --contentCrateProportion을 통한 비대칭 40%(이미지) / 60%(콘텐츠) 분할

공백 철학

공백은 “카페 안의 넉넉한 공간”이라는 느낌을 전달합니다. 섹션 패딩은 넉넉한 편입니다(40–64px). 콘텐츠 블록은 구분선보다 공백으로 구분됩니다. 크림 캔버스(#f2f0eb)는 그 자체로 흰색 카드와 그린 피처 밴드 사이의 시각적 숨통입니다.

테두리 반경 스케일

6. 깊이 & 엘리베이션

그림자 철학: 속삭이듯 부드럽고, 단색 위에 레이어드 — 이 시스템은 단일 무거운 드롭 그림자를 사용하지 않습니다. 대신 오프셋이 다른 2–3개의 낮은 알파 그림자를 쌓아 실세계의 앰비언트 + 직접 조명을 시뮬레이션합니다. Frap 버튼은 어떤 페이지에서든 가장 높이 올라간 요소입니다.

장식적 깊이

• 그라디언트 시스템 없음 — 서피스는 단색 블록
• 색상 블록 밴딩이 지각된 깊이를 전달합니다(다크 그린 밴드는 크림/흰색 본문 섹션 사이의 “함몰된 피처 존”으로 읽힘)
• 스타벅스 카드 비주얼의 SVG 필터 그림자는 box-shadow 없이 살짝 3D 물리감을 더함

7. 해야 할 것과 하지 말아야 할 것

해야 할 것

• 순수 흰색 대신 Neutral Warm(#f2f0eb) 또는 Ceramic(#edebe9)을 페이지 캔버스로 사용 — 따뜻한 크림이 시그니처
• 그린 단계를 의도한 서피스 역할에 매핑 — 헤딩에는 Starbucks Green, CTA에는 Green Accent, 딥 밴드에는 House Green, 장식에는 Uplift
• 시스템 전체에서 SoDoSans에 -0.01em / -0.16px의 촘촘한 트래킹 유지
• 예외 없이 모든 버튼에 50px 풀 필 반경 적용
• 보편적인 버튼 활성 상태로 transform: scale(0.95) 적용
• 골드는 리워즈 상태 세리머니 순간에만 예약
• 거의 모든 곳에 SoDoSans 사용; 리워즈 에디토리얼 헤드라인에만 Lander Tall 세리프로 전환; 채용 “컵 이름” 순간에만 Kalam 스크립트 예약
• 엘리베이션을 위해 하나의 무거운 드롭 그림자 대신 2–3개의 낮은 알파 그림자 레이어
• 모든 쇼핑 서피스에서 Frap 원형 CTA를 지속적인 플로팅 주문 진입점으로 사용
• 콘텐츠 카드 사이에서 크림 캔버스가 숨쉬게 두기 — 구분선 대신 공백 사용

하지 말아야 할 것

• 페이지 캔버스로 순수 흰색 사용 금지 — 따뜻한 크림 온도는 필수적
• “하나의 브랜드 그린”을 선택하지 말 것 — 4가지 그린 시스템은 의도적; #006241만 사용하면 브랜드가 평탄해짐
• 골드를 범용 액센트로 사용 금지 — 리워즈 신호 전용
• 버튼 모서리를 직각으로 만들지 말 것 — 50px 필은 보편적
• 그라디언트 채우기 도입 금지 — 시스템은 전체적으로 색상 블록
• h1과 h2를 크기로 대비시키지 말 것 — 계층 구조는 굵기 + 색상에서 나옴(600 Starbucks-Green 대 400 Text Black)
• 본문 텍스트에 순수 검정 사용 금지 — rgba(0,0,0,0.87)이 따뜻한 캔버스와 어울림
• 버튼에서 scale(0.95) 활성 피드백 생략 금지 — 시그니처 마이크로 인터랙션
• 단일 무거운 그림자 사용 금지; 항상 2–3개의 낮은 알파 그림자 레이어
• 메인 쇼핑 플로우에 세리프나 스크립트 도입 금지 — 각각 리워즈와 채용 맥락에 속함

8. 반응형 동작

브레이크포인트

컴포넌트 너비 토큰과 점진적 내비 높이에서 추론:

터치 타겟

• 7px 16px 패딩의 필 버튼은 약 32px 높이로 측정됨 — 터치 전용 서피스의 44px WCAG AAA 최소값 이하. 모바일에서 버튼 패딩이 시각적으로 확장될 수 있음.
• 56px의 Frap 플로팅 원형 버튼은 최솟값을 충분히 상회.
• Frap은 시각적 가장자리 너머 8px로 탭 영역을 확장하기 위해 --frapTouchOffset: calc(-1 * .8rem) 사용.
• 폼 플로트 레이블 입력은 모바일에서 레이블 폰트 크기가 커짐(데스크톱 1.9rem 기준 대비 1.6rem) — 팔을 뻗은 거리에서 탭하고 읽기 더 쉬움.

접기 전략

• 글로벌 내비 높이가 점진적으로 확장: 단일 값이 아닌 브레이크포인트에 걸쳐 64 → 72 → 83 → 99px
• 히어로 분할 접힘: 40/60 비대칭 분할 → 모바일에서 스택(이미지 위, 콘텐츠 아래)
• 기프트 카드 그리드: 조정된 카드 너비와 함께 브레이크포인트에 걸쳐 5개 → 4개 → 3개 → 2개 → 1개
• 피처 밴드: 전체 너비 유지, 모바일에서 텍스트 + 이미지 수직 스택
• 외부 거터 확장: 뷰포트가 커짐에 따라 16px → 24px → 40px
• 리워즈 3열 상태 패널: 모바일에서 단일 열로 스택

이미지 동작

• 히어로 제품 사진은 모바일에서 수직으로 더 타이트하게 크롭; 콘텐츠가 시각적 앵커
• 기프트 카드 일러스트는 화면 비율 유지; 카드 그리드가 리플로우
• 이미지 로드 시 opacity 0.3s ease-in 페이드인 전환(갑작스러운 팝인 방지)
• 리워즈 앱-인-핸드 사진은 비례적으로 확장; 절대 늘어나지 않음

9. 에이전트 프롬프트 가이드

빠른 색상 참조

• 기본 CTA: “Green Accent (#00754A)”
• 기본 CTA 텍스트: “White (#ffffff)”
• 브랜드 헤딩: “Starbucks Green (#006241)”
• 피처 밴드 / 푸터: “House Green (#1E3932)”
• 페이지 캔버스: “Neutral Warm (#f2f0eb)”
• 카드 캔버스: “White (#ffffff)”
• 밝은 배경의 헤딩 텍스트: “Text Black (rgba(0,0,0,0.87))”
• 밝은 배경의 본문 텍스트: “Text Black Soft (rgba(0,0,0,0.58))”
• 다크 그린 배경의 본문 텍스트: “Text White Soft (rgba(255,255,255,0.70))”
• 리워즈 액센트: “Gold (#cba258)”
• 리워즈 텍스트: “Rewards Green (#33433d)”
• 파괴적: “Red (#c82014)“

예시 컴포넌트 프롬프트

1. “Green Accent(#00754A) 배경, 흰색 텍스트 ‘Explore our afternoon menu’, SoDoSans 폰트 16px 굵기 600, -0.01em 자간, 50px 테두리 반경(풀 필), 7px 16px 패딩으로 기본 스타벅스 CTA 필 버튼을 만드세요. 0.2s ease 전환과 함께 활성 상태로 transform: scale(0.95)를 적용하세요.”

2. “12px 테두리 반경, 레이어드 그림자 0 0 0.5px rgba(0,0,0,0.14), 0 1px 1px rgba(0,0,0,0.24)의 White(#ffffff) 배경 콘텐츠 카드를 디자인하세요. 콘텐츠에 16–24px 패딩(--space-3부터 --space-4)을 적용하세요. 16px 간격으로 형제 요소와 함께 Neutral Warm(#f2f0eb) 페이지 캔버스 위에 배치하세요.”

3. “Frap 플로팅 원형 주문 버튼을 만드세요 — 56px 지름, Green Accent(#00754A) 채우기, 중앙에 흰색 쇼핑백 아이콘. 레이어드 그림자: 0 0 6px rgba(0,0,0,0.24) + 0 8px 12px rgba(0,0,0,0.14). -0.8rem 터치 오프셋과 함께 오른쪽 하단에 고정 배치. 활성 상태에서 앰비언트 그림자가 scale(0.95)와 함께 0 8px 12px rgba(0,0,0,0)으로 접힘.”

4. “다크 그린 피처 밴드를 만드세요 — House Green(#1E3932) 배경의 전체 너비 섹션. 왼쪽 열: 흰색 SoDoSans h2 24px 굵기 600, 이어서 Text White Soft(rgba(255,255,255,0.70)) 본문 단락, 두 버튼이 있는 CTA 행(기본은 Green Accent 텍스트의 White 채우기, 보조는 Outlined-on-Dark 흰색 테두리). 오른쪽 열: 제품 사진. 분할 비율 40/60, 768px 이하에서 수직 스택.”

5. “리워즈 상태 카드를 만드세요 — 12px 테두리 반경의 House Green(#1E3932) 패널, 컬러 그라디언트 상단 스트라이프(Bronze/Silver/Gold 티어). 흰색으로 SoDoSans 24px 굵기 600 제목. rgba(255,255,255,0.70) 보조 캡션이 있는 흰색 글머리 혜택 목록. 하단 진행 텍스트는 Text White Soft. lg+에서 3패널 그리드, 모바일에서 단일 열.”

6. “기프트 카드 타일을 디자인하세요 — 카드 반경 12px 일치, 전체 서피스로 일러스트 사진(손으로 그린 수채화 느낌) 채우기. 미묘한 드롭 그림자로 크림 캔버스 위에 실제 카드처럼 느껴지게 합니다. 그리드 위 SoDoSans 24px 굵기 400의 카테고리 레이블(‘Spring’, ‘Thank You’, ‘Birthday’) 하단에 그룹화.”

7. “스타벅스 상품 상세 헤더를 만드세요 — 상품 제목 위에 14/400 흰색으로 ‘Menu / Refreshers / Pink Energy Drink’ 브레드크럼이 있는 House Green(#1E3932) 밴드, SoDoSans 32/700 대문자 흰색 제목. 제목 아래 중앙 제품 사진. 사진 아래: 4개의 사이즈 셀렉터 행 — 각 컵 아이콘 버튼은 수직 컵 실루엣, 사이즈 이름(‘Tall’ / ‘Grande’ / ‘Venti’ / ‘Trenta’) 16/700 흰색, 액체 온스 13/400 Text White Soft. 선택된 사이즈는 컵 아이콘을 2px solid #00754A 원형 링으로 감쌈.”

8. “스타벅스 커스터마이즈 플로우를 만드세요 — 사이즈 셀렉터 아래, 3개의 스택된 아웃라인 사각형 입력 행(흰색 배경, 1px solid #d6dbde 테두리, 4px 반경). 각각 상단 테두리 위에 13/700 Text Black 대문자 플로팅 레이블(‘Add-ins’, ‘Milk’, ‘Add-ins’). 중앙 값(예: ‘Ice’, ‘Coconut’). 오른쪽: Text Black Soft의 셰브론 다운. 스쿱 행에는 원형 32px 아웃라인 버튼(− 1 +)의 숫자 스테퍼 삽입. 세 필드 아래: 금색 스파클 아이콘, 50px 반경, 14px 40px 패딩의 아웃라인 그린 ‘Customize’ 필. 같은 행에 Green Accent 채워진 ‘Add to Order’ 필 쌍.”

9. “스타벅스 상품 설명 밴드를 디자인하세요 — 상품 헤더 아래 전체 너비 House Green(#1E3932). 상단: 골드 아웃라인 ‘200★ item’ 리워즈 코스트 필(50px 반경, 4px 12px 패딩, 골드 #cba258 테두리와 텍스트). 아래: 흰색 16/400/1.5 상품 설명. 흰색 14/700 인라인 영양 요약(‘140 calories, 25g sugar, 2.5g fat’)과 인포 아이콘 툴팁. 아웃라인-화이트-온-그린 필 버튼 ‘Full nutrition & ingredients list’. 32px 수직 패딩.”

10. “스타벅스 영양 성분 테이블을 만드세요 — White 카드 내부의 2열 레이아웃. 왼쪽 열: ‘Ingredients’ 헤더(24/400 Text Black), 이어서 재료 목록 또는 14/400 Text Black Soft의 ‘Not available for this item’ 플레이스홀더 단락. 오른쪽 열: ‘Nutrition’ 헤더, 이어서 1px solid #e7e7e7 헤어라인으로 구분된 레이블/값 행(영양소 이름 왼쪽, 값 오른쪽). 타이포그래피: 레이블은 14/400 Text Black, 값은 오른쪽 정렬 14/700 Text Black. 하단의 각주 별표 마커는 13/400 Text Black Soft.”

반복 가이드

이 디자인 시스템으로 생성된 기존 화면을 다듬을 때:

1. 한 번에 하나의 컴포넌트에 집중하세요
2. 이 문서의 특정 색상 이름과 헥스 코드를 참조하세요
3. 정확한 값과 함께 자연어 설명(“따뜻한 크림 캔버스”, “4단계 그린 시스템”)을 사용하세요
4. 50px 필 + scale(0.95) 활성 상태를 보편적으로 유지하세요
5. 그린이 올바른 역할에 매핑되어 있는지 확인하세요(CTA에 Green Accent, 헤딩에 Starbucks Green, 밴드에 House Green)
6. 그라디언트 도입 금지 — 시스템은 색상 블록
7. 전체적으로 SoDoSans 트래킹을 -0.01em / -0.16px로 유지하세요

알려진 공백

• SoDoSans는 Google Fonts에서 이용할 수 없는 전용 서체입니다 — 공개적으로 구현할 때 Inter 또는 Manrope을 대체로 사용하고 교체를 문서화하세요
• Lander Tall(리워즈 세리프)도 커스텀 — Iowan Old Style, Lora, 또는 Source Serif Pro로 대체
• 문서화된 몇 가지(--duration: 0.4s, --iconTransition: all ease-out 0.2s, --expanderDuration: 300ms) 이외의 모든 인터랙티브 서피스에 대한 컴포넌트별 애니메이션 타이밍은 미캡처
• 폼 오류 상태 전체 스타일링(빨간 테두리 굵기, 아이콘 배치)은 틴트 토큰에서 확인되나 완전히 추출되지 않음
• 채용 페이지 전용 컴포넌트(컵 이름 카드, 검색 라디오 그리드)는 토큰 이름에서 참조되나 이 추출에서 다루지 않음
• Starbucks Visa Card / Starbucks-Card (SVC) 상세 목업 스펙은 --svcRoundedCorners 및 --svcSvcShadowFilter 토큰으로 암시되나 완전히 문서화되지 않음