Design System Preview
mercari.com/jp — lorem ipsum

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem, lorem ipsum, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. computed style lorem ipsum dolor. body 15px / line-height 1.4 / Panda CSS.

lorem ipsum DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
Mercari Red
#ff333f
lorem ipsum dolor / CTA
Text
Text Primary
#333333
lorem ipsum dolor
Text Secondary
#666666
lorem / lorem ipsum dolor
Placeholder
#999999
lorem ipsum dolor sit
Link
Link
#0073cc
lorem ipsum dolor
Surface & Border
Background
#ffffff
lorem ipsum
Background Secondary
#f5f5f5
lorem ipsum dolor
Border
#e0e0e0
lorem ipsum dolor
02 / Typography — lorem

lorem ipsum dolor sit

lorem ipsum dolor — Heading 2
20px / 700 / line-height: 1.4 (28px) / color: #666666 / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor — Heading 3
17px / 700 / line-height: 1.4 (23.8px) / color: #333333 / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor — Heading 3 variant
20px / 700 / line-height: 1.4 (28px) / color: #666666 / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor — lorem ipsum dolor sit amet consectetur adipiscing. lorem line-height 1.4 lorem ipsum dolor. letter-spacing lorem palt lorem ipsum dolor sit. body font-size lorem 15px lorem, lorem ipsum 16px lorem ipsum dolor.
15px / 400 / line-height: 1.4 (21px) / color: #333333 / letter-spacing: normallorem
lorem ipsum dolor — Footer Bold
15px / 700 / line-height: 1.4 (21px) / color: #333333lorem ipsum
lorem ipsum dolor — Link Style
15px / 400 / color: #0073cc / text-decoration: nonelorem
lorem ipsum dolor — Input
16px / 400 / line-height: 1.4 (22.4px) / color: #333 / border-radius: 0lorem ipsum
03 / Tabs — lorem ipsum / lorem ipsum dolor

lorem UI

Active: 14px / 700 / color: #ff333f / border-bottom: 2px solid #ff333f
Inactive: 14px / 700 / color: #666666 / border-bottom: transparent
lorem ipsum dolor sit
04 / Article — lorem ipsum dolor

lorem ipsum dolor sit

lorem ipsum dolor sit

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

lorem ipsum dolor

lorem ipsum dolor 10 lorem ipsum dolor sit. lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur,lorem ipsum dolor sit amet consectetur adipiscinglorem ipsum dolor, lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor sit

lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor 10%lorem.

05 / Buttons

lorem ipsum dolor sit

lorem ipsum
CTA (Primary)
lorem ipsum dolor
CTA (Small)
lorem ipsum
Secondary
lorem ipsum
Secondary (Bold)
CTA: bg #ff333f / color #fff / 14px / 700 / radius 4px
Secondary: bg #fff / color #333 / 14px / 400 / radius 4px / border: 1px solid #e0e0e0
06 / Cards — lorem ipsum

lorem ipsum dolor sit

lorem ipsum
¥1,500
lorem ipsum T lorem lorem M
lorem ipsum
¥3,200
lorem ipsum dolor sit lorem
lorem ipsum
¥800
lorem ipsum 3 lorem ipsum dolor
lorem ipsum
¥12,000
lorem ipsum 27cm lorem
07 / Forms

lorem ipsum dolor

lorem ipsum — border: #e0e0e0, radius: 0px, font-size: 16px
lorem ipsum — border: #0073cc
lorem — border: #ff333f
08 / Layout — CSS Custom Properties lorem

lorem ipsum dolor & lorem ipsum

16px
inset
24px
gutter
36px
page-h
40px
page-top
64px
page-btm
z-index lorem
TokenValuelorem
--mer-z-index-menu1100lorem ipsum
--mer-z-index-navigation1200lorem ipsum dolor
--mer-z-index-modal1400lorem ipsum
--mer-z-index-snackbar1500lorem ipsum dolor
--mer-z-index-tooltip1600lorem ipsum dolor