Musinsa's design system uses #000000 as its primary color and Inter for typography, with 4px corner radius. Musinsa's interface is the digital equivalent of a Tokyo street-fashion magazine cut to grid -- editorial, monochrome, and built around the photograph.

Primary
#000000
Typography
Inter
Radius
4px
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

button-primary
Background#000000
Text#ffffff
Radius4px
Padding14px 20px
Font15px / 700
stateshover #222222, pressed #333333, disabled #cccccc
Use: Primary CTA
button-outline
Background#ffffff
Text#000000
Border1px solid #000000
Radius4px
Padding14px 20px
Font15px / 700
stateshover #f5f5f5
Use: Secondary CTA
button-neutral
Background#f5f5f5
Text#222222
Border1px solid #eeeeee
Radius4px
Padding12px 16px
Font14px / 500
stateshover #eeeeee
Use: Tertiary actions
button-sale
Background#ff003b
Text#ffffff
Radius4px
Padding12px 18px
Font14px / 700
Use: Time-limited sale CTA, scarce

Inputs

input
Background#ffffff
Text#222222
Border1px solid #dddddd
Radius4px
Padding12px 14px
Font14px / 400
Focus1px solid #000000
Use: Default text input
input-search
Background#f5f5f5
Radius4px
Padding12px 16px 12px 40px
Font14px / 400
Focusbg #ffffff, 1px solid #000000
Use: Header search bar

Cards

card-product
card-product
Background#ffffff
Radius0px
Shadownone
Use: Default product listing card, image edge is card edge
card-brand
card-brand
Background#fafafa
Border1px solid #eeeeee
Radius4px
Padding16px
Use: Brand-of-the-day entry

Badges

badge
badge-sale
Backgroundtransparent
Text#ff003b
Radius0px
Font13px / 700
Use: Inline sale percentage on product cards
badge
badge-exclusive
Background#000000
Text#ffffff
Radius2px
Padding3px 6px
Font11px / 700
Use: 무신사 단독 / 선발매 exclusive flags
badge
badge-outline
Background#ffffff
Text#000000
Border1px solid #000000
Radius2px
Padding3px 6px
Font11px / 700
Use: NEW, 무료배송 minor flags
chip
chip
Background#ffffff
Text#222222
Border1px solid #dddddd
Radius999px
Padding8px 14px
Font13px / 500
Activebg #000000, fg #ffffff, 13px / 700
Use: Category / size / color filter pills

Tabs

TabTabTab
tab
Font14px / 700
Active2px black bottom border, fg #000000
Use: Category nav, active item underline

Toasts

toast
toast
Background#000000
Text#ffffff
Radius4px
Font14px / 500
Use: Error / add-to-cart snackbar, 3s auto-dismiss

Related design systems