④段整套同步（六节＋ 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
1 parent fa0a9026c8
commit 5afeb6b78a
@@ -0,0 +1,583 @@
+# Дизайн-система на основе 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`, но не задокументированы в полной мере