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

> Category: Электронная коммерция и ритейл
> Мировой бренд розничной торговли кофе. Четырёхуровневая зелёная система, тёплый кремовый холст, кнопки-пилюли.

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

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

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

Поверхности дышат закруглёнными формами. Каждая кнопка — полная «пилюля» `50px`. Карточки имеют скругление `12px`. «Frap» — плавающий CTA «заказ» в виде круглой кнопки диаметром `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)

**Ритм страницы цветовыми блоками:** Кремовый hero → Белые секции контента → Тёмно-зелёная (`#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`): Глубокий тёмно-зелёный, почти чёрный. Поверхность футера, фоны feature-полос, тёмные поверхности Rewards-статуса, а также полоса hero «Free coffee is just the beginning» на Rewards.
- **Green Uplift** (`#2b5148`): Вторичный средне-тёмный зелёный, используемый точечно для декоративных акцентов и тёмно-градиентных моментов.
- **Green Light** (`#d4e9e2`): Бледно-мятный тон для оттенка валидных полей форм и светлых утилитарных поверхностей.

### Вторичные и акцентные

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

### Поверхности и фон

- **White** (`#ffffff`): Основная поверхность карточек и модальных окон. Также заливка карточек в плитках подарочных карт.
- **Neutral Cool** (`#f9f9f9`): Тонкая холодно-серая поверхность для выпадающих меню (дропдаун «Account»), обёрток форм и тихих утилитарных контейнеров.
- **Neutral Warm** (`#f2f0eb`): Тёплый крем — **основной холст страницы** для утилитарных зон Rewards и hero-полос.
- **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`): Состояние предупреждения, legacy-акцент бренда.
- **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 Serif:** `"Lander Tall", "Iowan Old Style", Georgia, serif` — используется в отдельных заголовочных моментах страницы Rewards для тёплого редакционного ощущения
- **Careers Script:** `"Kalam", "Comic Sans MS", cursive` — используется исключительно для декоративных элементов «имени на стакане» на страницах Careers, отсылая к рукописным именам на стаканах Starbucks

Никаких явно активированных OpenType-наборов стилей на `:root`.

### Иерархия

| Роль | Размер | Насыщенность | Высота строки | Интервал | Примечания |
|------|--------|--------------|----------------|-----------|------------|
| Display (text-10) | 5.0rem / 80px | 400–600 | 1.2 | -0.16px | Крупнейший дисплей Rewards/hero |
| Jumbo (text-9) | 3.6rem / 58px | 400–600 | 1.2 | -0.16px | Вторичные hero-заголовки |
| 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 | Вводный текст hero, тело feature-полосы |
| 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 — намеренны и локализованы. Никогда не смешивайте их с основным sans-serif на одной поверхности.
- **Основной текст никогда не бывает чисто чёрным** — он задаётся как `rgba(0,0,0,0.87)`, чтобы соответствовать температуре тёплого нейтрального холста.

### Примечание о заменителях шрифтов

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

При замене проверьте, что плотный трекинг `-0.01em` / `-0.16px` по-прежнему читается хорошо; некоторым open-source гарнитурам вместо него нужен `-0.005em`.

Lander Tall (засечный шрифт Rewards) является кастомным — open-source замены: **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`
- Используется на тёмно-зелёных feature-полосах для второстепенного действия в паре с белым заливным 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`)
- Используется для: feature-карточек, плиток пунктов меню, панелей 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») по центру с описательным текстом ниже
- Радиус и тень соответствуют спецификации стандартной карточки

**Выпадающее меню (дропдаун Account, верхняя навигация)**
- Фон: `#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` (внутренняя под-навигация)
- Обычно горизонтальная группа вкладок под глобальной навигацией

**Мобильная навигация**
- Сворачивается в drawer-меню по гамбургеру ниже брейкпоинта планшета
- Плавающая кнопка Frap остаётся внизу справа независимо от состояния навигации

### Обработка изображений

- **Hero-фотография**: Фотографии продуктов (напитки в прозрачном стекле на цветном фоне — коралловом, шалфейном, тёплом янтарном) занимают ~40vw в раскладке split-hero; текст занимает оставшиеся 60vw (`--headerCrateProportion: 40vw` / `--contentCrateProportion: 60vw`)
- **Иллюстрации подарочных карт**: Каждая карта — отдельная иллюстрированная фотография (с ощущением живописи, рисованная вручную, тёплая цветовая палитра). Никогда не используются общие сгенерированные графики.
- **Церемониальные изображения Rewards**: Фотографии экранов приложения Starbucks Rewards в руках, угловые композиции — контекстная фотография продукта.
- **Миниатюры меню**: Квадратная или 4:3 предметная фотография на чистом белом/кремовом фоне, с лёгкой мягкой тенью вокруг стакана.
- **Плавное появление изображений**: Переход `opacity 0.3s ease-in` при загрузке изображения (`--imageFadeTransition`).

### Feature-полоса (тёмно-зелёная hero-полоса)

Полноширинная полоса `#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`)

**Числовой счётчик**
- Встроен в строку «Add-in», когда нужно указать количество (например, мерная ложка 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 Stars для активации товара
- Шрифт: 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`
- Размещается под основной полосой шапки товара

**Таблица ингредиентов / питательной ценности**
- Двухколоночная раскладка на странице Nutrition
- Левая колонка: заголовок «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 в нижней части
- Переиспользуемый шаблон для таблиц пищевой ценности в соответствии с нормативными требованиями

**Селектор доступности в магазинах**
- Отображается на тёмно-зелёной feature-полосе над рядом выбора размера
- Полноширинный прямоугольник со скруглёнными углами с прозрачно-белым интерьером
- Текст: «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

**Ссылка-шеврон «Назад» (дочерние страницы nutrition/detail PDP)**
- Текстовая ссылка «← Back» над заголовками разделов на странице nutrition
- Текст в 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+`
- Hero: асимметричное разделение 40% (изображение) / 60% (контент) через `--headerCrateProportion` / `--contentCrateProportion`

### Философия воздуха

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

### Шкала скруглений

| Значение | Использование |
|---------|--------------|
| `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 в ряд; начинается hero-разделение |
| Desktop | 1024–1439px | Глобальная навигация 99px; сетка подарочных карт 4 в ряд; полное асимметричное hero 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 через брейкпоинты, а не единственное значение
- **Hero-разделение сворачивается**: асимметричное разделение 40/60 → стекирование (изображение сверху, контент снизу) на мобильном
- **Сетка подарочных карт**: 5 в ряд → 4 → 3 → 2 → 1 через брейкпоинты с адаптированной шириной карточек
- **Feature-полосы**: остаются полноширинными, но текст + изображения стекируются вертикально на мобильном
- **Внешние отступы масштабируются**: 16px → 24px → 40px по мере роста вьюпорта
- **Трёхколоночные панели Rewards-статуса**: стекируются в одну колонку на мобильном

### Поведение изображений

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

## 9. Руководство по промптам для агентов

### Быстрый справочник по цветам

- Основной CTA: «Green Accent (`#00754A`)»
- Текст основного CTA: «White (`#ffffff`)»
- Брендовый заголовок: «Starbucks Green (`#006241`)»
- Feature-полоса / футер: «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. «Создай основную кнопку-пилюлю Starbucks с фоном Green Accent (`#00754A`), белым текстом "Explore our afternoon menu", шрифтом SoDoSans 16px насыщенности 600 с интервалом `-0.01em`, радиусом `50px` (полная пилюля), отступами `7px 16px`. Примени `transform: scale(0.95)` как активное состояние с переходом `0.2s ease`.»

2. «Спроектируй карточку контента с белым (`#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. «Создай тёмно-зелёную feature-полосу — полноширинная секция с фоном 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 и объём в унциях в Text White Soft 13/400. Выбранный размер обрамляет иконку стакана кольцом `2px solid #00754A`.»

8. «Создай поток настройки Starbucks — под селектором размера 3 обводных прямоугольника-поля в стек (белый фон, рамка `1px solid #d6dbde`, радиус `4px`). Каждое с плавающей меткой ("Add-ins", "Milk", "Add-ins") над верхней рамкой в Text Black 13/700 верхний регистр. Значение по центру (например, "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`, рамка и текст gold `#cba258`). Ниже: описание товара белым 16/400/1.5. Встроенная сводка питательной ценности белым 14/700 ("140 calories, 25g sugar, 2.5g fat") с иконкой-подсказкой. Обводная белая пилюля на зелёном "Full nutrition &amp; ingredients list". Вертикальный отступ `32px`.»

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

### Руководство по итерациям

При доработке существующих экранов, созданных в этой дизайн-системе:
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`, но не задокументированы в полной мере