Design System Preview
Zoff — 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.

lorem ipsum DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
Zoff Blue
#4998db
lorem ipsum dolor / CTA
Link Blue
#2199e1
lorem ipsum dolor
Sale Red
#e60012
lorem / LP lorem
Text
Text Primary
#000000
lorem ipsum dolor
Text Secondary
#3d3d3d
lorem ipsum dolor
Surface & Border
Background
#ffffff
lorem ipsum
Surface Light
#f7f7f7
lorem ipsum dolor
Surface Alt
#f6f6f6
lorem ipsum dolor
Surface Warm
#f7f8f8
lorem ipsum dolor
Border
#dddddd
lorem ipsum / lorem
02 / Typography — lorem

lorem ipsum dolor sit

lorem ipsum dolor sit — H1 (40px)
40px / 400 / line-height: 1.0 / letter-spacing: normallorem ipsum
PICK UP — Heading 2 (28px)
28px / 400 / line-height: 1.0 / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor sit — H3 (20px)
20px / 500 / line-height: 1.4 / letter-spacing: normallorem ipsum
EYEGLASSES / SUNGLASSES — Open Sans Nav (16px)
Open Sans / 16px / 600 / line-height: 1.375 / letter-spacing: 1pxlorem ipsum dolor
lorem ipsum dolor sit — Noto Sans JP (15px)
Noto Sans JP / 15px / 400 / line-height: 1.47 / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor — letter-spacing lorem normal lorem, line-height 1.6 lorem ipsum dolor sit amet consectetur adipiscing. palt lorem kern lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing.
16px / 400 / line-height: 1.6 / letter-spacing: normal / palt: loremlorem
lorem ipsum dolor — lorem ipsum dolor sit amet consectetur (15px)
15px / 400 / line-height: 1.6lorem ipsum
¥5,500 (lorem)
17px / 700 / line-height: 1.29 / letter-spacing: 0.5pxlorem ipsum
ZJ232001-14E1 — lorem / Caption (12px)
12px / 400 / line-height: 1.6 / color: #3d3d3dlorem / lorem ipsum dolor
03 / Article — lorem ipsum dolor sit amet

lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit amet consectetur

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

lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing.lorem ipsum dolor sitlorem, lorem ipsum dolor sit amet consectetur adipiscing. ABC abc 123

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

04 / Buttons

lorem ipsum dolor sit

lorem ipsum
Primary CTA (pill)
lorem ipsum
Secondary (outlined pill)
lorem ipsum
Sale Banner
3
Badge Counter
lorem ipsum
Primary (disabled)
lorem ipsum
Secondary (disabled)
05 / Cards — lorem ipsum

lorem ipsum dolor sit amet

○
Zoff SMART Skinny
¥5,500 (lorem)
ZJ232001-14E1
○
Zoff CLASSIC lorem ipsum dolor
¥8,800 (lorem)
ZA231002-43A1
○
Zoff UV lorem ipsum dolor
¥5,500 (lorem)
ZC231016-57F1
○
Zoff NIGHT & DAY
¥11,100 (lorem)
ZN231G02-14E1
lorem ipsum
06 / Forms

lorem ipsum dolor

Pill Input -- border-radius: 40px
lorem ipsum -- border: #dddddd, border-radius: 0
lorem ipsum -- border: #4998db (Zoff Blue)
lorem ipsum dolor sit amet consectetur adipiscing
lorem -- border: #e60012 (Sale Red)
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem(lorem)
Elevation 1
lorem ipsum dolor sit
Elevation 2
lorem ipsum dolor
Elevation 3
lorem ipsum / lorem ipsum
Focus Ring
#4998db (Zoff Blue)
08 / Layout

lorem ipsum dolor & lorem ipsum

Spacing Scale
4px
8px
16px
24px
48px
80px
Border Radius Scale
0 (card)
4px (sale)
10px (badge)
40px (pill)
Content Width
Max Container 1200px
Content Area 960px
Article 620px