admin
5afeb6b78a
一、④段整套同步（用户选候选 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。
35 KiB
Дизайн-система, вдохновлённая Shopify
Category: Электронная коммерция и ритейл Платформа электронной коммерции. Кинематичный dark-first, неоново-зелёный акцент, ультралёгкая типографика.
1. Визуальная тема и атмосфера
Shopify.com — это dark-first цифровой театр: сайт, который преподносит свою торговую платформу как кинематографическую премьеру. Всё впечатление разворачивается на фоне бездны почти чёрных поверхностей, несущих едва уловимый намёк на глубокий лесной зелёный (#02090A, #061A1C, #102620), создавая ночную атмосферу, которая ощущается не как маркетинговая страница SaaS, а как эксклюзивный показ продукта на технологической keynote. Эта темнота не холодная и не корпоративная — это тёплая, обволакивающая темнота роскошного переживания, как будто сидишь в первом ряду затемнённого зала.
Типографика — бесспорная звезда. NeueHaasGrotesk — утончённый потомок Helvetica — появляется в монументальном масштабе (96px) с невозможно лёгким начертанием (330–400), создавая заголовки, которые кажутся выгравированными в свете, а не отпечатанными чернилами. Функция OpenType ss03 придаёт формам букв неповторимый характер, который отличает типографику Shopify от обычного использования Helvetica. Ниже уровня дисплея Inter Variable управляет основным текстом с хирургической точностью, используя столь же необычные переменные насыщенности (420, 450, 550), которые существуют между традиционными ступенями начертания. Эта точность сигнализирует о компании, которая тщательно продумывает каждую деталь.
Цвет используется с крайней сдержанностью. Основной акцент — Shopify Neon Green (#36F4A4): электрическая мята, появляющаяся исключительно на кольцах фокуса и акцентных выделениях, пульсирующая как биолюминесцентный сигнал на тёмном холсте. Более мягкие зелёные оттенки (Aloe #C1FBD4, Pistachio #D4F9E0) создают атмосферные промывки. Белый — единственный цвет текста, имеющий значение на тёмных поверхностях, тогда как нейтральная шкала на основе цинка (#A1A1AA до #3F3F46) управляет иерархией тихой информации. Результат — дизайн, заставляющий торговые технологии выглядеть так, будто они принадлежат научно-фантастическому будущему.
Ключевые характеристики:
- Dark-first дизайн с глубокими лесными тил-подтонами (не чистый чёрный)
- Ультралёгкая дисплейная типографика (насыщенность 330) в монументальном масштабе (96px), создающая эфирное присутствие
- Neon Green (
#36F4A4) как единственный высокоэнергетический акцент на фоне темноты - Кнопки-пилюли полного радиуса (9999px) как основная интерактивная форма
- Многослойные box-shadow, создающие фотографическую глубину
- Скриншоты продуктов, встроенные в тёмные контексты интерфейса, соответствующие окружающей темноте
- Нейтральная шкала на основе цинка для иерархии текста — сбалансированная между тёплым и холодным
2. Цветовая палитра и роли
Основные
- Shopify White (
#FFFFFF): Основной текст на тёмных поверхностях, заливки кнопок, высококонтрастные элементы - Shopify Black (
#000000): Фон страницы, текст кнопки на белом, максимальная контрастная база (--color-shade-100)
Вторичные и акцентные
- Neon Green (
#36F4A4): Фирменный акцент — кольца фокуса, интерактивные выделения, индикаторы активного состояния. Электрический и биолюминесцентный - Aloe (
#C1FBD4): Мягкая зелёная промывка для декоративных фонов, атмосферных карточек (--color-aloe-10) - Pistachio (
#D4F9E0): Светлейший зелёный оттенок для тонкой дифференциации поверхностей (--color-pistachio-10)
Поверхности и фоны
- Void (
#000000): Корневой фон страницы — истинно чёрный для максимальной глубины - Deep Teal (
#02090A): Поверхности карточек, контентные контейнеры — почти чёрный с зелёным подтоном - Dark Forest (
#061A1C): Фоны секций с ощутимым зелёным характером - Forest (
#102620): Приподнятые тёмные поверхности, фоны заголовков — самый тёплый тёмный оттенок - Dark Card Border (
#1E2C31): Границы карточек на тёмных поверхностях, тонкое определение границ
Нейтральные и текстовые (шкала Zinc)
- Shade-30 (
#D4D4D8): Светлейший нейтральный, едва заметные границы на тёмном (--color-shade-30) - Muted Text (
#A1A1AA): Вторичный текст, метаданные, описания — тихий голос - Shade-50 (
#71717A): Третичный текст, временные метки, наименее важная информация (--color-shade-50) - Shade-60 (
#52525B): Отключённый текст, декоративные нейтральные (--color-shade-60) - Shade-70 (
#3F3F46): Тонкие разделители, едва заметные границы интерфейса (--color-shade-70) - Light Border (
#E4E4E7): Границы на светлых поверхностях (редко — только в модальных окнах светлого режима)
Семантические и акцентные
- Link Muted (
#9797A2): Приглушённый текст ссылки с декорацией подчёркивания - Link Sage (
#9DABAD): Приглушённые ссылки с тил-оттенком - Link Lavender (
#BDBDCA): Более светлый вариант ссылки - Link Mint (
#99B3AD): Вариант ссылки с зелёным оттенком для тематических секций
Система градиентов
- Dark Teal Wash: Радиальный градиент от
#102620в центре к#02090Aпо краю — используется позади витрин продуктов - Green Atmospheric: Тонкие зелёно-тонированные амбиентные градиенты позади секций-героев, создающие глубину без сплошных цветов
- Spotlight: Сфокусированная светлая область, плавно переходящая в чёрный — создаёт презентационное освещение в стиле keynote
3. Правила типографики
Семейство шрифтов
Дисплейный: NeueHaasGrotesk (утончённый потомок Helvetica, переменный шрифт)
- Запасные шрифты: Helvetica, Arial, sans-serif
- Функции OpenType:
ss03(стилистический набор 3 — отличительные варианты форм букв) - Доступные начертания: 330, 360, 400, 500, 750 (переменные)
- Используется для всех заголовков, текста героя и крупных дисплейных элементов
Основной: Inter-Variable
- Запасные шрифты: Helvetica, Arial, sans-serif
- Функции OpenType:
ss03 - Доступные начертания: 400, 420, 450, 500, 550 (переменные)
- Используется для основного текста, ссылок, кнопок, элементов интерфейса
Моноширинный: ui-monospace
- Запасные шрифты: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New
- Используется для фрагментов кода, подписей к данным, технического контента
Иерархия
| Роль | Размер | Насыщенность | Высота строки | Межбуквенный интервал | Примечания |
|---|---|---|---|---|---|
| Display XL | 96px | 400 | 1.00 | — | NeueHaasGrotesk, заголовки героя, "ss03" |
| Display XL Bold | 90.74px | 750 | 1.00 | 4.54px | NeueHaasGrotesk, акцентный дисплей |
| Display XL Tracked | 96px | 400 | 1.00 | 2.4px | NeueHaasGrotesk, разрядный дисплей |
| Display Light | 96px | 330 | 0.96 | — | NeueHaasGrotesk, эфирный дисплей |
| Heading 1 | 70px | 330 | 1.00 | — | NeueHaasGrotesk, заголовки секций |
| Heading 2 | 55px | 330 | 1.16 | — | NeueHaasGrotesk, подсекции |
| Heading 3 | 48px | 330 | 1.14 | — | NeueHaasGrotesk, заголовки функций |
| Heading 4 | 32px | 360 | 1.14 | 0.32px | NeueHaasGrotesk, заголовки карточек |
| Heading 5 | 28px | 500 | 1.28 | 0.42px | NeueHaasGrotesk, малые заголовки |
| Heading 6 | 24px | 400 | 1.14 | 0.36px | NeueHaasGrotesk, второстепенные заголовки |
| Body Large | 20px | 500 | 1.40 | 0.3px | NeueHaasGrotesk / Inter, вводные абзацы |
| Body | 18px | 400 | 1.56 | — | Inter-Variable, стандартный основной текст |
| Body Medium | 18px | 550 | 1.56 | — | Inter-Variable, акцентированный основной текст |
| Body Small | 16px | 400 | 1.50 | — | Inter / NeueHaasGrotesk, компактный текст |
| Body Small Medium | 16px | 420 | 1.50 | — | Inter-Variable, слегка акцентированный |
| Button | 16px | 400 | 1.50 | — | NeueHaasGrotesk, текст CTA |
| Nav Link | 18px | 500 | 1.25 | 0.72px | NeueHaasGrotesk, элементы навигации |
| Caption | 14px | 500 | 1.49 | 0.28px | NeueHaasGrotesk / Inter, метаданные |
| Caption Medium | 14px | 550 | 1.49 | 0.28px | Inter-Variable, акцентированная подпись |
| Overline | 15.36px | 400 | 1.50 | 1.54px | NeueHaasGrotesk, метки с широким трекингом |
| Micro | 13px | 500 | 1.50 | -0.13px | Inter, мелкий текст с плотным трекингом |
| Label | 12px | 400 | 1.20 | 0.72px | Inter, метки в верхнем регистре |
| Code | 16px | 400 | 1.50 | — | ui-monospace, верхний регистр, блоки кода |
| Code Small | 12px | 400 | 1.33 | — | ui-monospace, верхний регистр, инлайн-код |
Принципы
Типографика Shopify — это мастер-класс точности с переменными шрифтами. Дисплейный уровень живёт почти исключительно при насыщенности 330–400 — невесомый текст, который кажется парящим над тёмным фоном как проецируемый свет. Это противоположность жирного, тяжёлого подхода большинства SaaS-сайтов: там, где другие кричат, Shopify шепчет в монументальном масштабе. Заголовки 96px при насыщенности 330 создают парадокс огромного размера и деликатного штриха, который ощущается одновременно монументальным и хрупким. Функция OpenType ss03 активирует стилистический набор, придающий определённым символам (вероятно, 'a', 'g' и некоторым цифрам) более утончённый вид, отличая типографику Shopify от стандартного использования Helvetica Neue. Inter Variable управляет основным уровнем с хирургической точностью, используя насыщенности 420 и 550, которые существуют между традиционными ступенями — каждый текстовый элемент имеет именно тот визуальный вес, который ему необходим.
4. Стилизация компонентов
Кнопки
Основная (белая заливка)
- Фон: Белый (
#FFFFFF) - Текст: Чёрный (
#000000) - Граница: 2px solid transparent
- Радиус скругления: полная пилюля (9999px)
- Отступы: 12px 26px 12px 16px (асимметрично — больше справа для визуального баланса)
- Наведение: лёгкое уменьшение непрозрачности или смена фона
- Фокус: контурное кольцо
#36F4A4(Neon Green) 2px - Переход: all 200ms ease
Вторичная (призрачная/обведённая)
- Фон: transparent
- Текст: Белый (
#FFFFFF) - Граница: 2px solid Белый (
#FFFFFF) - Радиус скругления: полная пилюля (9999px)
- Отступы: 12px 26px 12px 16px
- Наведение: заполняется белым фоном с чёрным текстом
- Фокус: контур
#36F4A42px
Бейдж/Тег (нейтральная заливка)
- Фон:
rgba(255, 255, 255, 0.2)(матовое стекло) - Текст: Белый (
#FFFFFF) - Граница: отсутствует
- Радиус скругления: слегка скруглённый (4px)
- Отступы: 12px 16px
- Шрифт: 16px regular
Карточки и контейнеры
- Фон: Deep Teal (
#02090A) на тёмных страницах - Граница: 1px solid
#1E2C31(Dark Card Border) — едва заметная граница - Радиус скругления: 8px для стандартных карточек, 12px для избранных карточек, 20px 20px 0 0 для карточек со скруглением сверху
- Тень: многослойная система:
- В покое:
rgba(0,0,0,0.1) 0px 0px 0px 1px, rgba(0,0,0,0.1) 0px 2px 2px, rgba(0,0,0,0.1) 0px 4px 4px, rgba(0,0,0,0.1) 0px 8px 8px+rgba(255,255,255,0.03) 0px 1px 0px inset - Вставленный белый блик создаёт тонкое свечение верхнего края
- В покое:
- Наведение: тень расширяется, карточка может слегка осветлиться
- Переход: box-shadow 300ms ease, transform 200ms ease
Поля ввода и формы
- Фон: transparent или Dark Forest (
#061A1C) - Текст: Белый (
#FFFFFF) - Граница: 1px solid
#3F3F46(Shade-70) - Радиус скругления: 8px
- Отступы: 12px 16px
- Фокус: 2px solid
#36F4A4(кольцо фокуса Neon Green) - Плейсхолдер: Shade-50 (
#71717A) - Переход: border-color 200ms ease
Навигация
- Фон: transparent (накладывается на тёмный герой), при прокрутке становится Forest (
#102620) - Высота: ~64px
- Слева: логотип-словесный знак Shopify (SVG, белый на тёмном)
- Центр/Справа: ссылки навигации 18px/500 NeueHaasGrotesk, белые, межбуквенный интервал 0.72px
- CTA: белая кнопка-пилюля "Start for free" (справа)
- Вторичная CTA: призрачная кнопка с белой границей
- Наведение: ссылки переходят к Muted Text (
#A1A1AA) или получают подчёркивание - Мобильный: меню-гамбургер, полноэкранное тёмное перекрытие
- Переход: background 300ms ease при прокрутке
Обработка изображений
- Скриншоты продуктов: встроены в тёмные контексты интерфейса, соответствуя окружающей темноте
- Превью интерфейса администратора: отображаются на тёмном фоне с тонкими границами карточек
- Соотношения сторон: разные — изображения героев широкие (приблизительно 16:9), снимки функций гибкие
- Все изображения вплотную расположены в тёмных контейнерах — никаких ярких рамок или обрамлений
- Отложенная загрузка с тёмными поверхностями-заглушками
Индикаторы доверия
- Статистика отображается на видном месте: "15+" (лет), "150M+" (покупателей)
- Числа в дисплейном масштабе в NeueHaasGrotesk
- Разделы призыва к действию экосистемы партнёров/разработчиков
- Отзывы в тёмной теме, органично вписанные в поток страницы
5. Принципы компоновки
Система отступов
Базовая единица: 8px
| Токен | Значение | Использование |
|---|---|---|
| space-1 | 4px | Плотные инлайн-промежутки |
| space-2 | 8px | Базовая единица, промежутки иконок |
| space-3 | 12px | Отступы карточки, плотные поля |
| space-4 | 16px | Стандартные отступы элемента |
| space-5 | 24px | Промежутки карточек, отступы секции |
| space-6 | 28px | Средний межсекционный отступ |
| space-7 | 32px | Разрывы секций |
| space-8 | 36px | Большой отступ |
| space-9 | 40px | Отступ главной секции |
| space-10 | 64px | Отступ секции героя, большие промежутки |
Сетка и контейнер
- Максимальная ширина контейнера: ~1280px (по центру)
- Герой: на всю ширину, тёмный фон от края до края с центрированным текстом
- Секции функций: двухколоночные компоновки с текстом и скриншотами продуктов
- Секции статистики: горизонтальная компоновка с крупными числами
- Горизонтальные отступы: 64px рабочий стол, 32px планшет, 16px мобильный
- Промежуток сетки: 24–32px между основными блоками контента
Философия пустого пространства
Стратегия пустого пространства Shopify театральная. Секции разделены огромными просторами тёмного пространства — 80px до 120px чистого чёрного воздуха — что создаёт ритм презентации, а не веб-страницы. Каждый блок контента — это собственный «слайд» в прокрутке в стиле keynote. Внутри секций отступы теснее и осмысленнее, создавая фокальную плотность на фоне обширной пустоты. Контраст между макро-уровневой пустотой и микро-уровневой точностью — вот что придаёт сайту его кинематический ритм.
Шкала радиуса скругления
| Значение | Контекст |
|---|---|
| 4px | Теги, бейджи, микро-элементы |
| 8px | Стандартные карточки, поля ввода, видеоконтейнеры |
| 12px | Избранные карточки, контейнеры изображений, кнопки (не-пилюля) |
| 20px | Карточки со скруглением сверху (20px 20px 0 0), заголовки модальных окон |
| 340px | Крупные скруглённые декоративные элементы |
| 9999px | Кнопки-пилюли, бейджи-пилюли, элементы навигации |
6. Глубина и поднятие
| Уровень | Обработка | Использование |
|---|---|---|
| Базовый | Без тени, тёмная поверхность | Фон страницы по умолчанию |
| Тонкий | rgba(0,0,0,0.1) 0px 0px 0px 1px + вставленное белое свечение |
Карточки в покое |
| Средний | Многослойный: кольцо 1px + 2px + 4px + стек теней 8px | Приподнятые карточки, избранные секции |
| Высокий | rgba(0,0,0,0.25) 0px 25px 50px -12px |
Модальные окна, выпадающие списки, перекрытия |
| Фокус | 0px 0px 0px 2px #36F4A4 |
Кольцо фокуса клавиатуры (Neon Green) |
Система теней Shopify необычно изощрённа. Вместо значений теней с единственным слоем карточки используют стековый, многослойный подход: кольцо 1px для определения границ, прогрессивные размытия 2px/4px/8px для естественного спада освещения и деликатное вставленное белое свечение (rgba(255,255,255,0.03)), имитирующее поверхность стекла, освещённую сверху. На тёмных фонах тени затемняют от уже тёмных поверхностей, поэтому тени функционируют скорее как «ambient occlusion», чем традиционное поднятие — карточка кажется слегка погружённой в поверхность, а не парящей над ней.
Декоративная глубина
- Тёмные тил-градиенты: Амбиентные радиальные промывки позади секций-героев и витрин продуктов
- Эффекты прожектора: Яркие центрированные области, плавно переходящие в чёрный, создавая театральное освещение в стиле keynote
- Свечение краёв: Тонкие светлые края на тёмных карточках через вставленный box-shadow
- Зелёные атмосферные ореолы: Едва заметные зелёные оттенки в фоновых градиентах, отражающие брендовый акцент
7. Что делать и чего не делать
Что делать
- Использовать иерархию тёмных тил-чёрных поверхностей (Void → Deep Teal → Dark Forest → Forest) для глубины
- Поддерживать дисплейную типографику при насыщенности 330–400 — эфирная лёгкость является подписью дизайна
- Использовать Neon Green (
#36F4A4) исключительно для состояний фокуса и критических акцентных выделений - Применять радиус 9999px ко всем основным кнопкам CTA — полная пилюля не подлежит обсуждению
- Использовать многослойную систему теней для поднятия карточек — одиночные тени выглядят плоско
- Поддерживать функцию OpenType
ss03для всего текста — это часть типографической идентичности - Использовать Inter Variable для основного текста и NeueHaasGrotesk для заголовков — никогда не менять их роли местами
- Создавать театральные отступы между секциями (80px+) для кинематического темпа
Чего не делать
- Не использовать чистый чёрный (#000000) для текста на тёмном фоне — использовать только белый (#FFFFFF)
- Не вводить тёплые цвета (оранжевый, красный, жёлтый) — палитра строго холодная (зелёные, тил, нейтральные)
- Не использовать насыщенность выше 500 для основного текста NeueHaasGrotesk — тяжёлые начертания нарушают эфирное ощущение
- Не применять зелёные акценты на больших поверхностях — Neon Green предназначен только для маленьких, точных выделений
- Не использовать острые углы (радиус 0px) на интерактивных элементах — всё скругляется
- Не добавлять яркие фоны — тёмная тема фундаментальна, а не опциональна
- Не использовать однослойные box-shadow — стековый подход является системой
- Не устанавливать высоту строки выше 1.56 для основного текста — текст Shopify относительно компактный
- Не смешивать NeueHaasGrotesk и Inter в одном размере/роли — их шкалы насыщенности отличаются
- Не использовать отрицательный межбуквенный интервал для заголовков — заголовки Shopify имеют нейтральный или положительный трекинг
8. Адаптивное поведение
Контрольные точки
| Название | Ширина | Ключевые изменения |
|---|---|---|
| Мобильный | <640px | Одна колонка, навигация-гамбургер, дисплейный текст масштабируется до 48px, отступ 16px |
| Планшет | 640-1024px | Начинаются двухколоночные сетки, дисплейный текст 70px, отступ 32px |
| Рабочий стол | 1024-1440px | Полная компоновка, расширенная навигация, дисплей 96px, отступ 64px |
| Большой рабочий стол | >1440px | Контейнер max-width по центру, увеличенный межсекционный отступ |
Зоны касания
- Минимальная зона касания: 44x44px (WCAG AAA)
- Кнопки-пилюли: минимальная высота 48px с щедрыми горизонтальными отступами
- Ссылки навигации: зона касания 44px
- Поверхности карточек: вся карточка нажимаема там, где есть ссылка
Стратегия сворачивания
- Навигация: Полные горизонтальные ссылки → меню-гамбургер ниже 1024px; логотип и кнопка CTA остаются видимыми
- Секция героя: Дисплей 96px → 70px на планшете → 48px на мобильном; сохраняет однocolonное центрированное выравнивание
- Секции функций: 2 колонки текст+изображение → одна стопированная колонка ниже 768px
- Статистика: Горизонтальный ряд → стопировано вертикально на мобильном
- Отступы секций: 64px → 40px → 24px → 16px по мере сужения окна просмотра
- Карточки: Сетка → стопирование, сохранение полной ширины на мобильном
Поведение изображений
- Скриншоты продуктов: адаптивные в тёмных контейнерах, сохраняют соотношение сторон
- Изображения героев: полная ширина на всех контрольных точках, отложенная загрузка с тёмными заглушками
- Превью интерфейса администратора: пропорциональное масштабирование, могут обрезаться на мобильном
- Все изображения используют CDN (
cdn.shopify.com) с адаптивным srcset
9. Руководство по агентным промптам
Краткий справочник цветов
- Основная CTA: Shopify White (
#FFFFFF) - Фон страницы: Void Black (
#000000) - Поверхность карточки: Deep Teal (
#02090A) - Фон секции: Dark Forest (
#061A1C) - Приподнятый фон: Forest (
#102620) - Акцент: Neon Green (
#36F4A4) - Основной текст: Белый (
#FFFFFF) - Приглушённый текст: Muted (
#A1A1AA) - Тёмная граница: Dark Card Border (
#1E2C31)
Примеры промптов для компонентов
- «Создай секцию героя на истинно чёрном (#000000) фоне с заголовком NeueHaasGrotesk 96px/330 белого цвета, подзаголовком 20px/500 в #A1A1AA и двумя кнопками-пилюлями: белая с заливкой (радиус 9999px) и призрачная с границей белого цвета 2px»
- «Разработай карточку функции на Deep Teal (#02090A) с границей #1E2C31 1px, радиусом 12px, многослойной тенью (кольцо 1px + размытие 2px/4px/8px при 10% чёрного), содержащую белый заголовок 32px/360 и основной текст #A1A1AA 18px/400»
- «Создай секцию статистики на Dark Forest (#061A1C) с белыми числами 96px/750 (NeueHaasGrotesk), описательными метками #A1A1AA 16px/400 и щедрым отступом 64px между блоками статистики»
- «Создай фиксированную навигацию с прозрачным фоном (при прокрутке становится #102620), белым логотипом Shopify слева, белыми ссылками навигации 18px/500 с межбуквенным интервалом 0.72px и белой кнопкой-пилюлей "Start for free" справа»
- «Разработай тег/бейдж с фоном из матового стекла rgba(255,255,255,0.2), радиусом 4px, отступами 12px 16px, белым текстом 16px — парящий над тёмной поверхностью карточки»
Руководство по итерации
При доработке существующих экранов, созданных с использованием этой дизайн-системы:
- Сосредоточься на ОДНОМ компоненте за раз
- Ссылайся на конкретные названия цветов и hex-коды из этого документа
- Помни: это DARK-FIRST дизайн — светлые поверхности являются исключением, а не правилом
- Дисплейный текст всегда должен казаться невесомым (насыщенность 330–400) — если он выглядит тяжёлым, уменьши насыщенность
- Neon Green (#36F4A4) ценен — используй экономно только для фокуса и акцента
- Иерархия тёмных поверхностей (чёрный → deep teal → dark forest → forest) создаёт тонкую глубину
- Тени многослойные — одно значение
box-shadowне передаст ощущение карточки Shopify - Функция OpenType
ss03должна быть активна для всего текста для типографической согласованности