MUJI Design System

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.