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

# POP MART · Design System

> Gallery-like calm for character collectibles

**Theme:** light · **Industry:** ecommerce · **Source:** https://www.popmart.com/us · **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._

A bright, catalog-led storefront pairs clean white space with dense collectible product imagery and an atmospheric, cinematic hero. Strong black typography and restrained red branding keep character worlds, launches, and shopping actions in focus.

## North star

Keep the storefront quiet and structured so vivid character imagery—not decorative interface chrome—owns the attention.

## Overview

The page uses a predominantly white canvas to let colorful character photography carry the personality. Pale gray bands quietly distinguish selected content areas, while black text and occasional fine gray rules organize the long retail journey. POP MART red is concentrated in the compact logo and a few promotional details rather than spread across every action. Barlow provides a clear, slightly condensed retail voice: bold uppercase section titles, medium-weight navigation and controls, and regular-weight product details. A cinematic, dark full-width hero provides contrast at the top; the rest of the page alternates between product grids, promotional image tiles, editorial character features, and store listings. Generous white intervals separate these varied modules, while product cards remain visually dense and image-first. Most controls are square-cornered and outlined, keeping the system crisp rather than soft or heavily elevated.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, product-grid ground, and white type or outlined controls over dark hero imagery. |
| Soft Mist | `#f5f5f5` | `--color-soft-mist` | surface | Subtle navigation, footer, and section-band surface that differentiates content without competing with product art. |
| Collector Ink | `#000000` | `--color-collector-ink` | brand | Primary headings, navigation, product links, icons, outlined controls, and the solid footer background. |
| Quiet Graphite | `#666666` | `--color-quiet-graphite` | neutral | Muted text and gray section treatment, including secondary information and restrained supporting copy. |
| Smoke Fade | `#939393` | `--color-smoke-fade` | neutral | Appears chiefly in measured section gradients; use only as a subtle image-overlay tone, not a core brand fill. |
| POP Signal | `#e60021` | `--color-pop-signal` | accent | Small, high-impact brand accent in the logo and occasional promotional or action details. |
| Silver Haze | `#acaeaf` | `--color-silver-haze` | neutral | Minor footer gradient or supporting neutral detail; not a defining page surface. |
| Cool Divider | `#ebf0f4` | `--color-cool-divider` | semantic | Fine borders and hairlines, particularly around footer and utility regions. |
| Badge Charcoal | `#333333` | `--color-badge-charcoal` | neutral | Launch-time badge backgrounds, badge text, and small secondary footer details. |
| Footer Silver | `#cccccc` | `--color-footer-silver` | neutral | Low-emphasis footer text and minor supporting details. |
| Pale Rule | `#dddddd` | `--color-pale-rule` | neutral | Subtle separators and low-contrast footer or utility borders. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f5f5f5` (Soft Mist) · `--color-surface-2` → `#666666` (Quiet Graphite) · `--color-surface-3` → `#000000` (Collector Ink) · `--color-text` → `#000000` (Collector Ink) · `--color-text-muted` → `#666666` (Quiet Graphite) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#ebf0f4` (Cool Divider) · `--color-accent` → `#e60021` (POP Signal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f5f5f5` | 19.26:1 | AAA |
| `#000000` | `#666666` | 3.66:1 | AA-large |
| `#666666` | `#ffffff` | 5.74:1 | AA |
| `#666666` | `#f5f5f5` | 5.27:1 | AA |
| `#666666` | `#000000` | 3.66:1 | AA-large |
| `#ffffff` | `#f5f5f5` | 1.09:1 | fail |
| `#ffffff` | `#666666` | 5.74:1 | AA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#e60021` | `#ffffff` | 4.79:1 | AA |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4))`
- `linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.3))`
- `linear-gradient(90deg, rgb(240, 216, 170), rgb(254, 238, 209))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Barlow-Regular | `--font-body` | webfont | 400 | Body copy, section support text, and regular-weight interface labels. | Barlow |
| Barlow-Medium | `--font-barlow-medium` | webfont | 400, 500 | Navigation, buttons, launch badges, and medium-emphasis labels. | Barlow |
| Barlow-Bold | `--font-display` | webfont | 700, 400, 600 | Primary and section headings. | Barlow |
| Barlow | `--font-barlow` | webfont | 400, 700 | Fallback or shared family declaration across text styles. | Barlow |

- **Barlow-Regular:** Use a clean regular weight for descriptions and product metadata; keep tracking neutral.
- **Barlow-Medium:** Medium weight gives compact controls clear presence without turning them into display headlines.
- **Barlow-Bold:** Section headings are bold and uppercase; preserve the measured zero tracking.
- **Barlow:** Use as the family fallback; measured page styling favors regular, medium, and bold variants.

### Type scale — Minor Third (ratio ≈ 1.191, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 27px | 700 | 1.57 | 0 | — | Barlow-Bold | Main hero or page-level headline, set bold with clear breathing room. |
| h2 | 21px | 700 | 1 | 0 | uppercase | Barlow-Bold | Uppercase section headings for featured collections and shopping modules. |
| h3 | 20px | 500 | normal | 0 | — | Barlow-Medium | Medium-weight product or subsection titles. |
| body | 16px | 400 | 1.57 | 0 | — | Barlow-Regular | Descriptions, introductory copy, and supporting page text. |
| caption | 12px | 400 | 1.4 | 0 | — | Barlow-Regular | Compact product metadata, prices, and secondary labels. |
| button | 12px | 400 | 1.57 | 0 | — | Barlow-Medium | Small, medium-weight text inside outlined or filled actions. |

OpenType features in use: `"tnum"`.

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 4, 5, 6, 9, 12, 15, 18, 21, 29, 30, 60 px.
- Section rhythm 40px · element gap 18px · card padding — · max content width 1350px.

A full-width retail homepage is organized into a long vertical sequence of distinct modules. The content grid is measured at a 1350px maximum width, with centered page sections and left-aligned headings. Product rows use multi-column grids, while themed promotions and character features mix wider tiles with smaller companion cards. Section spacing creates clear pauses between dense product collections. The first viewport starts with a slim announcement strip, a horizontal navigation bar, and a full-bleed hero before returning to a white content canvas.

## Shape & elevation

- Radius: input `2px` · media `50%` · badge `3px` · xs `2px` · sm `3px` · md `6px` · lg `9px` · pill `9999px`
- Shadow `hairline` (button): `rgba(0, 0, 0, 0.016) 0px 2px 0px 0px`
- Shadow `hairline-2` (footer): `rgba(0, 0, 0, 0.15) 1px 1px 1px 0px`
- Motion: standard transition `0.3s ease` on interactive elements.

The interface is mostly flat: white cards sit directly on the canvas, and section changes rely more on whitespace and pale bands than on shadows. Borders are thin and restrained. Buttons are typically square-cornered and outlined; launch badges use a small radius. Keep overlays limited to hero text legibility and avoid adding heavy card elevation.

## Imagery

Character photography and rendered collectible figures dominate the page, with product images usually framed as individual cards or promotional artwork. A cinematic, full-bleed hero uses dark video-like imagery and overlaid white title and controls. Other modules mix lifestyle scenes, illustrated campaign graphics, storefront photography, and clean character portraits. Keep imagery vivid and let each IP retain its own palette.

## Components

### Announcement strip

A compact, pale top bar carries a short offer message, red account link, and close control.

### Primary navigation

A horizontal white header combines the red logo, uppercase category links, search field, utility icons, and sign-in link.

### Hero carousel

Full-width cinematic imagery carries a centered white title, adjacent thin white-outline actions, slide indicators, and a pause control.

### Product card

Image-first product tile with a linked name, compact price, and, for launches, a charcoal label and small outlined notification action.

### Featured series grid

Large promotional character tiles sit in a multi-column layout with uppercase section labels and small outlined view-more controls.

### Special-offer tiles

Campaign artwork is arranged as a row of image-led cards with short captions and compact outlined calls to action.

### Dark footer

Black footer groups social links, newsletter signup, contact details, site navigation, app badges, and low-contrast legal information.

### Measured component styles

- **Primary button** (“EXPLORE MORE”): transparent background · text #ffffff · border 1px solid #ffffff · radius 0px · padding 4px 15px · 400 16px Barlow-Regular · shadow rgba(0, 0, 0, 0.016) 0px 2px 0px 0px
- **Link** (“THE MONSTERS Hair Salon Series - Vinyl P”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px -apple-system
- **Input**: transparent background · text #000000 · radius 2px · padding 0px · 400 14px -apple-system
- **Badge** (“LAUNCH TIME”): background #333333 · text #ffffff · radius 2.99995px · padding 0px 4.5px · 500 12px Barlow-Medium
- **Navigation item** (“EXPLORE MORE JOIN THE FUN Hirono × Harry”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px -apple-system

## Do

- Use white as the default page canvas.
- Let character artwork provide most of the color.
- Set section headings in bold uppercase Barlow.
- Use POP Signal red sparingly for brand emphasis.
- Separate major modules with generous white intervals.
- Keep buttons and dividers crisp and mostly square-cornered.

## Don't

- Do not flood the page with red accents.
- Do not place heavy shadows beneath product cards.
- Do not replace product photography with generic illustrations.
- Do not make every section a uniform card grid.
- Do not use rounded, pill-shaped controls as the default.
- Do not let labels or navigation overpower the collectible imagery.

## Agent prompt

Build a new POP MART-style retail page with a clean Gallery White (#ffffff) canvas, occasional Soft Mist (#f5f5f5) bands, and Collector Ink (#000000) typography. Use POP Signal (#e60021) only for small brand moments. Set section titles in bold uppercase Barlow and use regular or medium Barlow for body copy, navigation, and controls. Lead with a wide, image-rich hero that can support a dark overlay and thin white outlined actions. Follow with varied, image-first product grids and campaign tiles, keeping product names and prices compact. Use whitespace and pale hairlines instead of heavy shadows. Favor crisp square controls, restrained charcoal launch badges, and strong alignment within a centered wide content area. Keep the artwork vivid and let it define each collection's mood.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width, single-column hero region beneath the site header. | Carousel controls, Pause control | Dark full-bleed media, Centered white title, Outlined actions |
| 2 | product-grid | Left-aligned heading and introduction above a five-column product row. | Product links, Price display | Character photography, Compact captions, White background |
| 3 | feature-grid | Section heading and character tabs above a three-column image grid. | Category tabs, View-more links | Large promotional imagery, Uppercase heading, Outlined tile actions |
| 4 | product-showcase | Full-width media band with an overlaid showcase and product details below. | Online discovery, Product actions | Character scene, Image overlay, Pale neutral band |
| 5 | feature-grid | One large tile alongside smaller promotional tiles in an asymmetric grid. | Theme browsing, Promotional links | Mixed tile sizes, Character-led art, Pale campaign backgrounds |
| 6 | category-nav | Compact heading above two rows of small linked topic items. | Quick topic navigation, Popular query links | Small character thumbnails, Short labels, Open spacing |
| 7 | product-grid | Section heading and more link above a five-column product row. | Product links, More discovery | Large product images, Compact price captions, White canvas |
| 8 | product-grid | Section heading and more link above a five-column product row. | Fandom discovery, Product links | Character merchandise, Image-first cards, Compact metadata |
| 9 | feature-grid | Campaign heading above a four-column row of image-led offer cards. | Offer discovery, View-more actions | Campaign artwork, Short captions, Outlined buttons |
| 10 | product-showcase | Wide, minimal showcase with a centered featured collectible and supporting links. | Featured item browsing, Size selection | Large figure imagery, Minimal text, Outlined selectors |
| 11 | product-grid | Heading and explore link above four columns of new-launch products. | Launch information, Notify-me actions | Launch badges, Outlined notification buttons, Product imagery |
| 12 | product-grid | Centered heading and intro above a centered four-column rewards row. | Points redemption, Sign-in prompt | Reward item cards, Points labels, Outlined sign-in action |
| 13 | team | Section heading above a five-column set of character profiles. | Character discovery, Profile browsing | Character portraits, Names and descriptions, Pale section band |
| 14 | other | Heading and more link above a six-column store listing area. | Store discovery, Location details | Storefront photographs, Address captions, White background |
| 15 | footer | Black footer organized into social, newsletter/contact, and navigation columns. | Email signup, Social links, Support navigation | Black background, Light text, Thin separators |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
--ant-primary-color: rgb(0, 0, 0);
--ant-primary-color-disabled: #333333;
--ant-primary-color-hover: #0d0d0d;
--ant-primary-color-active: #000000;
--ant-primary-color-outline: rgba(0, 0, 0, 0.2);
--ant-primary-color-deprecated-bg: #404040;
--ant-primary-color-deprecated-border: #262626;
--ant-primary-1: #404040;
--ant-primary-2: #333333;
--ant-primary-3: #262626;
--ant-primary-4: #1a1a1a;
--ant-primary-5: #0d0d0d;
--ant-primary-6: #000000;
--ant-primary-7: #000000;
--ant-primary-8: #000000;
--ant-primary-9: #000000;
--ant-primary-10: #000000;
--ant-primary-color-deprecated-l-35: rgb(89, 89, 89);
--ant-primary-color-deprecated-l-20: rgb(51, 51, 51);
--ant-primary-color-deprecated-t-20: rgb(51, 51, 51);
--ant-primary-color-deprecated-t-50: rgb(128, 128, 128);
--ant-primary-color-deprecated-f-12: rgba(0, 0, 0, 0.12);
--ant-primary-color-active-deprecated-f-30: rgba(64, 64, 64, 0.3);
--ant-primary-color-active-deprecated-d-02: rgb(59, 59, 59);
--ant-error-color: rgb(210, 0, 30);
--ant-error-color-disabled: #ffa3a5;
--ant-error-color-hover: #de2339;
--ant-error-color-active: #ab001f;
--ant-error-color-outline: rgba(210, 0, 30, 0.2);
--ant-error-color-deprecated-bg: #ffe6e6;
--ant-error-color-deprecated-border: #f7777d;
--ant-info-color: rgb(255, 179, 0);
--ant-info-color-disabled: #fff0a3;
--ant-info-color-hover: #ffc629;
--ant-info-color-active: #d99100;
--ant-info-color-outline: rgba(255, 179, 0, 0.2);
--ant-info-color-deprecated-bg: #fffce6;
--ant-info-color-deprecated-border: #ffe47a;
```

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