---
title: "Shop design system"
variant: extended
source: https://shop.com/
captured_at: 2026-10-12
theme: light
industry: ecommerce
generator: Design DNA (https://four.wiralomi.com/style/shop-app)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Shop · Design System

> A bright, curated storefront with a confident violet signal

**Theme:** light · **Industry:** ecommerce · **Source:** https://shop.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Shop pairs an airy, white storefront with bold black typography, curated product imagery, and a restrained violet accent. A compact announcement bar and persistent navigation lead into search, category browsing, product collections, and brand storytelling.

## North star

Keep the interface bright and spacious, using bold black type and product imagery as the focus, with violet reserved for clear Shop actions.

## Overview

The page is built on a white, softly off-white canvas, keeping attention on products and oversized, high-contrast headlines. Black is the main text color; muted grays handle supporting copy and fine separators, while vivid violet marks the Shop identity and primary sign-in action. Warm browns, olives, and dark gradients appear mainly in promotional product cards and imagery rather than defining the core interface palette. GT Standard Web supplies a compact sans-serif voice for navigation and catalog details, contrasted with very large, heavy display headlines. The composition centers a search-led storefront, followed by horizontal category shortcuts and broad, rounded product and brand carousels. A slim black app announcement band anchors the top; a narrow icon rail sits at the left. Generous whitespace around the hero gives way to denser shopping rows below. Photography and app mockups carry most of the visual variety, while subtle borders and soft shadows keep cards distinct without heavy framing.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main canvas, card backgrounds, and reversed text on the violet sign-in button. |
| Shop Ink | `#000000` | `--color-shop-ink` | neutral | Primary headlines, navigation labels, product details, and the top announcement band. |
| Cloud Line | `#e2e5e9` | `--color-cloud-line` | semantic | Main measured hairline border tone around controls and card edges. |
| Lilac Glint | `#9c83f8` | `--color-lilac-glint` | accent | Light violet button border and interface highlight; secondary to the stronger violet brand accent. |
| Shop Violet | `#5433eb` | `--color-shop-violet` | brand | Shop wordmark and primary sign-in CTA, with white text for contrast. |
| Slate Gray | `#707070` | `--color-slate-gray` | neutral | Muted supporting copy, especially in footer and secondary text. |
| Soft Silver | `#d1d1d1` | `--color-soft-silver` | neutral | Low-emphasis text and interface details; not a defining brand surface. |
| Charcoal Panel | `#404040` | `--color-charcoal-panel` | surface | Measured inverse card surface; use sparingly for dark content areas rather than the main canvas. |
| Graphite Fade | `#363636` | `--color-graphite-fade` | surface | Dark gradient tone detected in secondary visual treatment, not a dominant page color. |
| Deep Graphite | `#202020` | `--color-deep-graphite` | surface | Dark gradient tone in supporting visuals; avoid treating it as a broad section background. |
| Leather Brown | `#775835` | `--color-leather-brown` | accent | Warm promotional offer treatment, seen in product-led content rather than core navigation. |
| Olive Brass | `#83774a` | `--color-olive-brass` | accent | Muted olive offer treatment on promotional content; not a primary interface accent. |
| Moss Taupe | `#6d6957` | `--color-moss-taupe` | surface | Subdued card and image overlay tone, associated with merchandise imagery. |
| Mist Gray | `#ebebeb` | `--color-mist-gray` | neutral | Faint section, link, and border details that separate content gently. |
| Pewter Surface | `#c9cbcc` | `--color-pewter-surface` | surface | Secondary neutral surface and occasional low-emphasis interface detail. |
| Dove Gray | `#b0b0b0` | `--color-dove-gray` | neutral | Subtle supporting text and small interface icons, especially in the side rail. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#404040` (Charcoal Panel) · `--color-surface-2` → `#c9cbcc` (Pewter Surface) · `--color-text` → `#000000` (Shop Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#707070` (Slate Gray) · `--color-border` → `#e2e5e9` (Cloud Line) · `--color-accent` → `#5433eb` (Shop Violet) · `--color-accent-2` → `#775835` (Leather Brown) · `--color-accent-3` → `#83774a` (Olive Brass) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#404040` | 2.03:1 | fail |
| `#000000` | `#c9cbcc` | 12.9:1 | AAA |
| `#ffffff` | `#404040` | 10.37:1 | AAA |
| `#ffffff` | `#c9cbcc` | 1.63:1 | fail |
| `#707070` | `#ffffff` | 4.95:1 | AA |
| `#707070` | `#404040` | 2.09:1 | fail |
| `#707070` | `#c9cbcc` | 3.04:1 | AA-large |
| `#5433eb` | `#ffffff` | 6.88:1 | AA |
| `#5433eb` | `#404040` | 1.51:1 | fail |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 32%), linear-gradient(rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.5) 100%)`
- `linear-gradient(to top, rgb(199, 147, 88) 20%, rgba(199, 147, 88, 0) 80%)`
- `linear-gradient(to top, rgb(95, 91, 89) 20%, rgba(95, 91, 89, 0) 80%)`
- `linear-gradient(to top, rgb(110, 90, 64) 20%, rgba(110, 90, 64, 0) 80%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| GT Standard Web | `--font-body` | webfont | 600, 400, 500, 800 | All interface and editorial text, from oversized hero headlines to navigation, buttons, and catalog labels. | Inter |

- **GT Standard Web:** Sans-serif with a broad weight range; oversized headlines are extra-bold, while labels and controls stay compact and often semibold.

### Type scale — Perfect Fifth (ratio ≈ 1.47, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 96px | 800 | 1 | -0.01em | — | GT Standard Web | Oversized storefront statement and key promotional headline. |
| h1 | 95px | 800 | 0.91 | 0 | — | GT Standard Web | Primary hero headline. |
| h2 | 64px | 800 | 0.91 | -0.016em | — | GT Standard Web | Major section headlines, including brand storytelling. |
| h3 | 24px | 600 | 1.08 | -0.042em | — | GT Standard Web | Collection and category section headings. |
| h4 | 20px | 600 | 1.1 | -0.05em | — | GT Standard Web | Compact card or subsection titles. |
| body | 14px | 400 | 1.29 | -0.014em | — | GT Standard Web | Search guidance, product descriptions, and supporting copy. |
| caption | 10px | 600 | 1.3 | -0.02em | — | GT Standard Web | Small ratings, metadata, and auxiliary labels. |
| button | 16px | 600 | 1.25 | -0.031em | — | GT Standard Web | Primary actions and prominent shopping controls. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 16, 20, 24 px.
- Section rhythm 64px · element gap 2px · card padding — · max content width —.

A centered storefront sits beside a slim left icon rail, with a narrow announcement strip across the top. The hero aligns around a search field and category shortcuts, then opens into full-width rounded feature cards and horizontal merchandise carousels. Sections follow a clear top-to-bottom shopping journey, with generous whitespace around the opening hero and tighter catalog density in later rows. The footer switches to a compact multi-column link layout.

## Shape & elevation

- Radius: button `9999px` · card `28px` · media `11px` · nav `50%` · link `20px` · xs `10px` · sm `11px` · md `12px` · lg `16px` · xl `17px` · 2xl `20px` · pill `9999px`
- Shadow `sm` (card, other, button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.06) 0px 2px 8px 0px`
- Shadow `md` (other): `rgba(0, 0, 0, 0.16) 0px 4px 24px 0px`
- Shadow `md-2` (card, button, other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 4px 24px 0px`
- Shadow `md-3` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px `
- Shadow `md-4` (other): `rgb(135, 169, 255) 2px 2px 2px 0px, rgb(156, 131, 248) 2px -2px 4px 0px, rgb(84, 51, 235) -2px 2px 4px 0px, rgb(100, 69, 237) 0px 0px 0px 2px`
- Shadow `inset` (other): `rgba(255, 255, 255, 0.4) 0px 1px 0.5px 0px inset, rgba(0, 0, 0, 0.11) 0px -1px 1px 0px inset`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page favors white surfaces, subtle gray borders, and soft, low-contrast shadows over heavy panel treatments. Rounded cards layer product photography above the canvas, while the hero's device and product mockups create depth. The top announcement bar is a crisp dark band against the otherwise light storefront.

## Imagery

Product photography and brand campaign imagery dominate: skincare bottles, apparel, accessories, and store collections appear in horizontal cards. The hero mixes product cutouts with app-screen mockups and small floating product tiles. Images are cleanly framed with rounded corners, soft shadows, and light backgrounds; color and texture mostly come from the merchandise itself.

## Components

### App announcement bar

A compact black strip centered at the top, pairing the Shop app mark, download prompt, platform availability, and arrow.

### Side icon rail

A narrow vertical navigation rail with a violet Shop mark, monochrome shopping icons, and a small sign-in affordance near the bottom.

### Search and category shortcuts

A prominent rounded search field sits below the Shop wordmark, followed by a horizontal row of image-led category links.

### Hero showcase

A large rounded feature panel pairs a bold black headline with floating product photography and a phone interface mockup.

### Product and brand carousels

Horizontal collections use rounded imagery, compact labels, ratings, and offer details to present brands and trending stores.

### Footer link columns

A quiet white footer groups selling, brand, help, social, and legal links, with app download and Shopify details.

### Measured component styles

- **Primary button** (“Sign in”): background #5433eb · text #ffffff · border 1px solid #9c83f8 · radius 1e+07px · padding 12px · 600 16px GT Standard Web · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 25
- **Secondary button** (“Exclusive offer available”): background #775835 · text #000000 · radius 0px · padding 8px 24px · 400 16px GT Standard Web
- **Link** (“Download Shop app. Available on iOS & An”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px GT Standard Web
- **Input**: transparent background · text #000000 · radius 0px · padding 8px 50px 8px 46px · 400 16px GT Standard Web
- **Card** (“Exclusive offer available Exclusive offe”): transparent background · text #000000 · radius 20px · padding 0px · 400 16px GT Standard Web · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Navigation item** (“Sign in”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px GT Standard Web

## Do

- Keep the primary page canvas white or softly off-white.
- Use Shop Violet #5433eb for brand marks and primary actions.
- Make major headlines bold, black, and visually prominent.
- Let product imagery provide most of the color and texture.
- Use rounded cards and restrained, soft shadows.
- Keep shopping collections browsable in horizontal rows.

## Don't

- Do not turn warm offer colors into the main brand palette.
- Do not use heavy borders or dense boxed layouts.
- Do not make secondary copy compete with hero headlines.
- Do not replace product photography with generic decorative gradients.
- Do not crowd the search-led opening with excess controls.
- Do not use violet as a background for every section.

## Agent prompt

Build a new shopping page in Shop’s bright, image-led visual style. Use Gallery White (#ffffff) as the main canvas, Shop Ink (#000000) for headlines and primary text, and Shop Violet (#5433eb) sparingly for the wordmark and key actions. Set typography in a GT Standard Web-like sans serif, using heavy display headlines and compact, readable catalog labels. Compose a clean search-led hero with rounded product imagery, then organize content into horizontal category and product carousels. Keep layout spacious at the top and denser through the shopping feed. Use subtle Cloud Line (#e2e5e9) separators and soft shadows; let real merchandise photography supply warmth. Treat browns and olives as content-specific offer colors, not global UI colors.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Light storefront with a slim left icon rail, top announcement strip, centered wordmark, search, category links, and product-led hero. | App download announcement, Search-first browsing, Category shortcuts, Product discovery | Black announcement bar, Violet brand mark, Rounded search field, Image-led hero panel |
| 2 | footer | Compact, widely spaced footer with the Shop identity, app download links, and grouped link columns. | Grouped navigation links, App download access, Legal and help links | White background, Small muted labels, Multi-column link groups |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/shop-app