Дизайн-система, вдохновлённая 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

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. Глубина и возвышение

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

Decorative Depth

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

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

Do

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

Don’t

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

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

Breakpoints

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) не были последовательно видимы в извлечённом наборе страниц.
• Некоторые интерактивные микросостояния различаются по модулям и не представлены как универсальные системные токены.
• Несколько торговых модулей раскрывают контекстно-специфичные переопределения типографики, которые не встречаются на всех пяти страницах.