【lorem】HITOYOSHI lorem ipsum dolor　lorem ipsum dolor
SEARCH|MAIL MAGAZINE

lorem ipsum dolor

lorem ipsum dolor sit amet, lorem ipsum dolor.

MORE

01 — COLORS

lorem #222222 lorem 1 lorem. lorem ipsum dolor

Neutral(UI lorem)

Text / Fill
#222222
lorem ipsum dolor sit amet consectetur. lorem ipsum dolor
Nav
#333333
lorem ipsum dolor / lorem ipsum dolor
Weak
#444444
lorem ipsum dolor
Border
#c9c9c9
lorem ipsum dolor sit
Border Pale
#cccccc
lorem ipsum dolor / lorem
Divider
#d2d3d5
lorem ipsum dolor sit amet
Surface
#ebecee
lorem ipsum dolor sit(lorem)
Surface Alt
#e8eaed
lorem ipsum
Dark
#394045
lorem ipsum dolor
Dark Strong
#212729
lorem ipsum dolor

Gender(lorem ipsum dolor — lorem)

MEN
#b9c9cb
lorem. lorem ipsum dolor sit amet consectetur
WOMEN
#bdbcc7
lorem. MEN lorem ipsum dolor

Ranking(lorem ipsum — lorem ipsum dolor)

1 lorem
#dfd260
lorem ipsum. lorem ipsum dolor
2 lorem
#c0c0c0
lorem
3 lorem
#ba9585
lorem ipsum dolor sit amet
4–5 lorem
#999999
lorem

Accent(lorem ipsum dolor)

Teal
#4fc3c6
lorem ipsum dolor sit
Terracotta
#c48865
lorem

02 — TYPOGRAPHY

Avenir lorem ipsum dolor sit. lorem 0.24px lorem px

lorem lorem ipsum dolor
Page Title / "Hiragino Kaku Gothic ProN" 32px w700 / ls normal
※ lorem ipsumlorem ipsum dolor sit amet consecteturlorem ipsum. lorem ipsum dolor sit amet consectetur
lorem ipsum, lorem.
Heading / Avenir + lorem 18px w700 / ls 0.24px (0.013em)
MEN / WOMEN / BABY
Nav(lorem)/ 16px w500 / ls 0.24px — lorem ipsum dolor
MEN
Toggle / 16px w400 / ls 1.6px（0.1em） — lorem ipsum dolor sit 2 lorem ipsum 1 lorem
lorem ipsum dolor 100%
Body(lorem)/ 14px w700 / lh 1.8 (25.2px) / ls 0.24px
lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit. lorem ipsum body lorem ipsum dolor.
Body / 14px w400 / lh 1.8 (25.2px) / ls 0.24px (0.017em) — lorem ipsum
SEARCH　MAIL MAGAZINE
Nav / 14px w500 / lh 1.0 / ls 0.24px
T lorem / lorem ipsum
Chip / 14.4px w400 / ls 0.24px
MORE — lorem ipsum dolor
lorem /"Noto Serif JP", lorem, YuMincho, "lorem ipsum dolor ProN" 14.4px w400 — lorem ipsum dolor
※ lorem ipsum dolor sit amet
Base / Caption / 12px w400 / ls 0.24px (0.02em) — body lorem ipsum
MEN WOMEN
Gender Badge / 11.52px w700 / ls 1.3824px（0.12em） / radius 0
letter-spacing lorem0.24px lorem px. em lorem ipsum dolor, 12px lorem 0.02em, 18px lorem 0.013em lorem ipsum dolor.lorem ipsum dolor sit amet consecteturlorem ipsum dolor. em lorem ipsum dolor.
lorem ipsum dolorlorem(0.1em)lorem ipsum dolor(0.12em)lorem 2 lorem ipsum。

03 — BUTTONS

lorem ipsum dolor 4 lorem ipsum

Primary(lorem)
#222222 / radius 0 / ls 1.6px
Toggle(lorem)
lorem / 1px #444444 / radius 0
lorem ipsum
lorem ipsum pill
radius 16px / shadow 0 1px 4px
T lorem / lorem ipsum
Chip
radius 900px / 1px #c9c9c9
MORE
lorem(lorem)
lorem / 1px #000 / radius 0

Border Radius Scale

0px
lorem
2px
lorem
16px
lorem ipsum pill
900px
lorem
50%
lorem

Ranking Ribbon

1
#dfd260
2
#c0c0c0
3
#ba9585
4
#999999

Slider

lorem
radius 50% / lorem 2 lorem
lorem
radius 2px(lorem ipsum dolor)

Language Bar

🌐　lorem
WOVN lorem ipsum dolor sit amet. lorem ipsum-apple-system, "system-ui", … lorem ipsum.lorem ipsum dolor sit amet consectetur
lorem ipsum dolor sitbackground-color lorem ipsum dolor. background-image: linear-gradient(135deg, #dfd260 50%, transparent 0) lorem ipsum dolor sit.background-color lorem ipsum dolor / lorem / lorem 4 lorem ipsum dolor. lorem ipsum border lorem ipsum dolor sit amet consectetur.

04 — PRODUCT

lorem ipsum dolor(gap: 36px 2%)

product image1
MEN
lorem ipsum dolor lorem ipsum dolor T
lorem / HITOYOSHI
￥8,800
product image2
WOMEN
lorem ipsum dolor lorem ipsum dolor sit
lorem / lorem ipsum
￥16,500
product image3
MEN
lorem ipsum dolor sit lorem ipsum
lorem / lorem
￥19,800
product image4
WOMEN
lorem ipsum dolor sit lorem
lorem / lorem
￥14,300
lorem ipsum

05 — FORMS

lorem ipsum dolor(3 lorem)

lorem ipsum dolor sit amet consectetur
lorem #222222 lorem ipsum
lorem ipsum dolor sit amet consectetur adipiscing

06 — ELEVATION

lorem“lorem”lorem ipsum dolor sit amet

Level 0 — lorem
box-shadow: none;
lorem / lorem / lorem / lorem
Level 1 — lorem ipsum pill
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
lorem ipsum / lorem ipsum
Level 2 — lorem ipsum dolor
0 1px 4px rgb(144,144,144), 0 2px 4px rgba(0,0,0,0.3)
2 lorem

Surfaces

#ffffff — lorem
#ebecee — lorem ipsum
#e8eaed — lorem ipsum
#394045 — lorem ipsum

07 — LAYOUT

lorem ipsum 1200px / lorem ipsum %

loremloremlorem
Root font-size16px375px–1920px lorem
Body font-size12pxlorem 14px. 12px lorem ipsum dolor
Container1200pxlorem ipsum 1090px, lorem ipsum 690px
Grid gap36px 2%lorem ipsum px lorem ipsum %
Breakpoints480 / 600 / 767 / 992 / 1200 / 1400px1200px lorem ipsum dolor sit
Border radius0 / 2px / 16px / 900px / 50%lorem ipsum dolor
Letter spacing0.24pxlorem px lorem ipsum dolor
font-feature-settingsnormalpalt lorem ipsum
Avenir lorem macOS / iOS lorem. Web lorem ipsum dolor sit amet consectetur,Windows / Android lorem 2 lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet(Nunito Sans / Montserrat lorem)lorem ipsum dolor.
lorem ipsum dolor sit Avenir lorem ipsum Nunito Sans lorem ipsum dolor.
lorem ipsum dolor: lorem ipsumpadding: 11.52px 31.68px lorem ipsum 40px lorem WCAG lorem(44px)lorem ipsum dolor. lorem ipsum dolor padding lorem 14px lorem ipsum dolor.