Shop

Парящее торговое созвездие на белом мраморе

Интернет-магазин работает по модели «белого холста», где товары отображаются в виде больших, сильно закругленных карточек с изображениями, а не в виде сеток с миниатюрами. Весь интерфейс невероятно мягкий: радиусы 20–28px повсюду, элементы управления в форме таблеток, компактный корпус 16px GT Standard с плотным отрицательным трекингом, который делает текст четким и выразительным. Единственный насыщенный акцент системы — это яркий фиолетовый цвет (#5433eb), который появляется в логотипе, в круговом поле для ввода результатов поиска и в виде тонированной тени на той же кнопке. Остальная палитра — теплая нейтральная: белые поверхности, едва заметный холодный серый холст, тонкие границы и почти черный текст. Плотность остается компактной с 12px промежутками, но полосы героя и категорий «дышат» благодаря щедрому вертикальному ритму 64–80px, благодаря чему коммерция ощущается скорее как просмотр, чем как каталог.

Максимальная ширина 1200px, центрированная на полупрозрачном холсте #f2f4f5, с постоянной боковой панелью шириной 64px слева, содержащей только иконки для навигации. Главный элемент представляет собой полосу во всю ширину, где карточки товаров располагаются над расположенным по центру фиолетовым логотипом «магазин», а строка поиска в виде таблеток находится непосредственно под ним. Таблетки категорий расположены в одном центрированном ряду под поиском. Разделы контента (Женщины, Мужчины, Красота, Дом, Товары для детей и малышей) следуют в виде обозначенных полос, каждая из которых содержит сетку из 4 колонок с изображениями товаров или композицию из 2 колонок «главный элемент и сетка». Вертикальный ритм достаточно большой: 64–80px между основными разделами. Нижний колонтитул представляет собой темную полосу внизу страницы с группами ссылок в виде колонок. Стрелки карусели справа на горизонтальных панелях товаров указывают на прокручиваемый контент без точек пагинации.

Фотография является доминирующим визуальным элементом: полноэкранные фотографии товаров на белом фоне, кадрирование 1:1, а также изображения в стиле лайфстайл с теплыми земляными тонами (бежевый, терракотовый, шалфейный, слоновая кость). Изображения товаров имеют свой собственный цвет — пользовательский интерфейс остается ахроматическим, поэтому оттенки товаров становятся визуальным разнообразием. Логотипы бренда отображаются в виде наложенного текста на темных или светлых главных изображениях, а не в виде отдельных значков. В главной композиции карточки товаров располагаются в виде плавающего, слегка перекрывающегося созвездия над словесным знаком. Иконки минималистичны и монохромны (черные контуры), за исключением иконок категорий, которые используют один фирменный цвет. Никаких иллюстраций, 3D-эффектов, градиентов на изображениях товаров.

Интернет-магазин Минимализм

https://shop.app

Палитра

Бренд

Shop Violet #5433eb — Кнопка отправки, точечный текстовый знак, логотип бренда — единственный акцент, который выделяет действие и индивидуальность на белом фоне.
Violet Wash #c0b5f3 — Полупрозрачный ореол за фиолетовой кнопкой отправки, сохраняющий свое свечение без изменения оттенка.

Нейтральные

Canvas Mist #f2f4f5 — Фон страницы и дополнительная обработка поверхности за приподнятыми карточками.
Pure White #ffffff — Основная поверхность для карточек, полей ввода, плавающих рекламных вывесок и кнопок в виде таблеток.
Ink Black #000000 — Основной текст, заголовки, значки, символы навигации и карточки товаров в темном режиме.
Faint Border #ebebeb — Тонкие разделительные линии на карточках, контуры полей ввода и рамки в виде кнопок-таблеток.
Muted Gray #787574 — Второстепенный текст, метки навигации, обводка значков в неактивном состоянии
Cool Stone #cccccc — Заполнители, отключенные состояния и фоны неактивных значков

Типографика

от 11 до 16px · 4 ступеней

GT Standard — замена: Inter · начертания 400 · Основной шрифт всех размеров — как для основного текста, так и для заголовков. GTStandard-MRegular в размерах 16px/-0.031em — это основной шрифт для основного текста, кнопок и подписей. GTStandard-MSemibold в размерах 20px/-0.05em используется для нескольких заголовков большого размера; GTStandard-MMedium в размерах 11–12px — для микроподписей. Каждый вариант шрифта отображается с оптическим весом 400 — иерархия шрифтов достигается за счет тонких градиентов и плотного отрицательного межбуквенного расстояния, а не за счет жирного контраста. Это фирменный стиль: Shop не кричит жирным шрифтом, а формирует текст с помощью межбуквенного расстояния.
Shopify Sans — замена: Inter · начертания 400, 700 · Зарезервировано для сообщений системного уровня, таких как баннер загрузки приложения и текст согласия на использование файлов cookie.

Интервалы и форма

Назначение	Значение
Плотность	средняя
Базовый шаг	12px
Радиус кнопок	9999px
Радиус карточек	28px
Тени	мягкие тени
Между секциями	64px
Ширина страницы	1200px

ИИ соберёт ваш сайт в стиле Shop и наполнит его

Наполнит товарами и постами по ссылке — Instagram, TikTok, Facebook.
Перенесёт контент со старого сайта — достаточно указать адрес.
Современный дизайн на лучшем движке: React (Next.js) с серверным рендерингом и SEO-оптимизацией из коробки.
Полная автоматическая SEO-оптимизация под поисковую выдачу и рекомендации нейросетей.

Создать сайт в этом стиле

Shop

Палитра

Типографика

Интервалы и форма

ИИ соберёт ваш сайт в стиле Shop и наполнит его

Похожие стили