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。
34 KiB
34 KiB
Система дизайну, натхненна Shopify
Category: Електронна комерція та роздрібна торгівля Платформа електронної комерції. Темна кінематографічна тема, неоново-зелений акцент, ультралегка типографіка.
1. Візуальна тема та атмосфера
Shopify.com — це темний цифровий театр, сайт, що представляє свою комерційну платформу як кінематографічну прем'єру. Весь досвід розгортається на тлі бездоннно-чорних поверхонь, що несуть найніжніший натяк на глибокий лісовий зелений (#02090A, #061A1C, #102620), створюючи нічну атмосферу, яка схожа більше на ексклюзивну презентацію продукту на технологічному кейноті, аніж на типову маркетингову сторінку SaaS. Ця темрява не холодна і не корпоративна — це тепла, обгортаюча темрява розкішного досвіду, як сидіння в першому ряду затемненого залу.
Типографіка є беззаперечною зіркою. NeueHaasGrotesk — витончений нащадок Helvetica — з'являється в монументальному масштабі (96px) з неймовірно легкою насиченістю (330-400), створюючи заголовки, що здаються вирізаними у світлі, а не надрукованими чорнилом. Функція OpenType ss03 надає літерам виразний характер, що відрізняє типографіку Shopify від стандартного використання Helvetica. Нижче шару дисплею, Inter Variable обробляє основний текст з хірургічною точністю, використовуючи рівно незвичні змінні насиченості (420, 450, 550), що знаходяться між традиційними точками насиченості. Ця точність сигналізує про компанію, що ретельно опрацьовує кожну деталь.
Колір використовується з надзвичайною стриманістю. Основний акцент — Неоновий зелений Shopify (#36F4A4) — електричний м'ята, що з'являється виключно на кільцях фокусу та акцентних підсвіченнях, пульсуючи як біолюмінесцентний сигнал на тлі темного полотна. Більш м'які відтінки зеленого (Aloe #C1FBD4, Pistachio #D4F9E0) забезпечують атмосферні промивки. Білий — єдиний колір тексту, що має значення на темних поверхнях, тоді як нейтральна шкала на основі цинку (#A1A1AA до #3F3F46) обробляє ієрархію тихої інформації. Результатом є дизайн, завдяки якому торгова технологія здається такою, що належить науково-фантастичному майбутньому.
Ключові характеристики:
- Дизайн dark-first з глибокими підтонами лісового тілу (не чистий чорний)
- Ультралегка типографіка дисплею (насиченість 330) у монументальному масштабі (96px), що створює ефемерну присутність
- Неоновий зелений (
#36F4A4) як єдиний високоенергетичний акцент на тлі темряви - Кнопки з повним заокругленням (радіус 9999px) як основна інтерактивна форма
- Багатошарові тіні, що створюють фотографічну глибину
- Знімки екрана продуктів, вбудовані в темний контекст інтерфейсу, що відповідає навколишній темряві
- Нейтральна шкала на основі цинку для ієрархії тексту — збалансована між теплим та холодним
2. Кольорова палітра та ролі
Основні
- Shopify White (
#FFFFFF): Основний текст на темних поверхнях, заливки кнопок, елементи з високим контрастом - Shopify Black (
#000000): Фон основного тексту, текст кнопок на білому, база максимального контрасту (--color-shade-100)
Другорядні та акценти
- Неоновий зелений (
#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): Обрамлення карток на темних поверхнях, тонке визначення меж
Нейтральні та текст (Цинкова шкала)
- Shade-30 (
#D4D4D8): Найсвітліший нейтральний, майже непомітні обрамлення на темному (--color-shade-30) - Приглушений текст (
#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: Тонкі атмосферні градієнти із зеленим відтінком за секціями hero, що створюють глибину без однотонних кольорів
- Spotlight: Зосереджена яскрава область, що згасає до чорного — створює презентаційне освітлення в стилі кейноту
3. Правила типографіки
Сімейство шрифтів
Дисплейний: NeueHaasGrotesk (витончений нащадок Helvetica, змінний шрифт)
- Резервні варіанти: Helvetica, Arial, sans-serif
- Функції OpenType:
ss03(стилістичний набір 3 — характерні альтернативи накреслень) - Доступні насиченості: 330, 360, 400, 500, 750 (змінний)
- Використовується для всіх заголовків, тексту hero та великих дисплейних елементів
Основний текст: Inter-Variable
- Резервні варіанти: Helvetica, Arial, sans-serif
- Функції OpenType:
ss03 - Доступні насиченості: 400, 420, 450, 500, 550 (змінний)
- Використовується для основного тексту, посилань, кнопок, елементів інтерфейсу
Mono: ui-monospace
- Резервні варіанти: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New
- Використовується для фрагментів коду, міток даних, технічного вмісту
Ієрархія
| Роль | Розмір | Насиченість | Висота рядка | Міжлітерний інтервал | Примітки |
|---|---|---|---|---|---|
| Display XL | 96px | 400 | 1.00 | — | NeueHaasGrotesk, заголовки hero, "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 (асиметричний — більше правого відступу для візуального балансу)
- Hover: незначне зменшення непрозорості або зсув фону
- Фокус: 2px
#36F4A4(Неоновий зелений) контурне кільце - Перехід: all 200ms ease
Другорядна (ghost/контурна)
- Фон: transparent
- Текст: Білий (
#FFFFFF) - Обрамлення: 2px solid Білий (
#FFFFFF) - Радіус обрамлення: повна пігулка (9999px)
- Відступ: 12px 26px 12px 16px
- Hover: заповнюється білим фоном з чорним текстом
- Фокус: 2px
#36F4A4контур
Значок/Тег (нейтральне заповнення)
- Фон:
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 - Внутрішнє біле підсвічення створює тонке сяяння верхнього краю
- Стан спокою:
- Hover: тінь розширюється, картка може злегка яскравіти
- Перехід: box-shadow 300ms ease, transform 200ms ease
Поля введення та форми
- Фон: transparent або Dark Forest (
#061A1C) - Текст: Білий (
#FFFFFF) - Обрамлення: 1px solid
#3F3F46(Shade-70) - Радіус обрамлення: 8px
- Відступ: 12px 16px
- Фокус: 2px solid
#36F4A4(кільце фокусу Неонового зеленого) - Плейсхолдер: Shade-50 (
#71717A) - Перехід: border-color 200ms ease
Навігація
- Фон: transparent (накладається на темний hero), стає Forest (
#102620) при прокрутці - Висота: ~64px
- Ліво: словесний логотип Shopify (SVG, білий на темному)
- Центр/Право: навігаційні посилання 18px/500 NeueHaasGrotesk, білі, letter-spacing 0.72px
- CTA: біла кнопка-пігулка "Почати безкоштовно" (праворуч)
- Другорядний CTA: кнопка ghost з білим обрамленням
- Hover: посилання переходять до приглушеного тексту (
#A1A1AA) або набувають підкреслення - Мобільний: бургер-меню, повноекранне темне накладення
- Перехід: background 300ms ease при прокрутці
Обробка зображень
- Знімки екрана продукту: вбудовані в темний контекст інтерфейсу, що відповідає навколишній темряві
- Попередні перегляди адміністративного інтерфейсу: відображаються на темному тлі з тонкими обрамленнями карток
- Співвідношення сторін: різні — зображення hero широкі (близько 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 | Відступ секції hero, великі проміжки |
Сітка та контейнер
- Максимальна ширина контейнера: ~1280px (центрована)
- Hero: на всю ширину, темний фон від краю до краю з центрованим текстом
- Секції функцій: двоколонкові макети з текстом та знімками екрана продукту
- Секції статистики: горизонтальний макет з великими числами
- Горизонтальний відступ: 64px на десктопі, 32px на планшеті, 16px на мобільному
- Проміжок сітки: 24-32px між основними блоками вмісту
Філософія пустого простору
Стратегія пустого простору Shopify є театральною. Розділи відокремлені величезними просторами темного простору — від 80px до 120px чистого чорного простору для дихання — що створюють темп презентації, а не веб-сторінки. Кожен блок вмісту є власним "слайдом" у прокрутці в стилі кейноту. Всередині розділів відступи щільніші та більш цілеспрямовані, створюючи фокусну щільність на тлі розлогої пустоти. Контраст між макрорівневою порожнечею та мікрорівневою точністю — ось що надає сайту його кінематографічний ритм.
Шкала радіусу обрамлення
| Значення | Контекст |
|---|---|
| 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 |
Кільце фокусу клавіатури (Неоновий зелений) |
Система тіней Shopify є незвично витонченою. Замість одноступінчастих тіней картки використовують складений багатошаровий підхід: кільце 1px для визначення межі, прогресивні розмиття 2px/4px/8px для природного спадання світла та делікатне внутрішнє біле сяяння (rgba(255,255,255,0.03)), що імітує скляну поверхню з підсвіченням зверху. На темному тлі тіні затемнюють вже темні поверхні, тому тіні функціонують більше як "ambient occlusion", а не традиційне підняття — картка здається злегка зануреною в поверхню, а не ширяючою над нею.
Декоративна глибина
- Темні тілові градієнти: Атмосферні радіальні промивання за секціями hero та презентаціями продуктів
- Ефекти прожектора: Яскраві центровані зони, що згасають до чорного, створюючи театральне освітлення в стилі кейноту
- Крайове сяяння: Тонкі світлі краї темних карток за допомогою внутрішнього box-shadow
- Зелені атмосферні ореоли: Ледь помітні зелені відтінки в градієнтах фону, що відгукуються акценту бренду
7. Що робити і що не робити
Що робити
- Використовуйте ієрархію темних тілово-чорних поверхонь (Void → Deep Teal → Dark Forest → Forest) для глибини
- Зберігайте дисплейну типографіку при насиченості 330-400 — ефемерна легкість є підписом дизайну
- Використовуйте Неоновий зелений (
#36F4A4) виключно для станів фокусу та критичних акцентних підсвічень - Застосовуйте радіус 9999px до всіх основних кнопок CTA — повна пігулка є обов'язковою
- Використовуйте багатошарову систему тіней для підняття карток — одиночні тіні виглядають плоско
- Підтримуйте функцію OpenType
ss03у всьому тексті — це частина типографічної ідентичності - Використовуйте Inter Variable для основного тексту та NeueHaasGrotesk для заголовків — ніколи не змішуйте їх ролі
- Створюйте театральні відступи між розділами (80px+) для кінематографічного темпу
Що не робити
- Не використовуйте чистий чорний (#000000) для тексту на темному тлі — використовуйте лише білий (#FFFFFF)
- Не вводьте теплі кольори (помаранчевий, червоний, жовтий) — палітра є суворо холодною (зелені, тілові, нейтральні)
- Не використовуйте насиченість шрифту вище 500 для основного тексту NeueHaasGrotesk — важкі насиченості руйнують ефемерне відчуття
- Не застосовуйте зелені акценти до великих поверхонь — Неоновий зелений призначений для малих, точних підсвічень
- Не використовуйте гострі кути (радіус 0px) на інтерактивних елементах — все заокруглюється
- Не додавайте яскраве тло — темна тема є фундаментальною, а не необов'язковою
- Не використовуйте одношарові box shadows — складений підхід є системою
- Не встановлюйте line-height вище 1.56 для основного тексту — текст Shopify є відносно компактним
- Не змішуйте NeueHaasGrotesk та Inter при однаковому розмірі/ролі — їхні шкали насиченості відрізняються
- Не використовуйте letter-spacing нижче 0 для заголовків — заголовки Shopify відстежують нейтрально або позитивно
8. Адаптивна поведінка
Точки зупинки
| Назва | Ширина | Ключові зміни |
|---|---|---|
| Мобільний | <640px | Одна колонка, бургер-навігація, дисплейний текст масштабується до 48px, відступ 16px |
| Планшет | 640-1024px | Починаються двоколонкові сітки, дисплейний текст 70px, відступ 32px |
| Десктоп | 1024-1440px | Повний макет, розширена навігація, дисплей 96px, відступ 64px |
| Великий десктоп | >1440px | Контейнер max-width центрований, збільшені відступи розділів |
Цілі дотику
- Мінімальна ціль дотику: 44x44px (WCAG AAA)
- Кнопки-пігулки: мінімальна висота 48px з щедрим горизонтальним відступом
- Навігаційні посилання: область дотику 44px
- Поверхні карток: вся картка є натисканою при наявності посилання
Стратегія згортання
- Навігація: Повні горизонтальні посилання → бургер-меню нижче 1024px; логотип та кнопка CTA залишаються видимими
- Секція hero: дисплей 96px → 70px на планшеті → 48px на мобільному; зберігає вирівнювання по центру в одній колонці
- Секції функцій: двоколонковий текст+зображення → складений в одну колонку нижче 768px
- Статистика: Горизонтальний ряд → вертикальний стос на мобільному
- Відступ розділу: 64px → 40px → 24px → 16px зі звуженням вьюпорту
- Картки: Сітка → стос, зберігаючи повну ширину на мобільному
Поведінка зображень
- Знімки екрана продукту: адаптивні в темних контейнерах, зберігають співвідношення сторін
- Зображення hero: на всю ширину на всіх точках зупинки, відкладене завантаження з темними заповнювачами
- Попередні перегляди адміністративного інтерфейсу: масштабуються пропорційно, можуть обрізатися на мобільному
- Усі зображення використовують CDN (
cdn.shopify.com) з адаптивним srcset
9. Посібник із запитів агента
Швидка кольорова довідка
- Основний CTA: Shopify White (
#FFFFFF) - Фон сторінки: Void Black (
#000000) - Поверхня картки: Deep Teal (
#02090A) - Фон розділу: Dark Forest (
#061A1C) - Піднятий фон: Forest (
#102620) - Акцент: Neon Green (
#36F4A4) - Текст body: White (
#FFFFFF) - Приглушений текст: Muted (
#A1A1AA) - Темне обрамлення: Dark Card Border (
#1E2C31)
Приклади запитів компонентів
- "Створіть секцію hero на фоні справжнього чорного (#000000) із заголовком 96px/330 NeueHaasGrotesk білого кольору, підзаголовком 20px/500 в #A1A1AA та двома кнопками-пігулками: білою заповненою (радіус 9999px) та ghost з білим обрамленням 2px"
- "Спроектуйте картку функцій на Deep Teal (#02090A) з обрамленням 1px #1E2C31, радіусом 12px, багатошаровою тінню (кільце 1px + розмиття 2px/4px/8px при 10% чорного), що містить білий заголовок 32px/360 та основний текст 18px/400 #A1A1AA"
- "Побудуйте секцію статистики на Dark Forest (#061A1C) з білими числами 96px/750 (NeueHaasGrotesk), описовими мітками 16px/400 #A1A1AA та щедрими відступами 64px між блоками статистики"
- "Створіть sticky nav із прозорим фоном (стає #102620 при прокрутці), білим логотипом Shopify ліворуч, білими навігаційними посиланнями 18px/500 з letter-spacing 0.72px та білою кнопкою-пігулкою 'Почати безкоштовно' праворуч"
- "Спроектуйте тег/значок із фоном матового скла rgba(255,255,255,0.2), радіусом 4px, відступом 12px 16px, білим текстом 16px — що ширяє над темною поверхнею картки"
Посібник з ітерацій
При вдосконаленні наявних екранів, створених за допомогою цієї системи дизайну:
- Зосередьтеся на ОДНОМУ компоненті за раз
- Посилайтеся на конкретні назви кольорів та шістнадцяткові коди з цього документа
- Пам'ятайте: це DARK-FIRST дизайн — світлі поверхні є винятком, а не правилом
- Дисплейний текст завжди повинен відчуватися легким як пір'їнка (насиченість 330-400) — якщо він виглядає важким, зменшіть насиченість
- Неоновий зелений (#36F4A4) є цінним — використовуйте ощадно лише для фокусу та акценту
- Ієрархія темних поверхонь (чорний → deep teal → dark forest → forest) створює тонку глибину
- Тіні є багатошаровими — одне значення
box-shadowне передасть відчуття карток Shopify - Функція OpenType
ss03має бути активована для всього тексту для типографічної узгодженості