Shopify
Полуночная оранжерея — торговые марки расцветают на фоне глубокого бирюзового цвета, освещенные единственной искрой мяты
Дизайн-система Shopify — это полуночная мастерская для коммерции: почти чёрный холст, окрашенный глубоким бирюзово-зелёным цветом, широкий, уверенный шрифт без засечек и один яркий мятный акцент, активирующий интерактивные моменты. Интерфейс напоминает фотолабораторию, где источником света являются товары и бренды — фотографии и витрины магазинов светятся на фоне почти чёрных поверхностей, а хромированные элементы отступают. Компоненты геометричны, но мягкие: карточки радиусом 12px с тонкими рамками, кнопки в форме таблеток и шрифт толщиной 330, который скорее шепчет о масштабе, чем кричит. Единственный хроматический знак препинания (#36f4a4) используется экономно на ссылках, тегах и состояниях фокуса, оставляя цвет для функциональных моментов, чтобы истории продавцов оставались визуальным фокусом.
Максимальная ширина ~1280px, центрированная по центру, с полноэкранными блоками-заставками, выходящими за пределы контейнера для фотографий. Ритм страницы чередуется: (1) полноэкранная темная заставка с наложенным заголовком и кнопками призыва к действию, (2) комфортные темные секции с блоками текста и изображений максимальной ширины в 2 колонки или сетками изображений в 3 колонки, (3) интерактивные демонстрационные панели (карточка товара, калькулятор доставки, карта мира), которые отображаются в виде приподнятых карточек на более глубоком холсте. Навигация представляет собой фиксированную верхнюю панель с логотипом + 3 элементами навигации + вспомогательными ссылками + основной кнопкой призыва к действию, выровненными по правому краю. Вертикальный ритм использует 80px промежутки между секциями с плавным переходом — без разделителей между темными секциями, только изменение тональности поверхности.
Визуальное оформление ориентировано в первую очередь на продавца: полноформатные фотографии товаров и фотографии с мероприятий бренда несут на себе основную визуальную нагрузку, часто в виде масштабных фонов с наложенным белым текстом. Снимки имеют плотную кадрировку, высокий контраст и носят праздничный характер (звон колокола Nasdaq, групповые приветствия, крупные планы товара в руках). Темный фон создает ощущение, будто эти фотографии освещены прожекторами. Иллюстрации минималистичны — основную пояснительную работу выполняют встроенные изображения товаров и скриншоты витрин магазинов. Иконки монохромные, с толщиной линии 1,5–2px, обычно белые или #36f4a4 для активных состояний.
Палитра
Бренд
- Shopify Mint
#36f4a4— Активные навигационные индикаторы, кольца фокусировки, подсветка тегов, акценты при наведении курсора на ссылки — единственная хроматическая искра, которая создает ощущение включенной интерактивности на темном фоне.
Нейтральные
- Midnight Forest
#02090a— Холст страницы, фоновые изображения для заголовка, фоновые изображения для разделов - Deep Lichen
#061a1c— Основные поверхности карточек, приподнятые панели, блоки контента. - Shaded Fern
#072720— Панель навигации, дополнительные карточки, едва заметное поднятие панели. - Spruce Border
#1e2c31— Тонкие рамки для карточек, разделительные линии, контуры полей ввода. - Abyss Indigo
#000a1e— Дополнительная поверхность для встраивания продуктов/демонстраций, панелей с описанием функций. - Pure White
#ffffff— Основной текст, заливка кнопок, заголовок, логотипы.
Типографика
от 12 до 70px · 8 ступеней
- Neue Haas Grotesk — замена: Inter · начертания 330, 400, 500, 550, 600 · Основная типографская система — заголовки с плотностью шрифта 70–96px (330–400) носят тихий, а не кричащий характер; основной текст с плотностью 16–18px (400–500); навигация и пользовательский интерфейс с плотностью 14–16px (500–550). Сверхлегкий шрифт плотностью 330 при больших размерах экрана — это отличительная черта: он выражает уверенность через сдержанность, а не через объем.
- Inter Variable — замена: Inter · начертания 400, 420, 450, 550 · Вторичный тип шрифта — используется в навигационных элементах интерфейса, для небольших заметок, элементов управления вкладками, микротекста в нижнем колонтитуле. Немного большая высота строчных букв и более стандартный межбуквенный интервал делают его более читабельным при компактных размерах. Также подходит для случаев, когда шрифт с начертанием 420 заполняет пробел между обычным и средним шрифтом.
Интервалы и форма
| Назначение | Значение |
|---|---|
| Плотность | средняя |
| Базовый шаг | 12px |
| Радиус кнопок | 9999px |
| Радиус карточек | 12px |
| Тени | нет — границы вместо теней |
| Между секциями | 80px |
| Ширина страницы | 1280px |
ИИ соберёт ваш сайт в стиле Shopify и наполнит его
- Наполнит товарами и постами по ссылке — Instagram, TikTok, Facebook.
- Перенесёт контент со старого сайта — достаточно указать адрес.
- Современный дизайн на лучшем движке: React (Next.js) с серверным рендерингом и SEO-оптимизацией из коробки.
- Полная автоматическая SEO-оптимизация под поисковую выдачу и рекомендации нейросетей.
Похожие стили
- Retool — Теплая обсидиановая мастерская — поверхность для прецизионных инструментов, освещенная тлеющими углями, где …
- Elektron — Панель управления оборудованием в полночь — почти чёрный холст, на котором фотографии продукта сияют, а инте…
- REKKI — Панель управления полетом в фотолаборатории
- OFFFICE : — галерея нуар, поглощенная монолитным шрифтом
- Clyde — Демонстрационный зал с единственным прожектором — почти темная галерея, где единственный цвет в помещении — …
- Channel Studio — Студийная фотолаборатория с одним коралловым плафоном
- Electronic Materials Office — Раскалённый уголёк в галерее, оформленной углем
- ORYZO AI — Фоторепортаж о фотолаборатории. Одинокий объект, парящий в теплой темноте, кремовый шрифт — единственное укр…
- Factory — Терминал «военная комната» в полночь. «Завод» — это строгая черная панель управления, где единственная белая…
- Hungry Tiger — Яркие, как куркума, граффити на стене тандыра. Единая палитра из золотистого и ржаво-коричневого цветов с та…
- Bibliothèque — Галерея в форме черного куба под светом прожектора — одинокая подсвеченная пластина в огромном темном зале
- Apple (España) — черный театр со светящейся фурнитурой