Starbucks
Siren Green(#00704A) 원형 사이렌 로고 + 크림 톤 + Sodo Sans의 손맛 있는 따뜻함
Brand DNA
브랜드 DNA
- 브랜드명: Starbucks (스타벅스)
- 한 줄 정체성: 커피를 매개로 사람과 사람을 잇는 "제3의 공간(The Third Place)"을 지향하는 글로벌 커피 하우스
- 공식 디자인 철학: "As we evolve to meet beautifully diverse customers all over the world, our brand has evolved, too." — 손맛(artful core)과 실용(functional)의 결합. 절제된 색·타입 가족으로 모든 접점에 일관성 부여 (Creative Expression)
- 시그니처 요소 1개: Siren Green(#00704A) 원형 사이렌(인어) 로고 + 따뜻한 크림 톤 + Sodo Sans의 인간적인 손맛
Tone & Mood
톤 & 무드
- 핵심 키워드 3개: 따뜻함, 장인정신, 친근함
- 무드 설명: 아이코닉한 사이렌 그린을 중심으로 크림·화이트가 감싸는 따뜻한 톤. 기계적 완벽함보다 살짝의 비대칭·손글씨 감성(imperfection)을 남겨 인간미를 강조한다. 매장의 원목·에이프런 그린이 그대로 디지털로 이어지는 느낌.
- 비주얼 스타일: 휴머니즘 + 레트로 크래프트 (손으로 그린 듯한 아트워크와 절제된 시스템의 결합)
- 밀도(Density): Comfortable — 메뉴·카드가 숨 쉴 공간을 두되 정보는 실용적으로 밀집
- 모서리 성향: Round (12~16px 카드, 컵·배지 등 원형 요소 다수)
- 평면성: Subtle — 얕은 그림자로 카드/버튼을 살짝 띄움
Color System
컬러 시스템 (CSS 변수)
:root {
/* Primary - Starbucks Siren Green (에이프런 그린 확장 가족) */
--color-primary-50: #E6F2ED;
--color-primary-100: #C0DFD2;
--color-primary-200: #8FC4AE;
--color-primary-300: #57A585;
--color-primary-400: #2A8965;
--color-primary-500: #00704A; /* Siren Green — 로고·에이프런 기본 */
--color-primary-600: #006241; /* Dark Green (Pantone 3425 C) */
--color-primary-700: #00543A;
--color-primary-800: #1E3932; /* House Green — 매장·다크 배경 */
--color-primary-900: #0F2420;
/* Secondary - Accent / Light Green (백그라운드 강조) */
--color-secondary-500: #D4E9E2; /* 옅은 민트 그린 액센트 */
/* Brand extras */
--color-cream: #F2F0EB; /* 크림 — 따뜻한 페이지 배경 */
--color-honey: #C8A98A; /* 원두·라떼 갈색 톤 (추정) */
/* Neutral - Warm greige */
--color-neutral-0: #FFFFFF;
--color-neutral-50: #F7F6F2;
--color-neutral-100: #F2F0EB; /* Cream */
--color-neutral-200: #E4E1D8; /* border */
--color-neutral-300: #CBC7BB;
--color-neutral-500: #9B968A;
--color-neutral-700: #5A554C; /* text secondary */
--color-neutral-800: #3A362F;
--color-neutral-900: #27251F; /* warm black — 본문 텍스트 */
--color-neutral-1000: #000000;
/* Semantic */
--color-success-bg: #E1F1E8;
--color-success-fg: #006241;
--color-warning-bg: #FBEFD6;
--color-warning-fg: #A6791C;
--color-error-bg: #FBE4E1;
--color-error-fg: #C0392B;
--color-info-bg: #E3EEF0;
--color-info-fg: #2E6B72;
/* Surface (배경 위계) */
--bg-base: #F2F0EB; /* 크림 페이지 */
--bg-subtle: #F7F6F2;
--bg-elevated: #FFFFFF; /* 카드 */
--bg-overlay: rgba(30,57,50,0.55);
/* Text 위계 */
--text-primary: #1E3932; /* House Green 톤의 딥 텍스트 */
--text-secondary: #5A554C;
--text-tertiary: #9B968A;
--text-on-primary: #FFFFFF; /* Siren Green 위 텍스트 */
--text-disabled: #CBC7BB;
/* Border */
--border-default: #E4E1D8;
--border-subtle: #F2F0EB;
--border-strong: #CBC7BB;
--border-focus: #00704A;
}
각 토큰은 사용 컨텍스트 주석 참조 — Siren Green은 로고/브랜드 액션에만, House Green은 다크 표면과 딥 텍스트에.
Typography
타이포그래피
- 폰트 페어링:
- 영문 본문: Sodo Sans (자체, 3 widths: Normal/Narrow/Condensed) — 폴백 -apple-system, "Segoe UI"
- 영문 헤드라인/웨이파인딩: Pike (자체, 임팩트·콘덴스드) — 메뉴보드 상단
- 영문 세리프 액센트: Lander (자체, 표현적 순간에만)
- 한글: Pretendard (OFL) / Noto Sans KR / Apple SD Gothic Neo
- 위계 (font-size / weight / line-height / letter-spacing):
- Display: 48px / 700 / 1.05 / -0.02em (Pike)
- H1: 34px / 700 / 1.15 / -0.01em (Pike)
- H2: 24px / 700 / 1.25 / -0.005em (Sodo Sans)
- H3: 19px / 600 / 1.35 / 0 (Sodo Sans)
- Body Large: 17px / 400 / 1.55 / 0 (Sodo Sans)
- Body: 15px / 400 / 1.55 / 0 (Sodo Sans)
- Body Small: 13px / 400 / 1.5 / 0 (Sodo Sans)
- Caption: 11px / 600 / 1.4 / 0.06em (Sodo Sans, 대문자 라벨)
Spacing
스페이싱
- Base unit: 4px (8 grid)
- 토큰: ``
css --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px;`` - Container: max-width 1200px, 좌우 패딩 20px (mobile) / 40px (desktop)
Border Radius
Border Radius
--radius-none: 0;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px; /* 카드·메뉴 타일 */
--radius-xl: 24px; /* 프로모 배너 */
--radius-full: 9999px; /* 버튼·배지·컵 */Shadow / Elevation
Shadow / Elevation
--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(30,57,50,0.06); /* 기본 카드 */
--shadow-md: 0 4px 14px rgba(30,57,50,0.10); /* 카드 hover */
--shadow-lg: 0 12px 28px rgba(30,57,50,0.16); /* 모달·드롭다운 */
--shadow-xl: 0 24px 48px rgba(30,57,50,0.22); /* 풀스크린 dialog */Iconography
Iconography
- 스타일: Outline (얇은 선, 부드러운 라운드 캡) — 매장 웨이파인딩과 동일 톤
- Stroke 굵기: 2px
- 모서리 처리: Round
- 추천 라이브러리: Phosphor / Lucide
Component Guide
컴포넌트 가이드
Button
.btn {
font: 600 15px/1 'Sodo Sans', -apple-system, 'Pretendard', sans-serif;
border-radius: var(--radius-full); /* pill — 스타벅스 시그니처 */
padding: 0 22px;
height: 44px;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
border: 1px solid transparent;
cursor: pointer;
transition: background 150ms ease, border-color 150ms ease;
}
.btn-primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.btn-primary:hover { background: var(--color-primary-600); }
.btn-primary:active { background: var(--color-primary-700); }
.btn-primary:disabled { background: var(--border-strong); color: #fff; cursor: not-allowed; }
.btn-primary.is-loading { color: transparent; position: relative; }
.btn-secondary { background: transparent; color: var(--color-primary-600); border-color: var(--color-primary-600); }
.btn-secondary:hover { background: var(--color-primary-50); }
.btn-ghost { background: transparent; color: var(--text-primary); }
.btn-ghost:hover { background: var(--bg-subtle); }
.btn-danger { background: var(--color-error-fg); color: #fff; }
.btn-danger:hover { filter: brightness(0.94); }Input
.input {
background: var(--bg-elevated);
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
padding: 12px 16px;
font: 400 15px/1.4 'Sodo Sans', 'Pretendard', sans-serif;
color: var(--text-primary);
width: 100%;
}
.input::placeholder { color: var(--text-tertiary); }
.input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(0,112,74,0.14); }
.input.is-error { border-color: var(--color-error-fg); box-shadow: 0 0 0 3px rgba(192,57,43,0.12); }
.input:disabled { background: var(--bg-subtle); color: var(--text-disabled); cursor: not-allowed; }Card
.card { background: var(--bg-elevated); border-radius: var(--radius-lg); padding: 16px; }
.card-elevated { box-shadow: var(--shadow-sm); transition: box-shadow 150ms ease; }
.card-elevated:hover { box-shadow: var(--shadow-md); }
.card-outlined { border: 1px solid var(--border-default); }
.card-menu .thumb { border-radius: var(--radius-md); aspect-ratio: 1; overflow: hidden; }
.card-menu h3 { font: 600 15px/1.3 'Sodo Sans', sans-serif; margin: 10px 0 2px; color: var(--text-primary); }
.card-menu .price { font: 600 14px/1 'Sodo Sans', sans-serif; color: var(--color-primary-600); }Badge / Tag
.tag { padding: 3px 12px; border-radius: var(--radius-full); font: 600 12px/1.5 'Sodo Sans', sans-serif; display: inline-flex; align-items: center; gap: 4px; }
.tag-solid { background: var(--color-primary-500); color: #fff; }
.tag-subtle { background: var(--color-primary-50); color: var(--color-primary-700); }
.tag-outline { border: 1px solid var(--border-strong); color: var(--text-secondary); }
.tag-star { background: #F2F0EB; color: var(--color-primary-700); } /* ☆ Rewards */Navigation (Top bar)
.topnav {
display: flex; align-items: center; gap: 24px;
padding: 12px 40px;
background: var(--bg-elevated);
border-bottom: 1px solid var(--border-subtle);
}
.topnav .brand { display: flex; align-items: center; gap: 8px; }
.topnav .brand .siren { width: 34px; height: 34px; border-radius: 50%; background: var(--color-primary-500); display: grid; place-items: center; }
.topnav .link { font: 600 14px/1 'Sodo Sans', sans-serif; color: var(--text-primary); text-decoration: none; }
.topnav .link:hover { color: var(--color-primary-600); }
.topnav .link.active { color: var(--color-primary-600); border-bottom: 2px solid var(--color-primary-500); padding-bottom: 4px; }
.topnav .join { margin-left: auto; }Motion
Motion
--duration-fast: 120ms;
--duration-base: 220ms;
--duration-slow: 400ms;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);Anti-patterns
Anti-patterns
1. Siren Green(#00704A)을 본문 텍스트나 destructive 액션에 분산 사용 금지 — 브랜드 액션·로고에만 2. 사이렌 로고를 회전·왜곡·색상 변경 금지 — 원형 비율과 그린 고정 3. 크림/화이트 캔버스 대신 채도 높은 원색 배경 금지 — 따뜻한 중성 톤 유지 4. 버튼·배지를 사각(sharp)으로 변경 금지 — pill(9999px)이 시그니처 5. Sodo Sans/Pike/Lander 외 임의 폰트 혼용 금지 — 절제된 타입 가족 유지 (특히 헤드라인에 세리프 남발 금지, Lander는 표현적 순간에만)