# Дизайн-система, натхненна Apple

> Category: Медіа та споживчі продукти
> Споживча електроніка. Преміальний порожній простір, SF Pro, кінематографічні зображення.

## 1. Візуальна тема та атмосфера

Вебмова Apple — це точна редакційна система, яка чергується між галерейним спокоєм та насиченими роздрібними інформаційними блоками. Візуальний тон залишається стриманим: широкі нейтральні полотна, тихий хром і зображення продукту, яким віддається майже вся виразна вага. Інтерфейс сконструйовано так, щоб він зникав, аби обладнання, матеріали та варіанти оздоблення стали наративним переднім планом.

На п'яти проаналізованих сторінках ритм послідовний, але не монолітний. Маркетингові поверхні (домашня сторінка та Environment) використовують кінематографічне чергування чорного та світла за розділами, тоді як комерційні поверхні (потоки Store та Shop) запроваджують тісніші відступи, більше утилітарних елементів керування й щільніші стоси карток, не порушуючи основну граматику бренду. Результат — одна система з двома передачами: режим вітрини та режим транзакції.

Типографіка є стабілізатором. SF Pro Display несе ієрархію героїв і мерчандайзингу з компактними висотами рядків та контрольованим трекінгом, тоді як SF Pro Text обробляє метадані продукту, навігацію, фільтри та щільний UI вибору. Типографіка залишається непомітною, але діапазон масштабу достатньо широкий, щоб підтримувати як білбордне героїчне повідомлення, так і мікроутилітарні підписи.

**Ключові характеристики:**
- Бінарний ритм розділів: глибокі чорні сцени (`#000000`), що чергуються з блідими нейтральними полями (`#f5f5f7`)
- Єдине синє акцентне сімейство для семантики дій і посилань (`#0071e3`, `#0066cc`, `#2997ff`)
- Два режими роботи в одній системі: кінематографічні модулі-вітрини та щільні комерційні конфігуратори
- Сильна опора на зображення та матеріальне оздоблення; UI-хром залишається візуально тонким
- Тісні заголовні показники (SF Pro Display, semibold) у парі з компактною типографікою тексту/посилань (SF Pro Text)
- Геометрія пігулок і капсул як фірмова мова дій (`18px` до `980px` та круглі елементи керування)
- Глибина використовується ощадливо; контраст і розділення поверхонь виконують більшу частину роботи з нашаруванням
- Багатосторінковий ритм кольорових блоків: чорні героїчні розділи -> бліді нейтральні поля мерчандайзингу -> утилітарні білі роздрібні поверхні -> темні мікроповерхні для елементів керування

## 2. Палітра кольорів та ролі

> **Source Pages:** `https://www.apple.com/`, `https://www.apple.com/environment/`, `https://www.apple.com/store`, `https://www.apple.com/shop/buy-iphone/iphone-17-pro`, `https://www.apple.com/shop/accessories/all`

### Основні
- **Абсолютний чорний** (`#000000`): занурювальні героїчні полотна, високодраматичні розділи продуктів, глибокі UI-якорі.
- **Блідий сірий Apple** (`#f5f5f7`): основна світла поверхня для смуг функцій, блоків порівняння та редакційних переходів.
- **Майже чорне чорнило** (`#1d1d1f`): основний текст і колір елементів керування з темною заливкою на світлих полотнах.

### Вторинні та акцентні
- **Синій дії Apple** (`#0071e3`): основна заливка дій та акцент бренду, що сигналізує фокус.
- **Синій текстового посилання** (`#0066cc`): колір вбудованого посилання, оптимізований для читабельності довгих текстів.
- **Високояскравий синій посилання** (`#2997ff`): яскраве оформлення посилання на темніших сценах, де потрібен сильніший контраст.

### Поверхня та фон
- **Чисто біле полотно** (`#ffffff`): фони роздрібу/списку продуктів та щільні транзакційні секції.
- **Графітова поверхня A** (`#272729`): контекстний шар темної картки та елементів керування медіа.
- **Графітова поверхня B** (`#262629`): трохи глибший темний утилітарний шар для груп елементів керування.
- **Графітова поверхня C** (`#28282b`): піднесені темні допоміжні поверхні.
- **Графітова поверхня D** (`#2a2a2c`): найтемніший піднесений рівень, що використовується для розділення в насиченіших темних сценах.

### Нейтральні та текст
- **Вторинний нейтральний сірий** (`#6e6e73`): вторинний текст тіла, допоміжні описи, третинні метадані.
- **М'який сірий межі** (`#d2d2d7`): роздільники, тонкі контури та приглушене утилітарне обмеження.
- **Середній сірий межі** (`#86868b`): сильніші контури полів у контекстах конфігурації продуктів та фільтрів.
- **Утилітарний темно-сірий** (`#424245`): перехід темно-нейтрального тексту/поверхні в контекстах магазину.

### Семантичні та акцентні
- **Сигнал вибору/фокусу** (`#0071e3`): спільний сигнал фокусу та вибраного стану в маркетингових і комерційних контекстах.
- **Помилка/Попередження/Успіх**: жодна окрема семантична палітра послідовно не була видима в наборі вилучених поверхонь.

### Система градієнтів
- Вилучені сторінки переважно керуються суцільними поверхнями. Візуальне багатство походить від фотографії та рендерингу оздоблення, а не від постійних UI-градієнтів.

## 3. Правила типографіки

### Сімейство шрифтів
- **Сімейство для дисплея:** `SF Pro Display`, запасні `SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif`
- **Сімейство для тексту:** `SF Pro Text`, запасні `SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif`
- **Розподіл використання:** сімейство для дисплея обробляє героїчні/продуктові заголовки та заголовки мерчандайзингу; сімейство для тексту обробляє навігацію, елементи керування, підписи та щільний комерційний текст.

### Ієрархія
| Роль | Розмір | Вага | Висота рядка | Міжлітерний інтервал | Примітки |
|------|------|--------|-------------|----------------|-------|
| Hero Display XL | 80px | 600 | 1.00-1.05 | -1.2px | Масштаб героя Environment/store |
| Hero Display L | 56px | 600 | 1.07 | -0.28px | Героїчні моменти домашньої сторінки |
| Section Display | 48px | 500-600 | 1.08 | -0.144px | Основні заголовки розділів |
| Product Heading | 40px | 600 | 1.10 | normal | Заголовки секцій продуктів і кампаній |
| Feature Display | 38px | 600 | 1.21 | 0.152px | Виноски пристроїв і мерчандайзингу |
| Promo Display | 32px | 300-600 | 1.09-1.13 | 0.128px до 0.352px | Підгерої на рівні модуля |
| Card/Product Title | 28px | 600 | 1.14 | 0.196px | Найменування на рівні плиток і ключовий текст |
| Utility Heading | 24px | 600 | 1.17 | 0.216px / -0.2px | Заголовки конфігуратора та згрупованого вмісту |
| Link/Action Heading | 21px | 600 | 1.14-1.38 | 0.231px | Більші промопосилання |
| Subhead | 19px | 600 | 1.21 | 0.228px | Компактні вступи до секцій |
| Body Primary | 17px | 400 | 1.47 | -0.374px | Стандартне тіло та роздрібні описи |
| Body Emphasis | 17px | 600 | 1.24 | -0.374px | Акцентовані підписи та ключові значення |
| Control Label | 14px | 400-600 | 1.29-1.47 | -0.224px | Кнопки, допоміжні підписи, компактний навігаційний текст |
| Micro UI | 12px | 400-600 | 1.00-1.33 | -0.12px | Дрібний шрифт, мікропідписи |
| Legal/Meta | 10px | 400 | 1.30-1.47 | -0.08px | Щільні метадані та юридичний допоміжний текст |

### Принципи
- **Безперервність між типами сторінок:** одна й та сама типографічна ДНК охоплює кінематографічні запуски та потоки купівлі продукту, запобігаючи розколу бренду між маркетингом і комерцією.
- **Стиснення на масштабі:** рівні дисплея використовують тісне ведення рядка та контрольований трекінг, щоб відчуватися машинними та орієнтованими на продукт.
- **Читабельна щільність на роздрібній глибині:** SF Pro Text балансує компактність з достатнім вертикальним ритмом для довгих списків продуктів та матриць опцій.
- **Виміряна шкала ваги:** 600 — домінуюча вага акценту; 700 з'являється вибірково; 300 використовується ощадливо для контрасту у більших рядках.

### Примітка про замінники шрифтів
- Найближчі вільнодоступні замінники: `Inter` для реалізації з насиченим текстом та метрики `SF Pro Display-like`, апроксимовані за допомогою `Inter Tight` для заголовків.
- При заміні трохи збільшуйте висоту рядка (+0.02 до +0.06) на розмірах тіла та зменшуйте інтенсивність негативного трекінгу, щоб зберегти читабельність.

## 4. Стилізація компонентів

### Кнопки
- **Основна дія із заливкою:** фон `#0071e3`, текст `#ffffff`, радіус 8px, компактний горизонтальний відступ (зазвичай 8px 15px). Використовується для рішучих дій купівлі/просування.
- **Дія з темною заливкою:** фон `#1d1d1f`, текст `#ffffff`, радіус 8px. Використовується, коли світлим поверхням потрібен стриманий висококонтрастний основний елемент.
- **Сімейство дій пігулка/капсула:** великі капсульні дії з радіусами `18px`-`56px` та крайні пігулкові посилання з `980px`. Встановлює м'який, але точний силует заклику до дії Apple.
- **Утилітарні оболонки фільтрів/кнопок:** світлі оболонки (`#fafafc` або напівпрозорий білий) з тонкими сірими межами (`#d2d2d7` / `#86868b`) для щільних контекстів конфігурації.
- **Поведінка при натисканні:** активні елементи керування зазвичай зменшують масштаб або трохи зсувають заливку, щоб вказати на фізичне підтвердження натискання.

### Картки та контейнери
- **Редакційні/продуктові картки:** світлі картки на полях `#f5f5f7` або білих з мінімальним обрамленням та композицією, що ставить зображення на перше місце.
- **Темні утилітарні картки:** графітові рівні (`#272729` до `#2a2a2c`), що використовуються для накладок, елементів керування медіа та модулів темного контексту.
- **Панелі конфігуратора:** заокруглені контейнери (часто 12px-18px) з чітким, але стриманим визначенням межі.
- **Модулі каруселі/прожектора:** більші заокруглені оболонки (`28px`-`36px`) для смуг рекомендованого вмісту.

### Поля введення та форми
- **Поля введення роздрібу:** напівпрозорі або білі фони, темний текст (`#1d1d1f`), обмеження межею (`#86868b`).
- **Елементи керування вибором:** кругла/тоглова геометрія елементів керування часто з'являється в інтерфейсах вибору продуктів.
- **Стратегія щільності:** поля форм залишаються візуально тихими, щоб зберегти домінування зображень пристроїв та ієрархії ціноутворення.

### Навігація
- **Глобальна маркетингова навігація:** компактна темна напівпрозора панель із посиланнями дрібним шрифтом та стриманою іконографією.
- **Шари навігації Store/підмагазину:** додаткові утилітарні панелі, чипи та сегментовані елементи керування для звуження за категоріями та продуктами.
- **Ієрархія посилань:** сині кольори посилань залишаються основним інтерактивним сигналом, тоді як нейтральний текст підтримує щільні набори навігації.

### Обробка зображень
- **Фотографія, орієнтована на об'єкт:** обладнання та аксесуари виносяться на передній план на контрольованих суцільних поверхнях.
- **Високоточний рендеринг оздоблення:** відбиваючі/матеріальні деталі є центральними у візуальному переконанні.
- **Змішане обрамлення:** героїчні сцени на повну ширину співіснують із заокругленими роздрібними картками та щільно обрізаними мерчандайзинговими мініатюрами.

### Інші характерні компоненти
- **Матриця конфігуратора продукту:** стоси опцій та селектори, що поєднують чипи, елементи керування у стилі радіокнопок та контекстні блоки ціни/підсумку.
- **Точки/стрілки керування каруселлю:** круглий словник елементів керування в приглушених накладках для прогресу галереї.
- **Панелі історій Environment:** наративні розділи, що змішують редакційну типографіку з кінематографічними візуалами продукту/середовища.

## 5. Принципи компонування

### Система відступів
- Базова одиниця фактично становить `8px`, але система підтримує щільні мікрокроки для точного вирівнювання.
- Часто повторно використовувані значення відступів на сторінках: `2`, `4`, `6`, `7`, `8`, `9`, `10`, `12`, `14`, `17`, `20` px.
- Універсальні константи ритму, видимі в обох потоках — маркетинговому та роздрібному: каркас одиниці `8px` з утилітарними інтервалами `14-20px` для відступів компонентів та інтервалів списків.

### Сітка та контейнер
- **Сторінки-вітрини:** великі центральні колонки з широким горизонтальним простором для дихання та повноширинними кольоровими розділами.
- **Комерційні сторінки:** тісніші багатоколонкові сітки продуктів та елементів керування з частим модульним складанням.
- **Поведінка контейнера:** обмежене читабельне ядро зі щедрими зовнішніми полями на ширинах десктопа.

### Філософія порожнього простору
- **Темп сцен:** основні візуальні розділи використовують широкий простір для дихання зверху/знизу.
- **Стиснення інформації за потреби:** роздрібні сторінки навмисно стискають відступи, щоб показати більше дієвої інформації на одне поле перегляду.
- **Розділення, кероване контрастом:** переходи між секціями більше покладаються на зміни поверхонь, ніж на декоративні роздільники.

### Шкала радіусів межі
- **5px:** крихітні утилітарні посилання/теги та незначні малі оболонки.
- **8px-12px:** стандартні елементи керування та компактні поля.
- **16px-18px:** картки, рамки модулів та комерційні панелі.
- **28px-36px:** більші контейнери модулів та прожектора.
- **56px / 100px / 980px:** капсули, великі пігулки та фірмові видовжені форми CTA.
- **50%:** круглі елементи керування медіа та вибором.

## 6. Глибина та піднесення

| Рівень | Обробка | Використання |
|------|-----------|-----|
| Рівень 0 | Плоскі нейтральні поверхні (`#ffffff`, `#f5f5f7`, `#000000`) | Основні наративні та продуктові сцени |
| Рівень 1 | Тонке обмеження межею (`#d2d2d7`, `#86868b`) | Фільтри, поля введення, утилітарні картки |
| Рівень 2 | М'яка тінь (`rgba(0,0,0,0.08)` до `rgba(0,0,0,0.22)` де присутня) | Виділені картки та піднесені модулі мерчандайзингу |
| Рівень 3 | Сходинки темної поверхні (`#272729` -> `#2a2a2c`) | Накладки, елементи керування медіа, темні утилітарні кластери |
| Доступність | Синій сигнал фокусу (`#0071e3`) | Акцент клавіатури та вибору |

Глибина навмисно стримана. Apple віддає перевагу тональному контрасту, сходинкам поверхонь та композиційній ієрархії перед важкими стосами тіней.

### Декоративна глибина
- Декоративна глибина створюється переважно фотографічним реалізмом та матеріальним рендерингом, а не синтетичними UI-ефектами.
- Напівпрозорі накладки та склоподібні утилітарні панелі забезпечують легке атмосферне нашарування в навігації та елементах керування.

## 7. Що варто та чого не варто робити

### Варто
- Використовуйте нейтральну тріаду (`#000000`, `#f5f5f7`, `#ffffff`) як структурну основу.
- Резервуйте сині акценти для справжньої семантики дій та навігації.
- Тримайте типографіку тісною та виваженою, особливо на масштабах дисплея.
- Підтримуйте мову геометрії капсул/кіл для елементів керування та ключових дій.
- Дозвольте зображенням продукту нести візуальну драму; тримайте хром непомітним.
- Використовуйте обмеження межею в щільних роздрібних контекстах замість важкого оздоблення карток.
- Зберігайте чітке розділення між модулями-вітринами та транзакційними модулями, водночас тримаючи основні токени спільними.

### Не варто
- Не запроваджуйте широкі вторинні акцентні палітри, що конкурують із синім Apple.
- Не зловживайте тінями, ефектами сяйва чи декоративними градієнтами в основному UI-хромі.
- Не змішуйте незв'язані сімейства шрифтів і не послаблюйте трекінг без розбору.
- Не зводьте всі кути до єдиного радіуса; Apple використовує цілеспрямовані рівні радіусів.
- Не перевантажуйте комерційні модулі товстими межами чи гучними візуальними ефектами.
- Не видаляйте нейтральну каденцію контрасту між темними та світлими розділами.
- Не ставтеся до маркетингових потоків і потоків купівлі як до окремих дизайн-систем.

## 8. Адаптивна поведінка

### Точки зламу
| Назва | Ширина | Ключові зміни |
|------|-------|-------------|
| Small Mobile | 374px і нижче | Стиснені роздрібні елементи керування, одноколонкові стоси продуктів |
| Mobile | 375px-640px | Одноколонкові модулі, компактні рядки дій, ущільнені селектори |
| Tablet | 641px-833px | Розширені картки та змішані переходи 1-2 колонки |
| Tablet Wide | 834px-1023px | Стабільніший багатоколонковий мерчандайзинг, більші текстові блоки |
| Desktop | 1024px-1240px | Повні роздрібні компонування та структури порівняння продуктів |
| Desktop Wide | 1241px-1440px | Розширення героя маркетингу та ширші відступи секцій |
| Large Desktop | 1441px+ | Максимальний простір для дихання розділів та широка редакційна композиція |

### Цілі дотику
- Основні та вторинні дії зазвичай подаються в зручних для дотику геометріях пігулок/кнопок.
- Круглі елементи керування медіа та вибором узгоджуються з мінімальним наміром дотику в мобільних контекстах.
- Щільний комерційний UI використовує компактні підписи, але зберігає чіткі області влучення завдяки оточуючому відступу форми.

### Стратегія згортання
- Героїчна типографіка маркетингу масштабується вниз дискретними рівнями, зберігаючи контраст ієрархії.
- Сітки продуктів і комерції згортаються з багатоколонкових до складених карток із постійною видимістю селекторів.
- Утилітарна навігація стискається у простіші групування посилань/елементів керування, зберігаючи ключові дії.
- Кластери опцій/конфігурації стають вертикально упорядкованими, щоб тримати потік купівлі лінійним на малих екранах.

### Поведінка зображень
- Зображення продукту зберігають співвідношення сторін і центральність крізь точки зламу.
- Героїчні візуали залишаються домінуючими на мобільних, з текстом, переміщеним навколо пріоритету медіа.
- Роздрібні мініатюри залишаються розбірливими завдяки тіснішій логіці обрізки та щільнішому складанню карток.
- Модулі, керовані зображеннями, продовжують закріплювати ритм у міру зростання щільності компонування.

## 9. Посібник із підказок для агента

### Швидкий довідник кольорів
- Синій основної дії: **Синій дії Apple** (`#0071e3`)
- Синій вбудованого посилання: **Синій текстового посилання** (`#0066cc`)
- Темне полотно розділу: **Абсолютний чорний** (`#000000`)
- Світле полотно розділу: **Блідий сірий Apple** (`#f5f5f7`)
- Основний текст на світлому: **Майже чорне чорнило** (`#1d1d1f`)
- Вторинний текст: **Вторинний нейтральний сірий** (`#6e6e73`)
- М'яка роздрібна межа: **М'який сірий межі** (`#d2d2d7`)
- Сильна роздрібна межа: **Середній сірий межі** (`#86868b`)

### Приклади підказок для компонентів
- "Розробіть продуктовий герой у стилі Apple на чорному полотні (`#000000`) із заголовком SF Pro Display semibold (48-56px), стислим допоміжним текстом та двома капсульними CTA, що використовують `#0071e3` та `#1d1d1f`."
- "Створіть панель комерційної конфігурації на білому (`#ffffff`) із заокругленими картками 18px, полями з межею `#86868b`, текстом тіла SF Pro Text 17px та компактними селекторами опцій."
- "Побудуйте сітку мерчандайзингових карток, що чергує поверхні `#f5f5f7` та білу, з картками, орієнтованими на зображення, стриманими тінями та метаданими SF Pro Text 14-17px."
- "Згенеруйте кластер елементів керування каруселлю, використовуючи круглі кнопки (радіус 50%), приглушені сірі накладки та чіткий зворотний зв'язок активності для навігації галереєю."
- "Скомпонуйте змішаний ритм маркетингової + роздрібної сторінки: темний розділ-вітрина -> світлий розділ функцій -> щільний модуль списку продуктів, зберігаючи сині акценти лише для дій та посилань."

### Посібник з ітерацій
1. Спочатку зафіксуйте нейтральну основу (`#000000`, `#f5f5f7`, `#ffffff`), перш ніж налаштовувати акценти.
2. Тримайте сині акценти рідкісними та цілеспрямованими; якщо все синє, ієрархія руйнується.
3. Налаштовуйте типографіку в такому порядку: масштаб дисплея, читабельність тіла, потім мікропідписи.
4. Узгоджуйте радіус за класом компонента (поле, картка, капсула, коло), а не за єдиним універсальним заокругленням.
5. Поступово збільшуйте щільність при переході від секцій-вітрин до комерційних секцій.
6. Перевіряйте, що зображення продукту залишається найсильнішим візуальним шаром після кожної ревізії.

### Відомі прогалини
- Окремі семантичні кольори статусу (помилка/попередження/успіх) не були послідовно видимі в наборі вилучених сторінок.
- Деякі мікростани взаємодії варіюються залежно від модуля і не представлені як універсальні системні токени.
- Кілька роздрібних модулів виявляють контекстно-специфічні перевизначення типографіки, які не з'являються на всіх п'яти сторінках.