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

Иерархия

Принципы

Типографика 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

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

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

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

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

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

6. Глубина и поднятие

Система теней 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. Адаптивное поведение

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

Зоны касания

• Минимальная зона касания: 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 должна быть активна для всего текста для типографической согласованности