3,980 lorem ipsum dolor sit amet ※lorem / lorem ipsum dolor

Yamazaki Home, Simplified

lorem ipsum“lorem ipsum dolor”lorem, lorem ipsum.

2 / 5

01 — COLORS

lorem ＋ lorem 3 lorem

Neutral(UI lorem)

Text Primary
#4e4e56
lorem ipsum dolor. lorem ipsum dolor sit
Text Strong
#3d3d43
lorem ipsum dolor / lorem ipsum dolor
Text Strongest
#35353a
lorem
Muted
#626267
lorem ipsum dolor sit amet
Subtle
#7e7e88
lorem ipsum dolor / COMING SOON
Caption
#9e9eaa
lorem / lorem(Heebo 12px w300)
Border
#d9d9d9
lorem ipsum
Surface
#f4f4f6
lorem ipsum / lorem
Surface Alt
#f7f7f9
lorem ipsum dolor
Surface Dark
#26373e
lorem ipsum / About. lorem“lorem”lorem ipsum
Fill Black
#000000
lorem ipsum dolor / lorem ipsum dolor

Badge(lorem ipsum dolor)

NEW
#aa2b2b
lorem ipsum dolor. lorem ipsum dolor
BEST SELLER
#c3a856
lorem ipsum. lorem ipsum dolor
COMING SOON
#7e7e88
lorem ipsum

Accent(lorem ipsum dolor)

Brown
#734e30
lorem ipsum dolor
Beige
#e7d0a9
lorem ipsum dolor sit
Lavender Gray
#dcdce3
lorem ipsum dolor sit

02 — TYPOGRAPHY

lorem ipsum dolor IBM Plex Sans JP 1 lorem

lorem, lorem ipsum dolor
Display / IBM Plex Sans JP 40px w400 / lh 1.3 (52px) / ls normal / #4e4e56
TOP RANKING
Section (lorem) / Roboto 27px w500 / lh 1.2 (32.4px) / ls normal
PICK UP — lorem ipsum dolor
Heading 2 / IBM Plex Sans JP 24px w400 / lh 1.3 (31.2px) / font-feature-settings: normal(palt lorem ipsum dolor) / #3d3d43
tower lorem ipsum dolor sit amet consectetur
Product Name / IBM Plex Sans JP 18px w400 / lh 1.3 (23.4px) / ls 0.06em (1.08px) / #35353a
lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet. lorem ipsum dolor sit 2 lorem ipsum.
Body / IBM Plex Sans JP 16px w400 / lh 1.7 (27.2px) / ls normal / #4e4e56
lorem ipsum dolor sit
Sub Heading / 15px w400 / lh 1.5 (22.5px) / ls 0.02em (0.3px)
lorem ipsum dolor ／ lorem / lorem ipsum ／ lorem ipsum
List Item / 14px w400 / lh 1.5 (21px) / ls 0.02em (0.28px)
※ lorem ipsum dolor sit amet consectetur adipiscing elit sed
Caption / 13px w400 / lh 1.3 (16.9px) / ls 0.02em (0.26px)
lorem: 1842 / 1843
Caption (lorem) /Heebo 12px w300 / lh 1.2 (14.4px) / #9e9eaa — lorem ipsum dolor Light
NEW BEST SELLER COMING SOON
Badge / Yantramanav 10–11px w400 / ls 0.02em / border-radius: 0px / padding: 1px 5px 0
lorem ipsum dolor sit. lorem ipsum dolor sit ametfont-weight: 700 lorem 1 lorem ipsum. lorem ipsum dolor 400 lorem, 500 lorem ipsum dolor sit(Roboto / Yantramanav)lorem, 300 lorem Heebo lorem ipsum dolor sit. lorem ipsum dolor sit amet.

03 — PRODUCT

lorem ipsum dolor(lorem ipsum / lorem)

product image
NEW
TOWER
lorem ipsum dolor sit amet consectetur
lorem: 1842
￥1,980
product image
BEST SELLER
TOSCA
lorem ipsum dolor sit amet consectetur
lorem: 2439
￥3,300
product image
COMING SOON
PLATE
lorem ipsum dolor sit
lorem: 3021
￥2,200
product image
TOWER
lorem ipsum
lorem: 1990
￥4,400

Skeleton(lorem ipsum dolor sit)

04 — BUTTONS

lorem 0px. 3px lorem ipsum dolor sit

Primary
#000000 / radius 0
Cart
#3d3d43 / radius 2px
VIEW MORE
Outlined(lorem)
radius 3px / Yantramanav
lorem ipsum dolor
Outlined(lorem)
radius 3px
Secondary
#d0d0d0 lorem / radius 3px

Variant Selector(lorem ipsum)

lorem ipsum #000000 lorem.border-radius: 0px(CSS lorem--variant-pills-radius: 40px lorem ipsum dolor)
VIEW ALL
lorem ipsum dolor sit amet consectetur
Yamazaki lorem ipsum dolor sit amet
#26373e lorem
CSS lorem ipsum dolor sit amet. --badge-corner-radius: 4.0rem（= 40px） lorem--variant-pills-radius: 40px lorem ipsum dolor sit,lorem ipsum dolorborder-radius: 0px. lorem ipsum dolor pill lorem ipsum dolor sit amet consectetur. lorem--font-body-family / --font-heading-family / --ss-color-text-primary: #4E4E56 lorem ipsum dolor.

05 — FORMS

lorem ipsum dolor(3 lorem)

lorem ipsum dolor sit amet consectetur
2 lorem ipsum: lorem ipsum ＋ rgba(78,78,86,.3) lorem
lorem ipsum dolor sit amet consectetur adipiscing

06 — ELEVATION

lorem ipsum dolor sit amet

Level 0 — lorem
box-shadow: none;
lorem / lorem / lorem ipsum
Level 1 — lorem ipsum
box-shadow: 0 0 25px rgba(0,0,0,0.2);
lorem ipsum dolor sit amet consectetur
Focus ring
0 0 0 .3rem #fff, 0 0 .5rem .4rem rgba(78,78,86,.3)
1rem = 10px lorem ipsum 3px

lorem ipsum dolor sit

#ffffff — lorem
#f7f7f9 — lorem ipsum
#f4f4f6 — lorem ipsum
#26373e — lorem ipsum

07 — LAYOUT

1rem = 10px(Shopify Dawn lorem 62.5% lorem)

loremloremlorem
Root font-size10pxrem lorem 16px lorem ipsum dolor 1.6 lorem ipsum
Body font-size16px (1.6rem)375px–1920px lorem. lorem ipsum dolor sit amet
Container1440pxlorem ipsum dolor sit 1890px
Card width250pxlorem ipsum 450px
Gutter6.5pxlorem. lorem ipsum dolor sit amet consectetur
Breakpoints750px / 990pxlorem. lorem 480px / 768px / 1024px
Border radius0pxlorem ipsum dolor sit amet 3px, lorem ipsum dolor 11px
font-feature-settings"palt"body lorem ipsum dolor sit. lorem PICK UP lorem ipsum