Design System Preview
rakuten.co.jp — lorem ipsum

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. body 12px / line-height 1.1 lorem ipsum dolor sit, lorem ipsum #bf0000, CSS vars lorem. computed style lorem ipsum dolor.

lorem ipsum dolor DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
lorem ipsum
#bf0000
lorem ipsum dolor
lorem ipsum Dark
#990000
lorem / lorem
Text
Text Dark
#333333
lorem / lorem
Text Primary
#666666
lorem ipsum dolor
Text Secondary
#999999
lorem / lorem
Text Disabled
#cccccc
lorem ipsum
Semantic
Sale / Danger
#bf0000
lorem / lorem
Point / Warning
#ff8c00
lorem ipsum / lorem
Success
#008000
lorem ipsum / lorem ipsum
Surface & Border
Background
#ffffff
lorem ipsum
Background Gray
#f6f6f6
lorem ipsum dolor
Border
#dddddd
lorem ipsum / lorem
Border Light
#eeeeee
lorem ipsum
02 / Typography — lorem

lorem ipsum dolor sit

lorem ipsum dolor sit — Heading 2 (Ranking)
20px / 600 / line-height: 28px (x1.4) / ls: normal / palt: loremlorem ipsum dolor
lorem ipsum dolor sit — Heading 2 (History)
20px / 600 / line-height: 26px (x1.3) / ls: normal / palt: loremlorem ipsum dolor
lorem ipsum dolor — Heading 2 (Genre)
16px / 700 / line-height: 17.6px (x1.1) / ls: normal / palt: loremlorem ipsum dolor
12,800 lorem(lorem) — Price
14px / 700 / color: #bf0000lorem ipsum
9,980 lorem(lorem)15,800 lorem — Sale Price
16px / 700 / color: #bf0000 + lorem 11px #999lorem ipsum
lorem ipsum dolor — body 12px / line-height 1.1 lorem ipsum dolor. lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing. ABCabc 123
12px / 400 / line-height: 13.2px (x1.1) / color: #666body lorem ipsum
lorem / lorem ipsum dolor — Caption (10px)
10px / 400 / line-height: 11px (x1.1) / color: #999lorem ipsum dolor
03 / Dense Text — lorem ipsum dolor sit

lorem ipsum dolor: body 12px / lh 1.1

lorem ipsum dolor sit amet consectetur adipiscing elit sed do. lorem ipsum dolor, lorem, lorem, lorem ipsum, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit / lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor, lorem ipsum dolor SALE, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor 46.5 lorem ipsum dolor sit amet. lorem ipsum dolor sit amet consectetur adipiscing.

※ lorem ipsum dolor body 12px / line-height: 13.2px (1.1) lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur(line-height: 1.5 lorem)lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing.

04 / Products — lorem ipsum dolor

lorem ipsum

160 x 120
【lorem ipsum】lorem ipsum dolor lorem ipsum 1kg lorem lorem ipsum dolor
8,980 lorem
4,980 lorem
+245 lorem ipsum (5 lorem)
lorem ipsum
★★★★☆ 4.52 (1,284 lorem)
160 x 120
lorem ipsum dolor sit Bluetooth 5.3 lorem ipsum dolor sit IPX7 lorem
3,280 lorem
+164 lorem ipsum (5 lorem)
lorem ipsum
★★★★☆ 4.31 (8,721 lorem)
160 x 120
【1000 lorem ipsum】 lorem ipsum dolor lorem lorem ipsum dolor lorem ipsum dolor
1,000 lorem
+50 lorem ipsum (5 lorem)
lorem ipsum
★★★★★ 4.78 (15,432 lorem)
160 x 120
lorem ipsum lorem ipsum 7 lorem lorem lorem ipsum lorem lorem ipsum
12,800 lorem
6,980 lorem
+349 lorem ipsum (5 lorem)
lorem ipsum
★★★★☆ 4.45 (3,567 lorem)
160 x 120
lorem ipsum dolor iPhone16 lorem lorem ipsum lorem lorem ipsum
1,580 lorem
+79 lorem ipsum (5 lorem)
★★★★☆ 4.22 (2,198 lorem)
160 x 120
lorem ipsum lorem 3kg lorem ipsum dolor WPC lorem ipsum
4,480 lorem
+224 lorem ipsum (5 lorem)
lorem ipsum
★★★★★ 4.61 (6,890 lorem)
05 / Ranking — lorem ipsum dolor

lorem ipsum dolor sit

  1. 【lorem 1 lorem】 lorem ipsum dolor sit lorem lorem ipsum
    3,280 lorem
  2. lorem ipsum dolor lorem ipsum 1kg lorem
    4,980 lorem
  3. lorem ipsum dolor lorem ipsum dolor&lorem
    1,000 lorem
  4. lorem ipsum lorem ipsum 7 lorem lorem ipsum
    6,980 lorem
  5. lorem ipsum lorem 3kg lorem ipsum dolor
    4,480 lorem
06 / Genre — lorem ipsum dolor

lorem ipsum dolor

lorem ipsum dolor sit amet lorem ipsum dolor sit lorem lorem ipsum lorem / PC lorem / lorem ipsum lorem ipsum / lorem lorem ipsum dolor lorem / lorem lorem / lorem lorem ipsum lorem ipsum / lorem lorem ipsum lorem / CD / DVD lorem / lorem lorem / lorem ipsum
07 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
Primary CTA
lorem ipsum dolor
Outline
lorem ipsum dolor
Point
lorem ipsum
Success Badge
08 / Forms

lorem ipsum dolor

lorem ipsum — border: #cccccc, radius: 4px, height: 32px
lorem ipsum — border: #bf0000
lorem — border: #bf0000
09 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor(lorem)
Level 1
lorem ipsum dolor
Level 2
lorem ipsum
Hover Border
#bf0000(lorem ipsum dolor)
10 / Spacing

lorem ipsum dolor sit

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