お、ねだん以上。ニトリ

Design System Preview
nitori-net.jp

DESIGN.md から抽出したデザイントークンのカタログ。カラー、フォント、コンポーネント、スペーシングの全値を可視化。ニトリのEC実測値に基づく。

商品を探す DESIGN.md を読む
01 / Colors

カラーパレット

Brand — マルチブランド
Nitori Teal
#009e96
--text-Promotional-nitori / 主要CTA
Deco Home Orange
#eb5505
--text-Promotional-deco / サブブランド
N+ Warm Gray
#94897d
--text-Promotional-nplus / サブブランド
Text
Text Primary
#333333
--text-Primary / 本文
Text Secondary
#6d6d6d
--text-Secondary / 補足
Text Link
#53a4ef
--text-Link
Text Disabled
#dbdbdb
--text-Disabled
Text Destructive
#ff3a2e
--text-Destructive / エラー・セール価格
Background
Base Layer
#ffffff
--background-BaseLayer
Secondary Layer
#ededed
--background-SecondaryLayer
Tertiary Layer
#e1e1e1
--background-TertiaryLayer
Disabled
#f2f2f2
--background-Disabled
Surface Dark
#333333
--background-Black / フッター
Border
Border Primary
#333333
強調ボーダー
Border Secondary
#dbdbdb
入力フィールド・ボタン
Border Divider
#e7e7e7
区切り線・カード
Border Focus
#53a4ef
フォーカスリング
Border Destructive
#ff3a2e
エラー状態
02 / Typography

タイポグラフィ階層

家具・インテリアのトータルコーディネート — h1
30px / 500 / line-height: 1.22 / letter-spacing: normalページタイトル
おすすめ商品カテゴリ — h2
24px / 700 / line-height: 1.33 / letter-spacing: normalセクション見出し
収納・キッチン用品 — h3 (large)
18px / 700 / line-height: 1.33 / letter-spacing: normalカテゴリ見出し
今週のおすすめアイテム — h3 (default)
16px / 700 / line-height: 1.5 / letter-spacing: normalリスト見出し
ニトリの商品は、お客様の暮らしをより快適にするために、品質と価格のバランスを大切にしています。家具やインテリア、キッチン用品から寝具まで、幅広いカテゴリの商品を取り揃えております。
14px / 500 / line-height: 1.43 / letter-spacing: normal本文テキスト
送料は1配送につき550円（税込）。11,000円以上で送料無料。
13px / 400 / line-height: 1.6 / color: Text Secondary補足・注釈
※一部地域を除く。離島・遠隔地は別途送料がかかります。
11px / 400 / line-height: 1.45 / color: Text Secondary注記・キャプション
03 / Product — 商品カード

商品一覧サンプル

🛋️
ニトリ
2人用ソファ（Nポケット A15 DR-GY）
49,900円（税込）
🪑
N+
ワークチェア（フォリスト BK）
29,900円（税込）
🛏️
SALE
シングルマットレス（Nスリープ ハード）
19,900円（税込）
🏠
デコホーム
フェイクグリーン ハンギング（ポトス）
1,490円（税込）
04 / Buttons

ボタンバリエーション

カートに入れる
Primary CTA
#009e96 / radius: 4px
お気に入り登録
Secondary
border: #dbdbdb / radius: 4px
在庫なし
Disabled
#dbdbdb / radius: 5px
削除する
Destructive
border: #ff3a2e
詳しく見る >
Link
#53a4ef
ブランド別CTAカラー
ニトリ
#009e96
デコホーム
#eb5505
N+
#94897d
05 / Cards

カードコンポーネント

新生活応援キャンペーン

家具・家電をまとめて揃えるなら、ニトリのセットがおトク。コーディネートのご提案も承ります。

キャンペーン詳細 >

店舗受取サービス

オンラインで注文、お近くの店舗で受取。送料無料でお好きなタイミングでお持ち帰りいただけます。

サービス詳細 >

コーディネート事例集

部屋のサイズやテイストに合わせた実例をご紹介。プロが選んだ組み合わせで、理想のお部屋に。

事例を見る >
06 / Forms

フォーム要素

デフォルト — border: #dbdbdb, radius: 4px
フォーカス — border: #53a4ef (--border-Focus)
正しいメールアドレスを入力してください
エラー — border: #ff3a2e (--border-Destructive)
07 / Elevation

Depth & Elevation

Level 0: Flat
影なし、border: #e7e7e7
Elevation 1
商品カード・リスト
Elevation 2
ホバー・ドロップダウン
Elevation 3
ポップオーバー・ツールチップ
Elevation 4
モーダル・ダイアログ
Focus Ring
#53a4ef + box-shadow
08 / Layout

スペーシング & レイアウト

Spacing Scale
4px
8px
12px
16px
20px
24px
32px
48px
64px
Border Radius
2px (small)
4px (default)
8px (large)
Content Widths
EC Main Content 1200px
Product Grid (3-column) 940px
Product Detail 800px
Side Navigation 240px
Grid — 商品一覧
4-column grid / gap: 12–16px / PC表示