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

# MINISO · Design System

> Bright retail storytelling with playful product character

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

MINISO’s homepage pairs a restrained white interface with colorful product and brand imagery. A spacious, scroll-led sequence moves from the global navigation and hero through brand stats, IP collaborations, stores, news, and a quiet footer.

## North star

Keep the interface quiet and spacious so vivid retail and collaboration imagery remains the main event.

## Overview

The page uses white as its dominant canvas, with a light gray band reserved for the IP collaboration product area and footer. Black headings and dark gray supporting text keep the interface legible without competing with the imagery; MINISO red appears sparingly in the logo, small controls, and numeric highlights. Typography is clean and largely unembellished, using the measured light and medium web fonts with regular weights and no tracking or uppercase treatment. A wide desktop header gives navigation room to breathe, while centered section headings and broad content areas organize a long, one-column page flow. Product and store content becomes more modular within those sections, with image-led cards and horizontal collections. The imagery carries most of the color: bright lifestyle scenes, character collaborations, and retail locations are presented at large scale. Generous vertical gaps separate sections, keeping the overall impression airy and approachable rather than dense.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, header, and most content sections; also appears in reversed navigation and button details. |
| Soft Section Gray | `#f7f7f7` | `--color-soft-section-gray` | surface | Pale band behind the IP collaboration and product showcase section. |
| Core Black | `#000000` | `--color-core-black` | neutral | Primary navigation and headline text. |
| Quiet Line | `#d6d6d6` | `--color-quiet-line` | neutral | Main measured border color for subtle interface separators and hairlines. |
| Charcoal Text | `#333333` | `--color-charcoal-text` | neutral | Secondary dark text and supporting links. |
| Muted Graphite | `#666666` | `--color-muted-graphite` | neutral | Muted link and small control text; measured on product and brand links. |
| MINISO Red | `#e60012` | `--color-miniso-red` | brand | Brand mark and limited red controls, including the active carousel indicator. |
| Control Gray | `#eeeeee` | `--color-control-gray` | semantic | Light button and link outlines, including circular carousel controls. |
| Near Black | `#010101` | `--color-near-black` | neutral | Rare near-black link detail; not a defining page color. |
| Signal Red | `#f12535` | `--color-signal-red` | accent | Small red text accents, especially highlighted brand statistics. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f7f7f7` (Soft Section Gray) · `--color-text` → `#000000` (Core Black) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#333333` (Charcoal Text) · `--color-border` → `#d6d6d6` (Quiet Line) · `--color-accent` → `#e60012` (MINISO Red) · `--color-accent-2` → `#f12535` (Signal Red) · `--color-on-accent` → `#666666` (Muted Graphite)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f7f7f7` | 19.6:1 | AAA |
| `#ffffff` | `#f7f7f7` | 1.07:1 | fail |
| `#333333` | `#ffffff` | 12.63:1 | AAA |
| `#333333` | `#f7f7f7` | 11.79:1 | AAA |
| `#e60012` | `#ffffff` | 4.8:1 | AA |
| `#e60012` | `#f7f7f7` | 4.48:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| light | `--font-light` | webfont | 400, 700 | Body copy, captions, and navigation or product links. | Roboto |
| medium | `--font-body` | webfont | 400 | Main headings and body text. | Roboto |
| mont | `--font-mont` | webfont | 400 | A small share of heading styling, including a measured h3 role. | Montserrat |

- **light:** Measured weights 400 and 700; use regular-looking text with restrained, untracked styling.
- **medium:** Measured at 400; clear, even sans-serif forms with no measured letter spacing or forced uppercase.
- **mont:** Measured at 400; use sparingly for a distinct heading voice, without extra tracking.

### Type scale — Minor Third (ratio ≈ 1.189, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 400 | 1 | 0 | — | medium | Large hero or primary page headline. |
| h2 | 31.5px | 400 | 1.26 | 0 | — | medium | Section titles such as store or campaign headings. |
| h3 | 30px | 400 | 1.17 | 0 | — | mont | Secondary display headings within content sections. |
| h4 | 28px | 400 | 3.24 | 0 | — | light | Smaller supporting headings and section labels. |
| body | 20px | 400 | 1.75 | 0 | — | medium | Main descriptive copy and prominent supporting text. |
| caption | 13.5px | 400 | 2.25 | 0 | — | light | Product names, image captions, and compact supporting labels. |
| link | 13.5px | 400 | 5.27 | 0 | — | light | Navigation, product links, and utility actions. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 10, 12, 20, 21, 25, 35, 50, 100 px.
- Section rhythm 100px · element gap — · card padding — · max content width 1275px.

A spacious, long-scroll homepage with a wide desktop canvas and a measured maximum content width of 1275px. The header distributes the logo, central navigation, and compact utility controls across a single horizontal row. Most sections read as broad, single-column bands; product and store areas shift into multi-column image collections. Headings and statistics are centered, while card labels sit close to their imagery. Section spacing is generous, with a clear change of pace at the pale gray collaboration band.

## Shape & elevation

- Radius: button `50%` · link `50%`
- Shadow `md` (other): `rgb(204, 204, 204) 0px 0px 14px 0px`
- Motion: standard transition `0.5s ease` on interactive elements.

The page is mostly flat: white and pale gray bands separate content without pronounced cards or heavy shadow. Thin light borders define a few circular controls, while imagery supplies the strongest depth and layering. Keep interface elevation restrained and let photo composition provide visual dimensionality.

## Imagery

Large lifestyle and campaign photography dominates the first screen and IP feature, followed by product, store, and news imagery in card-like collections. The visuals are bright and colorful, with character merchandise and retail environments providing most of the palette beyond the restrained interface colors. Image crops are broad and prominent; small captions remain visually secondary.

## Components

### Global navigation

White horizontal header with a compact red MINISO mark, widely separated navigation links, and small search and language controls.

### Hero carousel

Full-width lifestyle image with small circular pagination indicators near the lower edge; the active dot is red.

### Brand statistics

Centered brand statement above four evenly distributed icon-and-metric items, with red values and labels.

### IP collaboration feature

Large campaign image and overlaid title treatment, followed by circular collection selectors.

### Product showcase

Pale gray section with collaboration navigation and a horizontal set of product images and compact labels.

### Store gallery

Store-location imagery arranged in a wide multi-column row with city captions and region navigation.

### Footer

Light gray closing band with franchise contact details, grouped navigation links, and subdued legal text.

### Measured component styles

- **Primary button**: background #e60012 · text #666666 · radius 50% · padding 0px · 400 12px light
- **Secondary button**: background #ffffff · text #666666 · border 2px solid #eeeeee · radius 50% · padding 0px · 400 12px light
- **Link** (“Boxed Weekly-Planning Note Pad”): transparent background · text #666666 · radius 0px · padding 0px · 400 12px light

## Do

- Use white as the primary canvas.
- Reserve MINISO red for branding and small highlights.
- Give large campaign photography room to lead.
- Separate major content with generous vertical space.
- Keep captions smaller and quieter than imagery.
- Use pale gray as a section band, not a competing background.

## Don't

- Do not fill every section with colored panels.
- Do not make navigation visually heavy or crowded.
- Do not turn product imagery into dense text cards.
- Do not use strong shadows throughout the page.
- Do not apply red broadly to large backgrounds.
- Do not add decorative gradients absent from the measured style.

## Agent prompt

Build a new MINISO-style retail page with a quiet, spacious interface and vivid merchandise imagery. Use Gallery White (#ffffff) for the main canvas and Soft Section Gray (#f7f7f7) for occasional content bands. Set primary headings in Core Black (#000000), supporting copy in Charcoal Text (#333333) or Muted Graphite (#666666), and reserve MINISO Red (#e60012) and Signal Red (#f12535) for small brand and metric accents. Use a clean sans-serif stack, restrained weights, and no added letter spacing. Arrange a roomy horizontal header, broad image-led hero, centered content headings, and modular product or store galleries. Keep captions compact, sections generously separated, controls simple, and borders subtle. Let photography supply the page’s color, texture, and depth; avoid heavy shadows and decorative gradients.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | White full-width header with logo at left, links across the center, and compact utilities at right. | Primary site navigation, Search and language utilities | Red brand mark, Minimal dark text links, Open horizontal spacing |
| 2 | stats | Centered brand statement above four evenly spaced metric items. | Quick brand overview, Metrics scan | Small line icons, Red numeric highlights, Centered alignment |
| 3 | video | Full-bleed campaign image with text overlaid near the lower left. | Featured collaboration, Explore action | Large lifestyle photography, Low-contrast overlay copy, Carousel controls below |
| 4 | product-showcase | Pale gray band with a narrow category area and multi-column product imagery. | Category selection, Product browsing | Image-led product cards, Compact captions, Circular controls |
| 5 | gallery | White section with region tabs and a wide row of store images. | Region selection, Location browsing | Multi-column store gallery, City captions, Compact carousel arrows |
| 6 | content-feed | Centered heading above three large, evenly spaced image tiles. | Browse latest stories, Explore brand experiences | Image-led tiles, Short overlay labels, Spacious white margins |
| 7 | footer | Light gray closing band with contact details, grouped links, and a low-emphasis legal row. | Franchise contact, Footer navigation | Grouped link columns, Small subdued text, Brand mark |

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