---
version: alpha
name: MUJI
website: "https://www.muji.com/us/"
description: >-
  MUJI's storefront runs the most pigment-averse interface in global retail — a paper-white canvas (#ffffff) carrying warm graphite ink (#3c3c43) at 3211 occurrences, with one single brand voltage allowed onto the page: the trademark red (#7f0019), scoped to 5 backgrounds, 33 text labels, and the logo chip itself. The type stack is one face — Helvetica, Arial, sans-serif — at weight 400 and 700 only, with body running 16px / 24px and the lone h2 climbing to 37.44px. Photography (linen, ceramics, hemp, packed-cube luggage) carries every moment of warmth; chrome stays out of the way at 2px corners with a 9999px pill reserved for category chips.

seo:
  title: "MUJI Design System for React — Helvetica, red #7f0019, 22 components"
  metaDescription: "MUJI's minimal Japanese retail design system as a DESIGN.md file. Helvetica only, red #7f0019 accent, paper-white canvas, 21 colors, 22 components. For React and AI tools."
  highlights:
    - "Single-voltage red — #7f0019 (the MUJI logo red) appears in 93 occurrences total, 5 as background and 33 as text, never as a primary button fill"
    - "One-typeface system — Helvetica/Arial across every label at weight 400 and 700 only, with the lone h2 reaching 37.44px / 40.32px line-height"
    - "Two-tier radius — 2px on cards and tiles (84 occurrences), 9999px pill chips for category badges (212 occurrences), and nothing in between"
    - "Warm graphite ink — #3c3c43 used 3211 times across text (1744) and borders (1464); the warm tint over pure black is the brand's softness signal"
    - "Photography-led catalogue — product, linen, and packed-cube hero shots carry every emotional moment while the chrome holds at 8px / 12px breathing units"
  tags:
    - "E-commerce & Retail"
  lastUpdated: "2026-05-13"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    MUJI's online store is what a 40-year-old Japanese no-brand brand looks like when it refuses every Western e-commerce convention. The page paints warm graphite ink (#3c3c43) on a paper-white canvas (#ffffff) and admits one chromatic accent: the trademark red (#7f0019) that lives in the wordmark chip and a handful of seasonal callouts. Where most global retailers paint primary CTAs in a saturated brand voltage, MUJI uses the red 93 times across the entire homepage — mostly in 1px borders and small text labels — and leaves every primary action button in pale neutral chrome (#ebebec) with graphite ink text. The button doesn't shout; the linen photograph does.

    This page packages the storefront into a DESIGN.md file. Inside: 21 color tokens organized into ink, surface, hairline, and a single brand-red layer; 10 typography levels all rendered in Helvetica/Arial at weight 400 and 700 (no medium, no light, no italic); a two-step radius scale that pivots at 2px for cards and 9999px for category chips with nothing in between; an 8px-based spacing rhythm; and 22 component definitions covering the top-nav, primary CTA, product tile, recommendation rail, category chip, hero banner, and packed-cube feature card. The full CSS-variable layer (32 :root tokens including success-mint, danger-rubicund, warning-yellow) is captured even though most of those swatches are dormant on the homepage.

    Feed the file to Claude, Cursor, or Copilot and the agent reproduces MUJI's no-brand discipline — Helvetica labels, paper canvas, warm graphite ink, square corners with pill chips, photography-first hero bands — instead of a generic shadcn theme. Every token traces back to the live storefront extraction, every hex sits in the CSS, and the photography-carries-warmth principle is the named constraint a junior agent needs to be told before it starts replacing the red with a brighter pigment.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.muji.com/us/"
      title: "MUJI — official site"
      description: "The Japanese no-brand lifestyle retailer's storefront — the source for this design system."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files."
  questions:
    - id: "primary-color"
      title: "What is MUJI's primary brand color?"
      answer: "MUJI's only brand-layer color is the trademark red #7f0019 — declared on `:root` as `--color-primary-red` and `--color-primary-red-20`, used 93 times across the homepage (5 backgrounds, 33 text labels, 55 1px borders). It paints the MUJI logo chip, a small set of seasonal-callout pills, and the underline beneath sale labels. It is never used as a primary CTA fill — that role goes to pale neutral chrome #ebebec with #1d1d1f ink text. The page is otherwise warm-graphite-on-white: 3211 occurrences of #3c3c43 ink against 262 of pure white #ffffff."
    - id: "typography"
      title: "What typography does MUJI use?"
      answer: "MUJI runs Helvetica, Arial, sans-serif as a single typeface across every label on the page — no custom face, no second family, no italic, no medium weight. The system uses weight 400 for body and weight 700 for emphasis, with no 300, 500, or 600 intermediates. Body sits at 16px / 24px (141 occurrences). The lone h2 climbs to 37.44px with 0.1px letter-spacing and 40.32px line-height. The decision to refuse a custom typeface is in keeping with the no-brand position — Helvetica is the everywhere-typeface, and using it for a global retailer reads as a deliberate absence of identity rather than a typographic miss."
    - id: "radius-strategy"
      title: "Why does MUJI use 2px and 9999px corners with nothing in between?"
      answer: "The radius scale is two-tier. 2px (84 occurrences) is the default — a corner so small it reads as a square at normal viewing distance, applied to cards, product tiles, hero overlays, and form fields. 9999px (212 occurrences) is reserved for category chips, filter pills, and the small badge that sits beside seasonal-collection links. There is no 8px or 12px middle radius anywhere in the system. The split forces a categorical decision: a surface is either a near-rectangle (catalogue chrome) or a fully-rounded pill (taxonomic chip). Nothing softens halfway."
    - id: "primary-cta"
      title: "Why is MUJI's primary CTA pale gray instead of red?"
      answer: "The primary CTA in the extraction is the Women / Men category button — background #ebebec (pale neutral), text #1d1d1f (near-black graphite), border 1px #1d1d1f, 40px tall, 0px corners, padding 9.6px 16px 9.6px 14.4px. The brand-red #7f0019 is held in reserve for the wordmark and a small set of seasonal callouts. Painting CTAs in red would compete with the product photography — the catalogue's load-bearing visual asset — and break the no-brand position. Pale neutral chrome with graphite ink keeps the eye on the linen sheet, the ceramic bowl, the packed-cube suitcase."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own React storefront?"
      answer: "Yes — drop the file into Claude, Cursor, or Copilot and ask for a page in MUJI's idiom. The agent reproduces the paper canvas, the Helvetica-only type, the two-tier radius split, the warm-graphite hairline borders, and the photography-first hero rhythm rather than a generic shadcn theme. Every hex sits in the extracted JSON, every typography signature came directly from the page's computed styles, and every component spec preserves the exact padding values (9.6px 16px 9.6px 14.4px on the primary button is verbatim, including the asymmetric horizontal padding). The 8px and 12px spacing units carry most of the rhythm."
    - id: "known-gaps"
      title: "What's missing from this DESIGN.md?"
      answer: "Several layers fall outside the homepage extraction. The full :root variable list declares success-mint #32c997, danger-rubicund #f0857d, warning-yellow #e48900, and danger-red #ff5a4f — none of these paint on the homepage and would only surface on the cart, account, or order-confirmation flows. Product detail pages (with size pickers, color swatches, ingredient lists) carry component variants not present in the landing capture. Motion (hover-fade product tiles, drawer-slide cart, image carousels) is undocumented. The Find a Store map, the MUJI Passport member area, and the recipe / journal editorial templates each carry their own surface treatments outside the catalogue chrome."

colors:
  ink: "#3c3c43"
  ink-deep: "#1d1d1f"
  ink-soft: "#333333"
  ink-mid: "#666666"
  ink-quiet: "#767676"
  ink-mist: "#8f8f8f"
  ink-faint: "#9d9da0"
  hairline: "#c4c4c6"
  hairline-soft: "#e0e0e0"
  canvas: "#ffffff"
  surface-secondary: "#ebebec"
  ink-pure: "#000000"
  brand-red: "#7f0019"
  accent-beige: "#e0ceaa"
  danger-red: "#dd0c14"
  danger-rubicund: "#f0857d"
  danger-bright: "#ff5a4f"
  success-green: "#009262"
  success-mint: "#32c997"
  warning-yellow: "#e48900"
  warning-lemon: "#ffa826"

typography:
  display-md:
    fontFamily: "Helvetica, Arial, sans-serif"
    fontSize: 37.44px
    fontWeight: 700
    lineHeight: 1.08
    letterSpacing: "0.1px"
  heading-md:
    fontFamily: "Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: "0.25px"
  heading-sm:
    fontFamily: "Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: "0.25px"
  body-lg-bold:
    fontFamily: "Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.55
    letterSpacing: 0
  body-md:
    fontFamily: "Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-md-bold:
    fontFamily: "Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0
  body-sm-bold:
    fontFamily: "Helvetica, Arial, sans-serif"
    fontSize: 14.4px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0
  body-sm:
    fontFamily: "Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0
  caption:
    fontFamily: "Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0
  micro:
    fontFamily: "Helvetica, Arial, sans-serif"
    fontSize: 9.1px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0

rounded:
  none: "0px"
  card: "2px"
  full: "9999px"

spacing:
  xxs: "3px"
  xs: "4px"
  sm: "8px"
  md: "9.6px"
  base: "12px"
  lg: "16px"
  xl: "24px"

components:
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-soft}"
    typography: "{typography.body-md-bold}"
    rounded: "{rounded.none}"
    padding: "0px 12px"
    height: "56px"
    border: "0"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink-soft}"
    typography: "{typography.body-md-bold}"
    padding: "0"
    rounded: "{rounded.none}"
  logo-chip:
    backgroundColor: "{colors.brand-red}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-md-bold}"
    rounded: "{rounded.none}"
    padding: "4px 8px"
    height: "24px"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-mid}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "6px 12px"
    height: "36px"
    border: "1px solid {colors.ink-mist}"
  button-primary:
    backgroundColor: "{colors.surface-secondary}"
    textColor: "{colors.ink-deep}"
    typography: "{typography.body-md-bold}"
    rounded: "{rounded.none}"
    padding: "9.6px 16px 9.6px 14.4px"
    height: "40px"
    border: "1px solid {colors.ink-deep}"
  button-primary-hover:
    backgroundColor: "{colors.hairline-soft}"
    textColor: "{colors.ink-deep}"
    rounded: "{rounded.none}"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-deep}"
    typography: "{typography.body-md-bold}"
    rounded: "{rounded.none}"
    padding: "9.6px 16px 9.6px 14.4px"
    height: "40px"
    border: "1px solid {colors.ink-deep}"
  button-text-link:
    backgroundColor: "transparent"
    textColor: "{colors.brand-red}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
  category-chip:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.full}"
    padding: "4px 8px"
    border: "1px solid {colors.hairline}"
  badge-sale:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.brand-red}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: "0px 3px"
    border: "1px solid {colors.brand-red}"
  product-tile:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm-bold}"
    rounded: "{rounded.card}"
    padding: "8px 0px 0px"
    border: "0"
  product-tile-label:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm-bold}"
    padding: "0"
  product-tile-price:
    backgroundColor: "transparent"
    textColor: "{colors.ink-deep}"
    typography: "{typography.caption}"
    padding: "0px 3px"
  recommendation-rail:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.heading-sm}"
    rounded: "{rounded.none}"
    padding: "16px 0px"
  hero-banner:
    backgroundColor: "{colors.surface-secondary}"
    textColor: "{colors.canvas}"
    typography: "{typography.display-md}"
    rounded: "{rounded.card}"
    padding: "8px 0px"
  hero-overlay-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-deep}"
    typography: "{typography.heading-md}"
    rounded: "{rounded.card}"
    padding: "12px"
  feature-card-split:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.card}"
    padding: "16px"
    border: "1px solid {colors.hairline-soft}"
  hairline-rule:
    backgroundColor: "{colors.hairline}"
    height: "1px"
    border: "0"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: "24px 0px"
    border: "1px solid {colors.hairline-soft}"
  status-success:
    backgroundColor: "{colors.success-mint}"
    textColor: "{colors.canvas}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: "4px 8px"
  status-warning:
    backgroundColor: "{colors.warning-yellow}"
    textColor: "{colors.canvas}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: "4px 8px"
  status-danger:
    backgroundColor: "{colors.danger-red}"
    textColor: "{colors.canvas}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: "4px 8px"
  link-emphasis:
    backgroundColor: "transparent"
    textColor: "{colors.brand-red}"
    typography: "{typography.body-md-bold}"
    rounded: "{rounded.none}"
---

## Overview

MUJI's storefront is the most pigment-averse interface in global retail — a paper-white canvas (`{colors.canvas}` — #ffffff) carrying warm graphite ink (`{colors.ink}` — #3c3c43), with the trademark red (`{colors.brand-red}` — #7f0019) held in reserve for the wordmark chip and a handful of seasonal callouts. Where most global retailers paint their primary CTA in the brand voltage and saturate the page with seasonal accent pigments, MUJI uses red 93 times in total across the entire homepage and leaves every primary action button in pale neutral chrome (`{colors.surface-secondary}` — #ebebec) with near-black ink. The button recedes; the linen photograph carries the page.

The type system runs on **one typeface, two weights**. Helvetica, Arial, sans-serif paints every label from the 37.44px h2 down to the 9.1px footer micro-print. Weight 400 covers body, weight 700 covers labels, navigation, and product titles — and there is no 300, no 500, no 600 intermediate, no italic, no oblique. The h2 carries a 0.1px letter-spacing nudge and the h3/h4 carry 0.25px; everywhere else letter-spacing reads as normal. The decision to refuse a custom typeface is the no-brand position made literal in CSS.

**No-brand discipline**: MUJI inherits from the 1980 Seiyu store-brand thesis — products labeled by function, not by author. The interface mirrors the philosophy. Where most beauty and homeware brands amplify with seasonal accent pigments and bespoke display faces, MUJI strips identity to a single red mark and the world's most ubiquitous grotesque. Where most e-commerce CTAs shout in saturated brand color, the primary button here wears pale neutral chrome and asks the photograph beside it to do the selling.

**Key Characteristics:**
- Warm graphite ink (`{colors.ink}` — #3c3c43) used 3211 times across text (1744) and borders (1464). Not pure black — a warm graphite tinted toward purple-gray that reads as ink-on-newsprint.
- Brand-red (`{colors.brand-red}` — #7f0019) appears 93 times total, never as a button fill. Scoped to the wordmark chip and seasonal callouts.
- Two-tier radius: `{rounded.card}` (2px, 84 occurrences) for cards and tiles; `{rounded.full}` (9999px, 212 occurrences) for category chips. Nothing in between.
- Helvetica/Arial only, weight 400 and 700 — no medium, no light, no italic.
- 8px and 12px dominate the spacing rhythm (131 + 70 occurrences). 16px and 24px handle band-level breathing.
- Asymmetric button padding `9.6px 16px 9.6px 14.4px` — the 1.6px lean to the right is a vertical-alignment correction for the optical center of Helvetica caps.
- 32 CSS variables on `:root` declare a dormant accent palette (success-mint, warning-yellow, danger-red, secondary-beige) that doesn't paint on the homepage — held in reserve for cart, order, and account states.
- Photography (linen, ceramics, hemp, packed-cube luggage) carries every emotional moment. The chrome stays out of the way.

## Colors

### Ink
- **Warm Graphite** (`{colors.ink}` — #3c3c43): frequency 3211. Used as text (1744), border (1464), background (3). The dominant token — every body paragraph, hairline rule, product label, and footer column sits on this exact warm gray. Declared as `--color-neutral-grey-70`. Not pure black; the warm tint reads as ink-on-newsprint.
- **Deep Graphite** (`{colors.ink-deep}` — #1d1d1f): frequency 24. Used as text (12) and border (12). The CTA-button text and border tone — sharper than the body-text gray. Declared as `--color-neutral-grey-80`.
- **Soft Graphite** (`{colors.ink-soft}` — #333333): frequency 20. Used as text (4) and border (16). The top-nav and primary nav-link tone — slightly deeper than the body ink.
- **Mid Graphite** (`{colors.ink-mid}` — #666666): frequency 1. Used as input placeholder text. Declared as `--color-neutral-grey-60`.
- **Quiet Graphite** (`{colors.ink-quiet}` — #767676): frequency 1. Used as a single 1px border — declared as `--color-neutral-grey-50`.
- **Mist** (`{colors.ink-mist}` — #8f8f8f): frequency 1. The text-input border tone — declared on the search field at the top of the page.
- **Faint Graphite** (`{colors.ink-faint}` — #9d9da0): frequency 51. Used as text (25) and border (26). For secondary labels and sub-rail meta. Declared as `--color-neutral-grey-40`.
- **Pure Black** (`{colors.ink-pure}` — #000000): frequency 8. Used as text (3), border (3), shadow (2). Reserved for SVG icon strokes — MUJI avoids pure black for body text because it breaks the warm-graphite continuity.

### Surface
- **Canvas** (`{colors.canvas}` — #ffffff): frequency 262. Used as background (136), text (65 — on dark surfaces), border (61). The default page floor — declared as `--color-neutral-white` and `--color-neutral-white-20`. Pure white, no warm tint.
- **Surface Secondary** (`{colors.surface-secondary}` — #ebebec): frequency 12. Used as background (10) and border (2). The CTA-button fill and the cool-gray hero-banner backdrop. Declared as `--color-neutral-grey-10` and `--color-secondary-beige-10`.
- **Hairline Soft** (`{colors.hairline-soft}` — #e0e0e0): frequency 1. Used as a single 1px divider — declared as `--color-neutral-grey-20`.

### Hairline
- **Hairline** (`{colors.hairline}` — #c4c4c6): frequency 36. Used as text (2), border (34). The 1px rule under product tiles and category chips. Declared as `--color-neutral-grey-30`.

### Brand
- **MUJI Red** (`{colors.brand-red}` — #7f0019): frequency 93. Used as text (33), background (5), border (55). The single brand-layer color — declared as `--color-primary-red` and `--color-primary-red-20`. Reserved for the wordmark chip, seasonal-callout pills, the underline beneath sale labels, and the link-emphasis color. Never a button fill.

### Accent (mostly dormant)
- **Beige** (`{colors.accent-beige}` — #e0ceaa): a warm beige declared as `--color-secondary-beige-20`. Reserved for seasonal hero bands and packaging callouts — does not paint on the catalogue chrome.
- **Danger Red** (`{colors.danger-red}` — #dd0c14): declared as `--color-secondary-red-10` / `--color-secondary-red`. Reserved for cart errors and out-of-stock badges.
- **Rubicund** (`{colors.danger-rubicund}` — #f0857d): declared as `--color-danger-rubicund`. A soft coral for inline form warnings.
- **Bright Red** (`{colors.danger-bright}` — #ff5a4f): declared as `--color-danger-red`. The hard-error-state red for destructive confirmations.
- **Success Green** (`{colors.success-green}` — #009262): declared as `--color-success-green`. Reserved for order-confirmation and in-stock states.
- **Success Mint** (`{colors.success-mint}` — #32c997): declared as `--color-success-mint`. A softer success tone for non-modal confirmations.
- **Warning Yellow** (`{colors.warning-yellow}` — #e48900): declared as `--color-warning-yellow`. The shipping-delay and back-in-stock notification color.
- **Warning Lemon** (`{colors.warning-lemon}` — #ffa826): declared as `--color-warning-lemon`. The brighter notification variant.

## Typography

### Font Family
The system runs **Helvetica, Arial, sans-serif** across every label on the page. No custom typeface, no second family, no italic. The fallback stack stops at Arial — a deliberate refusal to load a brand font in a system whose entire position is to refuse brand affectation.

The weight split is bi-modal:
- 400 → body, captions, prices, footer
- 700 → buttons, nav, h2 / h3 / h4, product titles, label rows

No 300, no 500, no 600, no italic. The h2 is the only entry to carry a letter-spacing nudge (0.1px); the h3 / h4 use 0.25px; everywhere else letter-spacing reads as normal.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-md}` | 37.44px | 700 | 1.08 | 0.1px | The single hero h2 — "Linen, hemp, naturally." |
| `{typography.heading-md}` | 20px | 700 | 1.5 | 0.25px | Section h3 heads ("Recommended for you", "Spaces we wear well") |
| `{typography.heading-sm}` | 18px | 700 | 1.5 | 0.25px | h4 sub-heads inside rails and feature cards |
| `{typography.body-lg-bold}` | 18px | 700 | 1.55 | 0 | Lead paragraphs in feature cards |
| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | Default running text (141 occurrences) |
| `{typography.body-md-bold}` | 16px | 700 | 1.3 | 0 | Buttons, nav links, product titles |
| `{typography.body-sm-bold}` | 14.4px | 700 | 1.4 | 0 | Product-tile labels and category sub-rail heads |
| `{typography.body-sm}` | 14px | 400 | 1.43 | 0 | Footer body, fine-print, breadcrumbs |
| `{typography.caption}` | 12px | 400 | 1.3 | 0 | Product prices, meta labels, badges (82 occurrences) |
| `{typography.micro}` | 9.1px | 400 | 1.5 | 0 | Legal text under footer |

### Principles
MUJI's type system never enters the 500–600 medium-weight band that most retail brands use to soften emphasis. Weight 400 carries body; weight 700 carries every label; the transition is abrupt and intentional. Letter-spacing stays at zero everywhere except the three heading tiers (0.1px / 0.25px / 0.25px). Line-heights run loose at 1.43–1.55 for body and tight at 1.08 for the lone h2 — the rhythm reads as a printed Japanese catalogue rather than a Western marketing page.

If Helvetica is unavailable on the target platform, Arial substitutes per the declared stack. Inter is an acceptable third fallback that holds the same humanist-grotesque proportions; **never substitute a geometric grotesque** like Futura or a humanist sans like Source Sans Pro — both would shift the brand from neutral retail to designed-product.

## Layout

### Spacing System
- **Base unit:** 4px.
- **Tokens:** `{spacing.xxs}` 3px · `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 9.6px · `{spacing.base}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 24px.
- **Dominant rhythm:** 8px (131 occurrences) and 12px (70) — the body breathing units. 16px (25) handles tile-internal padding.
- **Asymmetric internal padding:** `9.6px 16px 9.6px 14.4px` on the primary button — the 1.6px right-lean is an optical correction for Helvetica caps centering.
- **Section padding:** `24px 0px` between major rails — denser than the 64px Western-retail standard, calibrated for browsing 8+ product thumbnails per scroll.
- **Margin shorthand `0px 8px 0px 0px`:** the most common spacing string in the extraction (212 occurrences), used for icon-to-label horizontal gaps inside chips and nav items.

### Grid & Container
- **Max content width:** ~1170px centered.
- **Product rail:** 4-up at desktop, 2-up at tablet, 2-up at mobile (MUJI keeps two columns on phone where most retailers collapse to one).
- **Hero banner:** centered overlay card over a full-bleed photograph — the card itself sits in `{colors.canvas}` over the warm-tinted backdrop.
- **Recommendation rail:** horizontal 4-up grid with 8px gutters; thumbnails are square.

### Whitespace Philosophy
The paper canvas + 2px corners + dense product thumbnails create a catalogue pacing — MUJI reads as a printed shop directory rather than a marketing storefront. Section gaps stay narrow (24px) so the eye scans four product rails without leaving the fold; internal tile padding stays generous (16px) so the photography breathes.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow, no border | Body sections, top nav, recommendation rails |
| Hairline | 1px `{colors.hairline}` (#c4c4c6) border | Product tiles, text inputs, footer columns |
| Surface lift | `{colors.surface-secondary}` (#ebebec) backdrop | CTA buttons, hero-banner cool tinted band |
| Drop shadow | 2 occurrences of `#000000` in shadow | Reserved for the hover state of the wordmark chip — outside catalogue chrome |

The elevation philosophy is **hairline as separator**: a 1px #c4c4c6 rule replaces every drop shadow that another retailer would use to lift a card. No `box-shadow` on product chrome, no gradients, no faux-3D. The only depth in the system comes from the photograph itself — the linen sheet draped over a wood table, the packed-cube luggage stacked in a corner. Photographic composition is the elevation language; the chrome stays flat against the paper.

## Shapes

### Border Radius Scale

| Token | Value | Use |
|---|---|---|
| `{rounded.none}` | 0px | Buttons, nav, hero overlay corners, footer rules |
| `{rounded.card}` | 2px | Product tiles, feature cards, hero banner card (84 occurrences) |
| `{rounded.full}` | 9999px | Category chips, sale badges, status pills (212 occurrences) |

The system splits radius into two categorical decisions: a surface is either a near-rectangle (catalogue chrome) or a fully-rounded pill (taxonomic chip). The 2px corner is so small it reads as a square at normal viewing distance — visible only as anti-aliasing softening at the corner pixels. The 9999px pill, by contrast, is fully committed and reserved for chip-like taxonomic elements where the rounded shape signals "this is a tag, not a button". Nothing in the system rounds halfway.

### Photography
MUJI's photography is the brand's load-bearing visual asset:
- Linen sheets, hemp fabric, raw-edge cotton draped over warm-wood surfaces
- Ceramic bowls, brass utensils, lacquered trays in product hero shots
- Hand-skin tones and packed-cube luggage in the travel rails — never face crops
- Spatial vignettes of MUJI-furnished rooms (the "Spaces we wear well" rail)

When photography is absent, the system falls back to surface-secondary tinted bands (`{colors.surface-secondary}`) or pure white canvas. Photography is never decorative — every shot carries a product or a spatial composition.

## Components

### Top Navigation

**`top-nav`** — White nav bar pinned to the top of every page. 56px tall, `{colors.canvas}` background, no border. Carries the MUJI wordmark chip at left, a primary horizontal menu, and a search input plus account / cart cluster at right. Menu items in `{typography.body-md-bold}` (Helvetica 16px / 1.3 / weight 700).

**`nav-link`** — Individual top-nav item. Transparent background, `{colors.ink-soft}` text, no padding, `{rounded.none}` corners. Hover state is undocumented.

**`logo-chip`** — The MUJI wordmark. Background `{colors.brand-red}` (#7f0019), text `{colors.canvas}` (#ffffff), 4px 8px padding, height 24px, `{rounded.none}` corners. The only place the red appears as a background fill.

### Inputs

**`text-input`** — Search field at the top of the nav. Background `{colors.canvas}`, text `{colors.ink-mid}` (#666666 placeholder), 1px `{colors.ink-mist}` (#8f8f8f) border, `{rounded.none}` corners, padding 6px 12px, height 36px.

### Buttons

**`button-primary`** — The category-entry CTA ("Women", "Men"). Background `{colors.surface-secondary}` (#ebebec), text `{colors.ink-deep}` (#1d1d1f), 1px `{colors.ink-deep}` border, type `{typography.body-md-bold}` (Helvetica 16px / weight 700), padding `9.6px 16px 9.6px 14.4px`, height 40px, `{rounded.none}`. Note the asymmetric horizontal padding — a 1.6px right lean for optical centering of Helvetica caps.

**`button-primary-hover`** — Hover state lifts to `{colors.hairline-soft}` (#e0e0e0). The only state-change documented in the system.

**`button-secondary`** — Outlined variant. Background `{colors.canvas}`, same border, same padding, same height as primary.

**`button-text-link`** — Inline text button, no background. Text `{colors.brand-red}` — one of the rare moments the red is used as a foreground color.

### Cards & Containers

**`category-chip`** — Fully-rounded chip for taxonomic filters. Background `{colors.canvas}`, text `{colors.ink}`, 1px `{colors.hairline}` border, padding 4px 8px, `{rounded.full}`. 212 occurrences in the extraction — the dominant pill chrome.

**`badge-sale`** — Sale callout pill. Same geometry as the category chip but with `{colors.brand-red}` border and text — the only place red borders surface in the catalogue.

**`product-tile`** — The atomic catalogue unit. Background `{colors.canvas}`, no border, `{rounded.card}` (2px). Internal padding `8px 0px 0px` between image and label. Carries a square product photograph, a 14.4px weight-700 title, and a 12px caption price.

**`product-tile-label`** — Title row inside a tile. Type `{typography.body-sm-bold}` (Helvetica 14.4px / weight 700), `{colors.ink}` text.

**`product-tile-price`** — Price line. Type `{typography.caption}` (Helvetica 12px), `{colors.ink-deep}` text, padding `0px 3px`.

**`recommendation-rail`** — Horizontal 4-up grid of product thumbnails. Background `{colors.canvas}`, heading in `{typography.heading-sm}`, 16px section padding, 8px column gutters.

**`hero-banner`** — Full-bleed photograph with a centered overlay card. Background `{colors.surface-secondary}` (the cool-tinted band visible mid-page), padding `8px 0px`, `{rounded.card}` (2px).

**`hero-overlay-card`** — Centered card sitting inside the hero band. Background `{colors.canvas}`, text `{colors.ink-deep}`, type `{typography.heading-md}` (Helvetica 20px / weight 700 / 0.25px tracking), 12px padding, `{rounded.card}` (2px).

**`feature-card-split`** — Two-column feature card. White surface, 1px `{colors.hairline-soft}` border, 16px padding, `{rounded.card}`. Used for spatial-vignette features ("Spaces we wear well").

### Status Pills (dormant on homepage)

**`status-success`** — Background `{colors.success-mint}`, text `{colors.canvas}`, `{rounded.full}` chip. Reserved for in-stock and order-confirmation states.

**`status-warning`** — Background `{colors.warning-yellow}`, text `{colors.canvas}`. Shipping-delay and back-in-stock notifications.

**`status-danger`** — Background `{colors.danger-red}`, text `{colors.canvas}`. Cart errors and destructive-action confirmations.

### Decoration

**`hairline-rule`** — 1px horizontal rule in `{colors.hairline}` (#c4c4c6). Replaces every place a drop shadow would normally separate sections.

**`link-emphasis`** — Inline emphasised text link. Color `{colors.brand-red}`, type `{typography.body-md-bold}`. One of the few foreground uses of red in the catalogue.

### Footer

**`footer`** — White-canvas footer with 4-column link list. Background `{colors.canvas}`, text `{colors.ink}`, 1px top border in `{colors.hairline-soft}`, padding `24px 0px`. Column heads in `{typography.body-md-bold}` (Helvetica 16px / weight 700), link rows in `{typography.body-sm}` (Helvetica 14px / weight 400). The footer never inverts — MUJI refuses the dark-footer convention.

## Do's and Don'ts

### Do
- Anchor every page on pure white canvas `{colors.canvas}` (#ffffff). The paper-white surface is the no-brand position made literal.
- Use `{colors.ink}` (#3c3c43) for body text and `{colors.hairline}` (#c4c4c6) for borders — keep the ink and the hairline visually distinct (warm-graphite vs cool light-gray) rather than collapsing them to the same value.
- Render every catalogue surface at `{rounded.card}` (2px) and every chip at `{rounded.full}` (9999px). The split is categorical; nothing rounds halfway.
- Reserve `{colors.brand-red}` (#7f0019) for the wordmark chip, sale-badge borders, and link-emphasis text. Use it 90+ times per page if needed — just never as a primary CTA fill.
- Preserve the asymmetric `9.6px 16px 9.6px 14.4px` button padding verbatim. The 1.6px right-lean is an optical correction for Helvetica caps centering.
- Use Helvetica/Arial only at weights 400 and 700. Skip the 500–600 medium band entirely.

### Don't
- Don't paint primary buttons in `{colors.brand-red}`. The CTA in this system is `{colors.surface-secondary}` (#ebebec) with `{colors.ink-deep}` text. Painting the button red would compete with product photography and break the no-brand position.
- Don't substitute a custom typeface for Helvetica/Arial. The decision to refuse a brand font is the system's strongest editorial position — replacing Helvetica with Inter or Söhne shifts MUJI from no-brand-retail to designed-product.
- Don't use the success-mint, warning-yellow, or danger-red swatches on the homepage. They're declared on `:root` for cart, order, and form-validation states — surfacing them on the catalogue breaks the warm-graphite-on-white discipline.
- Don't introduce an 8px or 12px middle radius. The two-tier scale is categorical — 2px for catalogue chrome, 9999px for chips, nothing else.
- Don't apply `box-shadow` to product tiles or hero cards. The system uses 1px hairline borders for separation; shadows immediately read as Material-Design.
- Don't use medium-weight (500 / 600) Helvetica. The bi-modal 400 / 700 split is the type system's strongest constraint — an intermediate weight softens the emphasis transition and dilutes the catalogue voice.
- Don't invert the footer to dark. MUJI's footer is white-on-white because the brand refuses the e-commerce convention of dark-footer chrome.

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 768px | Hamburger nav; hero banner stacks vertically; product rails 2-up; footer 4 cols → 1 |
| Tablet | 768–1024px | Top nav stays horizontal; product rails 2-up; feature cards stack |
| Desktop | 1024–1440px | Full top-nav with all menu items; 4-up product rails; centered hero overlay card |
| Wide | > 1440px | Same as desktop with more outer breathing room; max content width caps at 1170px |

### Touch Targets
- `{component.button-primary}` at 40px height — slightly below WCAG 44px but visually anchored by 9.6px vertical padding.
- `{component.text-input}` at 36px height — compact, but visually centered with the adjacent nav-link row.
- `{component.category-chip}` at ~22px height — well below 44px and used only with parent-level tap regions.
- `{component.product-tile}` entire card is tappable; effective tap area >> 44px.

### Collapsing Strategy
- Top nav collapses to a hamburger sheet at < 768px; the wordmark chip stays visible.
- Hero banner's overlay card stacks beneath the photograph on mobile.
- Product rails reduce from 4-up to 2-up rather than scaling tiles down — MUJI keeps two columns on phone where most retailers collapse to one.
- Footer columns collapse 4 → 1 on mobile with hairline-rule dividers between groups.

## Known Gaps

- Helvetica is widely available as a system font but is licensed for desktop use only on most platforms. Web font substitutes (Inter, Arial) are documented but not pixel-exact.
- MUJI's product photography (linen, ceramics, hemp, packed-cube luggage, MUJI-furnished spatial vignettes) is the brand's load-bearing visual asset — photography direction and styling are out of scope for a token document.
- The full `:root` accent palette (success-mint, warning-yellow, danger-red, secondary-beige) is captured but mostly dormant on the homepage — those swatches paint on cart, account, order-confirmation, and form-validation states not present in the extraction.
- Product detail pages carry size pickers, color-swatch grids, ingredient lists, and review modules with their own component variants.
- Motion behavior (hover-fade product tiles, drawer-slide cart, hero image carousels, recommendation-rail horizontal scroll) is undocumented.
- The MUJI Passport member area, Find a Store map, and recipe / journal editorial templates each carry their own surface treatments outside the catalogue chrome.
- Dark mode is not present on the homepage — MUJI runs a single light theme.