Shop
A floating trading constellation on white marble
The online store operates on a "white canvas" model, with products displayed as large, heavily curved image cards rather than grids of thumbnails. The entire interface is incredibly smooth: 20-28px radii throughout, pill-shaped controls, and a compact 16px GT Standard body with tight negative tracking that makes text crisp and bold. The system's only bold accent is a vibrant purple (#5433eb), which appears in the logo, the circular search results field, and as a tinted shadow on the same button. The rest of the palette is warm neutral: white surfaces, a subtle cool gray canvas, subtle borders, and near-black text. The density remains compact with 12px gutters, but the hero and category stripes breathe thanks to a generous vertical rhythm of 64-80px, making the commerce experience feel more like browsing than a catalog.
The maximum width is 1200px, centered on a translucent #f2f4f5 canvas, with a persistent 64px-wide sidebar on the left containing only navigation icons. The main element is a full-width strip, with product cards positioned above a centered purple "shop" logo, and a pill-shaped search bar directly below it. Category pills are arranged in a single centered row below the search bar. Content sections (Women, Men, Beauty, Home, Baby & Kids) follow as designated strips, each containing a 4-column grid with product images or a 2-column "main element and grid" composition. The vertical rhythm is generous: 64–80px between main sections. The footer is a dark strip at the bottom of the page with column-shaped link groups. Carousel arrows on the right side of the horizontal product panels indicate scrollable content without pagination points.
Photography is the dominant visual element: full-screen product photos against a white background, cropped 1:1, and lifestyle images with warm earthy tones (beige, terracotta, sage, ivory). Product images have their own color—the user interface remains achromatic, allowing the product shades to provide visual variety. Brand logos appear as overlay text on dark or light main images, rather than as individual icons. In the main composition, product cards are positioned as a floating, slightly overlapping constellation above the wordmark. Icons are minimalist and monochrome (black outlines), with the exception of category icons, which use a single brand color. There are no illustrations, 3D effects, or gradients in product images.
Palette
Brand
- Shop Violet
#5433eb— The send button, the dotted text mark, and the brand logo are the only accents that highlight the action and individuality on the white background. - Violet Wash
#c0b5f3— A translucent halo behind the purple send button that maintains its glow without changing hue.
Neutral
- Canvas Mist
#f2f4f5— Page background and additional surface treatment behind raised cards. - Pure White
#ffffff— The main surface for cards, input fields, floating signs and pill-shaped buttons. - Ink Black
#000000— Main text, headings, icons, navigation symbols, and product cards in dark mode. - Faint Border
#ebebeb— Thin dividing lines on cards, input field outlines, and pill-shaped button frames. - Muted Gray
#787574— Secondary text, navigation labels, icon outlines when inactive - Cool Stone
#cccccc— Placeholders, disabled states, and inactive icon backgrounds
Typography
from 11 to 16px · 4 steps
- GT Standard — replacement: Inter · outlines 400 · The primary font at all sizes—for both body text and headings. GTStandard-MRegular at 16px/-0.031em is the primary font for body text, buttons, and labels. GTStandard-MSemibold at 20px/-0.05em is used for several large headings; GTStandard-MMedium at 11–12px is used for microcaptions. Each font variant is displayed with an optical weight of 400—font hierarchy is achieved through subtle gradients and dense negative letter spacing, rather than bold contrast. This is a signature style: Shop doesn't shout with bold fonts, but rather shapes the text through letter spacing.
- Shopify Sans — replacement: Inter · outlines 400, 700 · Reserved for system-level messages such as app loading banners and cookie consent text.
Intervals and form
| Purpose | Meaning |
|---|---|
| Density | average |
| Basic step | 12px |
| Button radius | 9999px |
| Card radius | 28px |
| Shadows | soft shadows |
| Between sections | 64px |
| Page width | 1200px |
AI will build your website in Shop style and fill it
- Fill with products and posts via the link - Instagram, TikTok, Facebook.
- Transfer content from your old site—just specify the address.
- Modern design on the best engine: React ( Next.js) with server rendering and SEO optimization out of the box.
- Fully automated SEO optimization for search results and neural network recommendations.
Similar styles
- Cursor — A cozy parchment workshop, lit by smoldering coals
- Slush — inflatable universe of stickers on pastel paper
- MindMarket — A cozy fairytale book on cream paper - a friendly editorial canvas where large Inter headlines and cut-out paper characters coexist on a sun-drenched, sticker-soft surface.
- Airbnb — A quiet white gallery wall with a single coral red bookmark
- Superr — A warm school notebook in the soft afternoon light. A cream-colored page, an orange marker without a cap, and a stack of laminated name stickers waiting to be peeled off.
- Apple (España) — The museum gallery, in soft daylight, is a single, captivating, weightless white space, with each exhibit illuminated by a spotlight against a lightly tinted wall.
- Lamborghini — Black body color in the showroom, under the spotlights - one yellow car
- Amplemarket — A sun-drenched workplace strewn with confetti
- Getharvest — A desk at golden hour – a warm cream canvas, white postcards hung on the canvas, and a single bright orange flame
- Agence Foudre — The magazine's cover page is a soft pink color reminiscent of lipstick.
- Drive Capital — Retro road trip poster on warm paper
- Apple (España) — white gallery display case