Design System Preview
rakuten.co.jp — 日本語版

DESIGN.md から抽出したデザイントークンのカタログ。body 12px / line-height 1.1 の超高密度レイアウト、楽天レッド #bf0000、CSS vars なし。computed style 実測値に基づく。

お買い物はこちら DESIGN.md を読む

01 / Colors

カラーパレット

Brand
楽天レッド
#bf0000
ブランドカラー
楽天レッド Dark
#990000
ホバー・プレス
Text
Text Dark
#333333
見出し・強調
Text Primary
#666666
本文テキスト
Text Secondary
#999999
補足・注釈
Text Disabled
#cccccc
無効状態
Semantic
Sale / Danger
#bf0000
セール・エラー
Point / Warning
#ff8c00
ポイント・注意
Success
#008000
在庫あり・送料無料
Surface & Border
Background
#ffffff
ページ背景
Background Gray
#f6f6f6
セクション背景
Border
#dddddd
区切り線・枠
Border Light
#eeeeee
薄い区切り

02 / Typography — 実測値

タイポグラフィ階層

人気商品ランキング — Heading 2 (Ranking)
20px / 600 / line-height: 28px (x1.4) / ls: normal / palt: なしランキング見出し
最近チェックした商品 — Heading 2 (History)
20px / 600 / line-height: 26px (x1.3) / ls: normal / palt: なし閲覧履歴見出し
ジャンル一覧 — Heading 2 (Genre)
16px / 700 / line-height: 17.6px (x1.1) / ls: normal / palt: なしジャンル見出し
12,800円(税込) — Price
14px / 700 / color: #bf0000商品価格
9,980円(税込)15,800円 — Sale Price
16px / 700 / color: #bf0000 + 取消線 11px #999セール価格
本文テキスト — body 12px / line-height 1.1 の超高密度な本文。楽天市場の情報密度を支える基本設定。一画面に可能な限り多くの情報を詰め込む設計思想。ABCabc 123
12px / 400 / line-height: 13.2px (x1.1) / color: #666body デフォルト
注釈・免責事項テキスト — Caption (10px)
10px / 400 / line-height: 11px (x1.1) / color: #999最小テキスト

情報密度の実演: body 12px / lh 1.1

楽天市場は日本最大級のインターネットショッピングモールです。ファッション、食品、家電、日用品など、あらゆるジャンルの商品を取り扱っています。楽天ポイントが貯まる・使えるお得なショッピング体験を提供します。

お買い物マラソン、楽天スーパーSALE、楽天大感謝祭など、定期的に開催される大型セールイベントでは、ポイント最大46.5倍などの特典があります。エントリー不要でポイントアップする商品も多数。

※ 本テキストは body 12px / line-height: 13.2px (1.1) の実測値に基づく表示サンプルです。楽天市場の極めてタイトな行間設定を再現しています。一般的な日本語サイトの推奨値(line-height: 1.5以上)を大きく下回りますが、これは情報密度最大化の設計意図に基づくものです。


04 / Products — 商品グリッド

商品一覧

160 x 120
【送料無料】国産黒毛和牛 切り落とし 1kg 冷凍 お取り寄せグルメ
8,980円
4,980円
+245ポイント (5倍)
送料無料
★★★★☆ 4.52 (1,284件)
160 x 120
ワイヤレスイヤホン Bluetooth 5.3 ノイズキャンセリング IPX7防水
3,280円
+164ポイント (5倍)
送料無料
★★★★☆ 4.31 (8,721件)
160 x 120
【1000円ポッキリ】 お試しセット 無添加 ドライフルーツ ミックスナッツ
1,000円
+50ポイント (5倍)
送料無料
★★★★★ 4.78 (15,432件)
160 x 120
布団セット シングル 7点 洗える 抗菌防臭 防ダニ 新生活応援
12,800円
6,980円
+349ポイント (5倍)
送料無料
★★★★☆ 4.45 (3,567件)
160 x 120
スマホケース iPhone16 手帳型 マグネット レザー カード収納
1,580円
+79ポイント (5倍)
★★★★☆ 4.22 (2,198件)
160 x 120
プロテイン ホエイ 3kg チョコレート味 WPC 国内製造
4,480円
+224ポイント (5倍)
送料無料
★★★★★ 4.61 (6,890件)

人気商品ランキング

  1. 【楽天1位】 ワイヤレスイヤホン 高音質 ノイキャン
    3,280円
  2. 国産黒毛和牛 切り落とし 1kg 冷凍便
    4,980円
  3. お試しセット ドライフルーツ&ナッツ
    1,000円
  4. 布団セット シングル 7点 新生活応援
    6,980円
  5. プロテイン ホエイ 3kg チョコレート味
    4,480円

06 / Genre — ジャンルナビ

ジャンル一覧

レディースファッション メンズファッション 食品 スイーツ 家電・PC スマホ・タブレット インテリア・寝具 キッチン用品 日用品・文具 コスメ・美容 スポーツ おもちゃ・ホビー ペット用品 本・CD・DVD 車・バイク 花・ガーデン

07 / Buttons

ボタンバリエーション

購入手続きへ
Primary CTA
カートに入れる
Outline
ポイント付与
Point
送料無料
Success Badge

08 / Forms

フォーム要素

デフォルト — border: #cccccc, radius: 4px, height: 32px
フォーカス — border: #bf0000
エラー — border: #bf0000

09 / Elevation

Depth & Elevation

Level 0: Flat
影なし、ボーダーのみ(基本)
Level 1
ドロップダウン
Level 2
モーダル
Hover Border
#bf0000(商品カードホバー)

10 / Spacing

スペーシングスケール

4px
8px
12px
16px
24px
32px