SIRI SIRI

lorem ipsum dolor,
lorem ipsum dolor.

lorem ipsum dolor, lorem ipsum, lorem ipsum.
lorem ipsum dolor, lorem ipsum dolor.

Scroll Down

01 — COLORS

lorem ipsum dolor

lorem #ffffff lorem #000000 lorem. lorem ipsum dolor sit amet consectetur #b2c2c9("lorem Pre-order" lorem)lorem. lorem #777777 lorem ipsum.

Slate Blue
#b2c2c9
lorem ipsum dolor sit. lorem ipsum
Black
#000000
lorem / lorem / lorem(lorem ipsum)
Text Grey
#777777
lorem ipsum / lorem ipsum dolor
White
#ffffff
lorem ipsum
Surface Light
#f7f7f7
lorem ipsum / lorem ipsum dolor
Surface Grey
#e3e3e3
lorem ipsum / lorem ipsum
System Blue
#377dff
lorem ipsum dolor(lorem ipsum)
02 — TYPOGRAPHY

lorem ipsum dolor

lorem ABC Diatype ＋ lorem ipsum dolor／lorem ipsum dolor weight 300 lorem. lorem ipsum dolor sit amet consectetur. lorem ipsum dolor, lorem ipsum dolor. (lorem Inter / Noto Sans JP / Noto Serif JP lorem ipsum dolor)

SIRI SIRI
h1 logo · ABC Diatype · 28px · weight 700(lorem ipsum)
lorem — lorem ipsum dolor, lorem
h2 · ABC Diatype · 22px · weight 300 · lh 1.44 · ls -0.2〜0.4px
KIRIKO — lorem ipsum dolor, lorem ipsum dolor. lorem ipsum dolor, lorem ipsum dolor sit amet.
lead(lorem) · Hiragino Mincho ProN · 20px · weight 300 · ls 0.5px
Scroll Down
lead(lorem) · ABC Diatype · 16px · weight 400
lorem / lorem — SIRI SIRI lorem, lorem ipsum dolor sit amet consectetur adipiscing elit sed. lorem ipsum dolor sit amet consectetur.
body/nav · ABC Diatype · 14px · weight 300 · lh normal〜1.4
lorem ipsum dolor — lorem ipsum dolor sit amet
a · ABC Diatype · 12px · weight 300 · color #777777 / lh 2.5
03 — ARTICLE

lorem ipsum dolor

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

KIRIKO lorem ipsum dolor

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

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

04 — BUTTONS

lorem

lorem ipsum dolor sit amet consectetur. lorem ipsum dolor #b2c2c9 lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor 0px.

View More Detail Shop Event lorem ipsum Pre-order lorem ipsum dolor
05 — CARDS

lorem ipsum

KIRIKO
KIRIKO lorem
lorem ipsum dolor / lorem
RATTAN
lorem ipsum dolor
lorem / lorem ipsum
lorem ipsum Pre-order
URUSHI
lorem ipsum dolor
lorem / lorem
06 — FORMS

lorem ipsum

lorem ipsum / lorem ipsum / lorem ipsum 3 lorem. lorem(radius 0px), lorem ipsum, lorem ipsum dolor sit.

lorem ipsum dolor sit amet consectetur.
lorem ipsum
07 — ELEVATION

lorem

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

Level 0 — none
Level 1 — dropdown
Level 2 — modal
08 — LAYOUT

lorem ipsum dolor

8 / 16 / 24 / 40 / 64 / 120px. lorem ipsum dolor, lorem ipsum dolor sit amet consectetur“lorem”lorem.

XS 8
S 16
M 24
L 40
XL 64
XXL 120