Design System Preview
IPSA — lorem

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor ProN Web Font(MFW-HiraKakuProN)lorem 4 lorem ipsum dolor, lorem ipsum dolor sit amet, kern lorem ipsum dolor sit amet consectetur. computed style lorem ipsum dolor.

lorem lorem ME lorem lorem lorem ipsum
01 / Colors

lorem ipsum dolor

Brand — Warm Palette
Cream
#fffef8
lorem ipsum dolor sit
Warm Yellow
#fffae7
lorem ipsum dolor
Warm Off-White
#fffcf4
lorem ipsum dolor
Text
Text Primary
#181818
lorem(lorem / lorem ipsum)
Text Secondary
#323232
lorem ipsum dolor / lorem ipsum
Text Muted
#969696
lorem ipsum dolor sit
Surface
Background
#ffffff
lorem ipsum dolor
Light Gray
#f9f9f9
lorem ipsum
Footer Dark
#323232
lorem ipsum dolor
Dark Hero
#090f27
lorem ipsum dolor sit
Border
Border Primary
#c9c9c9
lorem ipsum dolor
Border Secondary
#d6d6d6
lorem ipsum dolor
Separator
#dcdcdc
lorem ipsum
Overlay
Dark Overlay
rgba(50,50,50,0.5)
lorem ipsum dolor sit
Search Overlay
rgba(239,237,234,0.5)
lorem ipsum dolor(lorem ipsum)
02 / Typography — lorem(Noto Sans JP lorem ipsum)

lorem ipsum dolor sit

lorem ipsum dolor, lorem
49px / W4 (400) / line-height: 1.5 / letter-spacing: normal / kern: loremlorem ipsum
lorem ipsum dolor — H1
28px / 700 / line-height: 1.2 / system-ui stackh1
lorem ipsum dolor sit — Section Title
20px / W5 (500) / line-height: 1.5 / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor — lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet. letter-spacing lorem normal. kern lorem ipsum, palt lorem ipsum dolor.
16px / W3 (300) / line-height: 1.5 / letter-spacing: normal / kern: lorem / palt: loremlorem
lorem ipsum dolor — lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. line-height: 1.87 lorem IPSA lorem ipsum dolor sit amet consectetur.
15px / W3 (300) / line-height: 1.87 / letter-spacing: normallorem ipsum
lorem ipsum dolor — Footer Title
14px / W6 (700) / line-height: 1.5 / letter-spacing: 0.036emlorem ipsum
lorem ipsum — Nav Link (12px)
12px / W5 (500) / line-height: 1.5lorem ipsum dolor
lorem ipsum dolor — News Topic (11px)
11px / W5 (500) / line-height: 1.55lorem ipsum dolor
lorem ipsum dolor — Caption (10px)
10px / W5 (500) / line-height: 1.5lorem ipsum dolor
lorem ipsum dolor — Small Link (-0.05em)
10px / W5 (500) / line-height: 1.2 / letter-spacing: -0.05em — lorem ipsum dolor sitlorem ipsum
03 / Article — 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 adipiscing elit, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor sit

lorem ipsum dolor sit amet, lorem / lorem / lorem / lorem ipsum dolor sit amet consectetur adipiscing. 17 lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit 1 lorem ipsum dolor. ABCabc 123

※ lorem ipsum dolor sit amet consectetur adipiscing
04 / Buttons

lorem / lorem ipsum dolor sit

lorem ipsum dolor
Dark (radius: 2px)
lorem ipsum
Outline (radius: 2px)
lorem ipsum
Square (radius: 0)
lorem ipsum dolor
Chakra (radius: 4px)
Tags
lorem
Tag Dark
ME
Tag Dark
lorem
Tag Dark
lorem
Tag Outline
lorem
Tag Outline
05 / Cards — lorem ipsum

lorem ipsum dolor sit

ME lorem ipsum 1

ME lorem ipsum 1

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

¥6,050(lorem)
loremME
lorem / lorem R lorem

lorem / lorem R lorem

lorem ipsum dolor“lorem ipsum dolor sit III”lorem. lorem ipsum dolor sit amet consectetur.

¥4,400(lorem)
loremlorem ipsum dolor
lorem ipsum dolor sit

lorem ipsum dolor sit lorem ipsum dolor

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

¥4,950(lorem)
loremlorem ipsum dolor
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #c9c9c9, radius: 4px
lorem ipsum — border: #323232
lorem ipsum dolor sit amet consectetur
lorem — border: #b22323
lorem ipsum — border: #d6d6d6, radius: 4px
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor(lorem)
Elevation 1
0 1px 3px rgba(0,0,0,0.08)
Elevation 2
0 4px 12px rgba(0,0,0,0.1)
Dark Overlay
rgba(50,50,50,0.5)
Search Overlay
rgba(239,237,234,0.5) — lorem ipsum
08 / Layout

lorem ipsum dolor & lorem ipsum dolor

Spacing Scale(Chakra UI lorem)
4px
8px
16px
24px
40px
64px
Content Widths
Main Content 1200px
Article Content 940px
Narrow Content 620px