# Дизайн-система, вдохновлённая Apple

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

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

Веб-язык Apple — это выверенная редакторская система, чередующая галерейное спокойствие и плотные торговые информационные блоки. Визуальный тон остаётся сдержанным: широкие нейтральные полотна, тихий «хром» интерфейса, а почти вся выразительная нагрузка отдана изображениям продуктов. Интерфейс спроектирован так, чтобы исчезать, и тогда оборудование, материалы и варианты отделки выходят на повествовательный передний план.

На всех пяти проанализированных страницах ритм единообразен, но не монолитен. Маркетинговые поверхности (главная страница и Environment) используют кинематографичное чередование чёрного и света по «главам», тогда как коммерческие поверхности (Store и потоки покупки) вводят более плотные интервалы, больше утилитарных элементов управления и более насыщенные стопки карточек, не нарушая базовой грамматики бренда. В результате получается одна система с двумя передачами: режим витрины и режим транзакции.

Типографика выступает стабилизатором. SF Pro Display несёт иерархию героев и мерчандайзинга с компактной межстрочной высотой и контролируемым трекингом, а SF Pro Text обрабатывает метаданные продуктов, навигацию, фильтры и плотный интерфейс выбора. Типографика остаётся ненавязчивой, но диапазон масштаба достаточно широк, чтобы поддерживать как «биллбордные» героические сообщения, так и микроутилитарные подписи.

**Key Characteristics:**
- Бинарный ритм секций: глубокие чёрные сцены (`#000000`), чередующиеся с бледными нейтральными полями (`#f5f5f7`)
- Единое синее акцентное семейство для семантики действий и ссылок (`#0071e3`, `#0066cc`, `#2997ff`)
- Два режима работы в одной системе: кинематографичные модули-витрины и плотные коммерческие конфигураторы
- Сильная опора на изображения и материальные отделки; «хром» интерфейса остаётся визуально тонким
- Плотные заголовочные метрики (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`

### Primary
- **Absolute Black** (`#000000`): Иммерсивные героические полотна, высокодраматичные продуктовые главы, глубокие интерфейсные опоры.
- **Pale Apple Gray** (`#f5f5f7`): Основная светлая поверхность для функциональных полос, блоков сравнения и редакторских переходов.
- **Near-Black Ink** (`#1d1d1f`): Цвет основного текста и тёмной заливки элементов управления на светлых полотнах.

### Secondary & Accent
- **Apple Action Blue** (`#0071e3`): Заливка основного действия и брендовый акцент, сигнализирующий о фокусе.
- **Body Link Blue** (`#0066cc`): Цвет встроенных ссылок, оптимизированный для читаемости длинных текстов.
- **High-Luminance Link Blue** (`#2997ff`): Яркое оформление ссылок на тёмных сценах, где требуется более сильный контраст.

### Surface & Background
- **Pure White Canvas** (`#ffffff`): Фоны торговых/продуктовых списков и плотные транзакционные секции.
- **Graphite Surface A** (`#272729`): Контекстный слой тёмных карточек и медиаэлементов управления.
- **Graphite Surface B** (`#262629`): Чуть более глубокий тёмный утилитарный слой для группировок элементов управления.
- **Graphite Surface C** (`#28282b`): Приподнятые тёмные вспомогательные поверхности.
- **Graphite Surface D** (`#2a2a2c`): Самая тёмная приподнятая ступень, используемая для разделения в более насыщенных тёмных сценах.

### Neutrals & Text
- **Secondary Neutral Gray** (`#6e6e73`): Второстепенный основной текст, вспомогательные описания, третичные метаданные.
- **Soft Border Gray** (`#d2d2d7`): Разделители, тонкие контуры и приглушённое утилитарное обрамление.
- **Mid Border Gray** (`#86868b`): Более выраженные контуры полей в контекстах конфигурации продуктов и фильтров.
- **Utility Dark Gray** (`#424245`): Переходный тёмно-нейтральный текст/поверхность в контекстах магазина.

### Semantic & Accent
- **Selection/Focus Signal** (`#0071e3`): Общий сигнал фокуса и выбранного состояния в маркетинговых и коммерческих контекстах.
- **Error/Warning/Success**: В извлечённом наборе поверхностей не было последовательно видимой отдельной семантической палитры.

### Gradient System
- Извлечённые страницы подавляюще управляются сплошными поверхностями. Визуальное богатство создаётся фотографией и рендерингом отделки, а не постоянными градиентами интерфейса.

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

### Font Family
- **Display Family:** `SF Pro Display`, запасные варианты `SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif`
- **Text Family:** `SF Pro Text`, запасные варианты `SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif`
- **Usage Split:** Семейство Display отвечает за героические/продуктовые заголовки и мерчандайзинговые заголовки; семейство Text отвечает за навигацию, элементы управления, подписи и плотный коммерческий текст.

### Hierarchy
| Role | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|--------|-------------|----------------|-------|
| 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 to 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 | Плотные метаданные и юридический вспомогательный текст |

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

### Note on Font Substitutes
- Ближайшие свободно доступные замены: `Inter` для текстоёмкой реализации и метрики, похожие на `SF Pro Display-like`, аппроксимированные `Inter Tight` для заголовков.
- При замене слегка увеличивайте межстрочную высоту (+0.02 до +0.06) на размерах основного текста и снижайте интенсивность отрицательного трекинга, чтобы сохранить читаемость.

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

### Buttons
- **Primary Fill Action:** фон `#0071e3`, текст `#ffffff`, радиус 8px, компактные горизонтальные отступы (обычно 8px 15px). Используется для решительных действий покупки/продвижения.
- **Dark Fill Action:** фон `#1d1d1f`, текст `#ffffff`, радиус 8px. Используется, когда светлым поверхностям нужно сдержанное высококонтрастное основное действие.
- **Pill/Capsule Action Family:** крупные капсульные действия с радиусами `18px`-`56px` и крайние «пилюльные» ссылки на `980px`. Задаёт мягкий, но точный силуэт призыва к действию Apple.
- **Utility Filter/Button Shells:** светлые оболочки (`#fafafc` или полупрозрачный белый) с тонкими серыми границами (`#d2d2d7` / `#86868b`) для плотных контекстов конфигурации.
- **Pressed Behavior:** активные элементы управления обычно слегка уменьшают масштаб или сдвигают заливку, чтобы обозначить физическое подтверждение нажатия.

### Cards & Containers
- **Editorial/Product Cards:** светлые карточки на полях `#f5f5f7` или белых с минимальным обрамлением и композицией «изображение в первую очередь».
- **Dark Utility Cards:** графитовые ступени (`#272729` до `#2a2a2c`), используемые для оверлеев, медиаэлементов управления и модулей в тёмном контексте.
- **Configurator Panels:** скруглённые контейнеры (часто 12px-18px) с чётким, но сдержанным определением границ.
- **Carousel/Spotlight Modules:** более крупные скруглённые оболочки (`28px`-`36px`) для дорожек избранного контента.

### Inputs & Forms
- **Retail Input Fields:** полупрозрачные или белые фоны, тёмный текст (`#1d1d1f`), обрамление, ведомое границами (`#86868b`).
- **Selection Controls:** круглая/тумблероподобная геометрия элементов управления часто встречается в интерфейсах выбора продуктов.
- **Density Strategy:** поля форм остаются визуально тихими, чтобы изображения устройств и иерархия цен оставались доминирующими.

### Navigation
- **Global Marketing Nav:** компактная тёмная полупрозрачная панель с мелким текстом ссылок и сдержанной иконографикой.
- **Store/Sub-shop Nav Layers:** дополнительные утилитарные панели, чипы и сегментированные элементы управления для сужения категорий и продуктов.
- **Link Hierarchy:** синие цвета ссылок остаются основным интерактивным сигналом, а нейтральный текст поддерживает плотные навигационные наборы.

### Image Treatment
- **Object-First Photography:** оборудование и аксессуары выводятся на передний план на контролируемых сплошных поверхностях.
- **High-fidelity finish rendering:** отражающие/материальные детали являются центральными для визуального убеждения.
- **Mixed framing:** полноэкранные героические сцены сосуществуют со скруглёнными торговыми карточками и плотно кадрированными мерчандайзинговыми миниатюрами.

### Other Distinctive Components
- **Product Configurator Matrix:** стопки опций и селекторы, сочетающие чипы, элементы управления в стиле радиокнопок и контекстные блоки цены/сводки.
- **Carousel Control Dots/Arrows:** круглая лексика элементов управления в приглушённых оверлеях для продвижения по галерее.
- **Environment Story Panels:** повествовательные главы, сочетающие редакторскую типографику с кинематографичными визуальными образами продукта/окружения.

## 5. Принципы компоновки

### Spacing System
- Базовая единица фактически равна `8px`, но система поддерживает плотные микрошаги для точного выравнивания.
- Часто повторно используемые значения интервалов на страницах: `2`, `4`, `6`, `7`, `8`, `9`, `10`, `12`, `14`, `17`, `20` px.
- Универсальные константы ритма, видимые как в маркетинговых, так и в торговых потоках: каркас на единице `8px` с утилитарными интервалами `14-20px` для отступов компонентов и интервалов в списках.

### Grid & Container
- **Showcase pages:** крупные центральные колонки с широким горизонтальным «дыханием» и полноширинными цветовыми главами.
- **Commerce pages:** более плотные многоколоночные сетки продуктов и элементов управления с частым модульным наслоением.
- **Container behavior:** ограниченное читаемое ядро с щедрыми внешними полями при настольных ширинах.

### Whitespace Philosophy
- **Scene pacing:** крупные визуальные главы используют широкое верхнее/нижнее «дыхание».
- **Information compaction where needed:** торговые страницы намеренно сжимают интервалы, чтобы показать больше действенной информации на один экран.
- **Contrast-led separation:** переходы между секциями опираются больше на смену поверхностей, чем на декоративные разделители.

### Border Radius Scale
- **5px:** крошечные утилитарные ссылки/теги и мелкие небольшие оболочки.
- **8px-12px:** стандартные элементы управления и компактные поля.
- **16px-18px:** карточки, рамки модулей и коммерческие панели.
- **28px-36px:** более крупные модульные и «прожекторные» контейнеры.
- **56px / 100px / 980px:** капсулы, крупные «пилюли» и фирменные удлинённые формы CTA.
- **50%:** круглые медиа- и селекционные элементы управления.

## 6. Глубина и возвышение

| Level | Treatment | Use |
|------|-----------|-----|
| Level 0 | Плоские нейтральные поверхности (`#ffffff`, `#f5f5f7`, `#000000`) | Основное повествование и продуктовые сцены |
| Level 1 | Тонкое обрамление границей (`#d2d2d7`, `#86868b`) | Фильтры, поля ввода, утилитарные карточки |
| Level 2 | Мягкая тень (`rgba(0,0,0,0.08)` до `rgba(0,0,0,0.22)`, где присутствует) | Выделенные карточки и приподнятые мерчандайзинговые модули |
| Level 3 | Ступенчатость тёмных поверхностей (`#272729` -> `#2a2a2c`) | Оверлеи, медиаэлементы управления, тёмные утилитарные кластеры |
| Accessibility | Синий сигнал фокуса (`#0071e3`) | Выделение для клавиатуры и выбора |

Глубина намеренно сдержанна. Apple предпочитает тональный контраст, ступенчатость поверхностей и композиционную иерархию вместо тяжёлых нагромождений теней.

### Decorative Depth
- Декоративная глубина создаётся главным образом фотографическим реализмом и рендерингом материалов, а не синтетическими эффектами интерфейса.
- Полупрозрачные оверлеи и стеклоподобные утилитарные панели обеспечивают лёгкое атмосферное наслоение в навигации и элементах управления.

## 7. Что делать и чего не делать

### Do
- Используйте нейтральную триаду (`#000000`, `#f5f5f7`, `#ffffff`) как структурную основу.
- Резервируйте синие акценты для подлинной семантики действий и навигации.
- Держите типографику плотной и выверенной, особенно на масштабах Display.
- Поддерживайте язык геометрии капсулы/круга для элементов управления и ключевых действий.
- Позвольте изображениям продуктов нести визуальную драму; держите «хром» ненавязчивым.
- Используйте обрамление, ведомое границами, в плотных торговых контекстах вместо тяжёлого декора карточек.
- Сохраняйте чёткое разделение между модулями-витринами и транзакционными модулями, удерживая общие базовые токены.

### Don't
- Не вводите широкие вторичные акцентные палитры, конкурирующие с синим Apple.
- Не злоупотребляйте тенями, эффектами свечения или декоративными градиентами в основном «хроме» интерфейса.
- Не смешивайте несвязанные семейства шрифтов и не ослабляйте трекинг без разбора.
- Не выравнивайте все углы до единого радиуса; Apple использует целенаправленные уровни радиуса.
- Не перегружайте коммерческие модули толстыми границами или громкими визуальными эффектами.
- Не убирайте нейтральную контрастную каденцию между тёмными и светлыми главами.
- Не рассматривайте маркетинговые и покупочные потоки как отдельные дизайн-системы.

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

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Small Mobile | 374px and below | Сжатые торговые элементы управления, одноколоночные стопки продуктов |
| Mobile | 375px-640px | Одноколоночные модули, компактные ряды действий, уплотнённые селекторы |
| Tablet | 641px-833px | Расширенные карточки и смешанные переходы между 1-2 колонками |
| Tablet Wide | 834px-1023px | Более стабильный многоколоночный мерчандайзинг, более крупные текстовые блоки |
| Desktop | 1024px-1240px | Полные торговые компоновки и структуры сравнения продуктов |
| Desktop Wide | 1241px-1440px | Расширение героического маркетинга и более широкие интервалы секций |
| Large Desktop | 1441px+ | Максимальное «дыхание» глав и широкая редакторская композиция |

### Touch Targets
- Основные и второстепенные действия обычно представлены в удобной для нажатия геометрии «пилюль»/кнопок.
- Круглые медиа- и селекционные элементы управления соответствуют минимальной нажимаемой цели в мобильных контекстах.
- Плотный коммерческий интерфейс использует компактные подписи, но сохраняет чёткие области попадания за счёт окружающих отступов формы.

### Collapsing Strategy
- Типографика героического маркетинга масштабируется вниз дискретными уровнями, сохраняя контраст иерархии.
- Сетки продуктов и коммерции сворачиваются из многоколоночных в стопки карточек с сохранением видимости селекторов.
- Утилитарная навигация сжимается в более простые группировки ссылок/элементов управления, сохраняя ключевые действия.
- Кластеры опций/конфигурации становятся вертикально последовательными, чтобы поток покупки оставался линейным на малых экранах.

### Image Behavior
- Изображения продуктов сохраняют пропорции и центральность через брейкпойнты.
- Героические визуальные образы остаются доминирующими на мобильных, с перепозиционированием текста вокруг приоритета медиа.
- Торговые миниатюры остаются разборчивыми за счёт более плотной логики кадрирования и более насыщенного наслоения карточек.
- Модули, ведомые изображениями, продолжают закреплять ритм по мере роста плотности компоновки.

## 9. Руководство по подсказкам для агента

### Quick Color Reference
- Синий основного действия: **Apple Action Blue** (`#0071e3`)
- Синий встроенных ссылок: **Body Link Blue** (`#0066cc`)
- Полотно тёмной главы: **Absolute Black** (`#000000`)
- Полотно светлой главы: **Pale Apple Gray** (`#f5f5f7`)
- Основной текст на светлом: **Near-Black Ink** (`#1d1d1f`)
- Второстепенный текст: **Secondary Neutral Gray** (`#6e6e73`)
- Мягкая торговая граница: **Soft Border Gray** (`#d2d2d7`)
- Сильная торговая граница: **Mid Border Gray** (`#86868b`)

### Example Component Prompts
- "Спроектируйте героический блок продукта в стиле 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%), приглушённых серых оверлеев и чёткой обратной связи об активном состоянии для навигации по галерее."
- "Скомпонуйте смешанный ритм маркетинговой + торговой страницы: тёмная глава-витрина -> светлая функциональная глава -> плотный модуль списка продуктов, сохраняя синие акценты только для действий и ссылок."

### Iteration Guide
1. Сначала зафиксируйте нейтральную основу (`#000000`, `#f5f5f7`, `#ffffff`), прежде чем настраивать акценты.
2. Держите синие акценты редкими и целенаправленными; если всё синее, иерархия рушится.
3. Настраивайте типографику в таком порядке: масштаб Display, читаемость основного текста, затем микроподписи.
4. Сопоставляйте радиус по классу компонента (поле, карточка, капсула, круг), а не одно универсальное скругление для всех.
5. Постепенно увеличивайте плотность при переходе от секций-витрин к коммерческим секциям.
6. Проверяйте, что изображения продуктов остаются сильнейшим визуальным слоем после каждой ревизии.

### Known Gaps
- Отдельные семантические цвета статуса (error/warning/success) не были последовательно видимы в извлечённом наборе страниц.
- Некоторые интерактивные микросостояния различаются по модулям и не представлены как универсальные системные токены.
- Несколько торговых модулей раскрывают контекстно-специфичные переопределения типографики, которые не встречаются на всех пяти страницах.