THE SHOP YOHJI YAMAMOTO lorem ipsum dolor sit amet consectetur adipiscing
design system preview

BRANDS / COLLECTION

Yohji Yamamoto(yohjiyamamoto.co.jp)lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum(#101010)+ Optima + lorem ipsum dolor + Poppins lorem 3 lorem ipsum dolor. letter-spacing 1.2px lorem ipsum. lorem ipsum dolor sit amet consectetur UI. lorem ipsum, lorem. computed style lorem ipsum dolor.

Colors Typography Collection
01 / colors

Color Palette

surface
Dark Background
#101010
lorem ipsum dolor body
Light Background
#fafafa
lorem ipsum dolor body
Pure Black
#000000
lorem ipsum dolor
Notice Bar
#272727
lorem ipsum dolor
Highlights
#212121
lorem ipsum dolor sit
Menu Surface
#ffffff
lorem ipsum / lorem
text
Text on Dark
#ffffff
lorem ipsum dolor
Text on Light
#000000
lorem ipsum dolor
Date Muted
#a3a3a3
lorem / lorem ipsum dolor
border / divider
Divider
#ebebeb
lorem ipsum(8 lorem)
Light Divider
#cccccc
lorem ipsum dolor sit
overlay
Modal Overlay
rgba(0,0,0,0.4)
lorem ipsum dolor
Photo Hover
rgba(0,0,0,0.5)
lorem ipsum dolor sit amet
02 / typography

Typography Hierarchy

BRANDS / COLLECTION
Optima 20px / weight 400 / line-height 1.0 / letter-spacing 1.2px — Section Heading
WILDSIDE x BROSH Collaboration Collection vol.2
Optima 20px / weight 400 / line-height 1.5 / letter-spacing normal — Article Title
Yohji Yamamoto
Optima 16px / weight 400 / line-height 1.5 / letter-spacing 1.2px — Collection Brand
S'YTE
Optima 14px / weight 400 / line-height 1.5 / letter-spacing 1.2px — Sub Brand
lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor, lorem ipsum dolor sit amet consectetur.
lorem ipsum dolor 15px / weight 400 / line-height 1.25 / letter-spacing 1.2px — Body
TOP
Optima 12px / weight 400 / line-height 1.0 / letter-spacing 1.2px — Nav Top Link
NEWSLETTER
Optima 11px / weight 400 / line-height 1.0 / letter-spacing 0.88px — Newsletter Link
Yohji Yamamoto    Y's    Y's for men    discord    S'YTE
Optima 10px / weight 400 / line-height 1.5 / letter-spacing 1.5px — Footer Nav
May 21, 2026
Poppins 12px / weight 400 / line-height 1.0 / letter-spacing normal / color #a3a3a3 — Date Stamp
THE SHOP YOHJI YAMAMOTO lorem ipsum dolor sit amet consectetur adipiscing
lorem ipsum dolor 10px / weight 500 / line-height 1.5 / letter-spacing 1.2px — Notice Bar
03 / article

HIGHLIGHTS

IMAGE
May 21, 2026

WILDSIDE x BROSH Collaboration Collection vol.2
IMAGE
May 19, 2026

Y's for men x MASSES S/S 2026
IMAGE
May 15, 2026

Ground Y x Evangelion Collaboration
04 / collection

COLLECTION

View Collection

Yohji Yamamoto

View Collection

Y's

View Collection

discord

View Collection

S'YTE

05 / buttons (text links)

Interactive Elements

Yohji Yamamoto lorem ipsum dolor CTA lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur adipiscing elit.

NEWSLETTER
Primary Link (Optima 11px / ls: 1.2px)
VIEW COLLECTION
Underline Link (Optima 10px / ls: 1.5px)
TOP
Footer Link (Optima 10px / ls: 1.5px)
Yohji Yamamoto
Nav Brand Link (Optima 10px / indent 20px)
lorem ipsum dolor sit amet consectetur
Notice Bar Link (lorem ipsum 10px / weight 500)
BRANDS
Light Mode Link (Optima 12px / #000)
YOHJI YAMAMOTO INC.
Corp Name (Optima 10px / ls: normal)
06 / forms

Form Elements

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

Dark Mode

Default
Focus
lorem ipsum dolor

Light Mode

Default
Focus
lorem ipsum dolor
07 / elevation

Depth & Elevation

Yohji Yamamoto lorem box-shadow lorem ipsum dolor. lorem ipsum dolor sit amet consectetur adipiscing.

Level 0
box-shadow: none
(lorem ipsum)
Overlay
rgba(0,0,0,0.4)
(lorem ipsum dolor)
Photo Hover
rgba(0,0,0,0.5)
(lorem ipsum)
08 / layout

Spacing Scale

5px
XS
10px
S
20px
M
40px
L
80px
XL
120px
XXL

Container

max-width: 1440px / padding: 40px

Grid

Col 1
Col 2
Collection grid: 2 columns / gap: 0px(lorem ipsum)

Border Radius

0px
lorem border-radius: 0px