# Дизайн-система натхненна Starbucks

> Category: Електронна комерція та рітейл
> Глобальний бренд роздрібної торгівлі кавою. Чотирирівнева зелена система, тепло-кремовий канвас, кнопки у вигляді повних заокруглень.

## 1. Візуальна тема та атмосфера

Дизайн-система Starbucks — це **тепла, впевнена флагманська роздрібна вітрина**, що несе зелений колір фартуха їхніх закладів на кожній поверхні. Канвас чергується між нейтрально-теплим кремовим (`#f2f0eb`) та керамічно-білим відтінком (`#edebe9`) — кольорами, що відсилають до реальних матеріалів закладу: паперових серветок, стін кафе, дерев'яних оздоблень, — тоді як фірмовий **Starbucks Green** (`#006241`) слугує якорем бренду на головних смугах, CTA-елементах та інтерфейсі програми Rewards. Зелені представлені чотирма відкаліброваними відтінками (Starbucks, Accent, House, Uplift), кожен із яких закріплений за певною роллю поверхні, а золотий (`#cba258`) використовується виключно як елемент церемоніальності статусу Rewards — не як загальний акцентний колір.

Типографіка несе в собі основний голос бренду. Фірмовий шрифт **SoDoSans** (розроблений на замовлення Starbucks) використовується майже на кожній поверхні зі щільним міжлітерним інтервалом `-0.16px` — він сприймається як впевнений та дружній, а не суворий, як у модному журналі. Нетипово: на сторінці Rewards для певних заголовних моментів застосовується тепла засічка (`"Lander Tall", "Iowan Old Style", Georgia`), що ненав'язливо відсилає до ностальгійного відчуття крейдяної дошки в кав'ярні. А на сторінках Careers використовується рукописний шрифт (`"Kalam", "Comic Sans MS", cursive`) для персональних штрихів із іменами на стаканчиках. Три шрифти, три контексти — система чітко регламентує, де кожен із них з'являється.

Поверхні «дихають» завдяки заокругленій геометрії. Кожна кнопка має радіус 50px (повне заокруглення). Картки мають радіус 12px. Плаваюча CTA-кнопка «Frap» — кругла кнопка замовлення діаметром 56px у Green Accent (`#00754A`) — є фірмовим елементом глибини продукту: вона висить у нижньому правому куті з нашаруванням тіней (`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` альфа, глобальна навігація отримує тихе трирівневе нашарування тіней. Вся система нагадує чисті вивіски кафе: розбірливі, теплі та ніколи не кричущі.

**Ключові характеристики:**
- Чотирирівнева зелена система бренду (Starbucks / Accent / House / Uplift), кожен рівень закріплений за окремою роллю поверхні — не один «брендовий зелений»
- Золотий зарезервований лише для церемоніальних моментів статусу Rewards; ніколи не є акцентом загального призначення
- Тепло-нейтральний канвас (`#f2f0eb` / `#edebe9`) замість холодного білого — відсилання до матеріалів кафе
- Фірмовий шрифт на замовлення (SoDoSans) зі щільним інтервалом `-0.16px` як універсальний голос
- Контекстно-специфічна заміна шрифтів: засічка (Lander Tall) для Rewards, рукопис (Kalam) для імен на стаканчиках у Careers
- Кнопки у вигляді повних заокруглень (`50px` радіус) скрізь, `scale(0.95)` при активному натисканні — фірмова мікровзаємодія
- Плаваюча кругла CTA-кнопка «Frap» (`56px`, заливка Green Accent, нашарування тіней) — фірмовий елемент глибини продукту
- Поверхні подарункових карток розроблені як **сфотографований фізичний продукт** — кожна картка є окремою ілюстрованою фотографією, а не згенерованою графікою
- Радіус картки 12px + ледь помітні тіні зберігають картки плоскими з легким натяком на підняття
- Rem-шкала відступів, якорем якої служить `1.6rem` (~16px) = `--space-3`, зі збільшенням до `6.4rem` (~64px)

**Ритм кольорових блоків сторінки:** Кремовий герой → Білі секції контенту → Смуга темно-зеленого (`#1E3932`) з білим текстом → Кремова зона утиліт → Футер темно-зеленого (`#1E3932`) із золотим / білим текстом — темно-еспресові «закладки» навколо яскравого основного тіла.

## 2. Кольорова палітра та ролі

**Проаналізовані сторінки:** головна, rewards, подарункові картки, деталі продукту (Pink Energy Drink), нутрітивна інформація (Cold Brew).

### Основні

- **Starbucks Green** (`#006241`): Історичний брендовий зелений. Використовується в заголовках h1, основних заголовках секцій на сторінці Rewards та як головний брендовий сигнал там, де потрібен один домінантний колір.
- **Green Accent** (`#00754A`): Трохи яскравіший, більш насичений зелений. Основний колір CTA із заливкою («Explore our afternoon menu», «See the spring menu») та заливка плаваючої кругло ї кнопки Frap.
- **House Green** (`#1E3932`): Глибокий майже чорний брендовий зелений. Поверхня футера, фони смуг-елементів, темні поверхні статусів Rewards та смуга заголовку «Free coffee is just the beginning» на сторінці Rewards.
- **Green Uplift** (`#2b5148`): Вторинний середньо-темний зелений, що використовується помірно на декоративних акцентах та моментах з темними градієнтами.
- **Green Light** (`#d4e9e2`): Блідо-м'ятне промивання, що використовується для відтінків стану валідності форм та світло-зелених службових поверхонь.

### Вторинні та акцентні

- **Gold** (`#cba258`): Зарезервований майже виключно для церемоніальних моментів статусу Rewards — виноски рівня Gold, партнерські значки (SkyMiles, Bonvoy) та преміальні акценти. Ніколи не є брендовим кольором загального призначення.
- **Gold Light** (`#dfc49d`): М'якше золото для фонових промивань у секціях золотого рівня.
- **Gold Lightest** (`#faf6ee`): Кремово-золоте промивання поверхні сторінки, що використовується під партнерськими секціями на сторінці Rewards — зв'язує золотий акцент із теплою нейтральною системою.

### Поверхні та фони

- **White** (`#ffffff`): Основна поверхня карток та модальних вікон. Також заливка картки на тайлах подарункових карток.
- **Neutral Cool** (`#f9f9f9`): Тонка холодно-сіра поверхня, що використовується у випадних меню («Account»), обгортках форм-карток та тихих службових контейнерах.
- **Neutral Warm** (`#f2f0eb`): Теплий кремовий **основний канвас сторінки** для службових зон Rewards та смуг героїв.
- **Ceramic** (`#edebe9`): Трохи тепліший/темніший крем для розділювачів зон, м'яких промивань секцій сторінки та партнерської смуги Rewards.
- **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`): Виділений приглушений зеленувато-сірий, що використовується лише в текстових блоках сторінки Rewards — трохи «пиловатіший» колір для читання, ніж Text Black, що сигналізує «поверхня Rewards» без використання повного Starbucks Green.

### Семантичні та акцентні

- **Red** (`#c82014`): Стан помилки та деструктивних дій (невалідна форма, деструктивні дії).
- **Yellow** (`#fbbc05`): Стан попередження, традиційний брендовий штрих.
- **Green Light** (`#d4e9e2` при 33% прозорості = `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% — для світлих накладень на темних поверхнях

### Система градієнтів

Структурних токенів градієнтів не виявлено. Ієрархія поверхонь побудована на суцільних кольорових блоках — система спирається на п'ятирівневу палітру кремових/зелених поверхонь, а не на градієнти.

## 3. Правила типографіки

### Сімейство шрифтів

- **Основний:** `SoDoSans, "Helvetica Neue", Helvetica, Arial, sans-serif` — фірмовий корпоративний шрифт Starbucks, що використовується майже на кожній поверхні
- **Запасний при завантаженні:** `"Helvetica Neue", Helvetica, Arial, sans-serif` — те, що бачать користувачі до завантаження SoDoSans
- **Засічка Rewards:** `"Lander Tall", "Iowan Old Style", Georgia, serif` — використовується для певних заголовних моментів на сторінці Rewards для теплого редакційного відчуття
- **Рукопис Careers:** `"Kalam", "Comic Sans MS", cursive` — використовується виключно для декоративних штрихів «імені на стаканчику» на сторінках Careers, відсилаючи до рукописних імен на стаканчиках Starbucks

OpenType стилістичні набори явно не активовані на рівні `:root`.

### Ієрархія

| Роль | Розмір | Насиченість | Висота рядка | Міжлітерний | Примітки |
|------|--------|-------------|--------------|-------------|----------|
| Display (text-10) | 5.0rem / 80px | 400–600 | 1.2 | -0.16px | Найбільший дисплей Rewards/герой |
| Jumbo (text-9) | 3.6rem / 58px | 400–600 | 1.2 | -0.16px | Вторинні заголовки героїв |
| Hero Large (text-8) | 2.8rem / 45px | 400–600 | 1.2–1.5 | -0.16px | Заголовки секцій лендингу |
| H1 | 24px | 600 | 36px | -0.16px | Основний заголовок у Starbucks-Green |
| H2 | 24px | 400 | 36px | -0.16px | Заголовок секції звичайного насичення в Text Black |
| Body Large | 19px | 400–600 | 33.25px (~1.75) | -0.16px | Основний текст героя, тіло смуги-елемента |
| Body (text-3) | 1.6rem / 16px | 400 | 1.5 (24px) | -0.01em | Стандартний основний текст |
| Small (text-2) | 1.4rem / ~14px | 400–600 | 1.5 | -0.01em | Підпис кнопки, метадані, підписи форм |
| Micro (text-1) | 1.3rem / ~13px | 400 | 1.5 | -0.01em | Активний стан плаваючої мітки, мікрокопії підписів |
| Button Label | 14–16px | 400–600 | 1.2 | -0.01em | Підписи всіх кнопок-заокруглень |

**Токени міжлітерного інтервалу:**
- `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).
- **Токени розміру використовують rem, прив'язані до `1rem = 10px`** на цьому сайті (через трюк `font-size: 62.5%` в корені). Тому `1.6rem` = 16px, `2.4rem` = 24px тощо. Шкала є семантичною (textSize-1 через textSize-10), а не довільними значеннями у пікселях.
- **Контекстно-специфічна заміна шрифтів** — засічка для Rewards, рукопис для Careers — є навмисною та локалізованою. Ніколи не змішуйте їх із основним безсерифним у межах однієї поверхні.
- **Основний текст ніколи не є чисто чорним** — він знаходиться на рівні `rgba(0,0,0,0.87)`, щоб відповідати температурі тепло-нейтрального канвасу.

### Примітка щодо замінників шрифтів

SoDoSans є власністю Starbucks (ліцензований від House Industries, публічно недоступний). Розумні замінники з відкритим кодом:
- **Inter** (Google Fonts) — схожі гуманістичні геометричні пропорції, широкий діапазон насиченості
- **Manrope** — трохи округліший, схоже впевнене відчуття
- **Nunito Sans** — тепліший, хороший замінник для бренду «кафе»

При заміні перевірте, чи щільний трекінг `-0.01em` / `-0.16px` все ще читається добре; деякі шрифти з відкритим кодом потребують `-0.005em` натомість.

Lander Tall (засічка Rewards) — також замовний; замінники з відкритим кодом: **Iowan Old Style** (вже у запасному стеку), **Lora** або **Source Serif Pro**. Kalam (рукопис Careers) доступний безпосередньо на 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`
- Активний стан: `transform: scale(0.95)` через `--buttonActiveScale`
- Перехід: `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)` (специфічний варіант зеленого, що використовується в модулі згоди на cookie)
- Текст: `#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`)
- Використовується для: карток функцій, тайлів пунктів меню, панелей статусу Rewards

**Тайл подарункової картки**
- Фон: ілюстрована фотографія заповнює картку (без суцільного фону)
- Радіус: аналогічний до карток (~12px, злегка щільніший на кутах)
- Тінь: легша за стандартну картку — вони обробляються як фізичні картки, покладені на канвас
- Категоризовані підписом над сіткою карток (Spring, Thank You, Birthday, Celebration, Mother's Day, Appreciation, Encouragement, Milestones, Anytime)

**Картки статусу Rewards (фірмові для сторінки Rewards)**
- Тричастинна сітка: Bronze / Gold / Silver-ish — кожна є темно-зеленою (`#1E3932`) панеллю з:
  - Кольоровим градієнтним/кольоровим кільцем заголовку
  - Нумерованим значком «Level»
  - Назвою статусу великим SoDoSans насиченості 600
  - Списком зірок/переваг у білому/напівпрозоро-білому тексті
  - Підписом прогресії внизу «As you earn more stars…»

**Партнерська картка (Rewards)**
- Фон: `#faf6ee` (Gold Lightest) тепло-кремова поверхня
- Контент: логотипи партнерів («SkyMiles», «Bonvoy») по центру, з описовим текстом нижче
- Радіус та тінь відповідають стандартній специфікації карток

**Випадне меню (випадне меню облікового запису, верхня навігація)**
- Фон: `#f9f9f9` (Neutral Cool)
- Пункти меню `24px / насиченість 400` у Text Black
- Без рамки — лише зміна фонової поверхні відносно білої навігації

**Модальне вікно**
- Відступ: `2.4rem` (`--modalPadding`)
- Верхній відступ: `8.8rem` (`--modalTopPadding`) — залишає місце для кнопки закриття / заголовку
- Загальний вертикальний відступ: `11.2rem`
- Радіус успадковує специфікацію карток (`12px`)

### Поля введення та форми

**Поле введення з плаваючою міткою**
- Мітка зміщується над рамкою поля при фокусі/заповненні
- Розмір шрифту мітки на десктопі: `1.9rem` за замовчуванням, анімується до `1.4rem` при активній
- Розмір шрифту мітки на мобільному: `1.6rem` за замовчуванням, анімується до `1.3rem` при активній
- Горизонтальне зміщення мітки: `12px` від лівого краю
- Переміщення активної мітки: вгору до `-12px` із трансляцією `-50%` по осі Y
- Відступ поля: `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` внутрішній
- Використовує анімацію cubic-bezier активованого введення вище (крива з невеликим «пружним» перебігом 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)` — трирівневе м'яке підняття
- Ліворуч: логотип-словесний знак Starbucks зі зміщенням `99px` (md) / `131px` (lg) від лівого краю
- Основні посилання вбудовані у SoDoSans насиченості 400–600: Menu · Rewards · Gift Cards
- Праворуч: посилання «Find a store» + «Sign in» (з обведенням) + «Join now» (чорна із заливкою)

**Під-навігація (другий рядок, напр. внутрішня Rewards)**
- Висота: `53px` (глобальна під-навігація) / `48px` (внутрішня під-навігація)
- Зазвичай горизонтальна група вкладок під глобальною навігацією

**Мобільна навігація**
- Згортається у гамбургер-ящик нижче за точку зупину планшету
- Плаваюча кнопка Frap залишається внизу праворуч незалежно від стану навігації

### Обробка зображень

- **Фотографія героя**: фото продуктів (напої у прозорому склі з кольоровими фонами — коралові, шавлієві, теплий бурштин) займають ~40vw розділеного макету героя; текст займає решту 60vw (`--headerCrateProportion: 40vw` / `--contentCrateProportion: 60vw`)
- **Ілюстрації подарункових карток**: кожна картка є окремою ілюстрованою фотографією (з відчуттям живопису, схожою на малюнок від руки, тепла кольорова палітра). Ніяких загальних згенерованих графіків.
- **Зображення церемонії Rewards**: фотографії екранів програми Starbucks Rewards, які тримають у руці, кутові композиції — контекстна фотографія продукту.
- **Мініатюри меню**: квадратна або 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)` — виміряний ease-out
- Використовується для секцій FAQ на сторінках Rewards та подарункових карток

### Модуль згоди на cookie

Темно-зелена модальна картка у верхній частині сторінки з кнопками «Agree» (зелена із заливкою) та «Manage preferences» (з обведенням). З'являється при першому відвідуванні; можна відхилити.

### Компоненти деталей продукту (фірмовий кластер PDP)

Повторюваний кластер компонентів, що використовується на сторінках продуктів меню (наприклад, `/menu/product/40498/iced` для деталей напою, `/menu/product/.../nutrition` для нутрітивної інформації). Вони розширюють інвентар компонентів без зміни токенів.

**Селектор розміру**
- Горизонтальний ряд із 4 кнопок-іконок стаканчиків (Tall / Grande / Venti / Trenta)
- Кожен елемент: силует стаканчика зверху, назва розміру нижче (16/700 у Starbucks-Green), підпис рідких унцій (13/400 у Text Black Soft)
- Активний стан: зелене кільце-обведення (`2px solid #00754A`) навколо іконки вибраного стаканчика
- Неактивний: без кільця, однакова типографіка
- Повноширинний ряд, рівний відступ
- Радіус контейнера: `12px` або плаский; окремі іконки — кругові `50%`
- Відступ: `16px 24px` внутрішній

**Вибір добавки / молока (прямокутник з обведенням)**
- Фон: `#ffffff`
- Рамка: `1px solid #d6dbde` (Input Border)
- Радіус: `4px`
- Повноширинний у своїй колонці
- Плаваюча мітка над верхньою рамкою: «Add-ins» / «Milk» / «Add-ins» — 13/700 у Text Black, верхній регістр, відступ `0.325px`
- Значення по центру (наприклад, «Ice», «Coconut», «Strawberry Fruit Inclusions scoop»): 16/400 Text Black
- Іконка шеврону-вниз праворуч у Text Black Soft
- Фокус: рамка переходить до Green Accent (`#00754A`)

**Числовий степер**
- Вбудований всередині рядка добавки, коли потрібна кількість (наприклад, ложка Strawberry Fruit Inclusions)
- Кнопка `−` мінус + число кількості + кнопка `+` плюс, всі в ряд праворуч від мітки
- Кнопки: кругові `32×32px` із рамкою `1px solid #d6dbde`, нейтрально-сіра іконка
- Число кількості: 16/700 Text Black по центру

**Кнопка «Customize»**
- Фон: `#ffffff`
- Текст: `#00754A` (Green Accent)
- Рамка: `1.5px solid #00754A`
- Радіус: `50px` (повне заокруглення)
- Відступ: `14px 40px` (значно більший за стандартні заокруглення — це вторинна основна дія)
- Підпис: «Customize» із вставленою іконкою золотої іскри ✨ ліворуч
- Використовується для: входу в процес кастомізації напою після вибору розміру/молока

**Кнопка «Add to Order» (PDP)**
- Фон: `#00754A` (Green Accent)
- Текст: `#ffffff`
- Радіус: `50px`
- Відступ: `14px 32px`
- Закріплена у верхньому правому куті картки продукту та/або вирівняна праворуч у смузі доступності магазину
- Таке ж активне масштабування `scale(0.95)`, як і в інших основних CTA

**Значок вартості в Rewards — «200★ item»**
- Фон: прозорий
- Рамка: `1px solid #cba258` (Gold)
- Текст: `#cba258` (Gold)
- Радіус: `50px` (повне заокруглення)
- Відступ: `4px 12px`
- Вміст: «200★ item», де `★` — заповнена зірка-гліф, що вказує на необхідні зірки Rewards для отримання цього товару
- Шрифт: Proxima Nova 13/700 із відступом `0.5px`
- Використовується лише для продуктів, доступних для обміну в Rewards

**Смуга опису продукту**
- Повноширинна темно-зелена смуга (`#1E3932` House Green)
- Містить зверху вниз:
  1. Значок вартості в Rewards (золотий), якщо застосовно
  2. Основний текст опису продукту білим кольором (16/400/1.5)
  3. Нутрітивна зведена інформація вбудована («140 calories, 25g sugar, 2.5g fat») з підказкою-іконкою інформації — 14/700 білий
  4. Заокруглена кнопка з обведенням білим на зеленому «Full nutrition & ingredients list»
- Відступ: `32px` вертикальний
- З'являється під основною смугою заголовку продукту

**Таблиця складу / нутрітивної інформації**
- Двоколонкова розкладка на сторінці нутрітивної інформації
- Ліва колонка: заголовок «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
- Поточна сторінка без посилання, попередні сторінки підкреслені посиланнями у green-accent
- Шрифт: 14/400 Proxima Nova
- З'являється на всіх сторінках PDP

**Посилання з лівим шевроном «Назад» (PDP підсторінки нутрітивної інформації / деталей)**
- Текстове посилання «← Back» над заголовками секцій на сторінці нутрітивної інформації
- Текст у Green Accent (`#00754A`) 14/700 Proxima Nova
- Лівий шеврон `<` того ж зеленого
- Альтернатива повному навігаційному шляху на глибоких підсторінках

## 5. Принципи розкладки

### Система відступів

Семантична rem-шкала (якір `1rem = 10px`):

| Токен | Rem | Пікселі | Типове використання |
|-------|-----|---------|---------------------|
| `--space-1` | `0.4rem` | 4px | Найщільніший внутрішній відступ |
| `--space-2` | `0.8rem` | 8px | Малий проміжок, вертикальний відступ кнопки |
| `--space-3` | `1.6rem` | 16px | Стандартний — відступ картки, зовнішній жолоб xs |
| `--space-4` | `2.4rem` | 24px | Внутрішній відступ секції, зовнішній жолоб md |
| `--space-5` | `3.2rem` | 32px | Основний відступ між секціями |
| `--space-6` | `4rem` | 40px | Великі проміжки, зовнішній жолоб lg, контейнер заголовку |
| `--space-7` | `4.8rem` | 48px | Відступ між секціями |
| `--space-8` | `5.6rem` | 56px | Дуже великий простір — висота Frap |
| `--space-9` | `6.4rem` | 64px | Найширший відступ секції |

**Токени жолобів:**
- `--outerGutter: 1.6rem` (16px, стандартний / мобільний)
- `--outerGutterMedium: 2.4rem` (24px, планшет)
- `--outerGutterLarge: 4.0rem` (40px, десктоп)

**Універсальна константа ритму:** `1.6rem` (16px) з'являється на кожній сторінці як стандартний зовнішній жолоб, базовий відступ картки та розмір 3 основного тексту — найчастіша одиниця відступу в системі.

### Сітка та контейнер

- Шкала ширини колонок: `--columnWidthSmall: 343px` / `Medium: 500px` / `Large: 720px` / `XLarge: 1440px`
- Сітка подарункових карток використовує адаптивну сітку 3–5 тайлів ~343px
- Секція статусів Rewards: 3 темно-зелені панелі у `lg+` точках зупину
- Герой: асиметричний розподіл 40% (зображення) / 60% (контент) через `--headerCrateProportion` / `--contentCrateProportion`

### Філософія пустого простору

Пустий простір несе відчуття «достатньо місця в кафе». Відступи секцій схиляються до щедрих (40–64px). Блоки контенту розділяються пустим простором, а не роздільниками. Кремовий канвас (`#f2f0eb`) сам по собі є візуальним подихом між білими картками та зеленими смугами-елементами.

### Шкала радіусів скруглення

| Значення | Використання |
|---------|--------------|
| `12px` | Картки, модальні вікна, тайли пунктів меню (`--cardBorderRadius`) |
| `12px 12px 0 0` | Повноширинна вкладка зворотного зв'язку (лише верхнє заокруглення) |
| `50px` | Всі кнопки — повний радіус заокруглення (`--buttonBorderRadius`) |
| `50%` | Кругові іконки, плаваюча кнопка Frap, мініатюри аватарів |
| Спеціальний | `3.3333%/5.298%` еліптичний для макетів Starbucks-Visa-Card (`--svcRoundedCorners`) |

## 6. Глибина та підняття

| Рівень | Обробка | Використання |
|--------|---------|--------------|
| Картка | `0 0 0.5px rgba(0,0,0,0.14), 0 1px 1px rgba(0,0,0,0.24)` | Стандартні картки контенту — ледь відчутна подвійна тінь |
| Глобальна навігація | `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)` | Трирівневе м'яке підняття на фіксованій верхній панелі |
| База Frap | `0 0 6px rgba(0,0,0,0.24)` | Базове гало навколо плаваючої кругло ї CTA |
| Навколишня Frap | `0 8px 12px rgba(0,0,0,0.14)` | Нашарована спрямована навколишня — виносить Frap уперед |
| Подарункова картка | Легка тінь навколо ілюстрованої фотографії | Відчуття фізичної картки для тайлів подарунків |
| Starbucks Card (SVC) | `drop-shadow(0 4px 1px rgba(0,0,0,0.11)) drop-shadow(0 0 2px rgba(0,0,0,0.24))` | Нашаровані SVG-тіні для візуалів Starbucks Card |

**Філософія тіней:** Ледь відчутні, нашаровані поверх суцільного — система ніколи не використовує одну важку тінь. Натомість вона нашаровує 2–3 тіні з низькою альфою та різними зміщеннями для імітації реального навколишнього + спрямованого освітлення. Кнопка Frap є найбільш піднятим елементом на будь-якій сторінці.

### Декоративна глибина

- **Без системи градієнтів** — поверхні є суцільними кольоровими блоками
- **Кольорове блокове смугування** несе відчуття глибини (темно-зелені смуги сприймаються як «заглиблені зони функцій» між кремовими/білими секціями тіла)
- **SVG-фільтрові тіні** на візуалах Starbucks-Card додають легкої 3D-фізичності без box-shadow

## 7. Рекомендації та застереження

### Рекомендується
- Використовуйте Neutral Warm (`#f2f0eb`) або Ceramic (`#edebe9`) як канвас сторінки замість чистого білого — теплий крем є фірмовим
- Прив'язуйте зелені рівні до їхньої призначеної ролі поверхні — Starbucks Green для заголовків, Green Accent для CTA, House Green для глибоких смуг, Uplift для декоративних елементів
- Зберігайте щільний трекінг `-0.01em` / `-0.16px` у SoDoSans по всій системі
- Використовуйте радіус повного заокруглення 50px для кожної кнопки без винятків
- Застосовуйте `transform: scale(0.95)` як універсальний активний стан кнопки
- Зарезервуйте Gold виключно для церемоніальних моментів статусу Rewards
- Використовуйте SoDoSans для майже всього; переходьте до засічки Lander Tall лише для редакційних заголовків Rewards; зарезервуйте рукопис Kalam для моментів «імені на стаканчику» у Careers
- Нашаровуйте 2–3 тіні з низькою альфою замість однієї більш важкої тіні для підняття
- Використовуйте кругло у плаваючу CTA Frap як постійну точку входу замовлення на кожній торговельній поверхні
- Дозвольте кремовому канвасу дихати між картками контенту — використовуйте пустий простір, а не роздільники

### Не рекомендується
- Не використовуйте чистий білий як канвас сторінки — тепла кремова температура є основоположною
- Не вибирайте «один брендовий зелений» — чотирирівнева зелена система є навмисною; використання лише `#006241` скрізь нівелює бренд
- Не використовуйте Gold як акцент загального призначення — це сигнал Rewards
- Не робіть кути кнопок прямими — заокруглення 50px є універсальним
- Не вводьте заливки градієнтами — система є кольоровими блоками скрізь
- Не розрізняйте h1 та h2 за розміром — ієрархія досягається через насиченість + колір (600 Starbucks-Green проти 400 Text Black)
- Не використовуйте чисто чорний для основного тексту — `rgba(0,0,0,0.87)` відповідає теплому канвасу
- Не пропускайте активний зворотний зв'язок `scale(0.95)` на кнопках — це фірмова мікровзаємодія
- Не нашаровуйте одну важку тінь; завжди шаруйте 2–3 тіні з низькою альфою
- Не вводьте засічки або рукописи в основний торговельний процес — вони належать відповідно до контекстів Rewards та Careers

## 8. Адаптивна поведінка

### Точки зупину

Визначено на основі токенів ширини компонентів та прогресивних висот навігації:

| Назва | Ширина | Ключові зміни |
|-------|--------|---------------|
| xs | < 480px | Глобальна навігація 64px; гамбургер-меню; одноколонкові розкладки; кнопки-заокруглення на всю ширину |
| Mobile | 480–767px | Глобальна навігація 72px; сітка подарункових карток у 2 ряди; відступи карток зменшуються |
| Tablet | 768–1023px | Глобальна навігація 83px; сітка подарункових карток у 3 ряди; починає з'являтися розбивка героя |
| Desktop | 1024–1439px | Глобальна навігація 99px; сітка подарункових карток у 4 ряди; повний асиметричний герой 40/60 |
| XLarge | 1440px+ | Контент обмежений `--columnWidthXLarge`; сітка подарункових карток у 5 рядів; додаткові кремові поля |

### Цілі для дотику

- Кнопки-заокруглення з відступом `7px 16px` мають висоту ~32px — нижче мінімуму WCAG AAA 44px для поверхонь тільки для дотику. На мобільних пристроях відступ кнопок може бути візуально збільшений для відповідності мінімуму.
- Плаваюча кругла кнопка Frap діаметром `56px` значно перевищує мінімум.
- Frap використовує `--frapTouchOffset: calc(-1 * .8rem)` для розширення зони натискання на 8px за межі візуального краю.
- Поля введення з плаваючою міткою збільшують розмір шрифту мітки на мобільному (базовий `1.6rem` проти `1.9rem` на десктопі) — легше натискати та читати на витягнутій руці.

### Стратегія згортання

- **Висота глобальної навігації масштабується прогресивно**: 64 → 72 → 83 → 99px через точки зупину, а не одне значення
- **Розбивка героя згортається**: асиметричне розбиття 40/60 → складання (зображення зверху, контент знизу) на мобільному
- **Сітка подарункових карток**: 5 рядів → 4 → 3 → 2 → 1 через точки зупину з відрегульованою шириною карток
- **Смуги-елементи**: залишаються повноширинними, але текст + зображення складаються вертикально на мобільному
- **Масштабування зовнішнього жолобу**: 16px → 24px → 40px зі збільшенням вікна перегляду
- **Трьохпанельні панелі статусів Rewards**: складаються в одну колонку на мобільному

### Поведінка зображень

- Фотографія продукту героя кадрується щільніше по вертикалі на мобільному; контент стає візуальним якорем
- Ілюстрації подарункових карток зберігають пропорції; сітка карток перетікає
- Перехід плавного з'явлення `opacity 0.3s ease-in` при завантаженні зображення (запобігає різкому спалаху)
- Фотографія програми Rewards «в руці» масштабується пропорційно; ніколи не розтягується

## 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)`)»
- Акцент Rewards: «Gold (`#cba258`)»
- Текст Rewards: «Rewards Green (`#33433d`)»
- Деструктивний: «Red (`#c82014`)»

### Приклади запитів для компонентів

1. «Створіть основну кнопку-заокруглення CTA Starbucks із фоном Green Accent (`#00754A`), білим текстом 'Explore our afternoon menu', шрифтом SoDoSans 16px насиченості 600 із міжлітерним `-0.01em`, `50px` радіусом рамки (повне заокруглення), відступом `7px 16px`. Застосуйте `transform: scale(0.95)` як активний стан із переходом `0.2s ease`.»

2. «Розробіть картку контенту з фоном White (`#ffffff`) при `12px` радіусі рамки, нашарованою тінню `0 0 0.5px rgba(0,0,0,0.14), 0 1px 1px rgba(0,0,0,0.24)`. Відступ вмісту `16–24px` (`--space-3` до `--space-4`). Розмістіть на канвасі Neutral Warm (`#f2f0eb`) з проміжком `16px` між сусідніми елементами.»

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` для дотику. Активний стан згортає навколишню тінь до `0 8px 12px rgba(0,0,0,0)` із `scale(0.95)`.»

4. «Зберіть темно-зелену смугу-елемент — повноширинна секція з фоном House Green (`#1E3932`). Ліва колонка: білий SoDoSans h2 24px насиченості 600, далі абзац Text White Soft (`rgba(255,255,255,0.70)`) та рядок CTA з двома кнопками (біла заливка із текстом Green Accent для основної, «З обведенням на темному» з білою рамкою для вторинної). Права колонка: фотографія продукту. Пропорція розбивки 40/60, складається вертикально нижче `768px`.»

5. «Створіть картку статусу Rewards — панель House Green (`#1E3932`) з `12px` радіусом, кольоровою градієнтною верхньою смугою (рівень Bronze/Silver/Gold). Заголовок у SoDoSans 24px насиченості 600 білим. Список переваг як білі маркери з вторинними підписами `rgba(255,255,255,0.70)`. Текст прогресії внизу у Text White Soft. Складіть 3 панелі в сітку при `lg+`, одна колонка на мобільному.»

6. «Розробіть тайл подарункової картки — радіус картки відповідає `12px`, заповнює ілюстрована фотографія (відчуття ручного розписання аквареллю) як вся поверхня. Легка тінь надає відчуття фізичної картки на кремовому канвасі. Групуйте під міткою категорії ('Spring', 'Thank You', 'Birthday') у SoDoSans 24px насиченості 400 над сіткою.»

7. «Створіть заголовок деталі продукту Starbucks — смуга House Green (`#1E3932`) з навігаційним шляхом 'Menu / Refreshers / Pink Energy Drink' у 14/400 білого над назвою продукту в SoDoSans 32/700 верхнього регістру білого. Фотографія продукту по центру під назвою. Під фото: ряд вибору розміру з 4 елементів — кожна кнопка-іконка стаканчика показує вертикальний силует, назву розміру ('Tall' / 'Grande' / 'Venti' / 'Trenta') у 16/700 білого, та рідкі унції у 13/400 Text White Soft. Вибраний розмір обгортає іконку стаканчика кільцем `2px solid #00754A`.»

8. «Зберіть процес кастомізації Starbucks — під селектором розміру 3 нашаровані рядки вводу у вигляді прямокутника з обведенням (білий фон, рамка `1px solid #d6dbde`, радіус `4px`). Кожен має плаваючу мітку ('Add-ins', 'Milk', 'Add-ins') над верхньою рамкою у 13/700 Text Black верхнього регістру. Значення по центру (напр., 'Ice', 'Coconut'). Праворуч: шеврон-вниз у Text Black Soft. Для рядку ложки вбудуйте числовий степер (`−` `1` `+` з круглими обрисованими кнопками `32px`). Під усіма трьома полями: обрисована зелена кнопка-заокруглення 'Customize' з іконкою золотої іскри, радіус `50px`, відступ `14px 40px`. Поєднайте з заповненою кнопкою-заокругленням Green Accent 'Add to Order' в тому ж рядку.»

9. «Розробіть смугу опису продукту Starbucks — повноширинний House Green (`#1E3932`) під заголовком продукту. Зверху: значок вартості Rewards з золотим обведенням '200★ item' (радіус `50px`, відступ `4px 12px`, золота рамка та текст `#cba258`). Нижче: опис продукту білим 16/400/1.5. Нутрітивна зведена інформація вбудована білим 14/700 ('140 calories, 25g sugar, 2.5g fat') з підказкою-іконкою інформації. Кнопка-заокруглення з білим обведенням на зеленому 'Full nutrition &amp; ingredients list'. Вертикальний відступ 32px.»

10. «Створіть таблицю нутрітивної інформації Starbucks — двоколонкова розкладка всередині картки White. Ліва колонка: заголовок 'Ingredients' (24/400 Text Black), далі список складу або абзац-заглушка 'Not available for this item' у 14/400 Text Black Soft. Права колонка: заголовок 'Nutrition', далі рядки мітка/значення (назва поживної речовини ліворуч, значення праворуч), розділені горизонтальними лініями `1px solid #e7e7e7`. Типографіка: мітки 14/400 Text Black, значення 14/700 Text Black вирівняні праворуч. Виноска із маркерами зірочок у 13/400 Text Black Soft внизу.»

### Керівництво для ітерацій

При вдосконаленні існуючих екранів, згенерованих із цією дизайн-системою:
1. Зосередьтесь на ОДНОМУ компоненті за раз
2. Посилайтесь на конкретні назви кольорів та шістнадцяткові коди з цього документу
3. Використовуйте описи природною мовою («тепло-кремовий канвас», «чотирирівнева зелена система») разом із точними значеннями
4. Зберігайте заокруглення 50px + активний стан `scale(0.95)` універсально
5. Перевіряйте, що зелені прив'язані до правильної ролі (Green Accent для CTA, Starbucks Green для заголовку, House Green для смуги)
6. Не вводьте градієнти — система є кольоровими блоками
7. Зберігайте трекінг SoDoSans на рівні `-0.01em` / `-0.16px` повсюдно

### Відомі прогалини

- SoDoSans є фірмовим шрифтом, недоступним на Google Fonts — при публічній реалізації використовуйте Inter або Manrope як замінник та задокументуйте заміну
- Lander Tall (засічка Rewards) також є замовним — замініть на Iowan Old Style, Lora або Source Serif Pro
- Конкретні тайминги анімацій на рівні компонентів, окрім кількох задокументованих (`--duration: 0.4s`, `--iconTransition: all ease-out 0.2s`, `--expanderDuration: 300ms`), не зафіксовані для кожної інтерактивної поверхні
- Повне стилювання стану помилки форми (вага рамки помилки, розміщення іконки) видно через токен відтінку, але вичерпно не вилучено
- Специфічні компоненти сторінок Careers (картка з іменем на стаканчику, сітка радіопошуку) згадані в назвах токенів, але не охоплені цим витягом
- Деталізовані специфікації макету Starbucks Visa Card / Starbucks-Card (SVC) натякаються токенами `--svcRoundedCorners` та `--svcShadowFilter`, але повністю не задокументовані