Design System Preview
muji.com — lorem ipsum

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

lorem ipsum DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
MUJI Red
#7f0019
lorem ipsum dolor(lorem)
Kinari(lorem ipsum)
#f4eede
MUJI lorem / lorem
Beige
#e0ceaa
lorem ipsum dolor sit amet
Red
#dd0c14
lorem / lorem
Text
Text Primary
#3c3c43
lorem ipsum dolor(lorem ipsum)
Text Secondary
#6d6d72
lorem ipsum dolor
Text Tertiary
#76767b
lorem ipsum dolor
Text Disabled
#9d9da0
lorem ipsum
Surface & Border
White
#ffffff
lorem ipsum
Gray 100
#f5f5f5
lorem ipsum dolor
Gray 200
#ebebec
lorem ipsum dolor
Gray 300
#d8d8d9
lorem ipsum dolor
Black
#000000
lorem ipsum
Gray Scale
Gray 800
#3c3c43
Gray 700
#6d6d72
Gray 600
#76767b
Gray 500
#9d9da0
Gray 400
#c4c4c6
Gray 300
#d8d8d9
Gray 200
#ebebec
Gray 100
#f5f5f5
02 / Typography -- lorem

lorem ipsum dolor sit

lorem ipsum -- Heading 1 (h1)
26px / 700 / line-height: 1.6 (41.6px) / letter-spacing: normal / palt: loremlorem ipsum dolor
lorem -- Heading 2 (h2)
32px / 700 / line-height: 1.6 (51.2px) / letter-spacing: normal / palt: loremlorem ipsum dolor
lorem ipsum dolor -- Heading 3 (h3)
26px / 700 / line-height: 1.15 (29.9px) / letter-spacing: 2.4px / palt: loremlorem ipsum dolor
lorem ipsum dolor -- Nav Link
16px / 700 / line-height: 1.4 (22.4px) / letter-spacing: normallorem
lorem ipsum dolor -- Body (16px). lorem ipsum dolor sit amet. line-height: 1.6 lorem ipsum dolor sit amet, lorem ipsum dolor sit.
16px / 400 / line-height: 1.6 (25.6px) / letter-spacing: normal / palt: lorembody
lorem ipsum dolor -- Paragraph (12px). lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet.
12px / 400 / line-height: 1.6 (19.2px) / letter-spacing: normal / palt: loremlorem ipsum
lorem ipsum dolor sit -- Caption (14px)
14px / 400 / line-height: 1.6 (22.4px) / color: Text Secondarylorem ipsum
lorem ipsum dolor -- CTA Button
12px / 700 / color: #fff / bg: #3c3c43 / radius: 4pxCTA lorem
03 / Article -- lorem ipsum dolor

lorem ipsum dolor sit amet

lorem ipsum dolor, lorem ipsum

lorem ipsum, lorem ipsum, lorem ipsum dolor, lorem ipsum dolor sit, lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing. lorem“lorem ipsum”lorem ipsum“lorem ipsum”lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor sit amet

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

lorem ipsum dolor sit

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

04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
Primary CTA
bg: #3c3c43, r: 4px
lorem ipsum
Outline
border: #d8d8d9, r: 4px
lorem ipsum
MUJI Red
bg: #7f0019, r: 4px
lorem ipsum
Danger
bg: #dd0c14, r: 4px
05 / Cards

lorem ipsum

lorem ipsum dolor sit amet consectetur adipiscing

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

2,990 lorem

lorem ipsum dolor sit / lorem

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

1,990 lorem

lorem lorem ipsum dolor

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

150 lorem
06 / Forms

lorem ipsum dolor

lorem ipsum -- border: #d8d8d9, radius: 0px(lorem ipsum)
lorem ipsum -- border: #3c3c43
lorem -- border: #dd0c14
07 / Spacing -- 12 lorem ipsum dolor sit amet

lorem ipsum dolor sit

4px
xxxxs
8px
xxxs
12px
xxs
16px
xs
20px
s
24px
sm
32px
m
40px
ml
48px
l
56px
xl
64px
xxl
80px
xxxl
96px
xxxxl
08 / Elevation

Depth & Elevation

Level 0: Flat
lorem. MUJI lorem
Level 1: Hover
0 1px 2px rgba(0,0,0,0.08)
Level 2: Dropdown
0 2px 8px rgba(0,0,0,0.1)

MUJI lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur.