MUJI

Brand DNA

브랜드 DNA

• 브랜드명: MUJI (無印良品, 무인양품)
• 한 줄 정체성: 일본의 무브랜드(no-brand) 라이프스타일 — 자연 색감, 절제된 디자인
• 공식 디자인 철학: "これでいい (이것으로 충분하다) — 절제, 자연, 익명성"
• 시그니처 요소 1개: MUJI Red(#A8001E) 사각 박스 워드마크 + 베이지 자연 톤 + 일본어 + 영문 dual

Tone & Mood

톤 & 무드

• 핵심 키워드 3개: 무브랜드, 자연, 절제
• 무드 설명: 베이지 캔버스 + Red 워드마크 + 브라운/베이지 사진. 절제된 자연 톤이 모든 것.
• 비주얼 스타일: 모던 미니멀
• 밀도(Density): Comfortable
• 모서리 성향: Sharp (0~2px)
• 평면성: Flat

Color System

컬러 시스템 (CSS 변수)

:root {
  --color-primary-50: #FCE5E9; --color-primary-100: #F4B8C0;
  --color-primary-200: #E37C8F; --color-primary-300: #D14060;
  --color-primary-400: #BF2244; --color-primary-500: #A8001E;
  --color-primary-600: #8C0019; --color-primary-700: #6E0014;
  --color-primary-800: #50000F; --color-primary-900: #320009;

  --color-secondary-500: #231F20;

  /* MUJI 자연 톤 */
  --muji-beige: #F5F2EA;
  --muji-sand:  #E8DDC2;
  --muji-tan:   #A89B7B;
  --muji-brown: #6E5A3D;

  --color-neutral-0: #FFFFFF; --color-neutral-50: #F5F2EA;
  --color-neutral-100: #E8E2D2; --color-neutral-200: #E0DCCF;
  --color-neutral-300: #C2BCAF; --color-neutral-500: #888;
  --color-neutral-700: #5A5A52; --color-neutral-800: #3A3D24;
  --color-neutral-900: #231F20; --color-neutral-1000: #000000;

  --color-success-bg: #DCEFD9; --color-success-fg: #4F7A38;
  --color-warning-bg: #FFF1D9; --color-warning-fg: #B45309;
  --color-error-bg: #FCE5E9; --color-error-fg: #A8001E;
  --color-info-bg: #E0F0FE; --color-info-fg: #2563EB;

  --bg-base: #F5F2EA; --bg-subtle: #E8E2D2;
  --bg-elevated: #FFFFFF; --bg-overlay: rgba(35,31,32,0.50);

  --text-primary: #231F20; --text-secondary: #5A5A52;
  --text-tertiary: #888; --text-on-primary: #FFFFFF;
  --text-disabled: #C2BCAF;

  --border-default: #E0DCCF; --border-subtle: #E8E2D2;
  --border-strong: #C2BCAF; --border-focus: #231F20;
}

Typography

타이포그래피

• 폰트 페어링:
  • 일본어: Hiragino Sans / Noto Sans JP
  • 한글: Apple SD Gothic Neo / Noto Sans KR / Pretendard
  • 영문: Helvetica / -apple-system
• 위계:
  • Display (serif 가능): 48px / 300 / 1.2 / -0.005em
  • H1: 28px / 400 / 1.3 / -0.005em
  • H2: 18px / 500 / 1.3 / 0
  • H3: 14px / 500 / 1.4 / 0.06em (MUJI 워드마크)
  • Body Large: 14px / 400 / 1.6 / 0
  • Body: 13px / 400 / 1.6 / 0
  • Caption: 11px / 500 / 1.4 / 0.04em

Spacing

스페이싱

• Base unit: 4px
• Container: max-width 1200px, 좌우 패딩 24px(모바일 16px)

--space-xs: 4px; --space-sm: 8px; --space-md: 16px;
--space-lg: 24px; --space-xl: 32px; --space-2xl: 48px;
--space-3xl: 64px;

Border Radius

Border Radius

--radius-none: 0; --radius-sm: 0; --radius-md: 0;
--radius-lg: 2px; --radius-xl: 4px; --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.06);
--shadow-lg: 0 8px 24px rgba(0,0,0,0.08);
--shadow-xl: 0 16px 32px rgba(0,0,0,0.12);

• sm은 상품 썸네일, md는 카드 hover, lg는 드롭다운, xl은 모달에만 제한합니다.

Iconography

Iconography

• Outline (얇음), 1px, Square + Round
• Lucide / Phosphor

Component Guide

컴포넌트 가이드

Button

.btn { font: 500 13px/1 'Hiragino Sans','Noto Sans JP','Apple SD Gothic Neo',sans-serif; letter-spacing:0.04em; border-radius: 0; padding: 12px 22px; border: 0; cursor: pointer; }
.btn-primary { background: #231F20; color: #fff; }
.btn-secondary { background: #fff; color: #231F20; border: 1px solid #231F20; }
.btn-red { background: #A8001E; color: #fff; }
.btn-ghost { background: transparent; color: #231F20; }
.btn-danger { background: var(--color-error-fg); color: #fff; }

Input

.input { background: #fff; border: 1px solid #C2BCAF; border-radius: 0; padding: 11px 13px; font-size: 14px; font-family: inherit; }
.input:focus { outline: none; border-color: #231F20; }

Card

.card { background: #fff; border: 1px solid #E0DCCF; border-radius: 0; padding: 14px; }
.product { padding: 10px; background: var(--muji-beige); }
.product .img { aspect-ratio: 1; background: linear-gradient(135deg, var(--muji-sand), var(--muji-tan)); }
.product .cat { font-size: 11px; color: var(--text-tertiary); margin-top: 8px; }
.product h3 { font-size: 13px; font-weight: 500; line-height: 1.4; margin: 2px 0 4px; }
.product .price { font-size: 14px; font-weight: 700; }

Badge / MUJI 워드마크

.muji-mark { background: #A8001E; color: #fff; padding: 6px 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; display: inline-block; }
.tag { padding: 2px 8px; border-radius: 0; font-size: 10px; font-weight: 500; }
.tag-solid { background: #231F20; color: #fff; }
.tag-subtle { background: #E8E2D2; color: #231F20; }
.tag-outline { border: 1px solid #231F20; color: #231F20; background: transparent; }

Navigation

.topnav { padding: 14px 18px; background: #fff; border-bottom: 1px solid #E0DCCF; display: flex; align-items: center; gap: 14px; }
.topnav .muji-mark { background: #A8001E; color: #fff; padding: 5px 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
.topnav .word { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; }

Motion

Motion

--duration-fast: 100ms; --duration-base: 250ms; --duration-slow: 400ms;
--ease-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

Anti-patterns

Anti-patterns

1. MUJI Red(#A8001E) 사각 박스 비율을 변형하지 말 것 — 정확한 워드마크 2. 라운드(>4px) 적용 금지 — sharp 시그니처 3. 채도 높은 색 분산 사용 금지 — Red 워드마크 외 자연 톤만 4. 베이지 캔버스를 흰색으로 변경 금지 — 무인양품 자연 톤 보존 5. 폰트 weight 700+ 굵게 강제 금지 — 300~500 절제 톤

Sources

출처

1. https://www.muji.com/
2. https://ryohin-keikaku.jp/