Design System Preview
tabelog.com

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem, lorem ipsum, lorem ipsum dolor, lorem ipsum dolor UI lorem ipsum dolor. computed style lorem ipsum dolor.

lorem ipsum dolor DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
lorem ipsum dolor
#f09000
lorem ipsum / lorem
Primary Dark
#d07e00
lorem / lorem
Text
Heading
#333333
lorem / lorem
Text Primary
#595960
lorem ipsum dolor
Text Secondary
#999999
lorem / lorem ipsum
Text Disabled
#cccccc
lorem ipsum
Semantic
Success
#339933
lorem / lorem
Danger
#cc3333
lorem / lorem
Warning
#f09000
lorem / lorem
Score
Score High
#f09000
lorem (3.5+)
Score Mid
#996600
lorem
Score Low
#666666
lorem / lorem
Surface & Border
Background
#ffffff
lorem ipsum
Background Secondary
#f5f5f5
lorem ipsum dolor
Border
#dddddd
lorem ipsum
Border Strong
#cccccc
lorem ipsum
02 / Typography -- computed style lorem

lorem ipsum dolor sit

lorem ipsum dolor -- Section Heading (h2)
22.5px / 600 / line-height: 22.5px (x1.0) / palt: loremlorem ipsum dolor
lorem ipsum -- Sub Heading (h2)
14px / 600 / line-height: 19.6px (x1.4) / palt: loremlorem ipsum
lorem ipsum dolor / lorem ipsum dolor lorem ipsum -- Page Title (h1)
12px / 700 / line-height: 12px (x1.0) / palt: loremlorem ipsum
lorem ipsum dolor -- body lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur, 12px / line-height 1.4 lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit sed.
12px / 400 / line-height: 16.8px (x1.4) / letter-spacing: normal / palt: loremlorem
3.72
16px / 700 / line-height: 1.2 / color: #f09000lorem ipsum
lorem ipsum dolor -- Caption (10px)
10px / 400 / line-height: 14px (x1.4) / color: #999lorem
03 / Rating -- lorem ipsum dolor UI

lorem ipsum / lorem ipsum dolor

lorem ipsum dolor
3.72
★ ★ ★ ★ ★
( 128 lorem )
5
19
4
51
3
38
2
15
1
5
lorem ipsum dolor
4.21lorem
3.15lorem
--lorem
lorem ipsum dolor
U
lorem ipsum
2026/03 lorem
★ 4.2
lorem ipsum dolor sit amet. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor, lorem ipsum dolor sit amet consectetur.
lorem / lorem 4.5
lorem ipsum 4.0
lorem 3.8
CP 4.5
lorem / lorem ipsum 4.0
04 / Buttons

lorem ipsum dolor sit

lorem ipsum
Primary CTA
lorem ipsum
Outline
lorem ipsum
Danger
Score Badge
lorem ipsum
Success CTA
05 / Cards -- lorem ipsum

lorem ipsum dolor

lorem lorem ipsum

3.97

lorem ipsum dolor sit amet. lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor, lorem ipsum 8 lorem ipsum dolor sit.

lorem lorem lorem ipsum
lorem lorem / lorem: ¥30,000– / 128 lorem ipsum

lorem ipsum dolor / lorem / lorem ipsum / lorem ipsum

3.58

lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit.

lorem ipsum lorem lorem ipsum
lorem lorem / lorem: ¥6,000– / 85 lorem ipsum

lorem lorem

3.81

lorem ipsum dolor. lorem ipsum W lorem ipsum dolor sit amet, lorem ipsum dolor sit amet. lorem ipsum dolor sit amet consectetur.

lorem ipsum lorem lorem
lorem lorem / lorem: ¥1,000– / 312 lorem ipsum
06 / Forms

lorem ipsum dolor

lorem ipsum -- border: #cccccc, radius: 3px, height: 30px
lorem ipsum -- border: #f09000
lorem -- border: #cc3333
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor(lorem)
Level 1
0 1px 3px rgba(0,0,0,0.12) / lorem ipsum dolor
Level 2
0 2px 6px rgba(0,0,0,0.15) / lorem ipsum
Focus Ring
#f09000 (lorem ipsum dolor)
08 / Spacing

lorem ipsum dolor sit

4px
8px
12px
16px
24px
32px
09 / Layout

lorem ipsum dolor

Container 980px
Main Column 680px
Side Column 280px