Musinsa
Musinsa
musinsa
Design System
Musinsa logo

Musinsa

Musinsa's interface is the digital equivalent of a Tokyo street-fashion magazine cut to grid -- editorial, monochrome, and built around the photograph. The page opens on a pure white canvas (#ffffff) with absolute black headings (#000000) and a deliberately tiny color budget: black, white, three shades of gray, and a single saturated red (#ff003b) rese

01

Color Palette

Brand

Accent

Neutrals

Semantic

02

Typography

Type Scale

Rendered in system-ui to clearly show scale & weight.

display48px · 700 · 1.25
Design at scale
32px32px · 700 · 1.25
Section heading
heading-lg24px · 700 · 1.4
Subheading
body16px · 400 · 1.5
Body text. The quick brown fox jumps over the lazy dog. Designed for readable line-height in long-form content.
small12px · 400 · 1.5
Supporting text
caption12px · 400 · 1.5
Caption · timestamp · 2026
label10px · 500 · 1.5
BADGE / LABEL

Fonts

Primary
Inter
Open · OFL
Designed by Rasmus Andersson. Variable font with full weight range.
Install via Google Fonts
Primary
Pretendard Variable
Open · OFL
Modern Korean variable font with full Latin coverage.
Install via GitHub · orioncactus/pretendard
Primary
Apple System
Systemno install needed
macOS/iOS default — uses SF Pro automatically.
Not publicly distributed.
Primary
Apple System (Blink)
Systemno install needed
Chrome alias for Apple system font on macOS.
Not publicly distributed.
Primary
Noto Sans KR
Open · OFL
Install via Google Fonts
Primary
Malgun Gothic
Brand-only
Not in the OMD font registry. Likely a brand-proprietary typeface — check the brand's own design site for source/availability.
Not publicly distributed.
Primary
맑은 고딕
Brand-only
Not in the OMD font registry. Likely a brand-proprietary typeface — check the brand's own design site for source/availability.
Not publicly distributed.
Primary
AppleGothic
Brand-only
Not in the OMD font registry. Likely a brand-proprietary typeface — check the brand's own design site for source/availability.
Not publicly distributed.
Primary
dotum
Brand-only
Not in the OMD font registry. Likely a brand-proprietary typeface — check the brand's own design site for source/availability.
Not publicly distributed.
03

Spacing & Shape

Spacing

PurposeValuePreview
Densitycompact
Base unit4px
Section gap32px
Card padding16px
Element gap8px

Border Radius

ElementValuePreview
productSharp0px
editorialSharp0px
topSharp0px
smallTight2px
musinsaTight2px
buttonsStandard4px
inputsStandard4px
brandStandard4px
filterPill9999px
avatarPill9999px

Elevation

Shadow 1
Shadow 2
04

Guidelines

Do and Don't guidelines parsed from DESIGN.md.

Do

  • Use #000000 for primary CTAs — black is the brand's saturation
  • Keep border-radius between 0px and 4px on product surfaces
  • Use weight 700 to create headline emphasis, not larger sizes
  • Apply negative letter-spacing (-0.3px to -0.4px) on Korean type
  • Let product photographs be the color in the layout
  • Use #ff003b for sale percentages and time-limited promotions only
  • Default to 2-column grid on mobile, 4-5 on desktop — the catalog is the page
  • Use 13-14px as base body size — denser than Western e-com, intentionally

Don't

  • n't introduce a brand blue, purple, or orange — the palette is monochrome plus one red
  • n't use rounded corners over 8px on product surfaces — pill chips are the only exception
  • n't add drop-shadows to product images
  • n't pad the inside of product cards generously — let the photograph touch its frame
  • n't use red (#ff003b) for navigation, decoration, or non-sale CTAs
  • n't switch to a custom display typeface — Pretendard at 700 is the headline voice
  • n't use illustration or mascot imagery in chrome — Musinsa's surfaces show clothing, not characters
  • n't soften the black — #000000, not #1a1c20. Editorial requires absolute contrast.
05

Components

Buttons

Primary (Black Solid)
Background`#000000`
Text`#ffffff`
Radius4px
Padding14px 20px
Font15px / 700 / Pretendard
Hover`#222222`
Active`#333333`
Disabled`#cccccc` background, `#ffffff` text
Use: Primary CTA — `장바구니`, `구매하기`, `좋아요`, `로그인`
Outline (Black Border)
Background`#ffffff`
Text`#000000`
Border1px solid `#000000`
Radius4px
Padding14px 20px
Font15px / 700 / Pretendard
Hover`#f5f5f5` background
Use: Secondary CTA — `브랜드 홈`, `사이즈 가이드`, `리뷰 작성`
Neutral (Gray Fill)
Background`#f5f5f5`
Text`#222222`
Border1px solid `#eeeeee`
Radius4px
Padding12px 16px
Font14px / 500 / Pretendard
Hover`#eeeeee` background
Use: Tertiary actions — filter open, view-mode toggle, share
Sale Red (Promotion)
Background`#ff003b`
Text`#ffffff`
Radius4px
Padding12px 18px
Font14px / 700 / Pretendard
Use: Time-limited sale CTA — `타임세일 자세히 보기`, `오늘만 특가`. Used scarcely.

Inputs

Default
Background`#ffffff`
Text14px / 400 / `#222222`
Border1px solid `#dddddd`
Radius4px
Padding12px 14px
Focus1px solid `#000000` (no glow ring; just border darkens)
Placeholder`#999999`
Use: Default text input — login, sign-up, address forms
Search
Background`#f5f5f5`
Text14px / 400 / `#222222`
Bordernone
Radius4px
Padding12px 16px 12px 40px (left-pad for inline magnifier icon)
Focus`#ffffff` background, 1px solid `#000000` border
Placeholder`#999999` ("브랜드, 상품, 프로필, 태그 등")
Use: Header search bar across all surfaces
Error
Border1px solid `#ff003b`
Helper text12px / 400 / `#ff003b`, 6px below input
Use: Form validation failure

Cards

Product Card
Product Card
Background`#ffffff`
Bordernone (only `#eeeeee` 1px hairline at grid-cell boundary)
Radius0px (sharp corners — the catalog grid is a print grid)
Padding0px on container; 8-10px between image and metadata block
Shadownone
Image4:5 portrait aspect ratio, no radius
Use: Default product listing card. The grid cell, not a floating card.
Curation Tile (Editorial Banner)
Curation Tile (Editorial Banner)
Background`#ffffff` (or full-bleed image)
Radius0px
Padding0px
Use: Editorial sections (`스타일`, `에디터픽`, `오늘의 코디`) — full-bleed photographs as the card surface itself.
Brand Card
Brand Card
Background`#fafafa`
Border1px solid `#eeeeee`
Radius4px
Padding16px
Use: Brand-of-the-day, brand-snap entry on home feed

Badges

Sale
Sale Percentage
Backgroundtransparent
Text`#ff003b`
Radius0px
Padding0px
Font13px / 700 / Pretendard
Use: Inline sale percentage on product cards (`-30%`, `-50%`). Most common badge in the system.
MUSINSA
MUSINSA Only
Background`#000000`
Text`#ffffff`
Radius2px
Padding3px 6px
Font11px / 700 / Pretendard
Use: "무신사 단독", "선발매" exclusive flags on product images
New
New / Free Shipping
Background`#ffffff`
Text`#000000`
Border1px solid `#000000`
Radius2px
Padding3px 6px
Font11px / 700 / Pretendard
Use: "NEW", "무료배송" minor flags. Outline keeps the photograph dominant.
Rank
Rank Badge
Background`#000000`
Text`#ffffff`
Radius0px
Padding4px 8px
Font12px / 700 / Pretendard
Use: Top-of-list rank position (`1`, `2`, `3`) on weekly ranking grid
Filter
Filter Chip (Default)
Background`#ffffff`
Text`#222222`
Border1px solid `#dddddd`
Radius999px
Padding8px 14px
Font13px / 500 / Pretendard
Use: Category / size / color filter pills
Filter
Filter Chip (Selected)
Background`#000000`
Text`#ffffff`
Border1px solid `#000000`
Radius999px
Padding8px 14px
Font13px / 700 / Pretendard
Use: Active filter state