DESIGN SYSTEM PREVIEW

SPRING CAPSULE COLLECTION

sacai（sacai.jp）から抽出したデザイントークンのカタログ。Helvetica + 大文字 + 負の letter-spacing で構成された骨太なミニマル EC。実サイトの computed style 実測値および CSS Custom Properties に基づく。

EXPLORE COLLECTION JOIN MAILING LIST
01 / COLORS

COLOR PALETTE

BRAND / FOREGROUND
SACAI BLACK
#000000
本文・リンク・ロゴ
CHARCOAL
#1f1f1f
h2 / h3 見出し
MID GRAY
#333333
ボタン内テキスト
SOFT GRAY
#939393
控えめなリンク色
MUTED
rgba(0,0,0,0.65)
補助テキスト
SURFACE
PURE WHITE
#ffffff
ページ背景
BANNER SURFACE
#efefef
埋込スクリプト等
BORDER / DIVIDER
DIVIDER
#d9d9d9
区切り線
SOFT BORDER
rgba(0,0,0,0.1)
フォーム・控えめな枠
02 / TYPOGRAPHY — 実測値

TYPOGRAPHY

SPRING CAPSULE COLLECTION
Helvetica / 32px / 700 / line-height: 1.65 / letter-spacing: -0.64px / uppercaseHERO H1
RUNWAY ARCHIVE
Helvetica / 28px / 700 / line-height: normal / letter-spacing: -0.02em / uppercaseH2 SECTION
CHITOSE ABE INTERVIEW
Helvetica / 22px / 700 / line-height: normal / letter-spacing: -0.02emH3
MA-1 / DOWN HYBRID JACKET
Helvetica / 18px / 700 / line-height: 1.6 (28.8px) / letter-spacing: -0.36pxCARD TITLE
ハイブリッドの美学を、日常の服に。
Helvetica / 16px / 700 / line-height: 1.7 (27.2px) / letter-spacing: -0.32pxSECTION LEAD
sacai は 1999 年、阿部千登勢が東京で立ち上げたファッションブランド。既存のアイテムをハイブリッドに再構築する独自のデザイン言語で、世界の都市で展開される。デイリーウェアからショーピースまで、衣服に新しい可能性を見出すコレクションを発表してきた。
Helvetica / 14px / 400 / line-height: 1.65 (23.1px) / letter-spacing: 0BODY
SS 2026 デリバリースケジュール
Helvetica / 14px / 700 / line-height: 1.3 (18.2px)BODY BOLD
ADD TO BAG
Helvetica / 13px / 700 / line-height: 1.65 (21.45px) / uppercaseBUTTON
ITEM CODE: 25-A0801
Helvetica / 12px / 700 / line-height: 1.65 (19.8px) / letter-spacing: -0.24pxCAPTION
EMAIL ADDRESS（必須）
Helvetica / 12px / 400 / color rgba(0,0,0,0.6)FORM LABEL
A NEW CHAPTER FOR sacai
SPRING / SUMMER 2026 — DELIVERED IN PHASES
SHOP THE COLLECTION
03 / PRODUCTS — COLLECTION

COLLECTION

SS 26 / 01

HYBRID MA-1 JACKET

MA-1 とウールコートを再構築したハイブリッドアウター
SS 26 / 02

SUITING SHIRT DRESS

テーラリングとシャツワンピを織り混ぜたドレス
SS 26 / 03

NYLON DENIM PANT

デニムとナイロンパンツの構造を入れ替えたボトムス
04 / BUTTONS

BUTTONS

EXPLORE COLLECTION
PRIMARY GHOST
border 1px / radius 0 / uppercase
JOIN MAILING LIST
SECONDARY
white bg / border 1px / radius 2px
SOLD OUT
DISABLED
soft gray border
05 / FORMS

FORMS

DEFAULT — border rgba(0,0,0,0.1)
FOCUS — border #000000
ERROR — border #c0392b
06 / ELEVATION & RADIUS

FLAT BY DESIGN

sacai のデザインシステムは box-shadow: none を貫く。奥行きは罫線 1px と余白だけで作る。border-radius は 0px、最大でも 2px。

RADIUS 0
border 1px / shadow none
RADIUS 2
最大角丸（事実上 0 と等価）
SOFT BORDER
rgba(0,0,0,0.1) の控えめな罫線
07 / LAYOUT — CONTAINER 変数

CONTAINER WIDTHS

CONTAINER XXS
--container-xxs-max-width: 27.5rem (440px)
CONTAINER XS
--container-xs-max-width: 42.5rem (680px)
CONTAINER SM
--container-sm-max-width: 61.25rem (980px)
CONTAINER MD
--container-md-max-width: 71.875rem (1150px)
CONTAINER LG
--container-lg-max-width: 78.75rem (1260px)
CONTAINER XL
--container-xl-max-width: 85rem (1360px)

SPACING SCALE

10.4px
input padding-block
12.8px
input padding-inline
16px
fieldset gap
20px
form gap
24px
container gutter
36px
section stack
48px
section vertical