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

> Category: Электронная коммерция и ритейл
> Платформа электронной коммерции. Кинематичный dark-first, неоново-зелёный акцент, ультралёгкая типографика.

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

Shopify.com — это dark-first цифровой театр: сайт, который преподносит свою торговую платформу как кинематографическую премьеру. Всё впечатление разворачивается на фоне бездны почти чёрных поверхностей, несущих едва уловимый намёк на глубокий лесной зелёный (`#02090A`, `#061A1C`, `#102620`), создавая ночную атмосферу, которая ощущается не как маркетинговая страница SaaS, а как эксклюзивный показ продукта на технологической keynote. Эта темнота не холодная и не корпоративная — это тёплая, обволакивающая темнота роскошного переживания, как будто сидишь в первом ряду затемнённого зала.

Типографика — бесспорная звезда. NeueHaasGrotesk — утончённый потомок Helvetica — появляется в монументальном масштабе (96px) с невозможно лёгким начертанием (330–400), создавая заголовки, которые кажутся выгравированными в свете, а не отпечатанными чернилами. Функция OpenType `ss03` придаёт формам букв неповторимый характер, который отличает типографику Shopify от обычного использования Helvetica. Ниже уровня дисплея Inter Variable управляет основным текстом с хирургической точностью, используя столь же необычные переменные насыщенности (420, 450, 550), которые существуют между традиционными ступенями начертания. Эта точность сигнализирует о компании, которая тщательно продумывает каждую деталь.

Цвет используется с крайней сдержанностью. Основной акцент — Shopify Neon Green (`#36F4A4`): электрическая мята, появляющаяся исключительно на кольцах фокуса и акцентных выделениях, пульсирующая как биолюминесцентный сигнал на тёмном холсте. Более мягкие зелёные оттенки (Aloe `#C1FBD4`, Pistachio `#D4F9E0`) создают атмосферные промывки. Белый — единственный цвет текста, имеющий значение на тёмных поверхностях, тогда как нейтральная шкала на основе цинка (`#A1A1AA` до `#3F3F46`) управляет иерархией тихой информации. Результат — дизайн, заставляющий торговые технологии выглядеть так, будто они принадлежат научно-фантастическому будущему.

**Ключевые характеристики:**
- Dark-first дизайн с глубокими лесными тил-подтонами (не чистый чёрный)
- Ультралёгкая дисплейная типографика (насыщенность 330) в монументальном масштабе (96px), создающая эфирное присутствие
- Neon Green (`#36F4A4`) как единственный высокоэнергетический акцент на фоне темноты
- Кнопки-пилюли полного радиуса (9999px) как основная интерактивная форма
- Многослойные box-shadow, создающие фотографическую глубину
- Скриншоты продуктов, встроенные в тёмные контексты интерфейса, соответствующие окружающей темноте
- Нейтральная шкала на основе цинка для иерархии текста — сбалансированная между тёплым и холодным

## 2. Цветовая палитра и роли

### Основные

- **Shopify White** (`#FFFFFF`): Основной текст на тёмных поверхностях, заливки кнопок, высококонтрастные элементы
- **Shopify Black** (`#000000`): Фон страницы, текст кнопки на белом, максимальная контрастная база (--color-shade-100)

### Вторичные и акцентные

- **Neon Green** (`#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`): Границы карточек на тёмных поверхностях, тонкое определение границ

### Нейтральные и текстовые (шкала Zinc)

- **Shade-30** (`#D4D4D8`): Светлейший нейтральный, едва заметные границы на тёмном (--color-shade-30)
- **Muted Text** (`#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**: Тонкие зелёно-тонированные амбиентные градиенты позади секций-героев, создающие глубину без сплошных цветов
- **Spotlight**: Сфокусированная светлая область, плавно переходящая в чёрный — создаёт презентационное освещение в стиле keynote

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

### Семейство шрифтов

**Дисплейный:** NeueHaasGrotesk (утончённый потомок Helvetica, переменный шрифт)
- Запасные шрифты: Helvetica, Arial, sans-serif
- Функции OpenType: `ss03` (стилистический набор 3 — отличительные варианты форм букв)
- Доступные начертания: 330, 360, 400, 500, 750 (переменные)
- Используется для всех заголовков, текста героя и крупных дисплейных элементов

**Основной:** Inter-Variable
- Запасные шрифты: Helvetica, Arial, sans-serif
- Функции OpenType: `ss03`
- Доступные начертания: 400, 420, 450, 500, 550 (переменные)
- Используется для основного текста, ссылок, кнопок, элементов интерфейса

**Моноширинный:** ui-monospace
- Запасные шрифты: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New
- Используется для фрагментов кода, подписей к данным, технического контента

### Иерархия

| Роль | Размер | Насыщенность | Высота строки | Межбуквенный интервал | Примечания |
|------|------|--------|-------------|----------------|-------|
| Display XL | 96px | 400 | 1.00 | — | NeueHaasGrotesk, заголовки героя, "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 (асимметрично — больше справа для визуального баланса)
- Наведение: лёгкое уменьшение непрозрачности или смена фона
- Фокус: контурное кольцо `#36F4A4` (Neon Green) 2px
- Переход: all 200ms ease

**Вторичная (призрачная/обведённая)**
- Фон: transparent
- Текст: Белый (`#FFFFFF`)
- Граница: 2px solid Белый (`#FFFFFF`)
- Радиус скругления: полная пилюля (9999px)
- Отступы: 12px 26px 12px 16px
- Наведение: заполняется белым фоном с чёрным текстом
- Фокус: контур `#36F4A4` 2px

**Бейдж/Тег (нейтральная заливка)**
- Фон: `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`
  - Вставленный белый блик создаёт тонкое свечение верхнего края
- Наведение: тень расширяется, карточка может слегка осветлиться
- Переход: box-shadow 300ms ease, transform 200ms ease

### Поля ввода и формы

- Фон: transparent или Dark Forest (`#061A1C`)
- Текст: Белый (`#FFFFFF`)
- Граница: 1px solid `#3F3F46` (Shade-70)
- Радиус скругления: 8px
- Отступы: 12px 16px
- Фокус: 2px solid `#36F4A4` (кольцо фокуса Neon Green)
- Плейсхолдер: Shade-50 (`#71717A`)
- Переход: border-color 200ms ease

### Навигация

- Фон: transparent (накладывается на тёмный герой), при прокрутке становится Forest (`#102620`)
- Высота: ~64px
- Слева: логотип-словесный знак Shopify (SVG, белый на тёмном)
- Центр/Справа: ссылки навигации 18px/500 NeueHaasGrotesk, белые, межбуквенный интервал 0.72px
- CTA: белая кнопка-пилюля "Start for free" (справа)
- Вторичная CTA: призрачная кнопка с белой границей
- Наведение: ссылки переходят к Muted Text (`#A1A1AA`) или получают подчёркивание
- Мобильный: меню-гамбургер, полноэкранное тёмное перекрытие
- Переход: background 300ms ease при прокрутке

### Обработка изображений

- Скриншоты продуктов: встроены в тёмные контексты интерфейса, соответствуя окружающей темноте
- Превью интерфейса администратора: отображаются на тёмном фоне с тонкими границами карточек
- Соотношения сторон: разные — изображения героев широкие (приблизительно 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 | Отступ секции героя, большие промежутки |

### Сетка и контейнер

- Максимальная ширина контейнера: ~1280px (по центру)
- Герой: на всю ширину, тёмный фон от края до края с центрированным текстом
- Секции функций: двухколоночные компоновки с текстом и скриншотами продуктов
- Секции статистики: горизонтальная компоновка с крупными числами
- Горизонтальные отступы: 64px рабочий стол, 32px планшет, 16px мобильный
- Промежуток сетки: 24–32px между основными блоками контента

### Философия пустого пространства

Стратегия пустого пространства Shopify театральная. Секции разделены огромными просторами тёмного пространства — 80px до 120px чистого чёрного воздуха — что создаёт ритм презентации, а не веб-страницы. Каждый блок контента — это собственный «слайд» в прокрутке в стиле keynote. Внутри секций отступы теснее и осмысленнее, создавая фокальную плотность на фоне обширной пустоты. Контраст между макро-уровневой пустотой и микро-уровневой точностью — вот что придаёт сайту его кинематический ритм.

### Шкала радиуса скругления

| Значение | Контекст |
|-------|---------|
| 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` | Кольцо фокуса клавиатуры (Neon Green) |

Система теней Shopify необычно изощрённа. Вместо значений теней с единственным слоем карточки используют стековый, многослойный подход: кольцо 1px для определения границ, прогрессивные размытия 2px/4px/8px для естественного спада освещения и деликатное вставленное белое свечение (`rgba(255,255,255,0.03)`), имитирующее поверхность стекла, освещённую сверху. На тёмных фонах тени затемняют от уже тёмных поверхностей, поэтому тени функционируют скорее как «ambient occlusion», чем традиционное поднятие — карточка кажется слегка погружённой в поверхность, а не парящей над ней.

### Декоративная глубина

- **Тёмные тил-градиенты**: Амбиентные радиальные промывки позади секций-героев и витрин продуктов
- **Эффекты прожектора**: Яркие центрированные области, плавно переходящие в чёрный, создавая театральное освещение в стиле keynote
- **Свечение краёв**: Тонкие светлые края на тёмных карточках через вставленный box-shadow
- **Зелёные атмосферные ореолы**: Едва заметные зелёные оттенки в фоновых градиентах, отражающие брендовый акцент

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

### Что делать

- Использовать иерархию тёмных тил-чёрных поверхностей (Void → Deep Teal → Dark Forest → Forest) для глубины
- Поддерживать дисплейную типографику при насыщенности 330–400 — эфирная лёгкость является подписью дизайна
- Использовать Neon Green (`#36F4A4`) исключительно для состояний фокуса и критических акцентных выделений
- Применять радиус 9999px ко всем основным кнопкам CTA — полная пилюля не подлежит обсуждению
- Использовать многослойную систему теней для поднятия карточек — одиночные тени выглядят плоско
- Поддерживать функцию OpenType `ss03` для всего текста — это часть типографической идентичности
- Использовать Inter Variable для основного текста и NeueHaasGrotesk для заголовков — никогда не менять их роли местами
- Создавать театральные отступы между секциями (80px+) для кинематического темпа

### Чего не делать

- Не использовать чистый чёрный (#000000) для текста на тёмном фоне — использовать только белый (#FFFFFF)
- Не вводить тёплые цвета (оранжевый, красный, жёлтый) — палитра строго холодная (зелёные, тил, нейтральные)
- Не использовать насыщенность выше 500 для основного текста NeueHaasGrotesk — тяжёлые начертания нарушают эфирное ощущение
- Не применять зелёные акценты на больших поверхностях — Neon Green предназначен только для маленьких, точных выделений
- Не использовать острые углы (радиус 0px) на интерактивных элементах — всё скругляется
- Не добавлять яркие фоны — тёмная тема фундаментальна, а не опциональна
- Не использовать однослойные box-shadow — стековый подход является системой
- Не устанавливать высоту строки выше 1.56 для основного текста — текст Shopify относительно компактный
- Не смешивать NeueHaasGrotesk и Inter в одном размере/роли — их шкалы насыщенности отличаются
- Не использовать отрицательный межбуквенный интервал для заголовков — заголовки Shopify имеют нейтральный или положительный трекинг

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

### Контрольные точки

| Название | Ширина | Ключевые изменения |
|------|-------|-------------|
| Мобильный | <640px | Одна колонка, навигация-гамбургер, дисплейный текст масштабируется до 48px, отступ 16px |
| Планшет | 640-1024px | Начинаются двухколоночные сетки, дисплейный текст 70px, отступ 32px |
| Рабочий стол | 1024-1440px | Полная компоновка, расширенная навигация, дисплей 96px, отступ 64px |
| Большой рабочий стол | >1440px | Контейнер max-width по центру, увеличенный межсекционный отступ |

### Зоны касания

- Минимальная зона касания: 44x44px (WCAG AAA)
- Кнопки-пилюли: минимальная высота 48px с щедрыми горизонтальными отступами
- Ссылки навигации: зона касания 44px
- Поверхности карточек: вся карточка нажимаема там, где есть ссылка

### Стратегия сворачивания

- **Навигация**: Полные горизонтальные ссылки → меню-гамбургер ниже 1024px; логотип и кнопка CTA остаются видимыми
- **Секция героя**: Дисплей 96px → 70px на планшете → 48px на мобильном; сохраняет однocolonное центрированное выравнивание
- **Секции функций**: 2 колонки текст+изображение → одна стопированная колонка ниже 768px
- **Статистика**: Горизонтальный ряд → стопировано вертикально на мобильном
- **Отступы секций**: 64px → 40px → 24px → 16px по мере сужения окна просмотра
- **Карточки**: Сетка → стопирование, сохранение полной ширины на мобильном

### Поведение изображений

- Скриншоты продуктов: адаптивные в тёмных контейнерах, сохраняют соотношение сторон
- Изображения героев: полная ширина на всех контрольных точках, отложенная загрузка с тёмными заглушками
- Превью интерфейса администратора: пропорциональное масштабирование, могут обрезаться на мобильном
- Все изображения используют CDN (`cdn.shopify.com`) с адаптивным srcset

## 9. Руководство по агентным промптам

### Краткий справочник цветов

- Основная CTA: Shopify White (`#FFFFFF`)
- Фон страницы: Void Black (`#000000`)
- Поверхность карточки: Deep Teal (`#02090A`)
- Фон секции: Dark Forest (`#061A1C`)
- Приподнятый фон: Forest (`#102620`)
- Акцент: Neon Green (`#36F4A4`)
- Основной текст: Белый (`#FFFFFF`)
- Приглушённый текст: Muted (`#A1A1AA`)
- Тёмная граница: Dark Card Border (`#1E2C31`)

### Примеры промптов для компонентов

- «Создай секцию героя на истинно чёрном (#000000) фоне с заголовком NeueHaasGrotesk 96px/330 белого цвета, подзаголовком 20px/500 в #A1A1AA и двумя кнопками-пилюлями: белая с заливкой (радиус 9999px) и призрачная с границей белого цвета 2px»
- «Разработай карточку функции на Deep Teal (#02090A) с границей #1E2C31 1px, радиусом 12px, многослойной тенью (кольцо 1px + размытие 2px/4px/8px при 10% чёрного), содержащую белый заголовок 32px/360 и основной текст #A1A1AA 18px/400»
- «Создай секцию статистики на Dark Forest (#061A1C) с белыми числами 96px/750 (NeueHaasGrotesk), описательными метками #A1A1AA 16px/400 и щедрым отступом 64px между блоками статистики»
- «Создай фиксированную навигацию с прозрачным фоном (при прокрутке становится #102620), белым логотипом Shopify слева, белыми ссылками навигации 18px/500 с межбуквенным интервалом 0.72px и белой кнопкой-пилюлей "Start for free" справа»
- «Разработай тег/бейдж с фоном из матового стекла rgba(255,255,255,0.2), радиусом 4px, отступами 12px 16px, белым текстом 16px — парящий над тёмной поверхностью карточки»

### Руководство по итерации

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