Дизайн-система на основе 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.

Иерархия

Токены межбуквенного интервала:

• 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):

Токены отступов по краям:

• --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-полосами.

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

6. Глубина и уровни высоты

Философия теней: Едва заметные, многослойные на сплошном фоне — система никогда не прибегает к одной тяжёлой падающей тени. Вместо этого накладываются 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. Адаптивное поведение

Брейкпоинты

Выведены из токенов ширины компонентов и прогрессивных высот навигации:

Зоны касания

• Кнопки-пилюли с отступами 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 & 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, но не задокументированы в полной мере