Design System Preview
muji.com — 無印良品

DESIGN.md から抽出したデザイントークンのカタログ。ミニマリズムの極致 -- 装飾を排し、余白で語るデザイン。computed style 実測値に基づく。

詳しく見る DESIGN.md を読む

01 / Colors

カラーパレット

Brand
MUJI Red
#7f0019
ブランドカラー(深い赤)
Kinari(きなり色)
#f4eede
MUJIの象徴・背景
Beige
#e0ceaa
温かみのあるアクセント
Red
#dd0c14
セール・エラー
Text
Text Primary
#3c3c43
本文テキスト(暗いグレー)
Text Secondary
#6d6d72
補足テキスト
Text Tertiary
#76767b
さらに薄い補足
Text Disabled
#9d9da0
無効状態
Surface & Border
White
#ffffff
ページ背景
Gray 100
#f5f5f5
セクション背景
Gray 200
#ebebec
薄い区切り線
Gray 300
#d8d8d9
標準ボーダー
Black
#000000
限定使用
Gray Scale
Gray 800
#3c3c43
Gray 700
#6d6d72
Gray 600
#76767b
Gray 500
#9d9da0
Gray 400
#c4c4c6
Gray 300
#d8d8d9
Gray 200
#ebebec
Gray 100
#f5f5f5

02 / Typography -- 実測値

タイポグラフィ階層

店舗を探す -- Heading 1 (h1)
26px / 700 / line-height: 1.6 (41.6px) / letter-spacing: normal / palt: なしセクション見出し
新商品 -- Heading 2 (h2)
32px / 700 / line-height: 1.6 (51.2px) / letter-spacing: normal / palt: なしメイン見出し
季節のおすすめ -- Heading 3 (h3)
26px / 700 / line-height: 1.15 (29.9px) / letter-spacing: 2.4px / palt: なし広いトラッキング
ナビゲーション -- Nav Link
16px / 700 / line-height: 1.4 (22.4px) / letter-spacing: normalナビ
ベースフォント -- Body (16px)。ページ全体の標準サイズ。line-height: 1.6 のゆったりとしたリズムで、余白を感じる組版です。
16px / 400 / line-height: 1.6 (25.6px) / letter-spacing: normal / palt: なしbody
段落テキスト -- Paragraph (12px)。商品の説明文やキャプションに使用されるサイズ。控えめながら読みやすい。
12px / 400 / line-height: 1.6 (19.2px) / letter-spacing: normal / palt: なし商品説明
フッターキャプション -- Caption (14px)
14px / 400 / line-height: 1.6 (22.4px) / color: Text Secondaryフッター
アプリで開く -- CTA Button
12px / 700 / color: #fff / bg: #3c3c43 / radius: 4pxCTAボタン

無印良品の暮らしの提案

くらしの基本が、ここにある

無印良品は、素材の選択、工程の見直し、包装の簡略化を通じて、本当に必要なものを、本当に必要なかたちでつくることを追求しています。それは「これがいい」ではなく「これでいい」という理性的な満足感をめざすものです。

シンプルで美しい暮らし

過剰な装飾を取り除き、素材そのものの質感を活かすこと。無印良品の商品には、そうした引き算の美学が込められています。生活の中で静かに寄り添い、長く使い続けられるものづくり。

季節の移ろいとともに

春には綿のシャツを、夏にはリネンの服を、秋にはウールのニットを。素材が持つ本来の心地よさを、季節とともに感じる暮らし。無印良品は、そんなささやかな豊かさを提案します。


04 / Buttons

ボタンバリエーション

アプリで開く
Primary CTA
bg: #3c3c43, r: 4px
詳しく見る
Outline
border: #d8d8d9, r: 4px
会員登録
MUJI Red
bg: #7f0019, r: 4px
削除する
Danger
bg: #dd0c14, r: 4px

商品カード

オーガニックコットン洗いざらしブロードシャツ

着るほどに肌になじむ、オーガニックコットンを使用した洗いざらしのシャツ。自然な風合いが特徴です。

2,990円

壁に付けられる家具・棚

石膏ボードの壁に簡単に取り付けられる棚。壁を大きく傷つけることなく、収納スペースを増やせます。

1,990円

不揃い バナナバウム

焼きムラや凹凸など、おいしさに関係なくはじかれていたものも活かしました。食品ロスの削減にも。

150円

06 / Forms

フォーム要素

デフォルト -- border: #d8d8d9, radius: 0px(角丸なし)
フォーカス -- border: #3c3c43
エラー -- border: #dd0c14

07 / Spacing -- 12段階スペーシングスケール

スペーシングスケール

4px
xxxxs
8px
xxxs
12px
xxs
16px
xs
20px
s
24px
sm
32px
m
40px
ml
48px
l
56px
xl
64px
xxl
80px
xxxl
96px
xxxxl

08 / Elevation

Depth & Elevation

Level 0: Flat
影なし。MUJIの基本
Level 1: Hover
0 1px 2px rgba(0,0,0,0.08)
Level 2: Dropdown
0 2px 8px rgba(0,0,0,0.1)

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