Design System Preview
SUQQU

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. 3 lorem ipsum(lorem + lorem ipsum + lorem ipsum)lorem ipsum dolor CTA lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. computed style lorem ipsum dolor.

lorem ipsum dolor DESIGN.md lorem
01 / Colors

Color Palette

Brand
Brand Black
#000000
lorem ipsum / CTA lorem
Orange Accent
#ec7205
lorem ipsum dolor / lorem ipsum dolor
Text
Text Primary
#19212b
lorem ipsum dolor(lorem ipsum)
Text Heading
#333333
lorem ipsum dolor
Text on Black
#ffffff
lorem ipsum / CTA lorem ipsum
Text Muted
#696969
lorem ipsum dolor / lorem ipsum
Surface & Border
Background
#ffffff
lorem ipsum
Surface Black
#000000
lorem ipsum / lorem ipsum
Border Default
#cccccc
lorem ipsum
Border Button
#696969
lorem ipsum dolor sit
02 / Typography

3-Font Typography System

TOPICS
34px / 400 / line-height: 1.4 / letter-spacing: normal IwaNMNewsPro-Th lorem ipsum dolor
STAFF REVIEW
18px / 400 / line-height: 1.0 / letter-spacing: normal IwaNMNewsPro-Th lorem ipsum dolor sit
lorem ipsum dolor
18px / 400 / line-height: 1.4 / letter-spacing: normal Noto Sans JP lorem ipsum dolor
lorem ipsum dolor lorem lorem
13px / 400 / line-height: 1.7 / letter-spacing: normal FOT-lorem Pro B lorem
lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur.
14px / 400 / line-height: 1.8 / letter-spacing: normal FOT-lorem Pro M lorem ipsum dolor
lorem ipsum dolor — base text (16px Noto Sans JP)
16px / 400 / line-height: 1.5 / letter-spacing: normal Noto Sans JP lorem
lorem ipsum dolor
13px / 400 / line-height: 1.7 / color: #ffffff on #000000 FOT-lorem Pro B lorem ipsum dolor
lorem ipsum dolor
16px / 400 / line-height: 1.5 / CTA lorem ipsum dolor FOT-lorem Pro M CTA
03 / Product

lorem ipsum dolor sit amet

SIGNATURE COLOR EYES
lorem ipsum dolor lorem lorem

lorem ipsum dolor sit amet consectetur 4 lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor 6 lorem ipsum, SUQQU lorem ipsum“lorem ipsum dolor”lorem.

lorem

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 adipiscing.

lorem ipsum

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

lorem ipsum dolor
04 / Buttons

Button Variations

SUQQU lorem CTA lorem border-radius: 0px lorem ipsum. lorem ipsum dolor sit amet consectetur adipiscing elit.

lorem ipsum dolor
Primary CTA (0px radius)
lorem ipsum
Secondary (0px radius)
lorem ipsum dolor sit
Wide CTA
lorem ipsum dolor sit amet
Review CTA
OK
Cookie OK (2px radius)
lorem
Cookie Settings (2px radius)
Carousel Dots
05 / Cards

Product Cards

375 x 200

lorem ipsum dolor lorem lorem

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

¥7,700 (lorem)
375 x 200

lorem lorem ipsum lorem ipsum dolor

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

¥11,000 (lorem)
375 x 200

lorem ipsum dolor lorem lorem ipsum dolor

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

¥5,500 (lorem)
06 / Forms

Form Elements

lorem ipsum / border: #cccccc / radius: 0px
lorem ipsum / border: #000000
lorem ipsum dolor sit amet consectetur adipiscing
lorem / border: #cc0000
07 / Elevation

Depth & Elevation

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

Level 0: Flat
lorem(lorem)
Elevation 1
0 1px 3px rgba(0,0,0,0.08)
Elevation 2
0 4px 12px rgba(0,0,0,0.12)
Surface Black
lorem ipsum / lorem ipsum / CTA
08 / Layout

Spacing & Widths

Spacing Scale
4px
8px
16px
24px
40px
80px
Content Widths
Max Container 1200px
Content Area 960px
Article / Product 640px
Form 400px