DESIGN SYSTEM PREVIEW

SPRING CAPSULE COLLECTION

sacai(sacai.jp)lorem ipsum dolor sit amet consectetur adipiscing. Helvetica + lorem + lorem letter-spacing lorem ipsum dolor sit amet consectetur EC. lorem ipsum computed style lorem ipsum dolor CSS Custom Properties lorem ipsum.

EXPLORE COLLECTION JOIN MAILING LIST
01 / COLORS

COLOR PALETTE

BRAND / FOREGROUND
SACAI BLACK
#000000
lorem / lorem / lorem
CHARCOAL
#1f1f1f
h2 / h3 lorem
MID GRAY
#333333
lorem ipsum dolor
SOFT GRAY
#939393
lorem ipsum dolor
MUTED
rgba(0,0,0,0.65)
lorem ipsum dolor
SURFACE
PURE WHITE
#ffffff
lorem ipsum
BANNER SURFACE
#efefef
lorem ipsum dolor
BORDER / DIVIDER
DIVIDER
#d9d9d9
lorem ipsum
SOFT BORDER
rgba(0,0,0,0.1)
lorem ipsum / lorem ipsum
02 / TYPOGRAPHY — lorem

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
lorem ipsum dolor sit, lorem ipsum.
Helvetica / 16px / 700 / line-height: 1.7 (27.2px) / letter-spacing: -0.32pxSECTION LEAD
sacai lorem 1999 lorem, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod, lorem ipsum dolor sit amet. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit.
Helvetica / 14px / 400 / line-height: 1.65 (23.1px) / letter-spacing: 0BODY
SS 2026 lorem ipsum dolor sit amet
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(lorem)
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 lorem ipsum dolor sit amet consectetur adipiscing
SS 26 / 02

SUITING SHIRT DRESS

lorem ipsum dolor sit amet consectetur adipiscing
SS 26 / 03

NYLON DENIM PANT

lorem ipsum dolor sit amet consectetur adipiscing
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 lorem ipsum dolor sitbox-shadow: none lorem. lorem ipsum dolor 1px lorem ipsum dolor. border-radius lorem 0px, lorem ipsum 2px.

RADIUS 0
border 1px / shadow none
RADIUS 2
lorem ipsum(lorem 0 lorem)
SOFT BORDER
rgba(0,0,0,0.1) lorem ipsum dolor
07 / LAYOUT — CONTAINER lorem

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