0 Fork 0

Files

T

admin 5afeb6b78a ④段整套同步（六节＋ P/S/F/J ＋模板）＋ open-design 移到技能根

一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
  · 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
    跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
  · 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
  · 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
    横向流程图每步写清页面／功能／操作／完成判据。
  · 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
  · 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
  · 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。

二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
  「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
  同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
  当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。

三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。

2026-10-15 21:17:28 +08:00

64 KiB

Raw Blame History

Дизайн-система натхненна 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 та подарункових карток

Темно-зелена модальна картка у верхній частині сторінки з кнопками «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. Рекомендації та застереження

Не рекомендується

Не використовуйте чистий білий як канвас сторінки — тепла кремова температура є основоположною
Не вибирайте «один брендовий зелений» — чотирирівнева зелена система є навмисною; використання лише #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)»

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

«Створіть основну кнопку-заокруглення CTA Starbucks із фоном Green Accent (#00754A), білим текстом 'Explore our afternoon menu', шрифтом SoDoSans 16px насиченості 600 із міжлітерним -0.01em, 50px радіусом рамки (повне заокруглення), відступом 7px 16px. Застосуйте transform: scale(0.95) як активний стан із переходом 0.2s ease.»
«Розробіть картку контенту з фоном 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 між сусідніми елементами.»
«Зберіть плаваючу кругло у кнопку замовлення 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).»
«Зберіть темно-зелену смугу-елемент — повноширинна секція з фоном House Green (#1E3932). Ліва колонка: білий SoDoSans h2 24px насиченості 600, далі абзац Text White Soft (rgba(255,255,255,0.70)) та рядок CTA з двома кнопками (біла заливка із текстом Green Accent для основної, «З обведенням на темному» з білою рамкою для вторинної). Права колонка: фотографія продукту. Пропорція розбивки 40/60, складається вертикально нижче 768px.»
«Створіть картку статусу Rewards — панель House Green (#1E3932) з 12px радіусом, кольоровою градієнтною верхньою смугою (рівень Bronze/Silver/Gold). Заголовок у SoDoSans 24px насиченості 600 білим. Список переваг як білі маркери з вторинними підписами rgba(255,255,255,0.70). Текст прогресії внизу у Text White Soft. Складіть 3 панелі в сітку при lg+, одна колонка на мобільному.»
«Розробіть тайл подарункової картки — радіус картки відповідає 12px, заповнює ілюстрована фотографія (відчуття ручного розписання аквареллю) як вся поверхня. Легка тінь надає відчуття фізичної картки на кремовому канвасі. Групуйте під міткою категорії ('Spring', 'Thank You', 'Birthday') у SoDoSans 24px насиченості 400 над сіткою.»
«Створіть заголовок деталі продукту 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.»
«Зберіть процес кастомізації 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' в тому ж рядку.»
«Розробіть смугу опису продукту 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 & ingredients list'. Вертикальний відступ 32px.»
«Створіть таблицю нутрітивної інформації 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 внизу.»

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

При вдосконаленні існуючих екранів, згенерованих із цією дизайн-системою:

Зосередьтесь на ОДНОМУ компоненті за раз
Посилайтесь на конкретні назви кольорів та шістнадцяткові коди з цього документу
Використовуйте описи природною мовою («тепло-кремовий канвас», «чотирирівнева зелена система») разом із точними значеннями
Зберігайте заокруглення 50px + активний стан scale(0.95) універсально
Перевіряйте, що зелені прив'язані до правильної ролі (Green Accent для CTA, Starbucks Green для заголовку, House Green для смуги)
Не вводьте градієнти — система є кольоровими блоками
Зберігайте трекінг 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, але повністю не задокументовані

64 KiB Raw Blame History Unescape Escape