workbuddy_skills/open-design/design-systems/shopify/DESIGN-uk.md

# Система дизайну, натхненна 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 — що ширяє над темною поверхнею картки"

### Посібник з ітерацій

При вдосконаленні наявних екранів, створених за допомогою цієї системи дизайну:
1. Зосередьтеся на ОДНОМУ компоненті за раз
2. Посилайтеся на конкретні назви кольорів та шістнадцяткові коди з цього документа
3. Пам'ятайте: це DARK-FIRST дизайн — світлі поверхні є винятком, а не правилом
4. Дисплейний текст завжди повинен відчуватися легким як пір'їнка (насиченість 330-400) — якщо він виглядає важким, зменшіть насиченість
5. Неоновий зелений (#36F4A4) є цінним — використовуйте ощадно лише для фокусу та акценту
6. Ієрархія темних поверхонь (чорний → deep teal → dark forest → forest) створює тонку глибину
7. Тіні є багатошаровими — одне значення `box-shadow` не передасть відчуття карток Shopify
8. Функція OpenType `ss03` має бути активована для всього тексту для типографічної узгодженості