Muji Design System — Colours, Type and a Ready Prompt

Back to all styles

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

18tokens

11type steps

2radius steps

8pxspacing base

Muji, in one page

デザイン方針: ミニマリズムの極致。装飾を完全に排し、余白で語るデザイン
密度: ゆったりとしたメディア型。商品画像と余白を活かした構成
キーワード: 素朴、静謐、無装飾、自然体、余白

Do's and don'ts

Do

テキスト色は #3c3c43 を使い、純黒 #000 を避ける
line-height は 1.6 で統一する
余白を十分に取り、要素間にゆとりを持たせる
ボタンの角丸は 4px に留め、過度な丸みを避ける
きなり色 #f4eede やベージュ #e0ceaa で温かみを加える
スペーシングスケールに従い、一貫した余白を使う

Don't

装飾的なグラデーション、シャドウ、アニメーションを多用しない
MUJI Red #7f0019 を広い面積に使わない（アクセントとして控えめに）
palt（プロポーショナル字詰め）を適用しない
角丸を大きくしない（8px以上は MUJIらしくない）
テキストに純黒 #000000 を使わない
letter-spacing を全体に適用しない（h3 の 2.4px は例外）

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

This prompt ships with the source DESIGN.md.

無印良品のデザインシステムに従って、商品一覧ページを作成してください。
- テキスト色: #3c3c43（純黒を使わない）
- フォント: "Helvetica Neue", Arial, "Noto Sans JP", sans-serif
- 行間: line-height: 1.6 で統一
- 背景: きなり色 #f4eede をヒーローセクションに使用
- ボタン: bg #3c3c43, 角丸 4px, 12px/700
- 余白: 4px〜96px の12段階スペーシングスケールを使用
- 装飾は最小限に。影やグラデーションは使わない
- MUJI Red #7f0019 はロゴやアクセントのみに限定

The specification

Colour paletteRead the full spec

Primary（ブランドカラー）

MUJI Red (#7f0019): ムジの赤。深みのあるブランドカラー。ロゴ、アクセントに控えめに使用
Red (#dd0c14): 強調・セール・エラー表示

Brand Neutral（MUJIらしさを出すニュートラル）

Kinari（きなり色） (#f4eede): MUJIの象徴。ヒーロー背景、セクション背景に使用
Beige (#e0ceaa): ベージュ。温かみのあるアクセント面

Semantic（意味的な色）

Danger (#dd0c14): エラー、削除、危険な操作
Warning: 未定義（実測なし）
Success: 未定義（実測なし）

Neutral（ニュートラル）

Text Primary (#3c3c43): 本文テキスト。純黒ではなく暗いグレー
Text Secondary (#6d6d72): 補足テキスト、ラベル
Text Tertiary (#76767b): さらに薄い補足テキスト
Text Disabled (#9d9da0): 無効状態のテキスト
Border (#d8d8d9): 区切り線、入力欄の枠
Border Light (#ebebec): 薄い区切り線
Background (#fff): ページ背景
Background Secondary (#f5f5f5): セクション背景
Surface (#fff): カード、モーダル等の面
Black (#000): 限定的に使用（ヘッダー等）

Gray Scale（12段階）

Token	Value
Gray 800	`#3c3c43`
Gray 700	`#6d6d72`
Gray 600	`#76767b`
Gray 500	`#9d9da0`
Gray 400	`#c4c4c6`
Gray 300	`#d8d8d9`
Gray 200	`#ebebec`
Gray 100	`#f5f5f5`
White	`#fff`

Type scaleRead the full spec

3.1 和文フォント

ゴシック体: Noto Sans JP, Noto Sans JP Fallback, Hiragino Kaku Gothic ProN, Meiryo
明朝体: 使用なし

3.2 欧文フォント

サンセリフ: Helvetica Neue, Arial
セリフ: 使用なし
等幅: 未定義

3.3 font-family 指定

/* 本文（欧文を先に指定し、和文フォントでフォールバック） */
font-family: "Helvetica Neue", Arial, "Noto Sans JP", "Noto Sans JP Fallback", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

フォールバックの考え方:

欧文フォント（Helvetica Neue, Arial）を先に指定し、欧文グリフの品質を優先
和文は Noto Sans JP を第一候補とし、ヒラギノ・メイリオでフォールバック
generic family は sans-serif

3.4 文字サイズ・ウェイト階層

Role	Font	Size	Weight	Line Height	Letter Spacing	備考
Heading 1	本文と同じ	26px	700	41.6px (×1.6)	normal	「店舗を探す」等
Heading 2	本文と同じ	32px	700	51.2px (×1.6)	normal	「新商品」等
Heading 3	本文と同じ	26px	700	29.9px (×1.15)	2.4px	広いトラッキング
Body	本文と同じ	16px	400	25.6px (×1.6)	normal	ページ全体のベース
Paragraph	本文と同じ	12px	400	19.2px (×1.6)	normal	商品説明等
Nav Link	本文と同じ	16px	700	22.4px (×1.4)	normal	ナビゲーション
Caption	本文と同じ	14px	400	22.4px (×1.6)	normal	フッター補足
CTA Button	本文と同じ	12px	700	—	normal	「アプリで開く」等

3.5 行間・字間

本文の行間 (line-height): 1.6（すべての要素でほぼ統一。珍しい特徴）
見出しの行間: 1.6（h1, h2）/ 1.15（h3 のみ例外）
本文の字間 (letter-spacing): normal
見出しの字間: normal（h3 のみ 2.4px の広いトラッキング）

ガイドライン:

line-height を 1.6 で統一する設計思想。見出しも本文も同じリズムを持つ
h3 だけが例外で、line-height: 1.15 / letter-spacing: 2.4px と異なるスタイル
全体的に穏やかで静かなリズム感を維持する

3.6 禁則処理・改行ルール

/* 実測値に基づく推定設定 */
word-break: break-all;
overflow-wrap: break-word;
line-break: strict;

禁則対象:

行頭禁止: ）」』】〕〉》」】、。，．・：；？！
行末禁止: （「『【〔〈《「【

3.7 OpenType 機能

font-feature-settings: normal;  /* palt なし */
font-kerning: auto;

palt: 使用していない。プロポーショナル字詰めを適用しない設計
kern: 標準のカーニングのみ
MUJIはフォント機能を最小限にとどめ、素朴な組版を維持している

3.8 縦書き

該当なし

Components and layoutRead the full spec

Buttons

Primary (CTA)

Background: #3c3c43（テキスト色と同じ暗いグレー）
Text: #fff
Padding: 8px 16px（推定）
Border Radius: 4px
Font Size: 12px
Font Weight: 700

Secondary (Outline)

Background: transparent
Text: #3c3c43
Border: 1px solid #d8d8d9
Padding: 8px 16px（推定）
Border Radius: 4px

Brand Accent

Background: #7f0019（MUJI Red）
Text: #fff
Border Radius: 4px
使用頻度は低い。特別な強調時のみ

Inputs

Background: #fff
Border: 1px solid #d8d8d9
Border (focus): 1px solid #3c3c43（推定）
Border Radius: 0px（角丸なし。MUJIらしいシャープさ）
Padding: 8px 12px（推定）
Font Size: 16px

Cards

Background: #fff
Border: 1px solid #ebebec
Border Radius: 0px（推定。直線的なデザイン）
Padding: 16px
Shadow: なし（フラットデザイン）

Spacing Scale（12段階）

Token	Value
XXXXS	4px
XXXS	8px
XXS	12px
XS	16px
S	20px
SM	24px
M	32px
ML	40px
L	48px
XL	56px
XXL	64px
XXXL	80px
XXXXL	96px

CSS Custom Properties: --space-v-xxxxs (4px) から --space-v-xxxxl (96px) まで12段階

Container

Max Width: 1120px（推定）
Padding (horizontal): 16px〜32px

Grid

Columns: 可変（商品グリッドは 2〜4 列）
Gutter: 16px〜24px

Level	Shadow	用途
0	none	ほぼすべての要素。フラットが基本
1	`0 1px 2px rgba(0,0,0,0.08)`	ホバー時のカード（控えめ）
2	`0 2px 8px rgba(0,0,0,0.1)`	ドロップダウン、ポップオーバー

MUJIは影をほぼ使わない。フラットで素朴な表現が基本方針

Responsive behaviourRead the full spec

Breakpoints

Name	Width	説明
Mobile	≤ 767px	モバイルレイアウト
Tablet	≤ 1024px	タブレットレイアウト
Desktop	> 1024px	デスクトップレイアウト

タッチターゲット

最小サイズ: 44px × 44px（WCAG基準）

フォントサイズの調整

モバイルでは本文 14–16px、見出しはデスクトップの 70–80% 程度に縮小

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-muji {--page-bg: #ffffff;
  --page-bg-gradient: none;
  --text-color: #3c3c43;
  --heading-color: #3c3c43;
  --link-color: #7f0019;
  --link-hover-color: #4c000f;
  --border-color: #dcdcdd;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(60,60,67,0.06);
  --card-hover-shadow: 0 6px 18px rgba(60,60,67,0.12);
  --header-bg: #3c3c43;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #ffffff;
  --footer-text-color: #76767b;
  --button-bg: #7f0019;
  --button-text-color: #ffffff;
  --button-hover-bg: #4c000f;
  --button-border: none;
  --button-border-radius: 4px;
  --button-secondary-bg: #f3f3f4;
  --button-secondary-text-color: #3c3c43;
  --button-secondary-hover-bg: #e8e8e8;
  --button-secondary-border: 1px solid #dcdcdd;
  --prompt-bg: #f5f5f6;
  --prompt-text-color: #3c3c43;
  --base-font: var(--font-helvetica);
  --heading-font: var(--font-helvetica);
  --card-border-radius: 4px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

peloton 85.4%
keyence 84.0%
lemon8 83.0%
mpuni 81.9%
happn 81.6%

Where this came from

Source document: jp/design-md/muji/DESIGN.md · 6.2 KB
Repository: kzhrknt/awesome-design-md-jp
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.