THE SHOP YOHJI YAMAMOTOを装ったサイトへの誘導にご注意ください
design system preview

BRANDS / COLLECTION

Yohji Yamamoto（yohjiyamamoto.co.jp）から抽出したデザイントークンのカタログ。ダーク背景（#101010）+ Optima + 游ゴシック体 + Poppins の3フォント体制。letter-spacing 1.2px グローバル。テキストリンクのみの反商業的UI。角丸ゼロ、影ゼロ。computed style 実測値に基づく。

Colors Typography Collection
01 / colors

Color Palette

surface
Dark Background
#101010
トップページ body
Light Background
#fafafa
コレクション body
Pure Black
#000000
フッター背景
Notice Bar
#272727
注意喚起バー
Highlights
#212121
ハイライトセクション
Menu Surface
#ffffff
メニュー・パネル
text
Text on Dark
#ffffff
ダーク上テキスト
Text on Light
#000000
ライト上テキスト
Date Muted
#a3a3a3
日付・補足テキスト
border / divider
Divider
#ebebeb
区切り線（8回出現）
Light Divider
#cccccc
ライトモード区切り
overlay
Modal Overlay
rgba(0,0,0,0.4)
モーダルベール
Photo Hover
rgba(0,0,0,0.5)
写真ホバーオーバーレイ
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
山本耀司による前衛的なファッションの世界。黒を基調としたデザインは、西洋のファッション規範に対するアンチテーゼとして、パリコレクションで衝撃を与えた。素材の持つ力と、身体と衣服の間に生まれる空間への探求。
游ゴシック体 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を装ったサイトへの誘導にご注意ください
游ゴシック体 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 のサイトにはCTAボタンが存在しない。すべてのインタラクションはテキストリンクで行われる。

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)
偽サイトへの誘導にご注意ください
Notice Bar Link (游ゴシック 10px / weight 500)
BRANDS
Light Mode Link (Optima 12px / #000)
YOHJI YAMAMOTO INC.
Corp Name (Optima 10px / ls: normal)
06 / forms

Form Elements

実サイトにフォーム要素は検出されなかった。ブランドトーンに基づく推奨スタイル。

Dark Mode

Default
Focus
必須項目です

Light Mode

Default
Focus
必須項目です
07 / elevation

Depth & Elevation

Yohji Yamamoto は box-shadow を一切使わない。奥行きはオーバーレイの透過度のみで表現する。

Level 0
box-shadow: none
(全要素基本)
Overlay
rgba(0,0,0,0.4)
(モーダルベール)
Photo Hover
rgba(0,0,0,0.5)
(写真ホバー)
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（写真密着）

Border Radius

0px
全要素 border-radius: 0px