Musinsa (무신사)
굵은 MUSINSA STORE 워드마크와 에디토리얼 패션 피드의 선명한 대비
Brand DNA
브랜드 DNA
- 브랜드명: Musinsa (무신사)
- 한 줄 정체성: 한국 1위 패션 플랫폼 — 스트릿/컨템포러리 큐레이션의 표준
- 공식 디자인 철학: 직관성과 일관성을 강조해 탐색부터 구매까지 자연스럽게 이어지는 쇼핑 경험
- 시그니처 요소 1개: 굵은 'MUSINSA STORE' 워드마크 + 여백 없이 이어지는 sharp한 에디토리얼 패션 피드
Tone & Mood
톤 & 무드
- 핵심 키워드 3개: 모노, 패션, 큐레이션
- 무드 설명: 기본 UI chrome은 검정·흰색과 중성 회색으로 절제하고 패션 사진이 화면의 색을 담당. 멀티 스토어에서는 동일한 레이아웃을 유지하되 코랄·스카이블루 같은 전용 액센트로 카테고리를 구분.
- 비주얼 스타일: 모던 미니멀 + 살짝 브루털리즘 (sharp ramp)
- 밀도(Density): Compact
- 모서리 성향: Sharp (0~4px)
- 평면성: Flat
Color System
컬러 시스템 (CSS 변수)
:root {
/* Primary - Musinsa Black */
--color-primary-50: #F5F5F5;
--color-primary-100: #E0E0E0;
--color-primary-200: #C7C7C7;
--color-primary-300: #999999;
--color-primary-400: #555555;
--color-primary-500: #000000;
--color-primary-600: #1A1A1A;
--color-primary-700: #2D2D2D;
--color-primary-800: #555555;
--color-primary-900: #888888;
/* Secondary - 할인% 빨강 */
--color-secondary-500: #FF3838;
/* Neutral */
--color-neutral-0: #FFFFFF; --color-neutral-50: #FAFAFA;
--color-neutral-100: #F5F5F5; --color-neutral-200: #F0F0F0;
--color-neutral-300: #E0E0E0; --color-neutral-500: #C7C7C7;
--color-neutral-700: #888888; --color-neutral-800: #555555;
--color-neutral-900: #191919; --color-neutral-1000: #000000;
/* Semantic */
--color-success-bg: #DCF7E5; --color-success-fg: #1AAD5C;
--color-warning-bg: #FFF1D9; --color-warning-fg: #B45309;
--color-error-bg: #FFE5E5; --color-error-fg: #FF3838;
--color-info-bg: #E0F0FE; --color-info-fg: #2563EB;
/* Surface */
--bg-base: #FFFFFF; --bg-subtle: #F5F5F5;
--bg-elevated: #FFFFFF; --bg-overlay: rgba(0,0,0,0.50);
/* Text */
--text-primary: #191919; --text-secondary: #555555;
--text-tertiary: #888888; --text-on-primary: #FFFFFF;
--text-disabled: #C7C7C7;
/* Border */
--border-default: #F0F0F0; --border-subtle: #FAFAFA;
--border-strong: #E0E0E0; --border-focus: #000000;
}
Typography
타이포그래피
- 폰트 페어링: 한글 Pretendard, 영문 -apple-system, "Helvetica Neue"
- 위계:
- Display: 36px / 900 / 1.1 / -0.04em (워드마크)
- H1: 24px / 800 / 1.2 / -0.025em
- H2: 18px / 700 / 1.27 / -0.02em
- H3: 14px / 700 / 1.3 / -0.015em
- Body Large: 14px / 500 / 1.5 / -0.01em
- Body: 13px / 500 / 1.5 / -0.005em
- Body Small: 12px / 500 / 1.43 / 0
- Caption: 11px / 600 / 1.27 / 0
Spacing
스페이싱
- Base unit: 4px
- 토큰:
--space-xs:4px; --space-sm:8px; --space-md:12px; --space-lg:16px; --space-xl:24px; - Container: max-width 1280px, 좌우 패딩 12px
Border Radius
Border Radius
--radius-none: 0; --radius-sm: 2px; --radius-md: 4px;
--radius-lg: 6px; --radius-xl: 12px; --radius-full: 9999px;Shadow / Elevation
Shadow / Elevation
--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
--shadow-md: 0 4px 12px rgba(0,0,0,0.08);
--shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
--shadow-xl: 0 16px 32px rgba(0,0,0,0.16);Iconography
Iconography
- 스타일: Outline (정밀)
- Stroke 굵기: 1.5px
- 모서리 처리: Square + Round 혼합
- 추천 라이브러리: Lucide / Phosphor
Component Guide
컴포넌트 가이드
Button
.btn { font: 700 14px/1 Pretendard,-apple-system,sans-serif; letter-spacing:-0.01em; border-radius: var(--radius-md); padding: 12px 16px; border: 0; cursor: pointer; }
.btn-primary { background: #000; color: #fff; }
.btn-secondary { background: #fff; color: #000; border: 1px solid #000; }
.btn-ghost { background: transparent; color: #000; }
.btn-danger { background: var(--color-error-fg); color: #fff; }Input
.input { background: var(--bg-base); border: 1px solid var(--border-strong); border-radius: 0; padding: 10px 12px; font-size: 14px; font-family: inherit; }
.input:focus { outline: none; border-color: #000; }Card (Product)
.product { padding: 8px; }
.product .img { aspect-ratio: 3/4; background: var(--bg-subtle); }
.product .brand { font-size: 11px; color: var(--text-tertiary); margin: 6px 0 2px; }
.product h3 { font-size: 13px; font-weight: 600; line-height: 1.3; margin: 0; }
.product .price-row { display: flex; align-items: baseline; gap: 4px; margin-top: 4px; }
.product .pct { font-size: 12px; color: var(--color-error-fg); font-weight: 800; }
.product .price { font-size: 14px; font-weight: 800; }
.card { background: var(--bg-base); border: 1px solid var(--border-default); border-radius: 0; padding: 12px; }
.card-elevated { box-shadow: var(--shadow-md); border-color: transparent; }
.card-outlined { box-shadow: none; }Badge
.tag { padding: 1px 5px; border-radius: 0; font-size: 10px; font-weight: 800; line-height: 14px; display: inline-flex; align-items: center; }
.tag-solid { background: #000; color: #fff; }
.tag-subtle { background: #F5F5F5; color: #191919; }
.tag-outline { border: 1px solid #000; color: #191919; background: transparent; }
.tag-discount { color: var(--color-error-fg); font-weight: 800; }Navigation
.topnav { padding: 10px 14px; display: flex; align-items: center; gap: 12px; background: var(--bg-base); border-bottom: 1px solid var(--border-default); }
.topnav .brand { font-weight: 900; font-size: 22px; letter-spacing: -0.04em; color: #000; }Motion
Motion
--duration-fast: 100ms; --duration-base: 200ms; --duration-slow: 350ms;
--ease-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);Anti-patterns
Anti-patterns
1. 컴포넌트에 라운드(>4px) 적용 금지 — sharp 시그니처 2. 멀티 스토어 전용 액센트를 기본 스토어 화면에 무분별하게 혼용 금지 3. 사진 위에 채도 높은 overlay 사용 금지 — 옷 색이 주인공 4. MUSINSA STORE 워드마크의 비율·굵기·자간 임의 변경 금지 5. 본문 폰트 weight 400 이하 금지